diff --git a/README.md b/README.md
index c9a7eee..8a42049 100644
--- a/README.md
+++ b/README.md
@@ -30,6 +30,35 @@ cd server
 - `./mvnw verify`：运行 Maven verify 阶段，用于提交前完整检查。
 - `./mvnw spring-boot:run`：本地启动后端服务，默认端口为 `8080`。
 
+## 前端命令
+
+```bash
+cd client
+pnpm install
+pnpm dev
+pnpm typecheck
+pnpm test
+pnpm lint
+pnpm build
+```
+
+中文说明：
+
+- `pnpm install`：安装前端依赖。
+- `pnpm dev`：启动本地 Vite 开发服务，默认地址为 `http://127.0.0.1:5174`。
+- `pnpm typecheck`：运行 Vue / TypeScript 类型检查。
+- `pnpm test`：运行前端单元测试。
+- `pnpm lint`：运行 ESLint 检查。
+- `pnpm build`：执行类型检查并构建生产产物。
+
+本地联调指定后端和酒店上下文示例：
+
+```bash
+VITE_API_PROXY_TARGET=http://127.0.0.1:8080 VITE_RESERVATION_HOTEL_ID=HOTEL-TEST pnpm --dir client dev
+```
+
+中文说明：`VITE_RESERVATION_HOTEL_ID` 是公开前端配置，不是 Secret，用于 Reservation 订单列表、任务列表和订单详情接口的默认 `hotel_id`。
+
 ### 测试数据库配置
 
 默认 `test` profile 使用 H2 MySQL Mode，便于本地和 CI 在没有 MySQL 的情况下运行：
diff --git a/client/src/components/reservation/ReservationTaskDetailPanel.vue b/client/src/components/reservation/ReservationTaskDetailPanel.vue
index c440eb3..ac844ed 100644
--- a/client/src/components/reservation/ReservationTaskDetailPanel.vue
+++ b/client/src/components/reservation/ReservationTaskDetailPanel.vue
@@ -31,7 +31,7 @@
               {{ t('task.viewOrder') }} {{ detail.order_id }}
             </RouterLink>
             <span
-              v-if="!detail.source_message_id || !detail.external_conversation_id"
+              v-if="!detail.source_message_id"
               class="task-link task-link--disabled"
             >
               {{ t('task.viewConversation') }} · {{ t('common.endpointMissing') }}
@@ -108,6 +108,7 @@
             v-model="fieldValues"
             :fields="detail.fields"
             :read-only="detail.availability.read_only"
+            :validation-errors="validationErrorMessages"
           />
 
           <footer class="task-actions">
@@ -173,7 +174,12 @@ import type {
   ReservationTaskAuditLogResult,
   ReservationTaskDetailResult,
 } from '@/types/reservation'
-import { buildInitialFieldValues } from '@/utils/reservationFieldRules'
+import {
+  buildEditableFieldValues,
+  buildInitialFieldValues,
+  validateReservationFieldValues,
+  type ReservationFieldValidationErrors,
+} from '@/utils/reservationFieldRules'
 import { formatReservationDateTime } from '@/utils/reservationFormat'
 
 const props = defineProps<{
@@ -188,10 +194,13 @@ const notice = ref('')
 const detail = ref<ReservationTaskDetailResult | null>(null)
 const audits = ref<ReservationTaskAuditLogResult[]>([])
 const fieldValues = ref<ReservationRecord>({})
+const validationErrors = ref<ReservationFieldValidationErrors>({})
+const validationSummaryActive = ref(false)
 const mutationBusy = ref<'save' | 'confirm' | null>(null)
 
 const canSave = computed(() => Boolean(detail.value?.availability.editable))
 const canConfirm = computed(() => Boolean(detail.value?.availability.confirmable))
+const validationErrorMessages = computed(() => toValidationErrorMessages(validationErrors.value))
 
 watch(
   () => props.taskId,
@@ -201,6 +210,14 @@ watch(
   { immediate: true },
 )
 
+watch(
+  fieldValues,
+  () => {
+    refreshValidationAfterFieldChange()
+  },
+  { deep: true },
+)
+
 async function loadTask(taskId: string): Promise<void> {
   loading.value = true
   errorMessage.value = ''
@@ -214,6 +231,8 @@ async function loadTask(taskId: string): Promise<void> {
     detail.value = nextDetail
     audits.value = nextAudits.items
     fieldValues.value = buildInitialFieldValues(nextDetail.fields, nextDetail.draft_payload ?? nextDetail.confirmed_payload)
+    validationErrors.value = {}
+    validationSummaryActive.value = false
   } catch (error) {
     errorMessage.value = error instanceof Error ? error.message : String(error)
   } finally {
@@ -236,10 +255,14 @@ async function mutateTaskPayload(action: 'save' | 'confirm'): Promise<void> {
   const taskId = detail.value.task_id
   mutationBusy.value = action
   actionErrorMessage.value = ''
+  validationSummaryActive.value = false
   notice.value = ''
   try {
+    if (action === 'confirm' && !validateBeforeConfirm(detail.value)) {
+      return
+    }
     const request = {
-      field_values: fieldValues.value,
+      field_values: buildEditableFieldValues(detail.value.fields, fieldValues.value, detail.value.availability.read_only),
     }
     const result =
       action === 'save' ? await saveReservationTaskDraft(taskId, request) : await confirmReservationTask(taskId, request)
@@ -259,6 +282,42 @@ async function mutateTaskPayload(action: 'save' | 'confirm'): Promise<void> {
   }
 }
 
+function validateBeforeConfirm(taskDetail: ReservationTaskDetailResult): boolean {
+  const nextErrors = validateReservationFieldValues(taskDetail.fields, fieldValues.value)
+  validationErrors.value = nextErrors
+  if (hasValidationErrors(nextErrors)) {
+    actionErrorMessage.value = t('task.validationFailed')
+    validationSummaryActive.value = true
+    return false
+  }
+  return true
+}
+
+function refreshValidationAfterFieldChange(): void {
+  if (!detail.value || (!hasValidationErrors(validationErrors.value) && !validationSummaryActive.value)) {
+    return
+  }
+  const nextErrors = validateReservationFieldValues(detail.value.fields, fieldValues.value)
+  validationErrors.value = nextErrors
+  if (!hasValidationErrors(nextErrors) && validationSummaryActive.value) {
+    actionErrorMessage.value = ''
+    validationSummaryActive.value = false
+  }
+}
+
+function hasValidationErrors(errors: ReservationFieldValidationErrors): boolean {
+  return Object.keys(errors).length > 0
+}
+
+function toValidationErrorMessages(errors: ReservationFieldValidationErrors): Record<string, string> {
+  return Object.fromEntries(
+    Object.entries(errors).map(([fieldPath, error]) => [
+      fieldPath,
+      t(`task.validation.${error.code}`, { field: error.field_name }),
+    ]),
+  )
+}
+
 async function refreshAudits(taskId: string): Promise<void> {
   const nextAudits = await fetchReservationTaskAudits(taskId)
   audits.value = nextAudits.items
diff --git a/client/src/components/reservation/ReservationTaskFieldRenderer.vue b/client/src/components/reservation/ReservationTaskFieldRenderer.vue
index 824bfce..61e3ce2 100644
--- a/client/src/components/reservation/ReservationTaskFieldRenderer.vue
+++ b/client/src/components/reservation/ReservationTaskFieldRenderer.vue
@@ -22,6 +22,7 @@
           <select
             v-if="isEditable(field) && isSelectField(field)"
             class="field-control"
+            :aria-invalid="fieldError(field) ? 'true' : 'false'"
             :value="fieldValue(field)"
             @change="updateField(field, $event)"
           >
@@ -38,6 +39,7 @@
             v-else-if="isEditable(field) && isDateField(field)"
             class="field-control"
             type="date"
+            :aria-invalid="fieldError(field) ? 'true' : 'false'"
             :value="fieldValue(field)"
             @input="updateField(field, $event)"
           >
@@ -46,6 +48,7 @@
             v-else-if="isEditable(field) && isNumberField(field)"
             class="field-control"
             type="number"
+            :aria-invalid="fieldError(field) ? 'true' : 'false'"
             :value="fieldValue(field)"
             @input="updateField(field, $event)"
           >
@@ -53,6 +56,7 @@
           <textarea
             v-else-if="isEditable(field)"
             class="field-control field-control--textarea"
+            :aria-invalid="fieldError(field) ? 'true' : 'false'"
             :value="fieldValue(field)"
             rows="3"
             @input="updateField(field, $event)"
@@ -87,6 +91,10 @@
             v-if="field.notes"
             class="field-note"
           >{{ field.notes }}</small>
+          <small
+            v-if="fieldError(field)"
+            class="field-error"
+          >{{ fieldError(field) }}</small>
         </label>
       </div>
     </section>
@@ -115,6 +123,7 @@ const props = defineProps<{
   fields: ReservationTaskFieldResult[]
   modelValue: ReservationRecord
   readOnly: boolean
+  validationErrors?: Record<string, string>
 }>()
 
 const emit = defineEmits<{
@@ -123,7 +132,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-const fieldGroups = computed(() => groupReservationFields(props.fields, t('task.fieldAreaFallback')))
+const fieldGroups = computed(() => groupReservationFields(props.fields, t('task.fieldAreaFallback'), props.modelValue))
 
 function fieldValue(field: ReservationTaskFieldResult): string | number | readonly string[] {
   const value = props.modelValue[field.field_path] ?? field.value ?? ''
@@ -143,6 +152,10 @@ function isEditable(field: ReservationTaskFieldResult): boolean {
   return isReservationFieldEditable(field, props.readOnly)
 }
 
+function fieldError(field: ReservationTaskFieldResult): string {
+  return props.validationErrors?.[field.field_path] ?? ''
+}
+
 function updateField(field: ReservationTaskFieldResult, event: Event): void {
   const target = event.target as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
   emit('update:modelValue', {
@@ -241,6 +254,18 @@ function updateField(field: ReservationTaskFieldResult, event: Event): void {
   line-height: 1.55;
 }
 
+.field-error {
+  color: var(--th-color-danger);
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.55;
+}
+
+.field-control[aria-invalid='true'] {
+  border-color: var(--th-color-danger);
+  box-shadow: 0 0 0 1px var(--th-color-danger);
+}
+
 @media (max-width: 760px) {
   .field-grid {
     grid-template-columns: 1fr;
diff --git a/client/src/components/reservation/ReservationTaskQueue.vue b/client/src/components/reservation/ReservationTaskQueue.vue
index 008d16e..12ac604 100644
--- a/client/src/components/reservation/ReservationTaskQueue.vue
+++ b/client/src/components/reservation/ReservationTaskQueue.vue
@@ -1,27 +1,50 @@
 <template>
   <div class="task-queue">
-    <button
+    <article
       v-for="task in items"
       :key="task.task_id"
       class="task-row"
       :class="{ 'task-row--active': task.task_id === activeTaskId }"
-      type="button"
-      @click="$emit('openTask', task.task_id)"
     >
-      <span class="task-row__index">{{ task.queue_sequence ?? '-' }}</span>
-      <span class="task-row__main">
-        <strong>{{ task.card_name ?? task.task_type }}</strong>
-        <small>{{ task.task_type }} / {{ task.task_subtype ?? '-' }}</small>
-        <em v-if="!task.source_message_id || !task.external_conversation_id">
+      <button
+        class="task-row__select"
+        type="button"
+        @click="$emit('openTask', task.task_id)"
+      >
+        <span class="task-row__index">{{ task.queue_sequence ?? '-' }}</span>
+        <span class="task-row__main">
+          <strong>{{ task.card_name ?? task.task_type }}</strong>
+          <small>{{ task.task_type }} / {{ task.task_subtype ?? '-' }}</small>
+          <em :class="{ 'task-row__reason--blocked': !task.can_process }">
+            {{ task.can_process ? t('taskList.canProcess') : t('taskList.cannotProcess') }}
+            <template v-if="!task.can_process && task.readonly_reason_code">
+              · {{ task.readonly_reason_code }}
+            </template>
+          </em>
+        </span>
+        <ReservationStatusBadge :status="task.task_status" />
+      </button>
+      <div class="task-row__actions">
+        <span
+          v-if="!task.source_message_id"
+          class="task-row__pending"
+        >
           {{ t('common.endpointMissing') }}
-        </em>
-      </span>
-      <ReservationStatusBadge :status="task.task_status" />
-    </button>
+        </span>
+        <RouterLink
+          v-else
+          class="task-row__link"
+          :to="`/reservation/source-messages/${task.source_message_id}/conversation`"
+        >
+          {{ t('taskList.viewConversation') }}
+        </RouterLink>
+      </div>
+    </article>
   </div>
 </template>
 
 <script setup lang="ts">
+import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
 import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
@@ -46,17 +69,24 @@ const { t } = useI18n()
 }
 
 .task-row {
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-md);
+  background: var(--th-color-white);
+  color: inherit;
+  padding: 10px;
+}
+
+.task-row__select {
   display: grid;
   grid-template-columns: 34px minmax(0, 1fr) auto;
   gap: 10px;
   align-items: center;
   width: 100%;
-  border: 1px solid var(--th-color-slate-200);
-  border-radius: var(--th-radius-md);
-  background: var(--th-color-white);
+  border: 0;
+  background: transparent;
   color: inherit;
   cursor: pointer;
-  padding: 10px;
+  padding: 0;
   text-align: left;
 }
 
@@ -85,7 +115,8 @@ const { t } = useI18n()
 }
 
 .task-row__main strong,
-.task-row__main small {
+.task-row__main small,
+.task-row__main em {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -102,9 +133,31 @@ const { t } = useI18n()
 }
 
 .task-row__main em {
-  color: var(--th-color-slate-500);
+  color: var(--th-color-success);
   font-size: 11px;
   font-style: normal;
   font-weight: 800;
 }
+
+.task-row__reason--blocked {
+  color: var(--th-color-warning);
+}
+
+.task-row__actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.task-row__link,
+.task-row__pending {
+  color: var(--th-color-slate-500);
+  font-size: 11px;
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.task-row__link {
+  color: var(--th-color-blue-600);
+}
 </style>
diff --git a/client/src/config/reservationConfig.ts b/client/src/config/reservationConfig.ts
new file mode 100644
index 0000000..f0a7878
--- /dev/null
+++ b/client/src/config/reservationConfig.ts
@@ -0,0 +1,3 @@
+const configuredReservationHotelId = import.meta.env.VITE_RESERVATION_HOTEL_ID?.trim()
+
+export const reservationHotelId = configuredReservationHotelId || 'HOTEL-TEST'
diff --git a/client/src/i18n/locales/en-US.ts b/client/src/i18n/locales/en-US.ts
index c06ced4..4b7c90d 100644
--- a/client/src/i18n/locales/en-US.ts
+++ b/client/src/i18n/locales/en-US.ts
@@ -1,7 +1,6 @@
 export default {
   app: {
     name: 'Hotel OMS',
-    hotelContext: 'HOTEL-TEST',
     theme: 'Theme',
     healthUp: 'Backend connected',
     healthDown: 'Backend offline',
@@ -21,6 +20,10 @@ export default {
     noData: 'No data',
     endpointPending: 'Endpoint pending',
     endpointMissing: 'Endpoint field pending',
+    previousPage: 'Previous',
+    nextPage: 'Next',
+    pageStatus: 'Page {current} / {total}',
+    pageSize: 'Page size',
   },
   workbench: {
     title: 'Order workbench',
@@ -50,7 +53,17 @@ export default {
     subtitle: 'Review Reservation work by order',
     keyword: 'Group Code / Confirmation No.',
     tableTitle: 'Order data',
+    totalSuffix: 'orders',
+    viewDetail: 'View detail',
+    continueTask: 'Continue task',
+    noOpenTask: 'No open task',
     endpointPending: 'The order list endpoint GET /api/reservation/orders is pending backend implementation. No fixture data is shown.',
+    columns: {
+      order: 'Order',
+      status: 'Status',
+      openTasks: 'Open tasks',
+      createdAt: 'Created at',
+    },
   },
   order: {
     summary: 'Order summary',
@@ -68,6 +81,7 @@ export default {
     temporaryOrderNo: 'Temporary order no.',
     blockCode: 'Block Code',
     createdAt: 'Created at',
+    conversationMessageCount: 'Conversation messages',
     sourceSummaryPending: 'Source email summary fields for the order task timeline are pending backend support. Open a task for available source details.',
   },
   taskList: {
@@ -79,6 +93,12 @@ export default {
     totalSuffix: 'tasks',
     noSourceSubject: 'No source subject',
     canProcess: 'Processable',
+    cannotProcess: 'Not processable',
+    queueParticipation: 'Queue participation',
+    queueAll: 'All queue states',
+    queueIncluded: 'In queue',
+    queueExcluded: 'Not in queue',
+    orderStatusFilterPending: 'Order status filter is pending backend support',
     viewTask: 'View task',
     viewOrder: 'View order',
     viewConversation: 'View email conversation',
@@ -112,6 +132,13 @@ export default {
     fieldAreaFallback: 'Basic information',
     savedLocally: 'Draft saved',
     confirmedLocally: 'Task confirmed',
+    validationFailed: 'Fix field errors first',
+    validation: {
+      required: '{field} is required',
+      enum: '{field} must use one of the allowed options',
+      date: '{field} must use YYYY-MM-DD',
+      number: '{field} must be a number',
+    },
     viewOrder: 'View order',
     viewConversation: 'View email conversation',
     sourceMessageId: 'Source message ID',
@@ -124,6 +151,16 @@ export default {
     title: 'Email conversation detail',
     subtitle: 'Review all messages in the source email conversation',
     endpointPending: 'The email conversation detail endpoint is pending backend implementation. No fixture data is shown.',
+    subject: 'Conversation subject',
+    messageCount: 'Messages',
+    channel: 'Channel',
+    firstReceivedAt: 'First received',
+    lastReceivedAt: 'Last received',
+    emptyBody: 'Empty message body',
+    attachments: 'Attachments / inline images',
+    unnamedAttachment: 'Unnamed attachment',
+    relatedOrders: 'Related orders',
+    relatedTasks: 'Related tasks',
   },
   status: {
     TEMPORARY: 'Temporary',
diff --git a/client/src/i18n/locales/zh-CN.ts b/client/src/i18n/locales/zh-CN.ts
index 483a8b8..cf5c690 100644
--- a/client/src/i18n/locales/zh-CN.ts
+++ b/client/src/i18n/locales/zh-CN.ts
@@ -1,7 +1,6 @@
 export default {
   app: {
     name: 'Hotel OMS',
-    hotelContext: 'HOTEL-TEST',
     theme: '主题',
     healthUp: '后端已连接',
     healthDown: '后端未连接',
@@ -21,6 +20,10 @@ export default {
     noData: '暂无数据',
     endpointPending: '接口待接入',
     endpointMissing: '接口待补',
+    previousPage: '上一页',
+    nextPage: '下一页',
+    pageStatus: '第 {current} / {total} 页',
+    pageSize: '每页',
   },
   workbench: {
     title: '订单工作台',
@@ -50,7 +53,17 @@ export default {
     subtitle: '按订单查看 Reservation 处理入口',
     keyword: 'Group Code / Confirmation No.',
     tableTitle: '订单数据',
+    totalSuffix: '条订单',
+    viewDetail: '查看详情',
+    continueTask: '继续处理',
+    noOpenTask: '无待处理任务',
     endpointPending: '订单列表接口 GET /api/reservation/orders 待后端接入，当前不展示假数据。',
+    columns: {
+      order: '订单',
+      status: '状态',
+      openTasks: '未关闭任务',
+      createdAt: '创建时间',
+    },
   },
   order: {
     summary: '订单摘要',
@@ -68,6 +81,7 @@ export default {
     temporaryOrderNo: '临时单号',
     blockCode: 'Block Code',
     createdAt: '创建时间',
+    conversationMessageCount: '会话邮件数',
     sourceSummaryPending: '订单详情任务时间线的来源邮件摘要字段待后端补充；请从具体任务进入后查看。',
   },
   taskList: {
@@ -79,6 +93,12 @@ export default {
     totalSuffix: '条任务',
     noSourceSubject: '暂无来源主题',
     canProcess: '可处理',
+    cannotProcess: '不可处理',
+    queueParticipation: '是否参与队列',
+    queueAll: '全部队列状态',
+    queueIncluded: '参与队列',
+    queueExcluded: '不参与队列',
+    orderStatusFilterPending: '订单状态筛选待后端接入',
     viewTask: '查看任务',
     viewOrder: '查看订单',
     viewConversation: '查看邮件会话',
@@ -112,6 +132,13 @@ export default {
     fieldAreaFallback: '基础信息',
     savedLocally: '草稿已保存',
     confirmedLocally: '任务已确认',
+    validationFailed: '请先修正字段',
+    validation: {
+      required: '{field}为必填项',
+      enum: '{field}必须来自可选项',
+      date: '{field}必须是 YYYY-MM-DD',
+      number: '{field}必须是数字',
+    },
     viewOrder: '查看订单',
     viewConversation: '查看邮件会话',
     sourceMessageId: '来源消息 ID',
@@ -124,6 +151,16 @@ export default {
     title: '邮件会话详情',
     subtitle: '查看来源邮件所在会话下的全部历史邮件和回复',
     endpointPending: '邮件会话详情接口待后端接入，当前不展示假数据。',
+    subject: '会话主题',
+    messageCount: '邮件数',
+    channel: '渠道',
+    firstReceivedAt: '首次接收',
+    lastReceivedAt: '最近接收',
+    emptyBody: '邮件正文为空',
+    attachments: '附件 / 内嵌图片',
+    unnamedAttachment: '未命名附件',
+    relatedOrders: '关联订单',
+    relatedTasks: '关联任务',
   },
   status: {
     TEMPORARY: '临时',
diff --git a/client/src/layouts/ReservationAppShell.vue b/client/src/layouts/ReservationAppShell.vue
index d8ded79..d1ea975 100644
--- a/client/src/layouts/ReservationAppShell.vue
+++ b/client/src/layouts/ReservationAppShell.vue
@@ -35,7 +35,7 @@
       <header class="app-topbar">
         <div>
           <strong>{{ pageTitle }}</strong>
-          <small>{{ t('app.hotelContext') }}</small>
+          <small>{{ reservationHotelId }}</small>
         </div>
 
         <div class="app-topbar__actions">
@@ -96,6 +96,7 @@ import { computed, onMounted, ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
+import { reservationHotelId } from '@/config/reservationConfig'
 import { fetchBackendHealth } from '@/services/healthService'
 import { useAppPreferencesStore, type SupportedLocale } from '@/stores/appPreferences'
 
@@ -338,23 +339,48 @@ async function checkHealth(): Promise<void> {
 
 @media (max-width: 780px) {
   .app-shell {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
 
   .app-sidebar {
     position: static;
     height: auto;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto;
-    align-items: center;
-    padding: 14px 18px;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto;
+    gap: 12px;
+    padding: 14px 18px 16px;
   }
 
   .app-nav {
-    justify-content: end;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .app-nav__item {
+    flex: 1 1 128px;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  .app-nav__item span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .app-nav__item.router-link-active {
+    box-shadow: inset 0 -3px 0 var(--th-color-blue-600);
+  }
+
+  .app-main {
+    grid-template-rows: auto 1fr;
   }
 
   .app-topbar {
+    min-height: var(--th-topbar-height);
     padding: 0 18px;
   }
 
@@ -366,4 +392,52 @@ async function checkHealth(): Promise<void> {
     padding: 18px;
   }
 }
+
+@media (max-width: 520px) {
+  .app-sidebar {
+    padding: 12px 14px;
+  }
+
+  .brand strong {
+    font-size: 14px;
+  }
+
+  .app-nav__item {
+    flex-basis: calc(50% - 4px);
+    font-size: 12px;
+    padding: 0 10px;
+  }
+
+  .app-topbar {
+    align-items: start;
+    display: grid;
+    gap: 10px;
+    grid-template-columns: minmax(0, 1fr);
+    min-height: auto;
+    padding: 12px 14px;
+  }
+
+  .app-topbar__actions {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .locale-switch {
+    flex: 1;
+    max-width: 136px;
+  }
+
+  .locale-switch button {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .theme-button {
+    flex: 0 0 38px;
+  }
+
+  .app-content {
+    padding: 14px;
+  }
+}
 </style>
diff --git a/client/src/services/reservationService.ts b/client/src/services/reservationService.ts
index 419881e..ed11e78 100644
--- a/client/src/services/reservationService.ts
+++ b/client/src/services/reservationService.ts
@@ -2,6 +2,7 @@ import {
   reservationTaskAudits,
   reservationTaskDetails,
 } from '@/fixtures/reservation'
+import { reservationHotelId } from '@/config/reservationConfig'
 import { getJson, sendJson } from '@/services/httpClient'
 import type {
   ReservationOperaOperationResult,
@@ -20,29 +21,22 @@ import type {
 
 const useReservationFixtures = import.meta.env.VITE_RESERVATION_USE_FIXTURES === 'true'
 
-export class EndpointPendingError extends Error {
-  constructor(message: string) {
-    super(message)
-    this.name = 'EndpointPendingError'
-  }
-}
-
 export async function fetchReservationOrders(
   filters: ReservationOrderListFilters = {},
 ): Promise<ReservationOrderListResult> {
-  void filters
-  throw new EndpointPendingError('GET /api/reservation/orders is pending backend implementation.')
+  return getJson<ReservationOrderListResult>(withQuery('/api/reservation/orders', withReservationHotel(filters)))
 }
 
 export async function fetchReservationTaskList(
   filters: ReservationTaskListFilters = {},
 ): Promise<ReservationTaskListResult> {
-  return getJson<ReservationTaskListResult>(withQuery('/api/reservation/tasks', filters))
+  return getJson<ReservationTaskListResult>(withQuery('/api/reservation/tasks', withReservationHotel(filters)))
 }
 
 export async function fetchReservationOrderDetail(orderId: string): Promise<ReservationOrderDetailResult> {
   return getJson<ReservationOrderDetailResult>(
     withQuery(`/api/reservation/orders/${encodeURIComponent(orderId)}`, {
+      hotel_id: reservationHotelId,
       include_tasks: true,
       include_source_summary: true,
     }),
@@ -52,8 +46,8 @@ export async function fetchReservationOrderDetail(orderId: string): Promise<Rese
 export async function fetchSourceMessageConversation(
   sourceMessageId: string,
 ): Promise<SourceMessageConversationResult> {
-  throw new EndpointPendingError(
-    `GET /api/source-messages/${sourceMessageId}/conversation is pending backend implementation.`,
+  return getJson<SourceMessageConversationResult>(
+    `/api/source-messages/${encodeURIComponent(sourceMessageId)}/conversation`,
   )
 }
 
@@ -143,6 +137,13 @@ function withQuery(path: string, params: object): string {
   return query ? `${path}?${query}` : path
 }
 
+function withReservationHotel<T extends { hotel_id?: string }>(filters: T): T {
+  return {
+    hotel_id: reservationHotelId,
+    ...filters,
+  }
+}
+
 function fixtureTaskDetail(taskId: string): Promise<ReservationTaskDetailResult> {
   const detail = reservationTaskDetails.find((item) => item.task_id === taskId)
   if (!detail) {
diff --git a/client/src/tests/ReservationTaskFieldRenderer.spec.ts b/client/src/tests/ReservationTaskFieldRenderer.spec.ts
index 0a60cc8..3ccdd45 100644
--- a/client/src/tests/ReservationTaskFieldRenderer.spec.ts
+++ b/client/src/tests/ReservationTaskFieldRenderer.spec.ts
@@ -74,6 +74,7 @@ function mountRenderer(readOnly = false) {
         'room.type': '豪华 Q1A',
       },
       readOnly,
+      validationErrors: {},
     },
     global: {
       plugins: [i18n],
@@ -107,4 +108,34 @@ describe('ReservationTaskFieldRenderer', () => {
     expect(wrapper.find('textarea').exists()).toBe(false)
     expect(wrapper.text()).toContain('王建国')
   })
+
+  it('shows validation errors next to their fields', () => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'zh-CN',
+      messages: {
+        'zh-CN': zhCN,
+      },
+    })
+
+    const wrapper = mount(ReservationTaskFieldRenderer, {
+      props: {
+        fields,
+        modelValue: {
+          'guest.name': '',
+          'room.type': '豪华 Q1A',
+        },
+        readOnly: false,
+        validationErrors: {
+          'guest.name': '客人姓名为必填项',
+        },
+      },
+      global: {
+        plugins: [i18n],
+      },
+    })
+
+    expect(wrapper.text()).toContain('客人姓名为必填项')
+    expect(wrapper.find('textarea').attributes('aria-invalid')).toBe('true')
+  })
 })
diff --git a/client/src/tests/reservationFieldRules.spec.ts b/client/src/tests/reservationFieldRules.spec.ts
new file mode 100644
index 0000000..6cca49d
--- /dev/null
+++ b/client/src/tests/reservationFieldRules.spec.ts
@@ -0,0 +1,150 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ReservationTaskFieldResult } from '@/types/reservation'
+import {
+  buildEditableFieldValues,
+  groupReservationFields,
+  validateReservationFieldValues,
+} from '@/utils/reservationFieldRules'
+
+function createField(overrides: Partial<ReservationTaskFieldResult>): ReservationTaskFieldResult {
+  return {
+    row_number: 1,
+    card_name: 'New Booking',
+    display_area: '基础信息',
+    field_path: 'guest.name',
+    display_name: '客人姓名',
+    visible: 'Y',
+    editable: 'Y',
+    input_editable: 'Y',
+    select_editable: 'N',
+    date_picker: 'N',
+    number_input: 'N',
+    file_display: 'N',
+    table_editable: 'N',
+    enum_options: null,
+    required_rule: null,
+    display_condition: null,
+    validation_rule: null,
+    write_path: null,
+    opera_write_participation: 'N',
+    opera_parameter_mapping: null,
+    notes: null,
+    value: null,
+    ...overrides,
+  }
+}
+
+describe('validateReservationFieldValues', () => {
+  it('validates required, enum, date, and number fields from backend metadata', () => {
+    const errors = validateReservationFieldValues(
+      [
+        createField({
+          field_path: 'guest.name',
+          display_name: '客人姓名',
+          required_rule: 'Y',
+        }),
+        createField({
+          field_path: 'room.type',
+          display_name: '房型',
+          select_editable: 'Y',
+          enum_options: '豪华 Q1A, 行政套房',
+        }),
+        createField({
+          field_path: 'stay.arrival_date',
+          display_name: '入住日期',
+          date_picker: 'Y',
+        }),
+        createField({
+          field_path: 'room.count',
+          display_name: '房间数',
+          number_input: 'Y',
+        }),
+      ],
+      {
+        'guest.name': '',
+        'room.type': '不存在的房型',
+        'stay.arrival_date': '2026/07/08',
+        'room.count': 'abc',
+      },
+    )
+
+    expect(errors).toMatchObject({
+      'guest.name': {
+        code: 'required',
+        field_name: '客人姓名',
+      },
+      'room.type': {
+        code: 'enum',
+        field_name: '房型',
+      },
+      'stay.arrival_date': {
+        code: 'date',
+        field_name: '入住日期',
+      },
+      'room.count': {
+        code: 'number',
+        field_name: '房间数',
+      },
+    })
+  })
+
+  it('groups only fields that match the current display condition', () => {
+    const groups = groupReservationFields(
+      [
+        createField({
+          field_path: 'case_keys.group_code',
+          display_name: 'Group Code',
+          display_condition: '对象为Group Block或Allotment时展示',
+        }),
+        createField({
+          field_path: 'case_keys.confirmation_number',
+          display_name: 'Confirmation No.',
+          display_condition: '对象为FIT Reservation时展示',
+        }),
+      ],
+      '基础信息',
+      {
+        'extracted_fields.booking_object_type': 'Group Block',
+        'case_keys.group_code': 'GRP-001',
+      },
+    )
+
+    expect(groups.flatMap((group) => group.fields.map((field) => field.field_path))).toEqual(['case_keys.group_code'])
+  })
+
+  it('builds a backend-safe editable payload without readonly or inactive fields', () => {
+    const payload = buildEditableFieldValues(
+      [
+        createField({
+          field_path: 'visible_reason',
+          display_name: '生成原因',
+          editable: 'N',
+          input_editable: 'N',
+          required_rule: 'Y',
+        }),
+        createField({
+          field_path: 'case_keys.group_code',
+          display_name: 'Group Code',
+          display_condition: '对象为Group Block或Allotment时展示',
+        }),
+        createField({
+          field_path: 'case_keys.confirmation_number',
+          display_name: 'Confirmation No.',
+          display_condition: '对象为FIT Reservation时展示',
+        }),
+      ],
+      {
+        visible_reason: 'AI extracted this task.',
+        'case_keys.group_code': 'GRP-001',
+        'case_keys.confirmation_number': '',
+        'extracted_fields.booking_object_type': 'Group Block',
+      },
+      false,
+    )
+
+    expect(payload).toEqual({
+      'case_keys.group_code': 'GRP-001',
+    })
+  })
+})
diff --git a/client/src/tests/reservationService.spec.ts b/client/src/tests/reservationService.spec.ts
index faa7b9d..b24b040 100644
--- a/client/src/tests/reservationService.spec.ts
+++ b/client/src/tests/reservationService.spec.ts
@@ -1,7 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
-  EndpointPendingError,
   fetchReservationOrderDetail,
   fetchReservationOrders,
   fetchReservationTaskDetail,
@@ -69,13 +68,54 @@ describe('reservationService real API mode', () => {
     })
 
     expect(fetchMock).toHaveBeenCalledWith(
-      '/api/reservation/tasks?task_status=PENDING_CONFIRM&page_num=1&page_size=20',
+      '/api/reservation/tasks?hotel_id=HOTEL-TEST&task_status=PENDING_CONFIRM&page_num=1&page_size=20',
       expect.objectContaining({ method: 'GET' }),
     )
     expect(result.items).toHaveLength(1)
     expect(result.items[0]?.source_subject).toBe('Booking Request')
   })
 
+  it('fetches the order list from the backend by default', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      mockJsonResponse({
+        items: [
+          {
+            order_id: '20001',
+            hotel_id: 'HOTEL-TEST',
+            order_status: 'ACTIVE',
+            display_order_key: 'GRP-001',
+            temporary_order_no: null,
+            confirmation_number: null,
+            group_code: 'GRP-001',
+            display_name: 'GRP-001',
+            open_task_count: 2,
+            next_processable_task_id: '10002',
+            created_at: '2026-07-08T03:00:00Z',
+            updated_at: '2026-07-08T03:10:00Z',
+          },
+        ],
+        page: {
+          page_num: 1,
+          page_size: 20,
+          total: 1,
+        },
+      }),
+    )
+
+    const result = await fetchReservationOrders({
+      keyword: 'GRP-001',
+      page_num: 1,
+      page_size: 20,
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/reservation/orders?hotel_id=HOTEL-TEST&keyword=GRP-001&page_num=1&page_size=20',
+      expect.objectContaining({ method: 'GET' }),
+    )
+    expect(result.items[0]?.display_order_key).toBe('GRP-001')
+    expect(result.items[0]?.next_processable_task_id).toBe('10002')
+  })
+
   it('fetches order detail from the backend by default', async () => {
     const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
       mockJsonResponse({
@@ -100,7 +140,7 @@ describe('reservationService real API mode', () => {
     const result = await fetchReservationOrderDetail('20001')
 
     expect(fetchMock).toHaveBeenCalledWith(
-      '/api/reservation/orders/20001?include_tasks=true&include_source_summary=true',
+      '/api/reservation/orders/20001?hotel_id=HOTEL-TEST&include_tasks=true&include_source_summary=true',
       expect.objectContaining({ method: 'GET' }),
     )
     expect(result.order.display_name).toBe('GRP-001')
@@ -141,11 +181,61 @@ describe('reservationService real API mode', () => {
     expect(result.task_id).toBe('10001')
   })
 
-  it('marks order list as pending instead of returning fixture data', async () => {
-    await expect(fetchReservationOrders()).rejects.toBeInstanceOf(EndpointPendingError)
-  })
+  it('fetches source message conversation from the backend by default', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      mockJsonResponse({
+        conversation: {
+          hotel_id: 'HOTEL-TEST',
+          channel: 'EMAIL',
+          external_conversation_id: 'thread-30001',
+          subject: 'Booking Request',
+          message_count: 2,
+          first_received_at: '2026-07-08T02:00:00Z',
+          last_received_at: '2026-07-08T03:00:00Z',
+        },
+        messages: [
+          {
+            id: '30001',
+            external_message_id: 'msg-30001',
+            external_conversation_id: 'thread-30001',
+            sender_summary: 'guest@example.test',
+            subject: 'Booking Request',
+            received_at: '2026-07-08T02:00:00Z',
+            source_sent_at: '2026-07-08T01:58:00Z',
+            text_body: '完整邮件正文',
+            html_body: '<p>完整邮件正文</p>',
+            html_sanitize_required: true,
+            inline_images: [],
+            attachments: [],
+            related_orders: [
+              {
+                order_id: '20001',
+                display_order_key: 'GRP-001',
+                order_status: 'ACTIVE',
+              },
+            ],
+            related_tasks: [
+              {
+                task_id: '10001',
+                order_id: '20001',
+                task_type: 'NEW_BOOKING',
+                task_subtype: 'NEW_BOOKING',
+                task_status: 'PENDING_CONFIRM',
+                card_name: 'New Booking',
+              },
+            ],
+          },
+        ],
+      }),
+    )
 
-  it('marks source message conversation as pending instead of returning fixture data', async () => {
-    await expect(fetchSourceMessageConversation('30001')).rejects.toBeInstanceOf(EndpointPendingError)
+    const result = await fetchSourceMessageConversation('30001')
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/source-messages/30001/conversation',
+      expect.objectContaining({ method: 'GET' }),
+    )
+    expect(result.conversation.external_conversation_id).toBe('thread-30001')
+    expect(result.messages[0]?.text_body).toBe('完整邮件正文')
   })
 })
diff --git a/client/src/tests/reservationTaskDetailPanel.spec.ts b/client/src/tests/reservationTaskDetailPanel.spec.ts
index 7d1a409..4307441 100644
--- a/client/src/tests/reservationTaskDetailPanel.spec.ts
+++ b/client/src/tests/reservationTaskDetailPanel.spec.ts
@@ -8,6 +8,7 @@ import ReservationTaskDetailPanel from '@/components/reservation/ReservationTask
 import type {
   ReservationTaskAuditLogResult,
   ReservationTaskDetailResult,
+  ReservationTaskFieldResult,
   ReservationTaskPayloadMutationResult,
 } from '@/types/reservation'
 
@@ -24,8 +25,8 @@ vi.mock('@/services/reservationService', async (importOriginal) => {
 
 const service = await import('@/services/reservationService')
 
-function createTaskDetail(): ReservationTaskDetailResult {
-  return {
+function createTaskDetail(overrides: Partial<ReservationTaskDetailResult> = {}): ReservationTaskDetailResult {
+  const detail: ReservationTaskDetailResult = {
     task_id: '10001',
     order_id: '20001',
     source_message_id: '30001',
@@ -52,6 +53,10 @@ function createTaskDetail(): ReservationTaskDetailResult {
     fields: [],
     opera_operations: [],
   }
+  return {
+    ...detail,
+    ...overrides,
+  }
 }
 
 function createMutationResult(taskStatus = 'PENDING_CONFIRM'): ReservationTaskPayloadMutationResult {
@@ -81,6 +86,34 @@ function createAudit(auditId: string, action: string): ReservationTaskAuditLogRe
   }
 }
 
+function createRequiredField(overrides: Partial<ReservationTaskFieldResult> = {}): ReservationTaskFieldResult {
+  return {
+    row_number: 1,
+    card_name: 'New Booking',
+    display_area: '客人信息',
+    field_path: 'guest.name',
+    display_name: '客人姓名',
+    visible: 'Y',
+    editable: 'Y',
+    input_editable: 'Y',
+    select_editable: 'N',
+    date_picker: 'N',
+    number_input: 'N',
+    file_display: 'N',
+    table_editable: 'N',
+    enum_options: null,
+    required_rule: 'Y',
+    display_condition: null,
+    validation_rule: null,
+    write_path: null,
+    opera_write_participation: 'N',
+    opera_parameter_mapping: null,
+    notes: null,
+    value: '',
+    ...overrides,
+  }
+}
+
 async function mountPanel() {
   const i18n = createI18n({
     legacy: false,
@@ -107,7 +140,9 @@ async function mountPanel() {
     global: {
       plugins: [i18n, router],
       stubs: {
-        RouterLink: true,
+        RouterLink: {
+          template: '<a><slot /></a>',
+        },
       },
     },
   })
@@ -158,6 +193,59 @@ describe('ReservationTaskDetailPanel', () => {
     expect(findButton(wrapper, '确认').attributes('disabled')).toBeUndefined()
   })
 
+  it('blocks confirmation when frontend field validation fails', async () => {
+    vi.mocked(service.fetchReservationTaskDetail).mockResolvedValue(
+      createTaskDetail({
+        fields: [createRequiredField()],
+      }),
+    )
+
+    const wrapper = await mountPanel()
+    await findButton(wrapper, '确认').trigger('click')
+    await flushPromises()
+
+    expect(service.confirmReservationTask).not.toHaveBeenCalled()
+    expect(wrapper.text()).toContain('请先修正字段')
+    expect(wrapper.text()).toContain('客人姓名为必填项')
+  })
+
+  it('keeps remaining validation errors and clears the summary after fields are fixed', async () => {
+    vi.mocked(service.fetchReservationTaskDetail).mockResolvedValue(
+      createTaskDetail({
+        fields: [
+          createRequiredField(),
+          createRequiredField({
+            field_path: 'room.type',
+            display_name: '房型',
+          }),
+        ],
+      }),
+    )
+
+    const wrapper = await mountPanel()
+    await findButton(wrapper, '确认').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('请先修正字段')
+    expect(wrapper.text()).toContain('客人姓名为必填项')
+    expect(wrapper.text()).toContain('房型为必填项')
+
+    const textareas = wrapper.findAll('textarea')
+    await textareas[0]!.setValue('王建国')
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('请先修正字段')
+    expect(wrapper.text()).not.toContain('客人姓名为必填项')
+    expect(wrapper.text()).toContain('房型为必填项')
+
+    await textareas[1]!.setValue('豪华 Q1A')
+    await flushPromises()
+
+    expect(wrapper.text()).not.toContain('请先修正字段')
+    expect(wrapper.text()).not.toContain('客人姓名为必填项')
+    expect(wrapper.text()).not.toContain('房型为必填项')
+  })
+
   it('refreshes audit records after saving a draft', async () => {
     vi.mocked(service.fetchReservationTaskAudits)
       .mockResolvedValueOnce({
@@ -180,4 +268,69 @@ describe('ReservationTaskDetailPanel', () => {
     expect(wrapper.text()).toContain('DRAFT_SAVED')
     expect(wrapper.text()).not.toContain('TASK_LOADED')
   })
+
+  it('saves only editable active fields to match backend task field validation', async () => {
+    vi.mocked(service.fetchReservationTaskDetail).mockResolvedValue(
+      createTaskDetail({
+        fields: [
+          createRequiredField({
+            field_path: 'visible_reason',
+            display_name: '生成原因',
+            editable: 'N',
+            input_editable: 'N',
+            required_rule: 'Y',
+            value: 'AI extracted this task.',
+          }),
+          createRequiredField({
+            field_path: 'case_keys.group_code',
+            display_name: 'Group Code',
+            display_condition: '对象为Group Block或Allotment时展示',
+            value: 'GRP-001',
+          }),
+          createRequiredField({
+            field_path: 'case_keys.confirmation_number',
+            display_name: 'Confirmation No.',
+            display_condition: '对象为FIT Reservation时展示',
+            value: null,
+          }),
+          createRequiredField({
+            field_path: 'extracted_fields.booking_object_type',
+            display_name: '订单对象类型',
+            select_editable: 'Y',
+            input_editable: 'N',
+            enum_options: 'Group Block, FIT Reservation',
+            value: 'Group Block',
+          }),
+        ],
+      }),
+    )
+    vi.mocked(service.saveReservationTaskDraft).mockResolvedValue(createMutationResult())
+
+    const wrapper = await mountPanel()
+    await findButton(wrapper, '保存草稿').trigger('click')
+    await flushPromises()
+
+    expect(service.saveReservationTaskDraft).toHaveBeenCalledWith(
+      '10001',
+      {
+        field_values: {
+          'case_keys.group_code': 'GRP-001',
+          'extracted_fields.booking_object_type': 'Group Block',
+        },
+      },
+    )
+  })
+
+  it('opens the source conversation by source message id without external conversation id', async () => {
+    vi.mocked(service.fetchReservationTaskDetail).mockResolvedValue(
+      createTaskDetail({
+        external_conversation_id: null,
+      }),
+    )
+
+    const wrapper = await mountPanel()
+
+    expect(wrapper.text()).toContain('查看邮件会话')
+    expect(wrapper.text()).not.toContain('接口待补')
+  })
 })
diff --git a/client/src/tests/reservationTaskQueue.spec.ts b/client/src/tests/reservationTaskQueue.spec.ts
new file mode 100644
index 0000000..4e143e7
--- /dev/null
+++ b/client/src/tests/reservationTaskQueue.spec.ts
@@ -0,0 +1,85 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+import zhCN from '@/i18n/locales/zh-CN'
+import ReservationTaskQueue from '@/components/reservation/ReservationTaskQueue.vue'
+import type { ReservationOrderTaskTimelineItem } from '@/types/reservation'
+
+function createTaskQueueItem(overrides: Partial<ReservationOrderTaskTimelineItem> = {}): ReservationOrderTaskTimelineItem {
+  return {
+    task_id: '10001',
+    task_type: 'NEW_BOOKING',
+    task_subtype: 'NEW_BOOKING',
+    task_status: 'PENDING_CONFIRM',
+    card_name: 'New Booking',
+    queue_sequence: 1,
+    queue_participation: true,
+    can_process: true,
+    readonly_reason_code: null,
+    source_message_id: '30001',
+    source_subject: 'Booking Request',
+    source_sender_summary: 'guest@example.test',
+    source_received_at: '2026-07-08T03:00:00Z',
+    external_conversation_id: null,
+    conversation_message_count: 2,
+    created_at: '2026-07-08T03:00:00Z',
+    ...overrides,
+  }
+}
+
+async function mountQueue(items: ReservationOrderTaskTimelineItem[]) {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'zh-CN',
+    messages: {
+      'zh-CN': zhCN,
+    },
+  })
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', component: { template: '<div />' } },
+      { path: '/reservation/source-messages/:sourceMessageId/conversation', component: { template: '<div />' } },
+    ],
+  })
+  await router.push('/')
+  await router.isReady()
+
+  return mount(ReservationTaskQueue, {
+    props: {
+      items,
+      activeTaskId: '10001',
+    },
+    global: {
+      plugins: [i18n, router],
+      stubs: {
+        RouterLink: {
+          template: '<a><slot /></a>',
+        },
+      },
+    },
+  })
+}
+
+describe('ReservationTaskQueue', () => {
+  it('opens the source conversation by source message id without external conversation id', async () => {
+    const wrapper = await mountQueue([createTaskQueueItem()])
+
+    expect(wrapper.text()).toContain('查看邮件会话')
+    expect(wrapper.text()).not.toContain('接口待补')
+  })
+
+  it('shows readonly reason when a queued task cannot be processed', async () => {
+    const wrapper = await mountQueue([
+      createTaskQueueItem({
+        can_process: false,
+        readonly_reason_code: 'PREVIOUS_TASK_NOT_FINISHED',
+      }),
+    ])
+
+    expect(wrapper.text()).toContain('不可处理')
+    expect(wrapper.text()).toContain('PREVIOUS_TASK_NOT_FINISHED')
+  })
+})
diff --git a/client/src/tests/reservationViews.spec.ts b/client/src/tests/reservationViews.spec.ts
index 681eae9..da61490 100644
--- a/client/src/tests/reservationViews.spec.ts
+++ b/client/src/tests/reservationViews.spec.ts
@@ -4,7 +4,7 @@ import { createI18n } from 'vue-i18n'
 import { createMemoryHistory, createRouter } from 'vue-router'
 
 import zhCN from '@/i18n/locales/zh-CN'
-import { EndpointPendingError } from '@/services/reservationService'
+import ReservationOrderDetailView from '@/views/reservation/ReservationOrderDetailView.vue'
 import ReservationOrderListView from '@/views/reservation/ReservationOrderListView.vue'
 import ReservationSourceMessageConversationView from '@/views/reservation/ReservationSourceMessageConversationView.vue'
 import ReservationTaskListView from '@/views/reservation/ReservationTaskListView.vue'
@@ -13,6 +13,7 @@ vi.mock('@/services/reservationService', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/services/reservationService')>()
   return {
     ...actual,
+    fetchReservationOrderDetail: vi.fn(),
     fetchReservationOrders: vi.fn(),
     fetchReservationTaskList: vi.fn(),
     fetchSourceMessageConversation: vi.fn(),
@@ -21,7 +22,44 @@ vi.mock('@/services/reservationService', async (importOriginal) => {
 
 const service = await import('@/services/reservationService')
 
-function createTaskListResult(displayOrderKey: string, sourceSubject: string) {
+function createOrderListResult(
+  displayOrderKey = 'GRP-001',
+  page: { page_num: number; page_size: number; total: number } = {
+    page_num: 1,
+    page_size: 20,
+    total: 1,
+  },
+) {
+  return {
+    items: [
+      {
+        order_id: displayOrderKey === 'GRP-002' ? '20002' : '20001',
+        hotel_id: 'HOTEL-TEST',
+        order_status: 'ACTIVE',
+        display_order_key: displayOrderKey,
+        temporary_order_no: null,
+        confirmation_number: null,
+        group_code: displayOrderKey,
+        display_name: displayOrderKey,
+        open_task_count: 2,
+        next_processable_task_id: '10002',
+        created_at: '2026-07-08T03:00:00Z',
+        updated_at: '2026-07-08T03:10:00Z',
+      },
+    ],
+    page,
+  }
+}
+
+function createTaskListResult(
+  displayOrderKey: string,
+  sourceSubject: string,
+  page: { page_num: number; page_size: number; total: number } = {
+    page_num: 1,
+    page_size: 20,
+    total: 1,
+  },
+) {
   return {
     items: [
       {
@@ -48,11 +86,142 @@ function createTaskListResult(displayOrderKey: string, sourceSubject: string) {
         updated_at: '2026-07-08T03:10:00Z',
       },
     ],
-    page: {
-      page_num: 1,
-      page_size: 20,
-      total: 1,
+    page,
+  }
+}
+
+function createOrderDetailResult() {
+  return {
+    order: {
+      order_id: '20001',
+      hotel_id: 'HOTEL-TEST',
+      order_status: 'ACTIVE',
+      temporary_order_no: null,
+      confirmation_number: null,
+      group_code: 'GRP-001',
+      block_code: null,
+      allotment_code: null,
+      display_name: 'GRP-001',
+      created_at: '2026-07-08T03:00:00Z',
+      updated_at: '2026-07-08T03:10:00Z',
     },
+    tasks: [
+      {
+        task_id: '10001',
+        task_type: 'NEW_BOOKING',
+        task_subtype: 'NEW_BOOKING',
+        task_status: 'PENDING_CONFIRM',
+        card_name: 'New Booking',
+        queue_sequence: 1,
+        queue_participation: true,
+        can_process: true,
+        readonly_reason_code: null,
+        source_message_id: '30001',
+        source_subject: 'Booking Request',
+        source_sender_summary: 'guest@example.test',
+        source_received_at: '2026-07-08T03:00:00Z',
+        external_conversation_id: null,
+        conversation_message_count: 2,
+        created_at: '2026-07-08T03:00:00Z',
+      },
+      {
+        task_id: '10002',
+        task_type: 'UPDATE_BOOKING',
+        task_subtype: 'RATE_CHANGE',
+        task_status: 'BLOCKED',
+        card_name: 'Rate Change',
+        queue_sequence: 2,
+        queue_participation: true,
+        can_process: false,
+        readonly_reason_code: 'PREVIOUS_TASK_NOT_FINISHED',
+        source_message_id: '30002',
+        source_subject: 'Booking Update',
+        source_sender_summary: 'agent@example.test',
+        source_received_at: '2026-07-08T04:00:00Z',
+        external_conversation_id: null,
+        conversation_message_count: 3,
+        created_at: '2026-07-08T04:00:00Z',
+      },
+    ],
+    warnings: [],
+  }
+}
+
+function createSourceMessageConversationResult(
+  overrides: Partial<ReturnType<typeof createSourceMessageConversationResultBase>> = {},
+) {
+  const result = createSourceMessageConversationResultBase()
+  return {
+    ...result,
+    ...overrides,
+  }
+}
+
+function createSourceMessageConversationResultBase() {
+  return {
+    conversation: {
+      hotel_id: 'HOTEL-TEST',
+      channel: 'EMAIL',
+      external_conversation_id: 'thread-30001',
+      subject: 'Booking Request',
+      message_count: 2,
+      first_received_at: '2026-07-08T02:00:00Z',
+      last_received_at: '2026-07-08T03:00:00Z',
+    },
+    messages: [
+      {
+        id: '30001',
+        external_message_id: 'msg-30001',
+        external_conversation_id: 'thread-30001',
+        sender_summary: 'guest@example.test',
+        subject: 'Booking Request',
+        received_at: '2026-07-08T02:00:00Z',
+        source_sent_at: '2026-07-08T01:58:00Z',
+        text_body: '完整邮件正文',
+        html_body: '<strong>不应直接渲染</strong>',
+        html_sanitize_required: true,
+        inline_images: [],
+        attachments: [
+          {
+            mediaType: 'ATTACHMENT',
+            fileName: 'rooming-list.xlsx',
+            contentType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            sizeBytes: 1024,
+            externalUrl: 'https://example.test/rooming-list.xlsx',
+            externalMediaId: 'media-1',
+          },
+        ],
+        related_orders: [
+          {
+            order_id: '20001',
+            display_order_key: 'GRP-001',
+            order_status: 'ACTIVE',
+          },
+        ],
+        related_tasks: [
+          {
+            task_id: '10001',
+            order_id: '20001',
+            task_type: 'NEW_BOOKING',
+            task_subtype: 'NEW_BOOKING',
+            task_status: 'PENDING_CONFIRM',
+            card_name: 'New Booking',
+          },
+        ],
+      },
+    ],
+  }
+}
+
+function createAttachment(overrides: Record<string, unknown> = {}) {
+  return {
+    mediaType: 'ATTACHMENT',
+    fileName: 'rooming-list.xlsx',
+    contentType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    sizeBytes: 1024,
+    externalUrl: 'https://example.test/rooming-list.xlsx',
+    externalMediaId: 'media-1',
+    ...overrides,
   }
 }
 
@@ -66,7 +235,7 @@ function createDeferred<T>() {
   return { promise, resolve, reject }
 }
 
-async function mountWithPlugins(component: object, initialPath = '/') {
+async function mountWithPlugins(component: object, initialPath = '/', stubs: Record<string, unknown> = {}) {
   const i18n = createI18n({
     legacy: false,
     locale: 'zh-CN',
@@ -90,7 +259,10 @@ async function mountWithPlugins(component: object, initialPath = '/') {
     global: {
       plugins: [i18n, router],
       stubs: {
-        RouterLink: true,
+        RouterLink: {
+          template: '<a><slot /></a>',
+        },
+        ...stubs,
       },
     },
   })
@@ -98,21 +270,72 @@ async function mountWithPlugins(component: object, initialPath = '/') {
 
 describe('reservation P0 views', () => {
   beforeEach(() => {
+    vi.mocked(service.fetchReservationOrderDetail).mockReset()
     vi.mocked(service.fetchReservationOrders).mockReset()
     vi.mocked(service.fetchReservationTaskList).mockReset()
     vi.mocked(service.fetchSourceMessageConversation).mockReset()
   })
 
-  it('shows pending state for the order list endpoint', async () => {
-    vi.mocked(service.fetchReservationOrders).mockRejectedValue(
-      new EndpointPendingError('GET /api/reservation/orders is pending backend implementation.'),
+  it('renders active order task source evidence without the stale pending copy', async () => {
+    vi.mocked(service.fetchReservationOrderDetail).mockResolvedValue(createOrderDetailResult())
+
+    const wrapper = await mountWithPlugins(ReservationOrderDetailView, '/reservation/orders/20001', {
+      ReservationTaskDetailPanel: {
+        template: '<section />',
+      },
+    })
+    await vi.dynamicImportSettled()
+
+    expect(wrapper.text()).toContain('Booking Request')
+    expect(wrapper.text()).toContain('guest@example.test')
+    expect(wrapper.text()).toContain('2')
+    expect(wrapper.text()).toContain('查看邮件会话')
+    expect(wrapper.text()).not.toContain('来源邮件摘要字段待后端补充')
+  })
+
+  it('renders order list items returned by the backend', async () => {
+    vi.mocked(service.fetchReservationOrders).mockResolvedValue(createOrderListResult())
+
+    const wrapper = await mountWithPlugins(ReservationOrderListView)
+    await vi.dynamicImportSettled()
+
+    expect(wrapper.text()).toContain('GRP-001')
+    expect(wrapper.text()).toContain('有效')
+    expect(wrapper.text()).toContain('继续处理')
+    expect(wrapper.text()).not.toContain('接口待接入')
+  })
+
+  it('paginates order list requests with backend page metadata', async () => {
+    vi.mocked(service.fetchReservationOrders)
+      .mockResolvedValueOnce(createOrderListResult('GRP-001', { page_num: 1, page_size: 20, total: 41 }))
+      .mockResolvedValueOnce(createOrderListResult('GRP-002', { page_num: 2, page_size: 20, total: 41 }))
+
+    const wrapper = await mountWithPlugins(ReservationOrderListView)
+    await vi.dynamicImportSettled()
+
+    expect(wrapper.text()).toContain('第 1 / 3 页')
+    await wrapper.findAll('button').find((button) => button.text().includes('下一页'))?.trigger('click')
+    await vi.dynamicImportSettled()
+
+    expect(service.fetchReservationOrders).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        page_num: 2,
+        page_size: 20,
+      }),
+    )
+    expect(wrapper.text()).toContain('GRP-002')
+    expect(wrapper.text()).toContain('第 2 / 3 页')
+  })
+
+  it('renders backend-normalized order pagination metadata', async () => {
+    vi.mocked(service.fetchReservationOrders).mockResolvedValue(
+      createOrderListResult('GRP-001', { page_num: 3, page_size: 10, total: 31 }),
     )
 
     const wrapper = await mountWithPlugins(ReservationOrderListView)
     await vi.dynamicImportSettled()
 
-    expect(wrapper.text()).toContain('接口待接入')
-    expect(wrapper.text()).not.toContain('#ORD-083')
+    expect(wrapper.text()).toContain('第 3 / 4 页')
   })
 
   it('renders task list items returned by the backend', async () => {
@@ -123,7 +346,62 @@ describe('reservation P0 views', () => {
 
     expect(wrapper.text()).toContain('GRP-001')
     expect(wrapper.text()).toContain('Booking Request')
-    expect(wrapper.text()).toContain('接口待补')
+    expect(wrapper.text()).toContain('查看邮件会话')
+    expect(wrapper.text()).not.toContain('接口待补')
+  })
+
+  it('filters and paginates task list with supported backend fields', async () => {
+    vi.mocked(service.fetchReservationTaskList)
+      .mockResolvedValueOnce(createTaskListResult('GRP-001', 'Booking Request', { page_num: 1, page_size: 20, total: 45 }))
+      .mockResolvedValueOnce(createTaskListResult('GRP-001', 'Booking Request', { page_num: 1, page_size: 20, total: 45 }))
+      .mockResolvedValueOnce(createTaskListResult('GRP-001', 'Booking Request', { page_num: 1, page_size: 20, total: 45 }))
+      .mockResolvedValueOnce(createTaskListResult('GRP-002', 'Booking Update', { page_num: 2, page_size: 20, total: 45 }))
+
+    const wrapper = await mountWithPlugins(ReservationTaskListView)
+    await vi.dynamicImportSettled()
+
+    const selects = wrapper.findAll('select')
+    expect(wrapper.text()).toContain('订单状态筛选待后端接入')
+    expect(selects[2]!.attributes('disabled')).toBeDefined()
+
+    await selects[1]!.setValue('READY')
+    await vi.dynamicImportSettled()
+    await selects[3]!.setValue('true')
+    await vi.dynamicImportSettled()
+
+    const taskListCalls = vi.mocked(service.fetchReservationTaskList).mock.calls
+    const filteredTaskRequest = taskListCalls[taskListCalls.length - 1]?.[0] ?? {}
+    expect(filteredTaskRequest).toMatchObject({
+      task_status: 'READY',
+      queue_participation: true,
+      page_num: 1,
+    })
+    expect(filteredTaskRequest).not.toHaveProperty('order_status')
+
+    await wrapper.findAll('button').find((button) => button.text().includes('下一页'))?.trigger('click')
+    await vi.dynamicImportSettled()
+
+    expect(service.fetchReservationTaskList).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        task_status: 'READY',
+        queue_participation: true,
+        page_num: 2,
+        page_size: 20,
+      }),
+    )
+    expect(wrapper.text()).toContain('GRP-002')
+    expect(wrapper.text()).toContain('第 2 / 3 页')
+  })
+
+  it('renders backend-normalized task pagination metadata', async () => {
+    vi.mocked(service.fetchReservationTaskList).mockResolvedValue(
+      createTaskListResult('GRP-001', 'Booking Request', { page_num: 2, page_size: 10, total: 21 }),
+    )
+
+    const wrapper = await mountWithPlugins(ReservationTaskListView)
+    await vi.dynamicImportSettled()
+
+    expect(wrapper.text()).toContain('第 2 / 3 页')
   })
 
   it('keeps the latest task list response when filters change quickly', async () => {
@@ -147,10 +425,8 @@ describe('reservation P0 views', () => {
     expect(wrapper.text()).not.toContain('GRP-OLD')
   })
 
-  it('shows pending state for the source message conversation endpoint', async () => {
-    vi.mocked(service.fetchSourceMessageConversation).mockRejectedValue(
-      new EndpointPendingError('GET /api/source-messages/30001/conversation is pending backend implementation.'),
-    )
+  it('renders full source message conversation returned by the backend', async () => {
+    vi.mocked(service.fetchSourceMessageConversation).mockResolvedValue(createSourceMessageConversationResult())
 
     const wrapper = await mountWithPlugins(
       ReservationSourceMessageConversationView,
@@ -159,7 +435,76 @@ describe('reservation P0 views', () => {
     await vi.dynamicImportSettled()
 
     expect(service.fetchSourceMessageConversation).toHaveBeenCalledWith('30001')
-    expect(wrapper.text()).toContain('接口待接入')
-    expect(wrapper.text()).not.toContain('完整邮件正文')
+    expect(wrapper.text()).toContain('Booking Request')
+    expect(wrapper.text()).toContain('不应直接渲染')
+    expect(wrapper.text()).toContain('rooming-list.xlsx')
+    expect(wrapper.find('.message-body').html()).toContain('<strong>不应直接渲染</strong>')
+    expect(wrapper.text()).not.toContain('接口待接入')
+  })
+
+  it('does not expose unsafe attachment URLs as links', async () => {
+    const conversationResult = createSourceMessageConversationResult()
+    conversationResult.messages[0]!.attachments = [
+      createAttachment({
+        fileName: 'unsafe.html',
+        externalUrl: 'javascript:alert(1)',
+        externalMediaId: 'unsafe-media',
+      }),
+    ]
+    vi.mocked(service.fetchSourceMessageConversation).mockResolvedValue(conversationResult)
+
+    const wrapper = await mountWithPlugins(
+      ReservationSourceMessageConversationView,
+      '/reservation/source-messages/30001/conversation',
+    )
+    await vi.dynamicImportSettled()
+
+    expect(wrapper.text()).toContain('unsafe.html')
+    const unsafeLink = wrapper.findAll('a').find((link) => link.text().includes('unsafe.html'))
+    expect(unsafeLink).toBeUndefined()
+  })
+
+  it('does not warn about duplicate attachment keys when unnamed media changes', async () => {
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined)
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+    const firstResult = createSourceMessageConversationResult()
+    firstResult.messages[0]!.attachments = [
+      createAttachment({
+        fileName: null,
+        externalUrl: null,
+        externalMediaId: null,
+      }),
+    ]
+    const secondResult = createSourceMessageConversationResult()
+    secondResult.messages[0]!.attachments = [
+      createAttachment({
+        fileName: null,
+        externalUrl: null,
+        externalMediaId: null,
+      }),
+      createAttachment({
+        fileName: null,
+        externalUrl: null,
+        externalMediaId: null,
+      }),
+    ]
+    vi.mocked(service.fetchSourceMessageConversation)
+      .mockResolvedValueOnce(firstResult)
+      .mockResolvedValueOnce(secondResult)
+
+    const wrapper = await mountWithPlugins(
+      ReservationSourceMessageConversationView,
+      '/reservation/source-messages/30001/conversation',
+    )
+    await vi.dynamicImportSettled()
+    await wrapper.vm.$router.push('/reservation/source-messages/30002/conversation')
+    await vi.dynamicImportSettled()
+
+    expect(wrapper.text()).toContain('未命名附件')
+    expect([...consoleWarnSpy.mock.calls, ...consoleErrorSpy.mock.calls].flat().join('\n')).not.toContain(
+      'Duplicate keys',
+    )
+    consoleWarnSpy.mockRestore()
+    consoleErrorSpy.mockRestore()
   })
 })
diff --git a/client/src/types/reservation.ts b/client/src/types/reservation.ts
index 8d6af36..49f12fe 100644
--- a/client/src/types/reservation.ts
+++ b/client/src/types/reservation.ts
@@ -44,12 +44,14 @@ export interface ReservationOrderListItem {
   order_id: string
   hotel_id: string
   order_status: ReservationOrderStatus | string
+  display_order_key: string | null
   temporary_order_no: string | null
   confirmation_number: string | null
   group_code: string | null
   display_name: string
   open_task_count: number | null
   next_processable_task_id: string | null
+  created_at: string | null
   updated_at: string | null
 }
 
@@ -62,7 +64,6 @@ export interface ReservationTaskListFilters {
   hotel_id?: string
   order_id?: string
   task_type?: string
-  order_status?: string
   task_subtype?: string
   task_status?: string
   queue_participation?: boolean
@@ -141,30 +142,47 @@ export interface ReservationOrderDetailResult {
 
 export interface SourceMessageConversationResult {
   conversation: {
-    externalConversationId: string
-    hotelId: string
+    hotel_id: string
     channel: string
+    external_conversation_id: string | null
     subject: string | null
-    messageCount: number
-    firstReceivedAt: string | null
-    lastReceivedAt: string | null
+    message_count: number
+    first_received_at: string | null
+    last_received_at: string | null
   }
   messages: SourceMessageConversationItem[]
 }
 
 export interface SourceMessageConversationItem {
   id: string
-  externalMessageId: string | null
-  externalConversationId: string
-  senderSummary: string | null
+  external_message_id: string | null
+  external_conversation_id: string | null
+  sender_summary: string | null
   subject: string | null
-  receivedAt: string | null
-  sourceSentAt: string | null
-  textBody: string | null
-  htmlBody: string | null
-  htmlSanitizeRequired: boolean
-  inlineImages: SourceMessageOriginalMedia[]
+  received_at: string | null
+  source_sent_at: string | null
+  text_body: string | null
+  html_body: string | null
+  html_sanitize_required: boolean
+  inline_images: SourceMessageOriginalMedia[]
   attachments: SourceMessageOriginalMedia[]
+  related_orders: SourceMessageRelatedOrder[]
+  related_tasks: SourceMessageRelatedTask[]
+}
+
+export interface SourceMessageRelatedOrder {
+  order_id: string
+  display_order_key: string | null
+  order_status: ReservationOrderStatus | string
+}
+
+export interface SourceMessageRelatedTask {
+  task_id: string
+  order_id: string
+  task_type: string
+  task_subtype: string | null
+  task_status: ReservationTaskStatus | string
+  card_name: string | null
 }
 
 export interface SourceMessageOriginalMedia {
@@ -245,9 +263,13 @@ export interface ReservationTaskAvailabilityResult {
 export interface ReservationTaskFieldResult {
   row_number: number | null
   card_name: string | null
+  result_type?: string | null
+  task_type?: string | null
+  task_subtype?: string | null
   display_area: string | null
   field_path: string
   display_name: string
+  default_value_source?: string | null
   visible: string | null
   editable: string | null
   input_editable: string | null
diff --git a/client/src/utils/reservationFieldRules.ts b/client/src/utils/reservationFieldRules.ts
index d18253d..bb8dde9 100644
--- a/client/src/utils/reservationFieldRules.ts
+++ b/client/src/utils/reservationFieldRules.ts
@@ -13,9 +13,22 @@ export interface EnumOption {
   label: string
 }
 
-export function groupReservationFields(fields: ReservationTaskFieldResult[], fallbackArea: string): FieldAreaGroup[] {
+export type ReservationFieldValidationErrorCode = 'required' | 'enum' | 'date' | 'number'
+
+export interface ReservationFieldValidationError {
+  code: ReservationFieldValidationErrorCode
+  field_name: string
+}
+
+export type ReservationFieldValidationErrors = Record<string, ReservationFieldValidationError>
+
+export function groupReservationFields(
+  fields: ReservationTaskFieldResult[],
+  fallbackArea: string,
+  values: ReservationRecord = {},
+): FieldAreaGroup[] {
   const grouped = new Map<string, ReservationTaskFieldResult[]>()
-  fields.filter(isReservationFieldVisible).forEach((field) => {
+  fields.filter((field) => isReservationFieldActive(field, values)).forEach((field) => {
     const area = field.display_area?.trim() || fallbackArea
     grouped.set(area, [...(grouped.get(area) ?? []), field])
   })
@@ -30,6 +43,71 @@ export function isReservationFieldVisible(field: ReservationTaskFieldResult): bo
   return !isRuleFalsy(field.visible)
 }
 
+export function isReservationFieldActive(field: ReservationTaskFieldResult, values: ReservationRecord = {}): boolean {
+  if (!isReservationFieldVisible(field)) {
+    return false
+  }
+  const condition = field.display_condition?.trim()
+  if (!condition || condition === '-' || condition.includes('始终展示')) {
+    return true
+  }
+  const currentValue = valueForConditionPath(values, field, field.field_path)
+  if (condition.includes('有值时展示')) {
+    return !isEmptyReservationValue(currentValue)
+  }
+  if (condition.includes('有附件')) {
+    return !isEmptyReservationValue(valueForConditionPath(values, field, 'attachments'))
+  }
+  if (condition.includes('对象为FIT Reservation')) {
+    return isFitTarget(values, field)
+  }
+  if (condition.includes('对象为Group Block或Allotment')) {
+    return isGroupOrAllotmentTarget(values, field)
+  }
+  if (condition.includes('涉及房型')) {
+    return (
+      matrixContains(field.task_type, 'New Booking') ||
+      !isEmptyReservationValue(valueForConditionPath(values, field, 'extracted_fields.room_type')) ||
+      !isEmptyReservationValue(valueForConditionPath(values, field, 'extracted_fields.pms_room_type_code'))
+    )
+  }
+  if (condition.includes('涉及Rate Code') || condition.includes('涉及价格/Rate Code')) {
+    return (
+      !isEmptyReservationValue(valueForConditionPath(values, field, 'extracted_fields.rate_code_result')) ||
+      hasNonEmptyValueWithPrefix(values, 'extracted_fields.rate_code_result.') ||
+      matrixContains(field.task_subtype, 'manual_rate_code_or_settlement_price')
+    )
+  }
+  if (condition.includes('需要价格确认')) {
+    return !isEmptyReservationValue(valueForConditionPath(values, field, 'extracted_fields.rate_code_result.settlement_price'))
+  }
+  if (condition.includes('有复合单价') || condition.includes('fix_charge_required=true')) {
+    return (
+      isBooleanTrue(valueForConditionPath(values, field, 'extracted_fields.fix_charge_required')) ||
+      !isEmptyReservationValue(valueForConditionPath(values, field, 'extracted_fields.fix_charge_items[]'))
+    )
+  }
+  if (condition.includes('allocation_split_from_parent=true')) {
+    return isBooleanTrue(valueForConditionPath(values, field, 'extracted_fields.allocation_split_from_parent'))
+  }
+  if (condition.includes('来自QBD/LianTai表格')) {
+    return !isEmptyReservationValue(valueForConditionPath(values, field, 'extracted_fields.table_evidence'))
+  }
+  if (condition.includes('有Group目标')) {
+    return !isEmptyReservationValue(valueForConditionPath(values, field, 'case_keys.group_code')) || isGroupOrAllotmentTarget(values, field)
+  }
+  if (condition.includes('有FIT目标') || condition.includes('FIT取消')) {
+    return !isEmptyReservationValue(valueForConditionPath(values, field, 'case_keys.confirmation_number')) || isFitTarget(values, field)
+  }
+  if (condition.includes('有before/after修改')) {
+    return !isEmptyReservationValue(valueForConditionPath(values, field, 'extracted_fields.before_after'))
+  }
+  if (condition.includes('update_fix_charge')) {
+    return matrixContains(field.task_subtype, 'update_fix_charge') || isBooleanTrue(valueForConditionPath(values, field, 'extracted_fields.fix_charge_required'))
+  }
+  return true
+}
+
 export function isReservationFieldRequired(field: ReservationTaskFieldResult): boolean {
   return isRuleTruthy(field.required_rule)
 }
@@ -95,6 +173,105 @@ export function buildInitialFieldValues(fields: ReservationTaskFieldResult[], pa
   }, {})
 }
 
+export function buildEditableFieldValues(
+  fields: ReservationTaskFieldResult[],
+  values: ReservationRecord,
+  readOnly: boolean,
+): ReservationRecord {
+  if (readOnly) {
+    return {}
+  }
+  return fields
+    .filter((field) => isReservationFieldActive(field, values))
+    .filter((field) => isReservationFieldEditable(field, readOnly))
+    .reduce<ReservationRecord>((payload, field) => {
+      payload[field.field_path] = field.field_path in values ? values[field.field_path] : field.value ?? ''
+      return payload
+    }, {})
+}
+
+export function validateReservationFieldValues(
+  fields: ReservationTaskFieldResult[],
+  values: ReservationRecord,
+): ReservationFieldValidationErrors {
+  return fields.filter((field) => isReservationFieldActive(field, values)).reduce<ReservationFieldValidationErrors>((errors, field) => {
+    const value = values[field.field_path] ?? field.value ?? ''
+    if (isReservationFieldRequired(field) && isEmptyReservationValue(value)) {
+      errors[field.field_path] = createValidationError(field, 'required')
+      return errors
+    }
+
+    if (isEmptyReservationValue(value)) {
+      return errors
+    }
+
+    if (isSelectField(field) && !parseEnumOptions(field.enum_options).some((option) => option.value === String(value))) {
+      errors[field.field_path] = createValidationError(field, 'enum')
+      return errors
+    }
+
+    if (isDateField(field) && !isIsoLocalDate(String(value))) {
+      errors[field.field_path] = createValidationError(field, 'date')
+      return errors
+    }
+
+    if (isNumberField(field) && !Number.isFinite(Number(value))) {
+      errors[field.field_path] = createValidationError(field, 'number')
+    }
+    return errors
+  }, {})
+}
+
+function valueForConditionPath(
+  values: ReservationRecord,
+  currentField: ReservationTaskFieldResult,
+  fieldPath: string,
+): unknown {
+  if (fieldPath in values) {
+    return values[fieldPath]
+  }
+  if (fieldPath === currentField.field_path) {
+    return currentField.value
+  }
+  return undefined
+}
+
+function hasNonEmptyValueWithPrefix(values: ReservationRecord, prefix: string): boolean {
+  return Object.entries(values).some(([key, value]) => key.startsWith(prefix) && !isEmptyReservationValue(value))
+}
+
+function isFitTarget(values: ReservationRecord, field: ReservationTaskFieldResult): boolean {
+  const target = stringifyConditionValue(valueForConditionPath(values, field, 'extracted_fields.booking_object_type'))
+  return target.includes('FIT') || target.includes('RESERVATION')
+}
+
+function isGroupOrAllotmentTarget(values: ReservationRecord, field: ReservationTaskFieldResult): boolean {
+  const target = stringifyConditionValue(valueForConditionPath(values, field, 'extracted_fields.booking_object_type'))
+  return target.includes('GROUP') || target.includes('ALLOTMENT') || !isEmptyReservationValue(valueForConditionPath(values, field, 'case_keys.group_code'))
+}
+
+function stringifyConditionValue(value: unknown): string {
+  return value === null || value === undefined ? '' : String(value).trim().toUpperCase()
+}
+
+function matrixContains(value: string | null | undefined, keyword: string): boolean {
+  return Boolean(value?.toLowerCase().includes(keyword.toLowerCase()))
+}
+
+function isBooleanTrue(value: unknown): boolean {
+  return value === true || String(value).trim().toLowerCase() === 'true' || String(value).trim() === '是'
+}
+
+function createValidationError(
+  field: ReservationTaskFieldResult,
+  code: ReservationFieldValidationErrorCode,
+): ReservationFieldValidationError {
+  return {
+    code,
+    field_name: field.display_name,
+  }
+}
+
 export function stringifyReservationValue(value: unknown, emptyLabel: string): string {
   if (value === null || value === undefined || value === '') {
     return emptyLabel
@@ -108,6 +285,27 @@ export function stringifyReservationValue(value: unknown, emptyLabel: string): s
   return String(value)
 }
 
+function isEmptyReservationValue(value: unknown): boolean {
+  if (value === null || value === undefined) {
+    return true
+  }
+  if (typeof value === 'string') {
+    return value.trim() === ''
+  }
+  if (Array.isArray(value)) {
+    return value.length === 0
+  }
+  return false
+}
+
+function isIsoLocalDate(value: string): boolean {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return false
+  }
+  const date = new Date(`${value}T00:00:00Z`)
+  return !Number.isNaN(date.getTime()) && date.toISOString().slice(0, 10) === value
+}
+
 function isRuleTruthy(value: string | null): boolean {
   if (!value) {
     return false
diff --git a/client/src/views/reservation/ReservationOrderDetailView.vue b/client/src/views/reservation/ReservationOrderDetailView.vue
index 2e0560f..f3dee5a 100644
--- a/client/src/views/reservation/ReservationOrderDetailView.vue
+++ b/client/src/views/reservation/ReservationOrderDetailView.vue
@@ -70,7 +70,42 @@
 
           <section class="th-section source-gap">
             <h2>{{ t('task.evidence') }}</h2>
-            <p>{{ t('order.sourceSummaryPending') }}</p>
+            <template v-if="activeTask">
+              <dl>
+                <div>
+                  <dt>{{ t('task.sourceSubject') }}</dt>
+                  <dd>{{ activeTask.source_subject ?? '-' }}</dd>
+                </div>
+                <div>
+                  <dt>{{ t('task.sourceSender') }}</dt>
+                  <dd>{{ activeTask.source_sender_summary ?? '-' }}</dd>
+                </div>
+                <div>
+                  <dt>{{ t('task.sourceReceivedAt') }}</dt>
+                  <dd>{{ formatReservationDateTime(activeTask.source_received_at) }}</dd>
+                </div>
+                <div>
+                  <dt>{{ t('order.conversationMessageCount') }}</dt>
+                  <dd>{{ activeTask.conversation_message_count ?? '-' }}</dd>
+                </div>
+              </dl>
+              <RouterLink
+                v-if="activeTask.source_message_id"
+                class="source-link"
+                :to="`/reservation/source-messages/${activeTask.source_message_id}/conversation`"
+              >
+                {{ t('task.viewConversation') }}
+              </RouterLink>
+              <span
+                v-else
+                class="source-link source-link--disabled"
+              >
+                {{ t('common.endpointMissing') }}
+              </span>
+            </template>
+            <p v-else>
+              {{ t('common.noData') }}
+            </p>
           </section>
         </aside>
 
@@ -91,7 +126,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
 import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
@@ -109,6 +144,7 @@ const detail = ref<ReservationOrderDetailResult | null>(null)
 const activeTaskId = ref('')
 
 const orderId = computed(() => String(route.params.orderId ?? ''))
+const activeTask = computed(() => detail.value?.tasks.find((task) => task.task_id === activeTaskId.value) ?? null)
 
 watch(
   orderId,
@@ -231,7 +267,8 @@ async function loadOrder(nextOrderId: string): Promise<void> {
 }
 
 .source-gap h2,
-.source-gap p {
+.source-gap p,
+.source-gap dl {
   margin: 0;
 }
 
@@ -246,6 +283,36 @@ async function loadOrder(nextOrderId: string): Promise<void> {
   line-height: 1.6;
 }
 
+.source-gap dl {
+  display: grid;
+  gap: 10px;
+}
+
+.source-gap dt {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.source-gap dd {
+  margin: 4px 0 0;
+  color: var(--th-color-slate-900);
+  font-size: 13px;
+  font-weight: 800;
+  overflow-wrap: anywhere;
+}
+
+.source-link {
+  color: var(--th-color-blue-600);
+  font-size: 13px;
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.source-link--disabled {
+  color: var(--th-color-slate-500);
+}
+
 @media (max-width: 1100px) {
   .order-summary dl {
     grid-template-columns: repeat(3, minmax(0, 1fr));
diff --git a/client/src/views/reservation/ReservationOrderListView.vue b/client/src/views/reservation/ReservationOrderListView.vue
index 08f0fff..43f9659 100644
--- a/client/src/views/reservation/ReservationOrderListView.vue
+++ b/client/src/views/reservation/ReservationOrderListView.vue
@@ -12,6 +12,13 @@
         <h2 class="th-section-title">
           {{ t('workbench.filters') }}
         </h2>
+        <button
+          type="button"
+          class="text-button"
+          @click="resetFilters"
+        >
+          {{ t('workbench.reset') }}
+        </button>
       </div>
       <div class="filter-grid">
         <label>
@@ -20,11 +27,15 @@
             v-model="filters.keyword"
             type="search"
             placeholder="GRP-001 / CNF123456"
+            @input="resetToFirstPage"
           >
         </label>
         <label>
           <span>{{ t('workbench.orderStatus') }}</span>
-          <select v-model="filters.order_status">
+          <select
+            v-model="filters.order_status"
+            @change="resetToFirstPage"
+          >
             <option value="">All</option>
             <option value="TEMPORARY">{{ t('status.TEMPORARY') }}</option>
             <option value="ACTIVE">{{ t('status.ACTIVE') }}</option>
@@ -41,25 +52,13 @@
             {{ t('orderList.tableTitle') }}
           </h2>
           <p class="th-muted">
-            {{ pendingMessage || t('common.noData') }}
+            {{ t('workbench.totalPrefix') }} {{ total }} {{ t('orderList.totalSuffix') }}
           </p>
         </div>
       </div>
 
       <div
-        v-if="pendingMessage"
-        class="empty-state"
-      >
-        <i
-          class="pi pi-info-circle"
-          aria-hidden="true"
-        />
-        <strong>{{ t('common.endpointPending') }}</strong>
-        <span>{{ pendingMessage }}</span>
-      </div>
-
-      <div
-        v-else-if="loading"
+        v-if="loading"
         class="empty-state"
       >
         {{ t('common.loading') }}
@@ -78,22 +77,118 @@
       >
         {{ t('common.noData') }}
       </div>
+
+      <div
+        v-else
+        class="table-wrap"
+      >
+        <table>
+          <thead>
+            <tr>
+              <th>{{ t('orderList.columns.order') }}</th>
+              <th>{{ t('orderList.columns.status') }}</th>
+              <th>{{ t('orderList.columns.openTasks') }}</th>
+              <th>{{ t('orderList.columns.createdAt') }}</th>
+              <th>{{ t('workbench.columns.updatedAt') }}</th>
+              <th>{{ t('workbench.columns.operation') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="order in orders"
+              :key="order.order_id"
+            >
+              <td>
+                <strong>{{ formatOrderKey(order) }}</strong>
+                <small class="th-code">{{ order.order_id }}</small>
+              </td>
+              <td><ReservationStatusBadge :status="order.order_status" /></td>
+              <td>{{ order.open_task_count ?? 0 }}</td>
+              <td>{{ formatReservationDateTime(order.created_at) }}</td>
+              <td>{{ formatReservationDateTime(order.updated_at) }}</td>
+              <td>
+                <div class="row-actions">
+                  <RouterLink
+                    class="row-action"
+                    :to="`/reservation/orders/${order.order_id}`"
+                  >
+                    {{ t('orderList.viewDetail') }}
+                  </RouterLink>
+                  <RouterLink
+                    v-if="order.next_processable_task_id"
+                    class="row-action"
+                    :to="`/reservation/tasks/${order.next_processable_task_id}`"
+                  >
+                    {{ t('orderList.continueTask') }}
+                  </RouterLink>
+                  <span
+                    v-else
+                    class="row-action row-action--muted"
+                  >
+                    {{ t('orderList.noOpenTask') }}
+                  </span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <footer class="pagination-bar">
+        <label class="page-size-control">
+          <span>{{ t('common.pageSize') }}</span>
+          <select
+            v-model.number="filters.page_size"
+            @change="resetToFirstPage"
+          >
+            <option :value="10">10</option>
+            <option :value="20">20</option>
+            <option :value="50">50</option>
+          </select>
+        </label>
+        <div class="pagination-actions">
+          <button
+            type="button"
+            class="secondary-button"
+            :disabled="currentPage <= 1 || loading"
+            @click="goToPage(currentPage - 1)"
+          >
+            {{ t('common.previousPage') }}
+          </button>
+          <span>{{ t('common.pageStatus', { current: currentPage, total: totalPages }) }}</span>
+          <button
+            type="button"
+            class="secondary-button"
+            :disabled="currentPage >= totalPages || loading"
+            @click="goToPage(currentPage + 1)"
+          >
+            {{ t('common.nextPage') }}
+          </button>
+        </div>
+      </footer>
     </section>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
-import { EndpointPendingError, fetchReservationOrders } from '@/services/reservationService'
-import type { ReservationOrderListFilters, ReservationOrderListItem } from '@/types/reservation'
+import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
+import { fetchReservationOrders } from '@/services/reservationService'
+import type { ReservationOrderListFilters, ReservationOrderListItem, ReservationPageResult } from '@/types/reservation'
+import { formatReservationDateTime } from '@/utils/reservationFormat'
 
 const { t } = useI18n()
 const loading = ref(false)
 const errorMessage = ref('')
-const pendingMessage = ref('')
 const orders = ref<ReservationOrderListItem[]>([])
+const page = ref(createPage(1, 20, 0))
+const total = computed(() => page.value.total)
+const currentPage = computed(() => page.value.page_num)
+const totalPages = computed(() => Math.max(1, Math.ceil(page.value.total / Math.max(page.value.page_size, 1))))
+let orderListRequestSequence = 0
 const filters = reactive<ReservationOrderListFilters>({
   keyword: '',
   order_status: '',
@@ -105,24 +200,68 @@ onMounted(() => {
   void loadOrders()
 })
 
+watch(filters, () => {
+  void loadOrders()
+})
+
 async function loadOrders(): Promise<void> {
+  const requestSequence = ++orderListRequestSequence
   loading.value = true
   errorMessage.value = ''
-  pendingMessage.value = ''
   try {
     const result = await fetchReservationOrders({ ...filters })
-    orders.value = result.items
-  } catch (error) {
-    orders.value = []
-    if (error instanceof EndpointPendingError) {
-      pendingMessage.value = t('orderList.endpointPending')
+    if (requestSequence !== orderListRequestSequence) {
       return
     }
+    orders.value = result.items
+    page.value = result.page
+  } catch (error) {
+    if (requestSequence !== orderListRequestSequence) {
+      return
+    }
+    orders.value = []
+    page.value = createPage(filters.page_num ?? 1, filters.page_size ?? 20, 0)
     errorMessage.value = error instanceof Error ? error.message : String(error)
   } finally {
-    loading.value = false
+    if (requestSequence === orderListRequestSequence) {
+      loading.value = false
+    }
   }
 }
+
+function resetFilters(): void {
+  filters.keyword = ''
+  filters.order_status = ''
+  filters.page_num = 1
+  filters.page_size = 20
+}
+
+function resetToFirstPage(): void {
+  filters.page_num = 1
+}
+
+function goToPage(page: number): void {
+  filters.page_num = Math.min(Math.max(page, 1), totalPages.value)
+}
+
+function createPage(pageNum: number, pageSize: number, total: number): ReservationPageResult {
+  return {
+    page_num: pageNum,
+    page_size: pageSize,
+    total,
+  }
+}
+
+function formatOrderKey(order: ReservationOrderListItem): string {
+  return (
+    order.display_order_key ??
+    order.group_code ??
+    order.confirmation_number ??
+    order.temporary_order_no ??
+    order.display_name ??
+    order.order_id
+  )
+}
 </script>
 
 <style scoped>
@@ -179,6 +318,22 @@ async function loadOrders(): Promise<void> {
   padding: 8px 10px;
 }
 
+.text-button,
+.row-action {
+  border: 0;
+  background: transparent;
+  color: var(--th-color-blue-600);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.row-action--muted {
+  color: var(--th-color-slate-500);
+  cursor: default;
+}
+
 .empty-state {
   min-height: 220px;
   display: grid;
@@ -198,9 +353,114 @@ async function loadOrders(): Promise<void> {
   color: var(--th-color-danger);
 }
 
+.table-section {
+  overflow: hidden;
+}
+
+.table-wrap {
+  overflow-x: auto;
+  padding: 14px 20px 20px;
+}
+
+table {
+  width: 100%;
+  min-width: 920px;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  border-bottom: 1px solid var(--th-color-slate-200);
+  padding: 14px 10px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+th {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+td {
+  color: var(--th-color-slate-900);
+  font-size: 13px;
+}
+
+td strong,
+td small {
+  display: block;
+}
+
+td small {
+  margin-top: 4px;
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+}
+
+.row-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.pagination-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  border-top: 1px solid var(--th-color-slate-200);
+  padding: 14px 20px 18px;
+}
+
+.page-size-control,
+.pagination-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.page-size-control span,
+.pagination-actions span {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.page-size-control select {
+  min-height: 34px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-white);
+  color: var(--th-color-slate-900);
+  padding: 6px 8px;
+}
+
+.secondary-button {
+  min-height: 34px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-white);
+  color: var(--th-color-slate-700);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 800;
+  padding: 6px 12px;
+}
+
+.secondary-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 @media (max-width: 720px) {
   .filter-grid {
     grid-template-columns: 1fr;
   }
+
+  .pagination-bar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
 }
 </style>
diff --git a/client/src/views/reservation/ReservationSourceMessageConversationView.vue b/client/src/views/reservation/ReservationSourceMessageConversationView.vue
index 7855a76..4535a69 100644
--- a/client/src/views/reservation/ReservationSourceMessageConversationView.vue
+++ b/client/src/views/reservation/ReservationSourceMessageConversationView.vue
@@ -9,18 +9,7 @@
 
     <section class="th-section conversation-section">
       <div
-        v-if="pendingMessage"
-        class="empty-state"
-      >
-        <i
-          class="pi pi-envelope"
-          aria-hidden="true"
-        />
-        <strong>{{ t('common.endpointPending') }}</strong>
-        <span>{{ pendingMessage }}</span>
-      </div>
-      <div
-        v-else-if="loading"
+        v-if="loading"
         class="empty-state"
       >
         {{ t('common.loading') }}
@@ -37,25 +26,143 @@
       >
         {{ t('common.noData') }}
       </div>
+
+      <template v-else>
+        <header class="conversation-summary">
+          <div>
+            <p>{{ t('conversation.subject') }}</p>
+            <h2>{{ conversation.conversation.subject ?? '-' }}</h2>
+          </div>
+          <dl>
+            <div>
+              <dt>{{ t('conversation.messageCount') }}</dt>
+              <dd>{{ conversation.conversation.message_count }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('conversation.channel') }}</dt>
+              <dd>{{ conversation.conversation.channel }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('conversation.firstReceivedAt') }}</dt>
+              <dd>{{ formatReservationDateTime(conversation.conversation.first_received_at) }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('conversation.lastReceivedAt') }}</dt>
+              <dd>{{ formatReservationDateTime(conversation.conversation.last_received_at) }}</dd>
+            </div>
+          </dl>
+        </header>
+
+        <div class="message-stack">
+          <article
+            v-for="message in conversation.messages"
+            :key="message.id"
+            class="message-card"
+          >
+            <header class="message-card__header">
+              <div>
+                <p>{{ message.sender_summary ?? '-' }}</p>
+                <h3>{{ message.subject ?? conversation.conversation.subject ?? '-' }}</h3>
+              </div>
+              <span>{{ formatReservationDateTime(message.received_at ?? message.source_sent_at) }}</span>
+            </header>
+
+            <!-- eslint-disable vue/no-v-html -->
+            <div
+              v-if="message.html_body"
+              class="message-body message-body--html"
+              v-html="message.html_body"
+            />
+            <!-- eslint-enable vue/no-v-html -->
+            <pre
+              v-else
+              class="message-body"
+            >{{ formatTextMessageBody(message) }}</pre>
+
+            <section
+              v-if="message.attachments.length || message.inline_images.length"
+              class="message-related"
+            >
+              <h4>{{ t('conversation.attachments') }}</h4>
+              <ul>
+                <li
+                  v-for="(media, mediaIndex) in combinedMedia(message)"
+                  :key="mediaKey(media, mediaIndex)"
+                >
+                  <a
+                    v-if="safeExternalUrl(media.externalUrl)"
+                    :href="safeExternalUrl(media.externalUrl)"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {{ media.fileName ?? media.externalMediaId ?? t('conversation.unnamedAttachment') }}
+                  </a>
+                  <span v-else>
+                    {{ media.fileName ?? media.externalMediaId ?? t('conversation.unnamedAttachment') }}
+                  </span>
+                  <small>{{ formatMediaSize(media.sizeBytes) }}</small>
+                </li>
+              </ul>
+            </section>
+
+            <section
+              v-if="message.related_orders.length || message.related_tasks.length"
+              class="message-related message-related--grid"
+            >
+              <div>
+                <h4>{{ t('conversation.relatedOrders') }}</h4>
+                <ul>
+                  <li
+                    v-for="order in message.related_orders"
+                    :key="order.order_id"
+                  >
+                    <RouterLink :to="`/reservation/orders/${order.order_id}`">
+                      {{ order.display_order_key ?? order.order_id }}
+                    </RouterLink>
+                  </li>
+                </ul>
+              </div>
+              <div>
+                <h4>{{ t('conversation.relatedTasks') }}</h4>
+                <ul>
+                  <li
+                    v-for="task in message.related_tasks"
+                    :key="task.task_id"
+                  >
+                    <RouterLink :to="`/reservation/tasks/${task.task_id}`">
+                      {{ task.card_name ?? task.task_type }}
+                    </RouterLink>
+                  </li>
+                </ul>
+              </div>
+            </section>
+          </article>
+        </div>
+      </template>
     </section>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
-import { EndpointPendingError, fetchSourceMessageConversation } from '@/services/reservationService'
-import type { SourceMessageConversationResult } from '@/types/reservation'
+import { fetchSourceMessageConversation } from '@/services/reservationService'
+import type {
+  SourceMessageConversationItem,
+  SourceMessageConversationResult,
+  SourceMessageOriginalMedia,
+} from '@/types/reservation'
+import { formatReservationDateTime } from '@/utils/reservationFormat'
 
 const route = useRoute()
 const { t } = useI18n()
 const loading = ref(false)
 const errorMessage = ref('')
-const pendingMessage = ref('')
 const conversation = ref<SourceMessageConversationResult | null>(null)
 const sourceMessageId = computed(() => String(route.params.sourceMessageId ?? ''))
+let conversationRequestSequence = 0
 
 watch(
   sourceMessageId,
@@ -66,22 +173,81 @@ watch(
 )
 
 async function loadConversation(nextSourceMessageId: string): Promise<void> {
+  const requestSequence = ++conversationRequestSequence
+  if (!nextSourceMessageId) {
+    conversation.value = null
+    return
+  }
   loading.value = true
   errorMessage.value = ''
-  pendingMessage.value = ''
   conversation.value = null
   try {
-    conversation.value = await fetchSourceMessageConversation(nextSourceMessageId)
+    const result = await fetchSourceMessageConversation(nextSourceMessageId)
+    if (requestSequence !== conversationRequestSequence) {
+      return
+    }
+    conversation.value = normalizeConversation(result)
   } catch (error) {
-    if (error instanceof EndpointPendingError) {
-      pendingMessage.value = t('conversation.endpointPending')
+    if (requestSequence !== conversationRequestSequence) {
       return
     }
     errorMessage.value = error instanceof Error ? error.message : String(error)
   } finally {
-    loading.value = false
+    if (requestSequence === conversationRequestSequence) {
+      loading.value = false
+    }
   }
 }
+
+function normalizeConversation(result: SourceMessageConversationResult): SourceMessageConversationResult {
+  return {
+    conversation: result.conversation,
+    messages: result.messages.map((message) => ({
+      ...message,
+      attachments: message.attachments ?? [],
+      inline_images: message.inline_images ?? [],
+      related_orders: message.related_orders ?? [],
+      related_tasks: message.related_tasks ?? [],
+    })),
+  }
+}
+
+function formatTextMessageBody(message: SourceMessageConversationItem): string {
+  return message.text_body || t('conversation.emptyBody')
+}
+
+function combinedMedia(message: SourceMessageConversationItem): SourceMessageOriginalMedia[] {
+  return [...message.attachments, ...message.inline_images]
+}
+
+function mediaKey(media: SourceMessageOriginalMedia, index: number): string {
+  return `${media.externalMediaId ?? media.fileName ?? media.mediaType ?? 'media'}-${index}`
+}
+
+function safeExternalUrl(value: string | null): string | undefined {
+  if (!value) {
+    return undefined
+  }
+  try {
+    const url = new URL(value)
+    return url.protocol === 'http:' || url.protocol === 'https:' ? value : undefined
+  } catch {
+    return undefined
+  }
+}
+
+function formatMediaSize(sizeBytes: number | null): string {
+  if (!sizeBytes) {
+    return '-'
+  }
+  if (sizeBytes < 1024) {
+    return `${sizeBytes} B`
+  }
+  if (sizeBytes < 1024 * 1024) {
+    return `${Math.round(sizeBytes / 1024)} KB`
+  }
+  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`
+}
 </script>
 
 <style scoped>
@@ -106,7 +272,10 @@ async function loadConversation(nextSourceMessageId: string): Promise<void> {
 }
 
 .conversation-section {
+  display: grid;
+  gap: 18px;
   min-height: 360px;
+  padding: 20px;
 }
 
 .empty-state {
@@ -127,4 +296,170 @@ async function loadConversation(nextSourceMessageId: string): Promise<void> {
 .empty-state--error {
   color: var(--th-color-danger);
 }
+
+.conversation-summary {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
+  gap: 20px;
+  align-items: start;
+}
+
+.conversation-summary p,
+.conversation-summary h2,
+.conversation-summary dl {
+  margin: 0;
+}
+
+.conversation-summary p {
+  color: var(--th-color-blue-600);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.conversation-summary h2 {
+  margin-top: 5px;
+  color: var(--th-color-slate-900);
+  font-size: 22px;
+  line-height: 1.25;
+}
+
+.conversation-summary dl {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.conversation-summary dt {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.conversation-summary dd {
+  margin: 5px 0 0;
+  color: var(--th-color-slate-900);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.message-stack {
+  display: grid;
+  gap: 14px;
+}
+
+.message-card {
+  display: grid;
+  gap: 14px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-md);
+  background: var(--th-color-white);
+  padding: 16px;
+}
+
+.message-card__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.message-card__header p,
+.message-card__header h3 {
+  margin: 0;
+}
+
+.message-card__header p,
+.message-card__header span {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.message-card__header h3 {
+  margin-top: 5px;
+  color: var(--th-color-slate-900);
+  font-size: 16px;
+}
+
+.message-body {
+  max-height: none;
+  margin: 0;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-slate-50);
+  color: var(--th-color-slate-900);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.7;
+  padding: 12px;
+}
+
+.message-body--html {
+  display: block;
+}
+
+.message-body--html :deep(*) {
+  max-width: 100%;
+}
+
+.message-body--html :deep(img) {
+  height: auto;
+}
+
+.message-related {
+  display: grid;
+  gap: 8px;
+}
+
+.message-related--grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.message-related h4,
+.message-related ul {
+  margin: 0;
+}
+
+.message-related h4 {
+  color: var(--th-color-slate-900);
+  font-size: 13px;
+}
+
+.message-related ul {
+  display: grid;
+  gap: 6px;
+  list-style: none;
+  padding: 0;
+}
+
+.message-related li {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--th-color-slate-700);
+  font-size: 13px;
+}
+
+.message-related a {
+  color: var(--th-color-blue-600);
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.message-related small {
+  color: var(--th-color-slate-500);
+}
+
+@media (max-width: 860px) {
+  .conversation-summary,
+  .message-related--grid {
+    grid-template-columns: 1fr;
+  }
+
+  .message-card__header {
+    display: grid;
+  }
+}
 </style>
diff --git a/client/src/views/reservation/ReservationTaskListView.vue b/client/src/views/reservation/ReservationTaskListView.vue
index fba7a87..49d6e02 100644
--- a/client/src/views/reservation/ReservationTaskListView.vue
+++ b/client/src/views/reservation/ReservationTaskListView.vue
@@ -28,11 +28,15 @@
             v-model="filters.keyword"
             type="search"
             placeholder="GRP-001 / Booking"
+            @input="resetToFirstPage"
           >
         </label>
         <label>
           <span>{{ t('taskList.taskType') }}</span>
-          <select v-model="filters.task_type">
+          <select
+            v-model="filters.task_type"
+            @change="resetToFirstPage"
+          >
             <option value="">All</option>
             <option value="NEW_BOOKING">{{ t('cardType.NEW_BOOKING') }}</option>
             <option value="UPDATE_BOOKING">{{ t('cardType.UPDATE_BOOKING') }}</option>
@@ -43,7 +47,10 @@
         </label>
         <label>
           <span>{{ t('workbench.taskStatus') }}</span>
-          <select v-model="filters.task_status">
+          <select
+            v-model="filters.task_status"
+            @change="resetToFirstPage"
+          >
             <option value="">All</option>
             <option value="PENDING_CONFIRM">{{ t('status.PENDING_CONFIRM') }}</option>
             <option value="READY">{{ t('status.READY') }}</option>
@@ -51,6 +58,30 @@
             <option value="COMPLETED">{{ t('status.COMPLETED') }}</option>
           </select>
         </label>
+        <label>
+          <span>{{ t('workbench.orderStatus') }}</span>
+          <select
+            value=""
+            disabled
+          >
+            <option value="">All</option>
+            <option value="TEMPORARY">{{ t('status.TEMPORARY') }}</option>
+            <option value="ACTIVE">{{ t('status.ACTIVE') }}</option>
+            <option value="ENDED">{{ t('status.ENDED') }}</option>
+          </select>
+          <small class="filter-hint">{{ t('taskList.orderStatusFilterPending') }}</small>
+        </label>
+        <label>
+          <span>{{ t('taskList.queueParticipation') }}</span>
+          <select
+            v-model="filters.queue_participation"
+            @change="resetToFirstPage"
+          >
+            <option :value="undefined">{{ t('taskList.queueAll') }}</option>
+            <option :value="true">{{ t('taskList.queueIncluded') }}</option>
+            <option :value="false">{{ t('taskList.queueExcluded') }}</option>
+          </select>
+        </label>
       </div>
     </section>
 
@@ -61,7 +92,7 @@
             {{ t('taskList.tableTitle') }}
           </h2>
           <p class="th-muted">
-            {{ t('workbench.totalPrefix') }} {{ tasks.length }} {{ t('taskList.totalSuffix') }}
+            {{ t('workbench.totalPrefix') }} {{ total }} {{ t('taskList.totalSuffix') }}
           </p>
         </div>
       </div>
@@ -139,7 +170,7 @@
                     {{ t('taskList.viewOrder') }}
                   </RouterLink>
                   <span
-                    v-if="!task.source_message_id || !task.external_conversation_id"
+                    v-if="!task.source_message_id"
                     class="pending-link"
                   >
                     {{ t('common.endpointMissing') }}
@@ -157,28 +188,66 @@
           </tbody>
         </table>
       </div>
+
+      <footer class="pagination-bar">
+        <label class="page-size-control">
+          <span>{{ t('common.pageSize') }}</span>
+          <select
+            v-model.number="filters.page_size"
+            @change="resetToFirstPage"
+          >
+            <option :value="10">10</option>
+            <option :value="20">20</option>
+            <option :value="50">50</option>
+          </select>
+        </label>
+        <div class="pagination-actions">
+          <button
+            type="button"
+            class="secondary-button"
+            :disabled="currentPage <= 1 || loading"
+            @click="goToPage(currentPage - 1)"
+          >
+            {{ t('common.previousPage') }}
+          </button>
+          <span>{{ t('common.pageStatus', { current: currentPage, total: totalPages }) }}</span>
+          <button
+            type="button"
+            class="secondary-button"
+            :disabled="currentPage >= totalPages || loading"
+            @click="goToPage(currentPage + 1)"
+          >
+            {{ t('common.nextPage') }}
+          </button>
+        </div>
+      </footer>
     </section>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
 import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
 import { fetchReservationTaskList } from '@/services/reservationService'
-import type { ReservationTaskListFilters, ReservationTaskListItem } from '@/types/reservation'
+import type { ReservationPageResult, ReservationTaskListFilters, ReservationTaskListItem } from '@/types/reservation'
 
 const { t } = useI18n()
 const loading = ref(false)
 const errorMessage = ref('')
 const tasks = ref<ReservationTaskListItem[]>([])
+const page = ref(createPage(1, 20, 0))
+const total = computed(() => page.value.total)
+const currentPage = computed(() => page.value.page_num)
+const totalPages = computed(() => Math.max(1, Math.ceil(page.value.total / Math.max(page.value.page_size, 1))))
 let taskListRequestSequence = 0
 const filters = reactive<ReservationTaskListFilters>({
   keyword: '',
   task_type: '',
   task_status: '',
+  queue_participation: undefined,
   page_num: 1,
   page_size: 20,
 })
@@ -201,11 +270,13 @@ async function loadTasks(): Promise<void> {
       return
     }
     tasks.value = result.items
+    page.value = result.page
   } catch (error) {
     if (requestSequence !== taskListRequestSequence) {
       return
     }
     tasks.value = []
+    page.value = createPage(filters.page_num ?? 1, filters.page_size ?? 20, 0)
     errorMessage.value = error instanceof Error ? error.message : String(error)
   } finally {
     if (requestSequence === taskListRequestSequence) {
@@ -218,6 +289,25 @@ function resetFilters(): void {
   filters.keyword = ''
   filters.task_type = ''
   filters.task_status = ''
+  filters.queue_participation = undefined
+  filters.page_num = 1
+  filters.page_size = 20
+}
+
+function resetToFirstPage(): void {
+  filters.page_num = 1
+}
+
+function goToPage(page: number): void {
+  filters.page_num = Math.min(Math.max(page, 1), totalPages.value)
+}
+
+function createPage(pageNum: number, pageSize: number, total: number): ReservationPageResult {
+  return {
+    page_num: pageNum,
+    page_size: pageSize,
+    total,
+  }
 }
 </script>
 
@@ -248,7 +338,7 @@ function resetFilters(): void {
 
 .filter-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 14px;
   padding: 18px 20px 0;
 }
@@ -275,6 +365,19 @@ function resetFilters(): void {
   padding: 8px 10px;
 }
 
+.filter-grid select:disabled {
+  color: var(--th-color-slate-500);
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+
+.filter-hint {
+  color: var(--th-color-warning);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.45;
+}
+
 .text-button,
 .row-action {
   border: 0;
@@ -355,9 +458,63 @@ td small {
   font-weight: 800;
 }
 
+.pagination-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  border-top: 1px solid var(--th-color-slate-200);
+  padding: 14px 20px 18px;
+}
+
+.page-size-control,
+.pagination-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.page-size-control span,
+.pagination-actions span {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.page-size-control select {
+  min-height: 34px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-white);
+  color: var(--th-color-slate-900);
+  padding: 6px 8px;
+}
+
+.secondary-button {
+  min-height: 34px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-white);
+  color: var(--th-color-slate-700);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 800;
+  padding: 6px 12px;
+}
+
+.secondary-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 @media (max-width: 900px) {
   .filter-grid {
     grid-template-columns: 1fr;
   }
+
+  .pagination-bar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
 }
 </style>
diff --git a/docs/project/frontend-backend/README.md b/docs/project/frontend-backend/README.md
index aed4f35..1db07b2 100644
--- a/docs/project/frontend-backend/README.md
+++ b/docs/project/frontend-backend/README.md
@@ -40,6 +40,9 @@
 ## 5. 当前已明确后置事项
 
 - 普通任务切换订单接口后置。
+- 任务列表按订单状态 `order_status` 筛选待后端补充或确认。
+- 任务详情 / 任务写操作是否需要显式 `hotel_id` 待后端确认；前端已先统一配置 `VITE_RESERVATION_HOTEL_ID` 并用于列表和订单详情查询。
+- 邮件 `html_body` 已标记为需要 sanitize：前端联调阶段临时直渲只用于本地看效果，生产前请后端返回已清洗 HTML 或明确清洗字段，并确认 CSP / 外链图片 / 附件 URL 策略。
 - SuperAgent 查询接口 4 后置，当前先不开发。
 - SuperAgent 查询接口 3 涉及附件解析、OCR、Excel、voucher、rooming list 等能力，当前系统暂不具备，仍后置。
 - 用户身份 / 权限方案后置；当前后端审计 actor 仍是本地占位。
diff --git a/docs/project/frontend-backend/backend-to-frontend-notes.md b/docs/project/frontend-backend/backend-to-frontend-notes.md
index 8977988..f319ea5 100644
--- a/docs/project/frontend-backend/backend-to-frontend-notes.md
+++ b/docs/project/frontend-backend/backend-to-frontend-notes.md
@@ -49,7 +49,7 @@
 | `GET /api/source-messages` | 查询来源消息安全摘要 | 列表不返回邮件正文、HTML、附件 URL 或原始 payload。 |
 | `GET /api/source-messages/{id}` | 查询来源消息安全详情 | 只用于安全摘要详情。 |
 | `GET /api/source-messages/{id}/original` | 读取来源消息原文 | 需要受控访问头，返回 HTML 时前端展示前必须 sanitize。 |
-| `GET /api/source-messages/{sourceMessageId}/conversation` | 读取邮件会话详情 | 返回同一外部会话全部邮件的完整 text/html、附件外链、内联图片和关联订单 / 任务摘要；前端不传原文读取 key，但展示 HTML 前必须 sanitize。 |
+| `GET /api/source-messages/{sourceMessageId}/conversation` | 读取邮件会话详情 | 返回同一外部会话全部邮件的完整 text/html、附件外链、内联图片和关联订单 / 任务摘要；前端不传原文读取 key。2026-07-08 联调阶段前端可临时直渲 `html_body` 看效果；生产方案必须对 `html_body` 做 sanitize，建议后端返回已清洗 HTML 或明确清洗字段。 |
 
 ### 5.1 本轮新增 / 修改接口说明
 
@@ -79,10 +79,11 @@
 ### 5.3 邮件会话详情接入注意
 
 - `GET /api/source-messages/{sourceMessageId}/conversation` 只接收路径参数 `sourceMessageId`；第一版不接收 `hotelId`、`includeBody`、`includeRelated`。
+- 前端当前通过 `VITE_RESERVATION_HOTEL_ID` 统一配置 Reservation 默认酒店上下文，并会在订单列表、任务列表和订单详情查询中传 `hotel_id`；任务详情、任务写操作和邮件会话详情当前后端接口不接收该参数。
 - 后端会根据 `sourceMessageId` 定位 `external_conversation_id`，并返回同一会话下全部邮件；如果来源消息没有外部会话 ID，会降级返回当前单封邮件。
 - `messages[]` 按后端接收时间正序返回，前端不要重新按创建时间或任务时间排序。
 - 返回内容包含完整 `text_body`、`html_body`、`inline_images[]`、`attachments[]`、`related_orders[]`、`related_tasks[]`。
-- `html_sanitize_required=true` 时，前端必须先 sanitize 再渲染 HTML；不要使用未清洗的 `html_body` 直接设置 DOM。
+- `html_body` 已标记为需要 sanitize；`html_sanitize_required=true` 时，生产渲染必须使用清洗后的 HTML。当前为了联调观察效果，前端临时直接渲染原始 `html_body`，上线前需要后端 / 前端共同确认清洗字段、CSP、外链图片和附件 URL 策略。
 - `inline_images[]` 和 `attachments[]` 里的 `externalUrl` 可能包含有时效或访问凭证的外链，前端不得写入普通日志、错误上报、localStorage 或 URL query。
 - 会话详情接口由后端内部写原文读取审计，前端不传 `X-TH-Hotel-Source-Original-Read-Key`。
 - 会话详情外层字段主要是 snake_case，但媒体对象沿用原文读取接口字段，当前是 `mediaType`、`fileName`、`contentType`、`sizeBytes`、`externalUrl`、`externalMediaId` 这种 camelCase，前端类型定义需要单独处理。
diff --git a/docs/project/frontend-backend/frontend-to-backend-api-requests.md b/docs/project/frontend-backend/frontend-to-backend-api-requests.md
index 854a558..5df1001 100644
--- a/docs/project/frontend-backend/frontend-to-backend-api-requests.md
+++ b/docs/project/frontend-backend/frontend-to-backend-api-requests.md
@@ -9,7 +9,7 @@
 | 优先级 | 接口 | 页面 / 场景 | 状态 |
 | --- | --- | --- | --- |
 | P0 | 订单列表接口 `GET /api/reservation/orders` | 订单列表页、首页工作台 | 已完成第一版 |
-| P0 | 任务列表接口 `GET /api/reservation/tasks` | 任务列表菜单、订单详情任务入口 | 已完成第一版，已补来源邮件会话字段 |
+| P0 | 任务列表接口 `GET /api/reservation/tasks` | 任务列表菜单、订单详情任务入口 | 已完成第一版，已补来源邮件会话字段；`order_status` 筛选仍待后端补充或确认 |
 | P0 | 订单详情接口 `GET /api/reservation/orders/{orderId}` | 订单详情页 | 已完成第一版，已补 `tasks[]` 每个任务的来源邮件会话字段 |
 | P0 | 任务详情读取接口 `GET /api/reservation/tasks/{taskId}` | 任务详情页动态渲染 | 已完成第一版，已补来源邮件字段和 3.0 字段元数据 |
 | P0 | 任务详情操作接口 | 任务详情保存、确认、OPERA、审计 | 已完成；前端可直接接入 |
@@ -25,12 +25,12 @@
 
 | 接口 / 能力 | 当前后端状态 | 前端是否可直接接入 | 仍需后端处理 |
 | --- | --- | --- | --- |
-| `GET /api/reservation/tasks` | 已完成第一版，已补来源邮件会话字段 | 可以 | 暂无。 |
+| `GET /api/reservation/tasks` | 已完成第一版，已补来源邮件会话字段 | 可以 | 前端暂不传 `order_status`，如任务列表需要按订单状态筛选，请后端补 `order_status` 入参并明确匹配逻辑。 |
 | `GET /api/reservation/orders/{orderId}` | 已完成第一版，已补 `tasks[]` 来源邮件会话字段 | 可以 | 暂无。 |
-| `GET /api/reservation/tasks/{taskId}` | 已完成第一版，已补任务顶层来源邮件字段和 `fields[]` 3.0 元数据 | 可以 | 暂无。 |
-| `PUT /api/reservation/tasks/{taskId}/draft` | 已完成 | 可以 | 暂无。 |
-| `POST /api/reservation/tasks/{taskId}/confirm` | 已完成 | 可以 | 暂无。 |
-| `GET /api/reservation/tasks/{taskId}/audits` | 已完成 | 可以 | 暂无。 |
+| `GET /api/reservation/tasks/{taskId}` | 已完成第一版，已补任务顶层来源邮件字段和 `fields[]` 3.0 元数据 | 可以 | 当前 Controller 不接收 `hotel_id`；如后续多酒店隔离需要前端显式传酒店上下文，请后端补可选入参或确认按 taskId 全局唯一即可。 |
+| `PUT /api/reservation/tasks/{taskId}/draft` | 已完成 | 可以 | 当前 Controller 不接收 `hotel_id`；如写操作需要酒店上下文幂等 / 权限校验，请后端补可选入参或请求体字段。 |
+| `POST /api/reservation/tasks/{taskId}/confirm` | 已完成 | 可以 | 当前 Controller 不接收 `hotel_id`；如写操作需要酒店上下文幂等 / 权限校验，请后端补可选入参或请求体字段。 |
+| `GET /api/reservation/tasks/{taskId}/audits` | 已完成 | 可以 | 当前 Controller 不接收 `hotel_id`；如审计查询需要酒店上下文隔离，请后端补可选入参。 |
 | `POST /api/reservation/tasks/{taskId}/opera-operations/{operationId}/execute` | 已完成第一版模拟操作 | 可以 | 暂无；真实 OPERA 写入另行确认。 |
 | `POST /api/reservation/tasks/{taskId}/opera-operations/{operationId}/retry` | 已完成第一版模拟重试 | 可以 | 暂无；真实 OPERA 重试另行确认。 |
 | `POST /api/reservation/tasks/{taskId}/manual-review-conversions` | 已完成 | 可以 | 暂无。 |
@@ -38,7 +38,7 @@
 | `GET /api/source-messages/{id}` | 已完成单条安全摘要 | 可以 | 不能替代邮件会话全文接口。 |
 | `GET /api/source-messages/{id}/original` | 已完成单封原文受控读取 | 谨慎接入 | 只能读单封邮件，不能返回同一 conversation 全量邮件。 |
 | `GET /api/reservation/orders` | 已完成第一版 | 可以 | 默认查询全部订单状态；`open_task_count` 排除 `COMPLETED` 和 `FAILED`。 |
-| `GET /api/source-messages/{sourceMessageId}/conversation` | 已完成第一版 | 可以 | 返回完整 text/html、媒体外链和关联订单 / 任务摘要；前端不传原文读取 key。 |
+| `GET /api/source-messages/{sourceMessageId}/conversation` | 已完成第一版 | 可以 | 返回完整 text/html、媒体外链和关联订单 / 任务摘要；前端不传原文读取 key。当前前端为看效果临时直渲 `html_body`；请后端标记 / 保障 `html_body` 需要 sanitize，生产前返回已清洗 HTML 或明确清洗字段、CSP、附件 URL 策略。 |
 | `POST /api/system/reservation/demo-data` | 已完成 | 仅本地 / test 联调可用 | 默认关闭，必须后端配置访问口令；不能作为生产页面接口。 |
 | `GET /api/source-message-conversations/{externalConversationId}` | 未发现后端实现 | 不可以 | 历史讨论过的候选路径，当前不提供；前端统一使用 `GET /api/source-messages/{sourceMessageId}/conversation`。 |
 | `GET /api/reservation/message-notifications` | 未发现后端实现 | 不可以 | 如需独立信息提醒页再新增；第一版可先用任务接口过滤。 |
@@ -87,6 +87,7 @@ GET /api/reservation/tasks
 | `task_type` | 否 | `NEW_BOOKING`、`UPDATE_BOOKING`、`CANCEL_BOOKING`、`MANUAL_REVIEW`、`INFORMATIONAL_MESSAGE`。 |
 | `task_status` | 否 | 任务状态过滤。 |
 | `task_subtype` | 否 | 任务卡 subtype 过滤。 |
+| `order_status` | 待补 | 前端任务列表已有订单状态筛选控件，但当前后端 Controller 未接收该参数，前端先禁用该筛选。建议后端确认是否支持按任务所属订单状态过滤。 |
 | `queue_participation` | 否 | 是否参与订单执行队列。 |
 | `keyword` | 否 | Group Code、Confirmation No、临时订单号、来源消息安全摘要关键词。 |
 | `page_num` | 否 | 页码，建议从 1 开始。 |
@@ -323,6 +324,7 @@ GET /api/source-message-conversations/{externalConversationId}
 - 邮件会话详情页需要展示完整正文或清洗后的 HTML、附件、内联图片、发件人摘要、发送 / 接收时间、主题和关联订单 / 任务。
 - 前端不在页面上做业务截断或隐藏；但仍只调用本项目后端接口，不直接访问邮箱、AgentBus、数据库或外部附件 URL Secret。
 - 如果后端仍需要审计原文读取，应由后端在该业务接口内部处理；前端不保存 `X-TH-Hotel-Source-Original-Read-Key` 一类受控访问 key。
+- 2026-07-08 联调临时策略：前端为快速看效果，会优先直接渲染后端返回的 `html_body`；这不是最终安全方案。请后端明确标记 `html_body` 需要 sanitize，并确认是否输出已清洗 HTML、是否增加 `html_body_sanitized` / `html_render_mode` 等字段，以及生产环境 CSP 和外链图片策略。
 
 建议入参：
 
@@ -493,6 +495,7 @@ GET /api/reservation/tasks/{taskId}
 - 如果前端只做“按后端字段直接渲染”，现有 `fields[]` 可以支撑第一版表单展示；本轮已经扩展 `ReservationTaskFieldResult`，避免前端维护第二套字段矩阵。
 - `result_type`、`task_type`、`task_subtype`、`default_value_source` 当前从后端字段矩阵定义透出。
 - 如果后端已有更细的字段来源或适用场景元数据，可后续再扩展 `field_source`、`applicable_scenario`，不作为本轮 P0 阻塞项。
+- 前端已统一配置 `VITE_RESERVATION_HOTEL_ID`，并会在 `GET /api/reservation/orders`、`GET /api/reservation/tasks`、`GET /api/reservation/orders/{orderId}` 自动传 `hotel_id`。当前 `GET /api/reservation/tasks/{taskId}` 以及任务写操作 Controller 不接收 `hotel_id`，请后端确认 taskId / operationId 是否全局唯一；如果不是，需要补可选 `hotel_id` 以避免多酒店数据串读或误写。
 
 ## 9. Message Notification 列表 / 详情接口
 
diff --git a/docs/project/frontend-development-guidelines.md b/docs/project/frontend-development-guidelines.md
index 3789e5b..d710d69 100644
--- a/docs/project/frontend-development-guidelines.md
+++ b/docs/project/frontend-development-guidelines.md
@@ -177,6 +177,7 @@ th-TH
 VITE_API_BASE_URL=http://localhost:8080
 VITE_APP_ENV=local
 VITE_DEFAULT_LOCALE=zh-CN
+VITE_RESERVATION_HOTEL_ID=HOTEL-TEST
 VITE_ENABLE_MOCKS=false
 ```
 
@@ -190,6 +191,7 @@ VITE_API_PROXY_TARGET=http://127.0.0.1:8081
 
 - 公开配置可以放 `VITE_*`。
 - Secret 一律不进入 `VITE_*`。
+- `VITE_RESERVATION_HOTEL_ID` 是当前前端 Reservation 页面默认酒店上下文，用于订单列表、任务列表和订单详情查询；它不是 Secret，但需要随本地 / test / prod 环境显式配置，避免页面查到错误酒店数据。
 - 生产需要运行时配置时，应由部署系统生成公开配置文件，例如 `/app-config.json`。
 - 需要秘密的外部调用一律经后端代理或适配器。
 
@@ -280,3 +282,207 @@ pnpm test -- SomeSpecName.spec.ts
 - [ ] 是否运行了 `pnpm typecheck` 或说明了无法运行原因？
 - [ ] 是否运行了 `pnpm test` 或说明了无法运行原因？
 - [ ] 是否运行了 `pnpm build` 或说明了无法运行原因？
+
+## 18. Reservation 前端低保真结构图与流程图
+
+本节只记录当前 Reservation 前端第一版信息架构草图，用于对齐页面结构和业务主线。具体 checkpoint 设计、接口契约和实施计划应放入单独需求或设计文档，不在本规范中展开。
+
+### 18.1 订单工作台低保真结构图
+
+```text
+┌────────────────────────────────────────────────────────────────────────────┐
+│ Hotel OMS                           中文 / EN / ไทย        主题 / 用户      │
+├───────────────┬────────────────────────────────────────────────────────────┤
+│               │ 订单工作台                                                 │
+│  订单管理      │                                                            │
+│  任务队列      │ ┌──────────────────────────────────────────────────────┐   │
+│  消息来源      │ │ 筛选区                                                 │   │
+│  系统状态      │ │ 日期范围 | 业务号 | 订单状态 | 任务状态 | 任务卡类型      │   │
+│               │ └──────────────────────────────────────────────────────┘   │
+│               │                                                            │
+│               │ ┌──────────────────────────────────────────────────────┐   │
+│               │ │ 订单 / 任务列表                                       │   │
+│               │ │ 业务号      订单状态   当前任务      任务状态   操作     │   │
+│               │ │ GRP-001    ACTIVE    New Booking  待确认    查看     │   │
+│               │ │ TMP-002    TEMP      Fallback     人工复核  查看     │   │
+│               │ │ CNF-003    ACTIVE    Cancel       READY     执行     │   │
+│               │ └──────────────────────────────────────────────────────┘   │
+└───────────────┴────────────────────────────────────────────────────────────┘
+```
+
+中文说明：
+
+- 左侧导航只保留已确认的 Reservation 相关入口，不提前暴露未确认部门流程。
+- 工作台首屏服务于“找到需要处理的订单或任务”，不是普通订单 CRUD 首页。
+- 列表行应同时表达订单状态、当前任务、任务状态和下一步动作。
+
+### 18.2 任务列表低保真结构图
+
+```text
+┌────────────────────────────────────────────────────────────────────────────┐
+│ Hotel OMS                           中文 / EN / ไทย        主题 / 用户      │
+├───────────────┬────────────────────────────────────────────────────────────┤
+│               │ 任务列表                                                   │
+│  订单列表      │                                                            │
+│  任务列表      │ ┌──────────────────────────────────────────────────────┐   │
+│  消息来源      │ │ 筛选区                                                 │   │
+│  系统状态      │ │ 日期范围 | 订单号/业务号 | 任务类型 | 任务状态 | 可处理 │   │
+│               │ │ 来源邮件关键词 | 是否参与队列                         │   │
+│               │ └──────────────────────────────────────────────────────┘   │
+│               │                                                            │
+│               │ ┌──────────────────────────────────────────────────────┐   │
+│               │ │ 任务数据                                               │   │
+│               │ │ 任务号   订单号     任务卡        状态      来源邮件     │   │
+│               │ │ #10001  GRP-001   New Booking  待确认   Booking Req   │   │
+│               │ │ #10002  GRP-001   Update       阻塞中   Booking Upd   │   │
+│               │ │ #10003  TMP-002   Fallback     人工复核 Unknown Msg   │   │
+│               │ │                                                        │   │
+│               │ │ 队列 | 可处理 | 邮件会话 | 查看任务 | 查看订单           │   │
+│               │ └──────────────────────────────────────────────────────┘   │
+└───────────────┴────────────────────────────────────────────────────────────┘
+```
+
+中文说明：
+
+- 任务列表是独立菜单，服务于“按任务处理”的工作方式，不是订单列表的复制。
+- 列表数据来自 `GET /api/reservation/tasks`；该接口已存在第一版，前端应直接接真实接口，不展示 fixture 假数据。
+- 每行任务至少展示 `task_id`、关联订单、任务卡名称、任务类型 / 子类型、任务状态、队列顺序、是否可处理、只读原因和来源邮件摘要。
+- 每行操作保留“查看任务”“查看订单”“查看邮件会话”三个入口；邮件会话入口按该任务的 `source_message_id` 或 `external_conversation_id` 打开。
+- 如果来源邮件会话字段暂未接入，邮件会话入口置灰或展示“接口待补”，不使用假会话数据。
+
+### 18.3 订单详情与任务卡低保真结构图
+
+```text
+┌────────────────────────────────────────────────────────────────────────────┐
+│ 订单详情  GRP-001 / TMP-20260707-0001        ACTIVE / TEMPORARY             │
+│ 主来源消息 #190...  业务号来源 AI_CANDIDATE    最近更新 2026-07-08          │
+├────────────────────────────────────────────────────────────────────────────┤
+│ 订单摘要                                                                     │
+│ Group Code / Confirmation No. / 临时单号 / 订单状态 / 主来源消息 / 创建时间   │
+├───────────────────────────────┬────────────────────────────────────────────┤
+│ 同订单任务队列                  │ 当前任务卡                                   │
+│                               │                                            │
+│ ① New Booking   待确认  邮件会话│ New Booking 卡                              │
+│ ② Update        阻塞中  邮件会话│ ┌ 证据区 ───────────────────────────────┐   │
+│ ③ Trace Notes   未开始  邮件会话│ │ 生成原因 / 来源消息摘要 / 附件 / 邮件会话│   │
+│                               │ └──────────────────────────────────────┘   │
+│                               │ ┌ 基础信息 ─────────────────────────────┐   │
+│                               │ │ Group Code / Confirmation No. / 类型   │   │
+│                               │ └──────────────────────────────────────┘   │
+│                               │ ┌ 入住与房型 ───────────────────────────┐   │
+│                               │ │ 入住日期 / 离店日期 / 房量 / 房型 / Rate│   │
+│                               │ └──────────────────────────────────────┘   │
+│                               │                                            │
+│                               │ [保存草稿] [确认任务]                       │
+├───────────────────────────────┴────────────────────────────────────────────┤
+│ OPERA 模拟操作                                                               │
+│ ① 预检查 PENDING / SUCCEEDED / FAILED     ② 写入 PENDING / SUCCEEDED / FAILED │
+│                                                                            │
+│ 审计时间线：AI 创建 → 保存草稿 → 人工确认 → OPERA 预检查 → OPERA 写入          │
+└────────────────────────────────────────────────────────────────────────────┘
+```
+
+中文说明：
+
+- 订单详情页必须沿用“订单归档容器 + 同订单任务队列 + 当前任务卡 + OPERA 模拟操作 + 审计时间线”的既有结构，不另起一套订单详情布局。
+- 后续任务如果被前置任务阻塞，应在任务队列和任务卡操作区同时体现只读状态。
+- 任务卡字段必须按后端字段矩阵分组渲染，不直接把 AI 原始 JSON 展示成自由表单。
+- 邮件入口按任务粒度展示：每个任务可能来自不同 `source_message_id`，也可能落在不同 `external_conversation_id`。点击“邮件会话”只打开该任务来源消息所在的完整邮件会话，不代表订单下所有来源消息的合集。
+- 当前任务卡证据区展示来源消息摘要、附件摘要和“查看邮件会话”入口；完整邮件正文、HTML 和附件详情进入单独邮件会话详情页查看，避免订单详情页被长邮件撑开。
+- OPERA 模拟和审计是任务确认后的执行轨迹，不应和 AI 原始建议混在同一区域。
+
+### 18.4 任务详情低保真结构图
+
+```text
+┌────────────────────────────────────────────────────────────────────────────┐
+│ 任务详情 #10002   Update Booking / RATE_CHANGE      PENDING_CONFIRM         │
+│ 关联订单 GRP-001 [查看订单]   来源邮件 Booking Update [查看邮件会话]          │
+├────────────────────────────────────────────────────────────────────────────┤
+│ 处理状态                                                                     │
+│ 可处理 / 阻塞原因 / 队列顺序 / 前置任务状态 / 只读说明                         │
+├────────────────────────────────────────────────────────────────────────────┤
+│ 证据区                                                                       │
+│ 生成原因 / 来源消息摘要 / 附件摘要 / 完整邮件会话入口                         │
+├────────────────────────────────────────────────────────────────────────────┤
+│ 任务卡字段                                                                    │
+│ 基础信息：Group Code / Confirmation No. / 业务动作                           │
+│ 变更内容：before_after / rate_code / fix_charge_items                        │
+│ 人工复核：visible_reason / required fields / validation                      │
+├────────────────────────────────────────────────────────────────────────────┤
+│ 操作区                                                                       │
+│ [保存草稿] [确认任务]                                                         │
+├────────────────────────────────────────────────────────────────────────────┤
+│ OPERA 模拟操作                                                               │
+│ 预检查 / 写入 / 重试状态 / 最近错误                                           │
+├────────────────────────────────────────────────────────────────────────────┤
+│ 审计流水                                                                     │
+│ AI 创建 → 草稿保存 → 人工确认 → OPERA 预检查 → OPERA 写入                     │
+└────────────────────────────────────────────────────────────────────────────┘
+```
+
+中文说明：
+
+- 任务详情页聚焦单个任务卡的查看、编辑、确认和执行轨迹，不承载同订单全局队列；同订单全局队列仍回到订单详情页查看。
+- 任务详情读取来自 `GET /api/reservation/tasks/{taskId}`，草稿保存、确认任务、OPERA 模拟和审计流水使用后端已存在的任务工作流接口。
+- 证据区只展示来源消息摘要和附件摘要；完整邮件正文、HTML、历史邮件和回复进入邮件会话详情页。
+- 字段区按后端 `fields[]` 的 `display_area` 和字段规则分组渲染，不把 AI 原始 JSON 直接展示为自由表单。
+- 如果任务不可处理，操作区应保持只读，并展示 `availability` 或 `readonly_reason_code` 给出的原因。
+
+### 18.5 邮件会话详情低保真结构图
+
+```text
+┌────────────────────────────────────────────────────────────────────────────┐
+│ 邮件会话详情  Re: Booking Update                         返回订单 / 返回任务 │
+│ Conversation thread-20260708-001  共 6 封  最近收到 2026-07-08 11:28        │
+├────────────────────────────────────────────────────────────────────────────┤
+│ 会话摘要                                                                     │
+│ 酒店 / 渠道 EMAIL / 发件人汇总 / 主题 / 关联订单 GRP-001 / 关联任务 3 个       │
+├────────────────────────────────────────────────────────────────────────────┤
+│ 邮件时间线                                                                   │
+│                                                                            │
+│ ┌ 2026-07-06 09:10  guest@example.com  Booking Request ────────────────┐   │
+│ │ 邮件全文正文或已清洗 HTML                                               │   │
+│ │ 附件：rooming-list.xlsx / voucher.pdf                                  │   │
+│ │ 关联：New Booking #10001                                               │   │
+│ └──────────────────────────────────────────────────────────────────────┘   │
+│ ┌ 2026-07-07 14:22  hotel@example.com  Re: Booking Request ────────────┐   │
+│ │ 邮件全文正文或已清洗 HTML                                               │   │
+│ │ 附件：无                                                               │   │
+│ │ 关联：无                                                               │   │
+│ └──────────────────────────────────────────────────────────────────────┘   │
+│ ┌ 2026-07-08 11:28  guest@example.com  Re: Booking Update ─────────────┐   │
+│ │ 邮件全文正文或已清洗 HTML                                               │   │
+│ │ 附件：change-request.pdf                                               │   │
+│ │ 关联：Update Booking #10002                                            │   │
+│ └──────────────────────────────────────────────────────────────────────┘   │
+└────────────────────────────────────────────────────────────────────────────┘
+```
+
+中文说明：
+
+- 邮件会话详情页展示同一个 `external_conversation_id` 下的全部邮件，包括历史邮件、当前邮件和后续回复。
+- 页面入口可以来自订单详情任务队列、当前任务卡证据区或任务详情页，但落地页统一为“邮件会话详情”，不是单封邮件详情。
+- 每封邮件应展示完整正文或清洗后的 HTML、附件列表、内联图片信息、发送 / 接收时间、发件人摘要、主题和关联订单 / 任务。
+- 前端不在本页展示假数据；后端接口未接入时显示“接口待接入 / 暂无邮件会话数据”。
+- 邮件全文属于用户在邮箱中本来可见的信息，前端页面不做业务层面的截断隐藏；但仍必须通过本项目后端接口读取，不在前端保存外部系统 Secret 或访问 key。
+
+### 18.6 Reservation 任务主流程图
+
+```mermaid
+flowchart LR
+  A["SourceMessage Inbox<br/>来源消息"] --> B["AI 过渡层<br/>保存 AI 原始 JSON"]
+  B --> C["订单<br/>业务号或临时单号"]
+  B --> D["任务队列<br/>按 execution_order 排序"]
+  D --> E["任务卡详情<br/>字段矩阵驱动渲染"]
+  E --> F["保存草稿<br/>draft_payload"]
+  E --> G["最终确认<br/>confirmed_payload"]
+  G --> H["OPERA 模拟操作<br/>预检查 / 写入"]
+  H --> I["审计时间线<br/>确认、执行、重试记录"]
+```
+
+中文说明：
+
+- `SourceMessage Inbox` 是来源事实层，不表达订单、任务或业务结论。
+- AI 输出只作为原始建议和证据保存，不能直接改变最终业务状态。
+- 用户确认后的 `confirmed_payload` 才能作为 OPERA 模拟操作输入。
+- 审计时间线用于串联人工确认、OPERA 执行和重试记录，便于后续追溯。