diff --git a/client/src/components/reservation/ReservationStatusBadge.vue b/client/src/components/reservation/ReservationStatusBadge.vue
index c707be3..81e5b27 100644
--- a/client/src/components/reservation/ReservationStatusBadge.vue
+++ b/client/src/components/reservation/ReservationStatusBadge.vue
@@ -18,16 +18,16 @@ const props = defineProps<{
 const { t } = useI18n()
 
 const tone = computed(() => {
-  if (['ACTIVE', 'COMPLETED', 'SUCCEEDED'].includes(props.status)) {
+  if (['ACTIVE', 'COMPLETED', 'SUCCEEDED', 'CONFIRMED', 'ACKED'].includes(props.status)) {
     return 'success'
   }
-  if (['PENDING_CONFIRM', 'READY', 'PENDING', 'TEMPORARY', 'EXECUTING'].includes(props.status)) {
+  if (['PENDING_CONFIRM', 'READY', 'PENDING', 'TEMPORARY', 'EXECUTING', 'OPEN', 'ACK_REQUIRED'].includes(props.status)) {
     return 'info'
   }
   if (['BLOCKED', 'FAILED'].includes(props.status)) {
     return 'danger'
   }
-  if (['ENDED', 'LOGIC_DELETED', 'SKIPPED'].includes(props.status)) {
+  if (['ENDED', 'LOGIC_DELETED', 'SKIPPED', 'READONLY'].includes(props.status)) {
     return 'neutral'
   }
   return 'warning'
diff --git a/client/src/components/reservation/ReservationV4SourceMessageCard.vue b/client/src/components/reservation/ReservationV4SourceMessageCard.vue
new file mode 100644
index 0000000..9c2bc4e
--- /dev/null
+++ b/client/src/components/reservation/ReservationV4SourceMessageCard.vue
@@ -0,0 +1,339 @@
+<template>
+  <section class="v4-source-card th-section">
+    <div class="th-section-header">
+      <div>
+        <h2 class="th-section-title">
+          {{ title }}
+        </h2>
+        <p
+          v-if="sourceMessageId"
+          class="th-muted"
+        >
+          {{ t('task.sourceMessageId') }}: {{ sourceMessageId }}
+        </p>
+      </div>
+      <ReservationStatusBadge
+        v-if="sourceCard"
+        :status="sourceCard.card_status"
+      />
+    </div>
+
+    <div class="source-grid">
+      <div>
+        <span>{{ t('taskV4.sourceMessage.subject') }}</span>
+        <strong>{{ sourceSubject }}</strong>
+      </div>
+      <div>
+        <span>{{ t('taskV4.sourceMessage.sender') }}</span>
+        <strong>{{ sourceSender }}</strong>
+      </div>
+      <div>
+        <span>{{ t('taskV4.sourceMessage.receivedAt') }}</span>
+        <strong>{{ formatReservationDateTime(sourceReceivedAt) }}</strong>
+      </div>
+      <div>
+        <span>{{ t('taskV4.sourceMessage.conversationCount') }}</span>
+        <strong>{{ conversationMessageCount }}</strong>
+      </div>
+    </div>
+
+    <div class="source-preview">
+      <h3>{{ t('taskV4.sourceMessage.excerpt') }}</h3>
+      <p>{{ sourceExcerpt }}</p>
+    </div>
+
+    <div class="source-preview">
+      <h3>{{ t('taskV4.sourceMessage.attachments') }}</h3>
+      <ul
+        v-if="attachments.length"
+        class="attachment-list"
+      >
+        <li
+          v-for="attachment in attachments"
+          :key="attachment.key"
+        >
+          <i
+            class="pi pi-paperclip"
+            aria-hidden="true"
+          />
+          <span>{{ attachment.name }}</span>
+          <small v-if="attachment.meta">{{ attachment.meta }}</small>
+        </li>
+      </ul>
+      <p v-else>
+        {{ t('taskV4.sourceMessage.noAttachments') }}
+      </p>
+    </div>
+
+    <ReservationV4TaskCardFieldRenderer
+      v-if="sourceCard?.fields.length"
+      :fields="sourceCard.fields"
+      :model-value="fieldValues"
+      :read-only="true"
+    />
+
+    <RouterLink
+      v-if="showConversationLink && sourceMessageId"
+      class="source-link"
+      :to="`/reservation/source-messages/${sourceMessageId}/conversation`"
+    >
+      {{ t('task.viewConversation') }}
+    </RouterLink>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
+import ReservationV4TaskCardFieldRenderer from '@/components/reservation/ReservationV4TaskCardFieldRenderer.vue'
+import type {
+  ReservationRecord,
+  ReservationV4SourceMessageSummary,
+  ReservationV4TaskCardResult,
+} from '@/types/reservation'
+import { formatReservationDateTime } from '@/utils/reservationFormat'
+import { buildReservationV4InitialFieldValues } from '@/utils/reservationV4FieldRules'
+
+const props = withDefaults(defineProps<{
+  title: string
+  sourceMessageSummary: ReservationV4SourceMessageSummary | null
+  sourceCard: ReservationV4TaskCardResult | null
+  showConversationLink?: boolean
+}>(), {
+  showConversationLink: true,
+})
+
+const { t } = useI18n()
+
+const payload = computed(() => props.sourceCard?.display_payload ?? {})
+const fieldValues = computed(() => buildReservationV4InitialFieldValues(props.sourceCard?.fields ?? []))
+const sourceMessageId = computed(() =>
+  props.sourceMessageSummary?.source_message_id ?? readString(payload.value, 'source_message_id'),
+)
+const sourceSubject = computed(() =>
+  props.sourceMessageSummary?.subject ??
+  readFirstString(payload.value, ['subject', 'thread_subject', 'source_subject']) ??
+  t('taskList.noSourceSubject'),
+)
+const sourceSender = computed(() =>
+  props.sourceMessageSummary?.sender_summary ??
+  readFirstString(payload.value, ['sender_summary', 'sender', 'from']) ??
+  '-',
+)
+const sourceReceivedAt = computed(() =>
+  props.sourceMessageSummary?.received_at ??
+  readFirstString(payload.value, ['received_at', 'source_received_at', 'source_sent_at']),
+)
+const conversationMessageCount = computed(() =>
+  props.sourceMessageSummary?.conversation_message_count ??
+  readNumber(payload.value, 'conversation_message_count') ??
+  '-',
+)
+const sourceExcerpt = computed(() =>
+  readFirstString(payload.value, [
+    'relevant_message_excerpt',
+    'message_excerpt',
+    'text_excerpt',
+    'excerpt',
+    'summary',
+  ]) ?? t('taskV4.sourceMessage.noExcerpt'),
+)
+const attachments = computed(() => normalizeAttachments(readFirstDefined(payload.value, [
+  'attachments',
+  'uploaded_media',
+  'file_references',
+])))
+
+interface AttachmentSummary {
+  key: string
+  name: string
+  meta: string
+}
+
+function normalizeAttachments(value: unknown): AttachmentSummary[] {
+  if (value === null || value === undefined || value === '') {
+    return []
+  }
+  if (Array.isArray(value)) {
+    return value.flatMap((item, index) =>
+      normalizeAttachments(item).map((attachment, nestedIndex) => ({
+        ...attachment,
+        key: `${attachment.key}-${index}-${nestedIndex}`,
+      })),
+    )
+  }
+  if (typeof value === 'string') {
+    const parsedValue = parseMaybeJson(value)
+    return parsedValue === value ? [toAttachmentSummary(value, 0)] : normalizeAttachments(parsedValue)
+  }
+  return [toAttachmentSummary(value, 0)]
+}
+
+function toAttachmentSummary(value: unknown, index: number): AttachmentSummary {
+  const record = readRecord(value)
+  const name = record
+    ? readFirstString(record, ['name', 'file_name', 'filename', 'display_name', 'title']) ?? t('conversation.unnamedAttachment')
+    : String(value)
+  const type = record ? readFirstString(record, ['content_type', 'mime_type', 'media_type', 'file_type']) : null
+  const size = record ? readNumber(record, 'size_bytes') ?? readNumber(record, 'size') : null
+  return {
+    key: `${name}-${index}`,
+    name,
+    meta: [type, formatFileSize(size)].filter(Boolean).join(' · '),
+  }
+}
+
+function parseMaybeJson(value: string): unknown {
+  const trimmedValue = value.trim()
+  if (!trimmedValue.startsWith('{') && !trimmedValue.startsWith('[')) {
+    return value
+  }
+  try {
+    return JSON.parse(trimmedValue)
+  } catch {
+    return value
+  }
+}
+
+function readFirstDefined(record: ReservationRecord, keys: string[]): unknown {
+  for (const key of keys) {
+    if (record[key] !== undefined && record[key] !== null && record[key] !== '') {
+      return record[key]
+    }
+  }
+  return null
+}
+
+function readFirstString(record: ReservationRecord, keys: string[]): string | null {
+  for (const key of keys) {
+    const value = readString(record, key)
+    if (value) {
+      return value
+    }
+  }
+  return null
+}
+
+function readString(record: ReservationRecord, key: string): string | null {
+  const value = record[key]
+  return typeof value === 'string' && value.trim() ? value.trim() : null
+}
+
+function readNumber(record: ReservationRecord, key: string): number | null {
+  const value = record[key]
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value
+  }
+  if (typeof value === 'string' && Number.isFinite(Number(value))) {
+    return Number(value)
+  }
+  return null
+}
+
+function readRecord(value: unknown): ReservationRecord | null {
+  return Boolean(value && typeof value === 'object' && !Array.isArray(value)) ? value as ReservationRecord : null
+}
+
+function formatFileSize(size: number | null): string {
+  if (!size) {
+    return ''
+  }
+  if (size < 1024) {
+    return `${size} B`
+  }
+  if (size < 1024 * 1024) {
+    return `${Math.round(size / 1024)} KB`
+  }
+  return `${(size / 1024 / 1024).toFixed(1)} MB`
+}
+</script>
+
+<style scoped>
+.v4-source-card {
+  display: grid;
+  gap: 18px;
+}
+
+.source-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  padding: 0 20px;
+}
+
+.source-grid div {
+  display: grid;
+  gap: 5px;
+}
+
+.source-grid span,
+.source-preview h3 {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.source-grid strong,
+.source-preview p {
+  margin: 0;
+  color: var(--th-color-slate-900);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.source-preview {
+  display: grid;
+  gap: 8px;
+  border-top: 1px solid var(--th-color-slate-200);
+  padding: 14px 20px 0;
+}
+
+.source-preview h3 {
+  margin: 0;
+}
+
+.attachment-list {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+}
+
+.attachment-list li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  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);
+  list-style: none;
+  padding: 8px 10px;
+}
+
+.attachment-list small {
+  color: var(--th-color-slate-500);
+}
+
+.v4-field-renderer {
+  padding: 0 20px 18px;
+}
+
+.source-link {
+  justify-self: start;
+  margin: 0 20px 18px;
+  color: var(--th-color-blue-600);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+@media (max-width: 900px) {
+  .source-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/client/src/components/reservation/ReservationV4TaskCardFieldRenderer.vue b/client/src/components/reservation/ReservationV4TaskCardFieldRenderer.vue
new file mode 100644
index 0000000..91e6584
--- /dev/null
+++ b/client/src/components/reservation/ReservationV4TaskCardFieldRenderer.vue
@@ -0,0 +1,269 @@
+<template>
+  <div class="v4-field-renderer">
+    <label
+      v-for="field in fields"
+      :key="fieldKey(field)"
+      class="v4-field"
+      :class="{ 'v4-field--readonly': !isEditable(field) }"
+    >
+      <span class="v4-field__label">
+        {{ field.display_name }}
+        <sup v-if="field.required">*</sup>
+        <em v-if="!isEditable(field)">{{ t('taskV4.field.readonly') }}</em>
+      </span>
+
+      <select
+        v-if="isEditable(field) && isSelectField(field)"
+        class="v4-field__control"
+        :aria-invalid="fieldError(field) ? 'true' : 'false'"
+        :value="fieldValue(field)"
+        @change="updateField(field, $event)"
+      >
+        <option value="">{{ t('taskV4.field.selectPlaceholder') }}</option>
+        <option
+          v-for="option in fieldOptions(field)"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+
+      <input
+        v-else-if="isEditable(field) && isDateField(field)"
+        class="v4-field__control"
+        type="date"
+        :aria-invalid="fieldError(field) ? 'true' : 'false'"
+        :value="fieldValue(field)"
+        @input="updateField(field, $event)"
+      >
+
+      <input
+        v-else-if="isEditable(field) && isNumberField(field)"
+        class="v4-field__control"
+        type="number"
+        :aria-invalid="fieldError(field) ? 'true' : 'false'"
+        :value="fieldValue(field)"
+        @input="updateField(field, $event)"
+      >
+
+      <textarea
+        v-else-if="isEditable(field) && isTextAreaField(field)"
+        class="v4-field__control v4-field__control--textarea"
+        :aria-invalid="fieldError(field) ? 'true' : 'false'"
+        :value="fieldValue(field)"
+        rows="3"
+        @input="updateField(field, $event)"
+      />
+
+      <input
+        v-else-if="isEditable(field)"
+        class="v4-field__control"
+        type="text"
+        :aria-invalid="fieldError(field) ? 'true' : 'false'"
+        :value="fieldValue(field)"
+        @input="updateField(field, $event)"
+      >
+
+      <span
+        v-else
+        class="v4-field__static"
+      >
+        {{ stringifyV4Value(fieldValue(field)) }}
+      </span>
+
+      <small
+        v-if="field.control_hint"
+        class="v4-field__hint"
+      >{{ field.control_hint }}</small>
+      <small
+        v-for="error in visibleFieldErrors(field)"
+        :key="error"
+        class="v4-field__error"
+      >{{ error }}</small>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import type { ReservationRecord, ReservationV4TaskCardFieldResult } from '@/types/reservation'
+import {
+  isReservationV4EditableField,
+  readV4FieldValue,
+  reservationV4FieldKey,
+  staticReservationV4Options,
+  stringifyReservationV4SafeDisplayValue,
+} from '@/utils/reservationV4FieldRules'
+
+const props = defineProps<{
+  fields: ReservationV4TaskCardFieldResult[]
+  modelValue: ReservationRecord
+  readOnly: boolean
+  validationErrors?: Record<string, string>
+  editableKeys?: string[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: ReservationRecord]
+}>()
+
+const { t } = useI18n()
+
+function fieldKey(field: ReservationV4TaskCardFieldResult): string {
+  return reservationV4FieldKey(field)
+}
+
+function isEditable(field: ReservationV4TaskCardFieldResult): boolean {
+  const key = reservationV4FieldKey(field)
+  return !props.readOnly &&
+    (!props.editableKeys || props.editableKeys.includes(key)) &&
+    isReservationV4EditableField(field)
+}
+
+function isSelectField(field: ReservationV4TaskCardFieldResult): boolean {
+  return normalizeControlType(field.control_type) === 'SELECT' && fieldOptions(field).length > 0
+}
+
+function isDateField(field: ReservationV4TaskCardFieldResult): boolean {
+  return normalizeControlType(field.control_type) === 'DATE'
+}
+
+function isNumberField(field: ReservationV4TaskCardFieldResult): boolean {
+  return normalizeControlType(field.control_type) === 'NUMBER'
+}
+
+function isTextAreaField(field: ReservationV4TaskCardFieldResult): boolean {
+  return normalizeControlType(field.control_type) === 'TEXTAREA'
+}
+
+function fieldOptions(field: ReservationV4TaskCardFieldResult): Array<{ value: string; label: string }> {
+  return staticReservationV4Options(field.options_source)
+}
+
+function fieldValue(field: ReservationV4TaskCardFieldResult): string | number {
+  const value = readV4FieldValue(field, props.modelValue)
+  if (!isEditable(field)) {
+    return stringifyV4Value(value)
+  }
+  if (typeof value === 'number') {
+    return value
+  }
+  if (typeof value === 'string') {
+    return value
+  }
+  return stringifyV4Value(value)
+}
+
+function updateField(field: ReservationV4TaskCardFieldResult, event: Event): void {
+  const target = event.target as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [reservationV4FieldKey(field)]: target.value,
+  })
+}
+
+function visibleFieldErrors(field: ReservationV4TaskCardFieldResult): string[] {
+  return [
+    ...(field.validation_errors ?? []),
+    fieldError(field),
+  ].filter(Boolean)
+}
+
+function fieldError(field: ReservationV4TaskCardFieldResult): string {
+  return props.validationErrors?.[reservationV4FieldKey(field)] ?? ''
+}
+
+function stringifyV4Value(value: unknown): string {
+  return stringifyReservationV4SafeDisplayValue(
+    value,
+    t('taskV4.field.empty'),
+    t('taskV4.field.hidden'),
+  )
+}
+
+function normalizeControlType(value: string | null): string {
+  return value?.trim().replace(/[\s-]+/g, '_').toUpperCase() ?? ''
+}
+</script>
+
+<style scoped>
+.v4-field-renderer {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.v4-field {
+  display: grid;
+  gap: 7px;
+}
+
+.v4-field__label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--th-color-slate-700);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.v4-field__label sup {
+  color: var(--th-color-danger);
+}
+
+.v4-field__label em {
+  border-radius: 999px;
+  background: var(--th-color-slate-100);
+  color: var(--th-color-slate-500);
+  font-size: 11px;
+  font-style: normal;
+  padding: 2px 6px;
+}
+
+.v4-field__control,
+.v4-field__static {
+  min-height: 38px;
+  width: 100%;
+  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);
+  font: inherit;
+  padding: 9px 10px;
+}
+
+.v4-field__control--textarea {
+  resize: vertical;
+}
+
+.v4-field__control[aria-invalid='true'] {
+  border-color: var(--th-color-danger);
+  box-shadow: 0 0 0 3px var(--th-color-danger-bg);
+}
+
+.v4-field__static {
+  display: block;
+  min-height: 38px;
+  background: var(--th-color-slate-50);
+  overflow-wrap: anywhere;
+}
+
+.v4-field__hint {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+}
+
+.v4-field__error {
+  color: var(--th-color-danger);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+@media (max-width: 760px) {
+  .v4-field-renderer {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/client/src/i18n/locales/en-US.ts b/client/src/i18n/locales/en-US.ts
index 6481f65..7e4cbe6 100644
--- a/client/src/i18n/locales/en-US.ts
+++ b/client/src/i18n/locales/en-US.ts
@@ -33,6 +33,7 @@ export default {
     orderDetail: 'Order detail',
     taskDetail: 'Task detail',
     sourceMessageConversation: 'Email conversation',
+    sourceNotificationDetail: 'Source notification detail',
     debugEml: 'Debug EML',
     systemSettings: 'System settings',
     systemUsers: 'Users',
@@ -432,6 +433,19 @@ export default {
     totalSuffix: 'tasks',
     noSourceSubject: 'No source subject',
     sourceReceivedAt: 'Source time',
+    itemType: 'Work item type',
+    itemTypeOrderTask: 'Order task',
+    itemTypeSourceNotification: 'Source notification',
+    orderTaskStatus: 'Order task status',
+    cardStatus: 'Card status',
+    orderUnresolved: 'Order ownership pending',
+    sourceNotificationNoOrder: 'No linked order',
+    sourceNotificationNoOrderHint: 'S10/S99 read-only source notification',
+    cardCountsTotal: '{total} cards',
+    cardCountsPending: 'Pending {count}',
+    cardCountsReview: 'Review {count}',
+    cardCountsConfirmed: 'Confirmed {count}',
+    viewNotification: 'View notification',
     canProcess: 'Processable',
     cannotProcess: 'Not processable',
     queueParticipation: 'Queue participation',
@@ -444,14 +458,89 @@ export default {
     sourceOnlyOrderLabel: 'Source message only',
     hiddenTechnicalOrder: 'No visible order',
     columns: {
+      item: 'Work item',
       task: 'Task',
       order: 'Order',
       card: 'Task card',
       status: 'Status',
       source: 'Source email',
+      cards: 'Cards',
       queue: 'Queue',
     },
   },
+  taskV4: {
+    title: 'V4 order task detail',
+    subtitle: 'Handle the current order task with the backend V4 task card model.',
+    orderTaskSummary: 'Order task summary',
+    orderTaskId: 'Order task ID',
+    orderReference: 'Order reference',
+    targetBookingType: 'Target booking type',
+    targetLocator: 'Target locator',
+    targetResolutionStatus: 'Target resolution status',
+    cardCounts: 'Card counts',
+    sourceMessageCard: 'Source email card',
+    basicInformationCard: 'Basic information card',
+    businessCards: 'Business task cards',
+    adapterContractErrors: 'Adapter contract diagnostics',
+    noAdapterContractErrors: 'No adapter contract errors.',
+    noBusinessCards: 'No business task cards.',
+    displayPayload: 'Display summary',
+    rawCardPayload: 'Safe card summary',
+    readonlyReason: 'Read-only reason',
+    blockedReason: 'Blocked reason',
+    confirmCard: 'Confirm card',
+    confirmingCard: 'Confirming',
+    resolveReview: 'Submit review',
+    resolvingReview: 'Submitting',
+    reviewReason: 'Review note',
+    reviewReasonPlaceholder: 'Optional note for the manual decision',
+    confirmedOrderId: 'Confirmed order ID',
+    confirmedOrderIdPlaceholder: 'Enter when order ownership is unresolved',
+    confirmedOrderRequired: 'Order ownership is unresolved. Enter the confirmed order ID first.',
+    cardConfirmed: 'Card confirmed and detail refreshed.',
+    reviewResolved: 'Review submitted and detail refreshed.',
+    validationFailed: 'Fix current-card field errors first.',
+    sourceMessage: {
+      subject: 'Subject',
+      sender: 'Sender',
+      receivedAt: 'Received at',
+      conversationCount: 'Conversation messages',
+      attachments: 'Attachments',
+      excerpt: 'Email excerpt',
+      noExcerpt: 'No email excerpt',
+      noAttachments: 'No attachments',
+    },
+    field: {
+      required: 'Required',
+      readonly: 'Read only',
+      empty: 'Empty',
+      hidden: 'Sensitive content hidden',
+      selectPlaceholder: 'Select',
+    },
+    error: {
+      loadFailed: 'Failed to load V4 order task detail.',
+      actionFailed: 'Action failed. Check backend response details.',
+    },
+  },
+  sourceNotification: {
+    title: 'Source notification detail',
+    subtitle: 'S10/S99 read-only source message notification. It does not enter order or task-card handling.',
+    summary: 'Notification summary',
+    notificationId: 'Notification ID',
+    routeCode: 'Route code',
+    status: 'Notification status',
+    sourceMessage: 'Source email',
+    ackReason: 'Handling note',
+    ackReasonPlaceholder: 'Optional note for acknowledging or handling this notification',
+    ack: 'Acknowledge',
+    acking: 'Acknowledging',
+    acked: 'Acknowledged and detail refreshed.',
+    noBusinessEntry: 'This notification has no linked order, business card, field editing, review, or OPERA action.',
+    error: {
+      loadFailed: 'Failed to load source notification detail.',
+      ackFailed: 'Failed to acknowledge. Check backend response details.',
+    },
+  },
   task: {
     title: 'Task card',
     fieldContract: 'Field contract',
@@ -653,6 +742,12 @@ export default {
     SUCCEEDED: 'Succeeded',
     BLOCKED: 'Blocked',
     SKIPPED: 'Skipped',
+    OPEN: 'Open',
+    READONLY: 'Read only',
+    REVIEW_REQUIRED: 'Review required',
+    CONFIRMED: 'Confirmed',
+    ACK_REQUIRED: 'Pending acknowledgement',
+    ACKED: 'Acknowledged',
   },
   cardType: {
     NEW_BOOKING: 'New booking',
diff --git a/client/src/i18n/locales/th-TH.ts b/client/src/i18n/locales/th-TH.ts
index 0af02aa..f883f8f 100644
--- a/client/src/i18n/locales/th-TH.ts
+++ b/client/src/i18n/locales/th-TH.ts
@@ -33,6 +33,7 @@ export default {
     orderDetail: 'รายละเอียดออเดอร์',
     taskDetail: 'รายละเอียดงาน',
     sourceMessageConversation: 'เธรดอีเมล',
+    sourceNotificationDetail: 'รายละเอียดแจ้งเตือนต้นทาง',
     debugEml: 'Debug EML',
     systemSettings: 'ตั้งค่าระบบ',
     systemUsers: 'ผู้ใช้',
@@ -432,6 +433,19 @@ export default {
     totalSuffix: 'งาน',
     noSourceSubject: 'ไม่มีหัวข้ออีเมลต้นทาง',
     sourceReceivedAt: 'เวลารับอีเมล',
+    itemType: 'ประเภทงานในคิว',
+    itemTypeOrderTask: 'งานออเดอร์',
+    itemTypeSourceNotification: 'แจ้งเตือนต้นทาง',
+    orderTaskStatus: 'สถานะงานออเดอร์',
+    cardStatus: 'สถานะการ์ด',
+    orderUnresolved: 'ยังรอยืนยันออเดอร์',
+    sourceNotificationNoOrder: 'ไม่ผูกกับออเดอร์',
+    sourceNotificationNoOrderHint: 'แจ้งเตือนต้นทาง S10/S99 แบบอ่านอย่างเดียว',
+    cardCountsTotal: 'รวม {total} การ์ด',
+    cardCountsPending: 'รอยืนยัน {count}',
+    cardCountsReview: 'รอตรวจสอบ {count}',
+    cardCountsConfirmed: 'ยืนยันแล้ว {count}',
+    viewNotification: 'ดูแจ้งเตือน',
     canProcess: 'ประมวลผลได้',
     cannotProcess: 'ประมวลผลไม่ได้',
     queueParticipation: 'อยู่ในคิวหรือไม่',
@@ -444,14 +458,89 @@ export default {
     sourceOnlyOrderLabel: 'ข้อความต้นทางแบบอ่านอย่างเดียว',
     hiddenTechnicalOrder: 'ไม่มีออเดอร์ที่แสดงได้',
     columns: {
+      item: 'รายการงาน',
       task: 'งาน',
       order: 'ออเดอร์',
       card: 'การ์ดงาน',
       status: 'สถานะ',
       source: 'อีเมลต้นทาง',
+      cards: 'การ์ด',
       queue: 'คิว',
     },
   },
+  taskV4: {
+    title: 'รายละเอียดงานออเดอร์ V4',
+    subtitle: 'จัดการงานออเดอร์ปัจจุบันตามโมเดลการ์ดงาน V4 จากหลังบ้าน',
+    orderTaskSummary: 'สรุปงานออเดอร์',
+    orderTaskId: 'รหัสงานออเดอร์',
+    orderReference: 'อ้างอิงออเดอร์',
+    targetBookingType: 'ประเภทการจองเป้าหมาย',
+    targetLocator: 'ข้อมูลระบุเป้าหมาย',
+    targetResolutionStatus: 'สถานะการยืนยันเป้าหมาย',
+    cardCounts: 'จำนวนการ์ด',
+    sourceMessageCard: 'การ์ดอีเมลต้นทาง',
+    basicInformationCard: 'การ์ดข้อมูลพื้นฐาน',
+    businessCards: 'การ์ดงานธุรกิจ',
+    adapterContractErrors: 'ข้อมูลวินิจฉัยสัญญา Adapter',
+    noAdapterContractErrors: 'ไม่มีข้อผิดพลาดสัญญา Adapter',
+    noBusinessCards: 'ยังไม่มีการ์ดงานธุรกิจ',
+    displayPayload: 'สรุปสำหรับแสดงผล',
+    rawCardPayload: 'สรุปการ์ดที่ปลอดภัย',
+    readonlyReason: 'เหตุผลที่แก้ไขไม่ได้',
+    blockedReason: 'เหตุผลที่ถูกบล็อก',
+    confirmCard: 'ยืนยันการ์ด',
+    confirmingCard: 'กำลังยืนยัน',
+    resolveReview: 'ส่งผลตรวจสอบ',
+    resolvingReview: 'กำลังส่ง',
+    reviewReason: 'หมายเหตุการตรวจสอบ',
+    reviewReasonPlaceholder: 'ไม่บังคับ ระบุเหตุผลการตัดสินใจ',
+    confirmedOrderId: 'รหัสออเดอร์ที่ยืนยัน',
+    confirmedOrderIdPlaceholder: 'กรอกเมื่อยังไม่ยืนยันออเดอร์',
+    confirmedOrderRequired: 'ยังไม่ยืนยันออเดอร์ โปรดกรอกรหัสออเดอร์ที่ยืนยันก่อน',
+    cardConfirmed: 'ยืนยันการ์ดแล้วและรีเฟรชรายละเอียดแล้ว',
+    reviewResolved: 'ส่งผลตรวจสอบแล้วและรีเฟรชรายละเอียดแล้ว',
+    validationFailed: 'โปรดแก้ไขข้อมูลในการ์ดปัจจุบันก่อน',
+    sourceMessage: {
+      subject: 'หัวข้อ',
+      sender: 'ผู้ส่ง',
+      receivedAt: 'เวลารับ',
+      conversationCount: 'จำนวนอีเมลในเธรด',
+      attachments: 'ไฟล์แนบ',
+      excerpt: 'ข้อความบางส่วนของอีเมล',
+      noExcerpt: 'ไม่มีข้อความบางส่วน',
+      noAttachments: 'ไม่มีไฟล์แนบ',
+    },
+    field: {
+      required: 'จำเป็นต้องกรอก',
+      readonly: 'อ่านอย่างเดียว',
+      empty: 'ยังไม่กรอก',
+      hidden: 'ซ่อนข้อมูลที่อ่อนไหวแล้ว',
+      selectPlaceholder: 'เลือก',
+    },
+    error: {
+      loadFailed: 'โหลดรายละเอียดงานออเดอร์ V4 ไม่สำเร็จ',
+      actionFailed: 'ดำเนินการไม่สำเร็จ โปรดตรวจข้อมูลตอบกลับจากหลังบ้าน',
+    },
+  },
+  sourceNotification: {
+    title: 'รายละเอียดแจ้งเตือนต้นทาง',
+    subtitle: 'แจ้งเตือนข้อความต้นทาง S10/S99 แบบอ่านอย่างเดียว ไม่เข้าสู่การจัดการออเดอร์หรือการ์ดงาน',
+    summary: 'สรุปแจ้งเตือน',
+    notificationId: 'รหัสแจ้งเตือน',
+    routeCode: 'รหัสเส้นทาง',
+    status: 'สถานะแจ้งเตือน',
+    sourceMessage: 'อีเมลต้นทาง',
+    ackReason: 'หมายเหตุการจัดการ',
+    ackReasonPlaceholder: 'ไม่บังคับ ระบุเหตุผลที่อ่านแล้วหรือจัดการแล้ว',
+    ack: 'ยืนยันว่าอ่านแล้ว',
+    acking: 'กำลังยืนยัน',
+    acked: 'ยืนยันว่าอ่านแล้วและรีเฟรชรายละเอียดแล้ว',
+    noBusinessEntry: 'แจ้งเตือนนี้ไม่ผูกกับออเดอร์ การ์ดธุรกิจ การแก้ไขข้อมูล การตรวจสอบ หรือ OPERA',
+    error: {
+      loadFailed: 'โหลดรายละเอียดแจ้งเตือนต้นทางไม่สำเร็จ',
+      ackFailed: 'ยืนยันว่าอ่านแล้วไม่สำเร็จ โปรดตรวจข้อมูลตอบกลับจากหลังบ้าน',
+    },
+  },
   task: {
     title: 'การ์ดงาน',
     fieldContract: 'สัญญาข้อมูล',
@@ -653,6 +742,12 @@ export default {
     SUCCEEDED: 'สำเร็จ',
     BLOCKED: 'ถูกบล็อก',
     SKIPPED: 'ข้าม',
+    OPEN: 'กำลังดำเนินการ',
+    READONLY: 'อ่านอย่างเดียว',
+    REVIEW_REQUIRED: 'รอตรวจสอบ',
+    CONFIRMED: 'ยืนยันแล้ว',
+    ACK_REQUIRED: 'รอยืนยันว่าอ่านแล้ว',
+    ACKED: 'อ่านแล้ว',
   },
   cardType: {
     NEW_BOOKING: 'จองใหม่',
diff --git a/client/src/i18n/locales/zh-CN.ts b/client/src/i18n/locales/zh-CN.ts
index db6352c..cd495de 100644
--- a/client/src/i18n/locales/zh-CN.ts
+++ b/client/src/i18n/locales/zh-CN.ts
@@ -33,6 +33,7 @@ export default {
     orderDetail: '订单详情',
     taskDetail: '任务详情',
     sourceMessageConversation: '邮件会话',
+    sourceNotificationDetail: '来源通知详情',
     debugEml: 'Debug EML',
     systemSettings: '系统设置',
     systemUsers: '用户管理',
@@ -432,6 +433,19 @@ export default {
     totalSuffix: '条任务',
     noSourceSubject: '暂无来源主题',
     sourceReceivedAt: '来源时间',
+    itemType: '工作项类型',
+    itemTypeOrderTask: '订单任务',
+    itemTypeSourceNotification: '来源通知',
+    orderTaskStatus: '订单任务状态',
+    cardStatus: '卡片状态',
+    orderUnresolved: '订单归属待确认',
+    sourceNotificationNoOrder: '不关联订单',
+    sourceNotificationNoOrderHint: 'S10/S99 只读来源通知',
+    cardCountsTotal: '共 {total} 张卡',
+    cardCountsPending: '待确认 {count}',
+    cardCountsReview: '待复核 {count}',
+    cardCountsConfirmed: '已确认 {count}',
+    viewNotification: '查看通知',
     canProcess: '可处理',
     cannotProcess: '不可处理',
     queueParticipation: '是否参与队列',
@@ -444,14 +458,89 @@ export default {
     sourceOnlyOrderLabel: '来源消息只读',
     hiddenTechnicalOrder: '不关联可见订单',
     columns: {
+      item: '工作项',
       task: '任务',
       order: '订单',
       card: '任务卡',
       status: '状态',
       source: '来源邮件',
+      cards: '卡片',
       queue: '队列',
     },
   },
+  taskV4: {
+    title: 'V4 订单任务详情',
+    subtitle: '按后端 V4 任务卡模型处理当前订单任务',
+    orderTaskSummary: '订单任务摘要',
+    orderTaskId: '订单任务编号',
+    orderReference: '订单引用',
+    targetBookingType: '目标预订类型',
+    targetLocator: '目标定位信息',
+    targetResolutionStatus: '归属确认状态',
+    cardCounts: '任务卡统计',
+    sourceMessageCard: '来源邮件卡',
+    basicInformationCard: '基础信息卡',
+    businessCards: '业务任务卡',
+    adapterContractErrors: '适配契约诊断',
+    noAdapterContractErrors: '暂无适配契约异常。',
+    noBusinessCards: '暂无业务任务卡。',
+    displayPayload: '展示摘要',
+    rawCardPayload: '卡片安全摘要',
+    readonlyReason: '不可操作原因',
+    blockedReason: '阻塞原因',
+    confirmCard: '确认卡片',
+    confirmingCard: '确认中',
+    resolveReview: '提交复核',
+    resolvingReview: '提交中',
+    reviewReason: '复核说明',
+    reviewReasonPlaceholder: '可选，说明人工判断依据',
+    confirmedOrderId: '确认订单编号',
+    confirmedOrderIdPlaceholder: '订单归属未解决时填写',
+    confirmedOrderRequired: '订单归属未解决，请先填写确认订单编号。',
+    cardConfirmed: '卡片已确认，详情已刷新。',
+    reviewResolved: '复核已提交，详情已刷新。',
+    validationFailed: '请先修正当前卡片字段。',
+    sourceMessage: {
+      subject: '主题',
+      sender: '发件人',
+      receivedAt: '接收时间',
+      conversationCount: '会话邮件数',
+      attachments: '附件',
+      excerpt: '邮件片段',
+      noExcerpt: '暂无邮件片段',
+      noAttachments: '无附件',
+    },
+    field: {
+      required: '必填',
+      readonly: '只读',
+      empty: '未填写',
+      hidden: '敏感内容已隐藏',
+      selectPlaceholder: '请选择',
+    },
+    error: {
+      loadFailed: 'V4 订单任务详情加载失败。',
+      actionFailed: '操作失败，请检查后端返回信息。',
+    },
+  },
+  sourceNotification: {
+    title: '来源通知详情',
+    subtitle: 'S10/S99 来源消息只读通知，不进入订单或任务卡处理。',
+    summary: '通知摘要',
+    notificationId: '通知编号',
+    routeCode: '路由代码',
+    status: '通知状态',
+    sourceMessage: '来源邮件',
+    ackReason: '处理说明',
+    ackReasonPlaceholder: '可选，说明已读或已处理依据',
+    ack: '确认已读',
+    acking: '确认中',
+    acked: '已确认已读，详情已刷新。',
+    noBusinessEntry: '该通知不关联订单、业务卡、字段编辑、复核或 OPERA 操作。',
+    error: {
+      loadFailed: '来源通知详情加载失败。',
+      ackFailed: '确认已读失败，请检查后端返回信息。',
+    },
+  },
   task: {
     title: '任务卡',
     fieldContract: '字段契约',
@@ -653,6 +742,12 @@ export default {
     SUCCEEDED: '成功',
     BLOCKED: '阻塞',
     SKIPPED: '跳过',
+    OPEN: '处理中',
+    READONLY: '只读',
+    REVIEW_REQUIRED: '待复核',
+    CONFIRMED: '已确认',
+    ACK_REQUIRED: '待确认已读',
+    ACKED: '已读',
   },
   cardType: {
     NEW_BOOKING: '新预订',
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index c2d50dc..9ee2b18 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -42,7 +42,7 @@ export const router = createRouter({
     },
     {
       path: '/reservation/workbench',
-      redirect: '/reservation/orders',
+      redirect: '/reservation/tasks',
     },
     {
       path: '/reservation/orders',
@@ -98,6 +98,24 @@ export const router = createRouter({
         permission: 'RESERVATION_TASK_READ',
       },
     },
+    {
+      path: '/reservation/order-tasks/:orderTaskId',
+      name: 'reservation-v4-order-task-detail',
+      component: () => import('@/views/reservation/ReservationV4OrderTaskDetailView.vue'),
+      meta: {
+        titleKey: 'nav.taskDetail',
+        permission: 'RESERVATION_TASK_READ',
+      },
+    },
+    {
+      path: '/reservation/source-notifications/:notificationId',
+      name: 'reservation-v4-source-notification-detail',
+      component: () => import('@/views/reservation/ReservationV4SourceNotificationDetailView.vue'),
+      meta: {
+        titleKey: 'nav.sourceNotificationDetail',
+        permission: 'RESERVATION_TASK_READ',
+      },
+    },
     {
       path: '/reservation/source-messages/:sourceMessageId/conversation',
       name: 'reservation-source-message-conversation',
diff --git a/client/src/services/reservationService.ts b/client/src/services/reservationService.ts
index 99d30bd..b32435a 100644
--- a/client/src/services/reservationService.ts
+++ b/client/src/services/reservationService.ts
@@ -25,6 +25,15 @@ import type {
   ReservationTaskListResult,
   ReservationTaskPayloadMutationRequest,
   ReservationTaskPayloadMutationResult,
+  ReservationV4CardConfirmRequest,
+  ReservationV4OrderTaskDetailResult,
+  ReservationV4OrderTaskListFilters,
+  ReservationV4OrderTaskListResult,
+  ReservationV4ReviewResolutionRequest,
+  ReservationV4SourceNotificationAckRequest,
+  ReservationV4SourceNotificationDetailResult,
+  ReservationV4WorkbenchFilters,
+  ReservationV4WorkbenchListResult,
   SourceMessageConversationResult,
 } from '@/types/reservation'
 
@@ -42,6 +51,22 @@ export async function fetchReservationTaskList(
   return getJson<ReservationTaskListResult>(withQuery('/api/reservation/tasks', withReservationHotel(filters)))
 }
 
+export async function fetchReservationV4WorkbenchItems(
+  filters: ReservationV4WorkbenchFilters = {},
+): Promise<ReservationV4WorkbenchListResult> {
+  return getJson<ReservationV4WorkbenchListResult>(
+    withQuery('/api/reservation/workbench-items', withReservationHotel(filters)),
+  )
+}
+
+export async function fetchReservationV4OrderTasks(
+  filters: ReservationV4OrderTaskListFilters = {},
+): Promise<ReservationV4OrderTaskListResult> {
+  return getJson<ReservationV4OrderTaskListResult>(
+    withQuery('/api/reservation/order-tasks', withReservationHotel(filters)),
+  )
+}
+
 export async function fetchReservationOrderDetail(orderId: string): Promise<ReservationOrderDetailResult> {
   return getJson<ReservationOrderDetailResult>(
     withQuery(`/api/reservation/orders/${encodeURIComponent(orderId)}`, {
@@ -67,6 +92,61 @@ export async function fetchReservationTaskDetail(taskId: string): Promise<Reserv
   return getJson<ReservationTaskDetailResult>(`/api/reservation/tasks/${taskId}`)
 }
 
+export async function fetchReservationV4OrderTaskDetail(
+  orderTaskId: string,
+): Promise<ReservationV4OrderTaskDetailResult> {
+  return getJson<ReservationV4OrderTaskDetailResult>(
+    withQuery(`/api/reservation/order-tasks/${encodeURIComponent(orderTaskId)}`, {
+      hotel_id: getReservationHotelId(),
+    }),
+  )
+}
+
+export async function fetchReservationV4SourceNotificationDetail(
+  notificationId: string,
+): Promise<ReservationV4SourceNotificationDetailResult> {
+  return getJson<ReservationV4SourceNotificationDetailResult>(
+    withQuery(`/api/reservation/source-notifications/${encodeURIComponent(notificationId)}`, {
+      hotel_id: getReservationHotelId(),
+    }),
+  )
+}
+
+export async function confirmReservationV4OrderTaskCard(
+  orderTaskId: string,
+  cardId: string,
+  request: ReservationV4CardConfirmRequest,
+): Promise<ReservationV4OrderTaskDetailResult> {
+  return sendJson<ReservationV4OrderTaskDetailResult>(
+    `/api/reservation/order-tasks/${encodeURIComponent(orderTaskId)}/cards/${encodeURIComponent(cardId)}/confirm`,
+    'POST',
+    request,
+  )
+}
+
+export async function resolveReservationV4OrderTaskCardReview(
+  orderTaskId: string,
+  cardId: string,
+  request: ReservationV4ReviewResolutionRequest,
+): Promise<ReservationV4OrderTaskDetailResult> {
+  return sendJson<ReservationV4OrderTaskDetailResult>(
+    `/api/reservation/order-tasks/${encodeURIComponent(orderTaskId)}/cards/${encodeURIComponent(cardId)}/review-resolution`,
+    'POST',
+    request,
+  )
+}
+
+export async function ackReservationV4SourceNotification(
+  notificationId: string,
+  request: ReservationV4SourceNotificationAckRequest,
+): Promise<ReservationV4SourceNotificationDetailResult> {
+  return sendJson<ReservationV4SourceNotificationDetailResult>(
+    `/api/reservation/source-notifications/${encodeURIComponent(notificationId)}/ack`,
+    'POST',
+    request,
+  )
+}
+
 export async function saveReservationTaskDraft(
   taskId: string,
   request: ReservationTaskPayloadMutationRequest,
diff --git a/client/src/tests/reservationService.spec.ts b/client/src/tests/reservationService.spec.ts
index e8083a9..b04de52 100644
--- a/client/src/tests/reservationService.spec.ts
+++ b/client/src/tests/reservationService.spec.ts
@@ -2,12 +2,19 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
   convertReservationManualReviewTask,
+  ackReservationV4SourceNotification,
+  confirmReservationV4OrderTaskCard,
   fetchReservationOrderDetail,
   fetchReservationOrders,
   fetchReservationTaskDetail,
   fetchReservationTaskList,
+  fetchReservationV4OrderTaskDetail,
+  fetchReservationV4OrderTasks,
+  fetchReservationV4SourceNotificationDetail,
+  fetchReservationV4WorkbenchItems,
   fetchSourceMessageConversation,
   resolveReservationManualReviewTask,
+  resolveReservationV4OrderTaskCardReview,
 } from '@/services/reservationService'
 import { setReservationHotelIdProvider } from '@/config/reservationConfig'
 
@@ -129,6 +136,164 @@ describe('reservationService real API mode', () => {
     )
   })
 
+  it('fetches V4 workbench items from the backend with supported filters only', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      mockJsonResponse({
+        items: [],
+        page: {
+          page_num: 2,
+          page_size: 10,
+          total: 0,
+        },
+      }),
+    )
+    setReservationHotelIdProvider(() => 'HOTEL-BKK')
+
+    await fetchReservationV4WorkbenchItems({
+      item_type: 'SOURCE_NOTIFICATION',
+      keyword: 'S10',
+      page_num: 2,
+      page_size: 10,
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/reservation/workbench-items?hotel_id=HOTEL-BKK&item_type=SOURCE_NOTIFICATION&keyword=S10&page_num=2&page_size=10',
+      expect.objectContaining({ method: 'GET' }),
+    )
+  })
+
+  it('fetches V4 order tasks with order task and card status filters', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      mockJsonResponse({
+        items: [],
+        page: {
+          page_num: 1,
+          page_size: 20,
+          total: 0,
+        },
+      }),
+    )
+
+    await fetchReservationV4OrderTasks({
+      order_task_status: 'OPEN',
+      card_status: 'REVIEW_REQUIRED',
+      keyword: 'GRP',
+      page_num: 1,
+      page_size: 20,
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/reservation/order-tasks?order_task_status=OPEN&card_status=REVIEW_REQUIRED&keyword=GRP&page_num=1&page_size=20',
+      expect.objectContaining({ method: 'GET' }),
+    )
+  })
+
+  it('fetches V4 order task and source notification details by id', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(mockJsonResponse({ order_task: { order_task_id: '9001' } }))
+      .mockResolvedValueOnce(mockJsonResponse({ notification: { notification_id: '7001' } }))
+
+    await fetchReservationV4OrderTaskDetail('9001')
+    await fetchReservationV4SourceNotificationDetail('7001')
+
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      1,
+      '/api/reservation/order-tasks/9001',
+      expect.objectContaining({ method: 'GET' }),
+    )
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      2,
+      '/api/reservation/source-notifications/7001',
+      expect.objectContaining({ method: 'GET' }),
+    )
+  })
+
+  it('confirms a V4 task card with version and current-card payload', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      mockJsonResponse({
+        order_task: {
+          order_task_id: '9001',
+        },
+      }),
+    )
+
+    await confirmReservationV4OrderTaskCard('9001', '9101', {
+      version: 3,
+      confirmed_payload: {
+        basic_information: {
+          account_code: 'QBD_TRAVEL',
+        },
+      },
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/reservation/order-tasks/9001/cards/9101/confirm',
+      expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({
+          version: 3,
+          confirmed_payload: {
+            basic_information: {
+              account_code: 'QBD_TRAVEL',
+            },
+          },
+        }),
+      }),
+    )
+  })
+
+  it('resolves a V4 review card and acknowledges source notifications', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(mockJsonResponse({ order_task: { order_task_id: '9001' } }))
+      .mockResolvedValueOnce(mockJsonResponse({ notification: { notification_id: '7001' } }))
+
+    await resolveReservationV4OrderTaskCardReview('9001', '9102', {
+      version: 4,
+      confirmed_order_id: '20001',
+      reason: '人工确认',
+      field_overrides: [
+        {
+          field_pointer: '/business_fields/room_items/0/room_type_code',
+          value: 'TWN',
+        },
+      ],
+    })
+    await ackReservationV4SourceNotification('7001', {
+      version: 1,
+      reason: '已读',
+    })
+
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      1,
+      '/api/reservation/order-tasks/9001/cards/9102/review-resolution',
+      expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({
+          version: 4,
+          confirmed_order_id: '20001',
+          reason: '人工确认',
+          field_overrides: [
+            {
+              field_pointer: '/business_fields/room_items/0/room_type_code',
+              value: 'TWN',
+            },
+          ],
+        }),
+      }),
+    )
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      2,
+      '/api/reservation/source-notifications/7001/ack',
+      expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({
+          version: 1,
+          reason: '已读',
+        }),
+      }),
+    )
+  })
+
   it('fetches the order list from the backend by default', async () => {
     const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
       mockJsonResponse({
diff --git a/client/src/tests/reservationV4FieldRules.spec.ts b/client/src/tests/reservationV4FieldRules.spec.ts
new file mode 100644
index 0000000..681f0c4
--- /dev/null
+++ b/client/src/tests/reservationV4FieldRules.spec.ts
@@ -0,0 +1,191 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ReservationV4TaskCardFieldResult } from '@/types/reservation'
+import {
+  buildReservationV4ConfirmedPayload,
+  buildReservationV4InitialFieldValues,
+  buildReservationV4ReviewOverrides,
+  isReservationV4ConfirmWritableField,
+  isReservationV4ReviewWritableField,
+  stringifyReservationV4SafeDisplayValue,
+  validateReservationV4Fields,
+} from '@/utils/reservationV4FieldRules'
+
+function createV4Field(
+  field_pointer: string,
+  overrides: Partial<ReservationV4TaskCardFieldResult> = {},
+): ReservationV4TaskCardFieldResult {
+  return {
+    field_path: field_pointer.replace(/^\//, '').replace(/\//g, '.'),
+    field_pointer,
+    display_name: overrides.display_name ?? field_pointer,
+    value: overrides.value ?? '',
+    editable: overrides.editable ?? true,
+    required: overrides.required ?? false,
+    control_type: overrides.control_type ?? 'TEXT',
+    edit_scope: overrides.edit_scope ?? 'NORMAL_TASK',
+    write_target: overrides.write_target ?? 'CONFIRMED_PAYLOAD_JSON',
+    options_source: overrides.options_source ?? null,
+    raw_readonly: overrides.raw_readonly ?? false,
+    validation_errors: overrides.validation_errors ?? [],
+    control_hint: overrides.control_hint ?? null,
+  }
+}
+
+describe('reservationV4FieldRules', () => {
+  it('builds initial values from backend fields using field pointers', () => {
+    const fields = [
+      createV4Field('/basic_information/account_code', { value: 'HANATOUR' }),
+      createV4Field('/business_fields/after/room_items/0/room_type_code', { value: 'TWN' }),
+    ]
+
+    expect(buildReservationV4InitialFieldValues(fields)).toEqual({
+      '/basic_information/account_code': 'HANATOUR',
+      '/business_fields/after/room_items/0/room_type_code': 'TWN',
+    })
+  })
+
+  it('submits only editable confirm fields and keeps nested pointer structure', () => {
+    const fields = [
+      createV4Field('/basic_information/account_code', { value: 'OLD' }),
+      createV4Field('/basic_information/read_only_label', {
+        value: 'VISIBLE_ONLY',
+        editable: true,
+        raw_readonly: true,
+      }),
+      createV4Field('/business_fields/after/room_items/0/room_type_code', {
+        value: 'KING',
+        edit_scope: 'MANUAL_REVIEW_ONLY',
+        write_target: 'REVIEW_RESOLUTION_FIELD_OVERRIDES',
+      }),
+    ]
+
+    const payload = buildReservationV4ConfirmedPayload(fields, {
+      '/basic_information/account_code': 'HANATOUR',
+      '/basic_information/read_only_label': 'SHOULD_NOT_SEND',
+      '/business_fields/after/room_items/0/room_type_code': 'TWN',
+    })
+
+    expect(payload).toEqual({
+      basic_information: {
+        account_code: 'HANATOUR',
+      },
+    })
+  })
+
+  it('uses field_pointer for review resolution overrides', () => {
+    const fields = [
+      createV4Field('/business_fields/after/room_items/0/room_type_code', {
+        value: '',
+        edit_scope: 'MANUAL_REVIEW_ONLY',
+        write_target: 'REVIEW_RESOLUTION_FIELD_OVERRIDES',
+      }),
+      createV4Field('/business_fields/after/room_items/0/room_type_raw', {
+        value: 'TWN',
+        editable: false,
+        write_target: 'NONE',
+      }),
+    ]
+
+    expect(buildReservationV4ReviewOverrides(fields, {
+      '/business_fields/after/room_items/0/room_type_code': 'TWN',
+      '/business_fields/after/room_items/0/room_type_raw': 'Twin',
+    })).toEqual([
+      {
+        field_pointer: '/business_fields/after/room_items/0/room_type_code',
+        value: 'TWN',
+      },
+    ])
+  })
+
+  it('does not submit fields with missing V4 write metadata', () => {
+    const confirmField = createV4Field('/business_fields/after/room_items/0/rate_code')
+    confirmField.edit_scope = null
+    confirmField.write_target = null
+    const reviewField = createV4Field('/business_fields/after/room_items/0/room_type_code', {
+      edit_scope: 'MANUAL_REVIEW_ONLY',
+    })
+    reviewField.write_target = null
+
+    expect(isReservationV4ConfirmWritableField(confirmField)).toBe(false)
+    expect(isReservationV4ReviewWritableField(reviewField)).toBe(false)
+    expect(buildReservationV4ConfirmedPayload([confirmField], {
+      '/business_fields/after/room_items/0/rate_code': 'BAR',
+    })).toEqual({})
+    expect(buildReservationV4ReviewOverrides([reviewField], {
+      '/business_fields/after/room_items/0/room_type_code': 'TWN',
+    })).toEqual([])
+  })
+
+  it('allows review overrides only for basic information and business fields', () => {
+    const fields = [
+      createV4Field('/source_message/subject', {
+        edit_scope: 'MANUAL_REVIEW_ONLY',
+        write_target: 'REVIEW_RESOLUTION_FIELD_OVERRIDES',
+      }),
+      createV4Field('/business_fields/after/room_items/0/room_type_code', {
+        edit_scope: 'MANUAL_REVIEW_ONLY',
+        write_target: 'REVIEW_RESOLUTION_FIELD_OVERRIDES',
+      }),
+    ]
+
+    expect(buildReservationV4ReviewOverrides(fields, {
+      '/source_message/subject': 'SHOULD_NOT_SEND',
+      '/business_fields/after/room_items/0/room_type_code': 'TWN',
+    })).toEqual([
+      {
+        field_pointer: '/business_fields/after/room_items/0/room_type_code',
+        value: 'TWN',
+      },
+    ])
+  })
+
+  it('redacts nested raw body, evidence and URL values from safe display text', () => {
+    const text = stringifyReservationV4SafeDisplayValue({
+      business_fields: {
+        group_code: 'GRP-001',
+        raw_evidence: 'raw email body',
+        nested: {
+          room_type_code: 'TWN',
+          oss_url: 'https://oss.example/private-file.pdf',
+        },
+        safe_url_value: 'https://oss.example/also-hidden.pdf',
+      },
+    }, 'empty', 'hidden')
+
+    expect(text).toContain('GRP-001')
+    expect(text).toContain('TWN')
+    expect(text).not.toContain('raw email body')
+    expect(text).not.toContain('https://oss.example')
+    expect(text).not.toContain('oss_url')
+  })
+
+  it('redacts direct URL-like display values', () => {
+    expect(stringifyReservationV4SafeDisplayValue(
+      'https://oss.example/private-file.pdf',
+      'empty',
+      'hidden',
+    )).toBe('hidden')
+  })
+
+  it('validates only editable visible fields', () => {
+    const fields = [
+      createV4Field('/basic_information/account_code', {
+        display_name: 'Account',
+        required: true,
+      }),
+      createV4Field('/business_fields/after/room_items/0/room_type_code', {
+        display_name: 'Room type',
+        required: true,
+        editable: false,
+      }),
+    ]
+
+    expect(validateReservationV4Fields(fields, {
+      '/basic_information/account_code': '',
+      '/business_fields/after/room_items/0/room_type_code': '',
+    })).toEqual({
+      '/basic_information/account_code': 'Account is required',
+    })
+  })
+})
diff --git a/client/src/tests/reservationV4Views.spec.ts b/client/src/tests/reservationV4Views.spec.ts
new file mode 100644
index 0000000..73bab2c
--- /dev/null
+++ b/client/src/tests/reservationV4Views.spec.ts
@@ -0,0 +1,466 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+import zhCN from '@/i18n/locales/zh-CN'
+import { useAuthStore } from '@/stores/authStore'
+import type {
+  ReservationV4OrderTaskDetailResult,
+  ReservationV4SourceNotificationDetailResult,
+  ReservationV4TaskCardResult,
+} from '@/types/reservation'
+import ReservationV4OrderTaskDetailView from '@/views/reservation/ReservationV4OrderTaskDetailView.vue'
+import ReservationV4SourceNotificationDetailView from '@/views/reservation/ReservationV4SourceNotificationDetailView.vue'
+
+vi.mock('@/services/reservationService', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/services/reservationService')>()
+  return {
+    ...actual,
+    ackReservationV4SourceNotification: vi.fn(),
+    confirmReservationV4OrderTaskCard: vi.fn(),
+    fetchReservationV4OrderTaskDetail: vi.fn(),
+    fetchReservationV4SourceNotificationDetail: vi.fn(),
+    resolveReservationV4OrderTaskCardReview: vi.fn(),
+  }
+})
+
+const service = await import('@/services/reservationService')
+
+describe('reservation V4 pages', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+    vi.mocked(service.ackReservationV4SourceNotification).mockReset()
+    vi.mocked(service.confirmReservationV4OrderTaskCard).mockReset()
+    vi.mocked(service.fetchReservationV4OrderTaskDetail).mockReset()
+    vi.mocked(service.fetchReservationV4SourceNotificationDetail).mockReset()
+    vi.mocked(service.resolveReservationV4OrderTaskCardReview).mockReset()
+  })
+
+  it('renders V4 order task cards and confirms only editable basic information fields', async () => {
+    const detail = createOrderTaskDetail()
+    vi.mocked(service.fetchReservationV4OrderTaskDetail).mockResolvedValue(detail)
+    vi.mocked(service.confirmReservationV4OrderTaskCard).mockResolvedValue({
+      ...detail,
+      basic_information_card: {
+        ...detail.basic_information_card!,
+        card_status: 'CONFIRMED',
+      },
+    })
+
+    const wrapper = await mountWithPlugins(
+      ReservationV4OrderTaskDetailView,
+      '/reservation/order-tasks/9001',
+    )
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('V4 订单任务详情')
+    expect(wrapper.text()).toContain('Booking Request')
+    expect(wrapper.text()).toContain('基础信息卡')
+    expect(wrapper.text()).toContain('业务任务卡')
+    expect(wrapper.text()).toContain('Backend contract issue')
+
+    await wrapper.find('select').setValue('HANATOUR')
+    await wrapper.findAll('button').find((button) => button.text().includes('确认卡片'))?.trigger('click')
+    await flushPromises()
+
+    expect(service.confirmReservationV4OrderTaskCard).toHaveBeenCalledWith('9001', 'card-basic', {
+      version: 7,
+      confirmed_payload: {
+        basic_information: {
+          account_code: 'HANATOUR',
+        },
+      },
+    })
+  })
+
+  it('submits V4 review resolution with field_pointer overrides and confirmed order id', async () => {
+    const detail = createOrderTaskDetail({
+      businessCardStatus: 'REVIEW_REQUIRED',
+      businessCardAvailability: {
+        confirmable: false,
+        reviewable: true,
+      },
+    })
+    vi.mocked(service.fetchReservationV4OrderTaskDetail).mockResolvedValue(detail)
+    const resolvedBusinessCard = detail.business_cards[0]!
+    vi.mocked(service.resolveReservationV4OrderTaskCardReview).mockResolvedValue({
+      ...detail,
+      business_cards: [
+        {
+          ...resolvedBusinessCard,
+          card_status: 'PENDING_CONFIRM',
+          review_status: 'RESOLVED',
+        },
+      ],
+    })
+
+    const wrapper = await mountWithPlugins(
+      ReservationV4OrderTaskDetailView,
+      '/reservation/order-tasks/9001',
+    )
+    await flushPromises()
+
+    const selects = wrapper.findAll('select')
+    await selects[1]!.setValue('TWN')
+    const inputs = wrapper.findAll('input')
+    await inputs[0]!.setValue('order-2001')
+    await wrapper.find('textarea').setValue('confirmed by email evidence')
+    await wrapper.findAll('button').find((button) => button.text().includes('提交复核'))?.trigger('click')
+    await flushPromises()
+
+    expect(service.resolveReservationV4OrderTaskCardReview).toHaveBeenCalledWith('9001', 'card-room', {
+      version: 5,
+      confirmed_order_id: 'order-2001',
+      reason: 'confirmed by email evidence',
+      field_overrides: [
+        {
+          field_pointer: '/business_fields/after/room_items/0/room_type_code',
+          value: 'TWN',
+        },
+      ],
+    })
+  })
+
+  it('requires confirmed order id before resolving an unresolved V4 review card', async () => {
+    const detail = createOrderTaskDetail({
+      businessCardStatus: 'REVIEW_REQUIRED',
+      businessCardAvailability: {
+        confirmable: false,
+        reviewable: true,
+      },
+    })
+    vi.mocked(service.fetchReservationV4OrderTaskDetail).mockResolvedValue(detail)
+
+    const wrapper = await mountWithPlugins(
+      ReservationV4OrderTaskDetailView,
+      '/reservation/order-tasks/9001',
+    )
+    await flushPromises()
+
+    await wrapper.findAll('button').find((button) => button.text().includes('提交复核'))?.trigger('click')
+    await flushPromises()
+
+    expect(service.resolveReservationV4OrderTaskCardReview).not.toHaveBeenCalled()
+    expect(wrapper.text()).toContain(zhCN.taskV4.confirmedOrderRequired)
+  })
+
+  it('renders V4 source notification detail and acknowledges it without business actions', async () => {
+    const detail = createSourceNotificationDetail()
+    vi.mocked(service.fetchReservationV4SourceNotificationDetail).mockResolvedValue(detail)
+    vi.mocked(service.ackReservationV4SourceNotification).mockResolvedValue({
+      ...detail,
+      notification: {
+        ...detail.notification,
+        notification_status: 'ACKED',
+      },
+      availability: {
+        ...detail.availability,
+        ackable: false,
+      },
+    })
+
+    const wrapper = await mountWithPlugins(
+      ReservationV4SourceNotificationDetailView,
+      '/reservation/source-notifications/7001',
+    )
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('来源通知详情')
+    expect(wrapper.text()).toContain('FYI only')
+    expect(wrapper.text()).toContain('该通知不关联订单、业务卡、字段编辑、复核或 OPERA 操作')
+    expect(wrapper.text()).not.toContain('业务任务卡')
+    expect(wrapper.text()).not.toContain('确认卡片')
+
+    await wrapper.find('textarea').setValue('handled')
+    await wrapper.findAll('button').find((button) => button.text().includes('确认已读'))?.trigger('click')
+    await flushPromises()
+
+    expect(service.ackReservationV4SourceNotification).toHaveBeenCalledWith('7001', {
+      version: 3,
+      reason: 'handled',
+    })
+  })
+})
+
+async function mountWithPlugins(component: object, initialPath: string) {
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  const authStore = useAuthStore()
+  authStore.applyLoginResult({
+    access_token: 'test-token',
+    token_type: 'Bearer',
+    expires_at: '2026-07-08T04:00:00Z',
+    user: {
+      id: 'u1',
+      username: 'agent',
+      display_name: '系统管理员',
+      super_admin: false,
+    },
+    default_hotel_id: 'HOTEL-TEST',
+    hotels: [
+      {
+        hotel_id: 'HOTEL-TEST',
+        hotel_name: '测试酒店',
+        time_zone: 'Asia/Bangkok',
+        default_hotel: true,
+      },
+    ],
+    permissions: [
+      'RESERVATION_TASK_READ',
+      'RESERVATION_TASK_CONFIRM',
+      'RESERVATION_MANUAL_REVIEW_RESOLVE',
+      'SOURCE_MESSAGE_ORIGINAL_READ',
+    ],
+    menus: [],
+  })
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'zh-CN',
+    messages: {
+      'zh-CN': zhCN,
+    },
+  })
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', component: { template: '<div />' } },
+      { path: '/reservation/order-tasks/:orderTaskId', component: { template: '<div />' } },
+      { path: '/reservation/source-notifications/:notificationId', component: { template: '<div />' } },
+      { path: '/reservation/source-messages/:sourceMessageId/conversation', component: { template: '<div />' } },
+      { path: '/reservation/orders/:orderId', component: { template: '<div />' } },
+    ],
+  })
+  await router.push(initialPath)
+  await router.isReady()
+
+  return mount(component, {
+    global: {
+      plugins: [pinia, i18n, router],
+      stubs: {
+        RouterLink: {
+          template: '<a><slot /></a>',
+        },
+      },
+    },
+  })
+}
+
+function createOrderTaskDetail(options: {
+  businessCardStatus?: string
+  businessCardAvailability?: Partial<ReservationV4TaskCardResult['availability']>
+} = {}): ReservationV4OrderTaskDetailResult {
+  const sourceCard = createCard('card-source', 'SOURCE_MESSAGE_DISPLAY', 'READONLY', {
+    fields: [],
+    display_payload: {
+      subject: 'Booking Request',
+      sender_summary: 'guest@example.test',
+      relevant_message_excerpt: 'Please book one twin room.',
+      attachments: [
+        {
+          name: 'booking.pdf',
+          content_type: 'application/pdf',
+        },
+      ],
+    },
+  })
+  const basicCard = createCard('card-basic', 'BASIC_INFORMATION', 'PENDING_CONFIRM', {
+    version: 7,
+    fields: [
+      createField('/basic_information/account_code', {
+        display_name: 'Account',
+        value: '',
+        options_source: 'RESERVATION_V4_ACCOUNT_CATALOG',
+        control_type: 'SELECT',
+      }),
+      createField('/basic_information/read_only_marker', {
+        display_name: 'Read only marker',
+        value: 'VISIBLE',
+        editable: true,
+        raw_readonly: true,
+      }),
+    ],
+  })
+  const businessCard = createCard('card-room', 'ROOM_INFORMATION', options.businessCardStatus ?? 'PENDING_CONFIRM', {
+    version: 5,
+    availability: createAvailability({
+      confirmable: options.businessCardAvailability?.confirmable ?? true,
+      reviewable: options.businessCardAvailability?.reviewable ?? false,
+    }),
+    fields: [
+      createField('/business_fields/after/room_items/0/room_type_code', {
+        display_name: 'Room type',
+        value: '',
+        options_source: 'RESERVATION_V4_ROOM_TYPE_CATALOG',
+        control_type: 'SELECT',
+        edit_scope: options.businessCardStatus === 'REVIEW_REQUIRED' ? 'MANUAL_REVIEW_ONLY' : 'NORMAL_TASK',
+        write_target: options.businessCardStatus === 'REVIEW_REQUIRED'
+          ? 'REVIEW_RESOLUTION_FIELD_OVERRIDES'
+          : 'CONFIRMED_PAYLOAD_JSON',
+      }),
+    ],
+  })
+  return {
+    order_task: {
+      order_task_id: '9001',
+      hotel_id: 'HOTEL-TEST',
+      source_message_id: '30001',
+      ai_batch_id: 'batch-1',
+      order_ref: 'GRP-001',
+      order_context_index: 0,
+      order_id: null,
+      target_booking_type: 'GROUP',
+      target_locator_type: 'GROUP_CODE',
+      target_locator_value: 'GRP-001',
+      target_resolution_status: 'UNRESOLVED',
+      order_task_status: 'OPEN',
+      display_order_key: 'GRP-001',
+      source_received_at: '2026-07-08T03:00:00Z',
+      version: 11,
+      created_at: '2026-07-08T03:00:00Z',
+      updated_at: '2026-07-08T03:00:00Z',
+    },
+    source_message_summary: {
+      source_message_id: '30001',
+      hotel_id: 'HOTEL-TEST',
+      external_message_id: 'm1',
+      external_conversation_id: 'thread-1',
+      subject: 'Booking Request',
+      sender_summary: 'guest@example.test',
+      received_at: '2026-07-08T03:00:00Z',
+      source_sent_at: null,
+      conversation_message_count: 2,
+    },
+    bound_order: null,
+    source_message_card: sourceCard,
+    basic_information_card: basicCard,
+    business_cards: [businessCard],
+    card_counts: {
+      total_count: 3,
+      readonly_count: 1,
+      pending_confirm_count: 2,
+      review_required_count: options.businessCardStatus === 'REVIEW_REQUIRED' ? 1 : 0,
+      confirmed_count: 0,
+    },
+    adapter_contract_errors: [
+      {
+        transition_id: 'trans-1',
+        route_code: 'R02_NEW_GROUP_BLOCK_NORMAL',
+        result_type: 'ADAPTER_CONTRACT_ERROR',
+        adapter_error_code: 'ADAPTER_CONTRACT_ERROR',
+        adapter_error_message: 'Backend contract issue',
+        payload_fragment: null,
+      },
+    ],
+    availability: createAvailability(),
+  }
+}
+
+function createSourceNotificationDetail(): ReservationV4SourceNotificationDetailResult {
+  return {
+    notification: {
+      notification_id: '7001',
+      hotel_id: 'HOTEL-TEST',
+      source_message_id: '30002',
+      ai_batch_id: 'batch-2',
+      ai_transition_id: 'transition-2',
+      route_code: 'S10',
+      notification_status: 'ACK_REQUIRED',
+      source_received_at: '2026-07-08T03:00:00Z',
+      ack_by: null,
+      ack_at: null,
+      version: 3,
+      created_at: '2026-07-08T03:00:00Z',
+      updated_at: '2026-07-08T03:00:00Z',
+    },
+    conversation_summary: {
+      source_message_id: '30002',
+      hotel_id: 'HOTEL-TEST',
+      external_message_id: 'm2',
+      external_conversation_id: 'thread-2',
+      subject: 'FYI only',
+      sender_summary: 'guest@example.test',
+      received_at: '2026-07-08T03:00:00Z',
+      source_sent_at: null,
+      conversation_message_count: 1,
+    },
+    source_message_card: createCard('card-source-notification', 'SOURCE_MESSAGE_NOTIFICATION', 'ACK_REQUIRED', {
+      display_payload: {
+        subject: 'FYI only',
+        relevant_message_excerpt: 'Thanks for the update.',
+      },
+    }),
+    availability: createAvailability({
+      ackable: true,
+      confirmable: false,
+      editable: false,
+    }),
+  }
+}
+
+function createCard(
+  card_id: string,
+  card_type: string,
+  card_status: string,
+  overrides: Partial<ReservationV4TaskCardResult> = {},
+): ReservationV4TaskCardResult {
+  return {
+    card_id,
+    card_type,
+    event_type: null,
+    source_event_index: null,
+    card_sort_order: null,
+    card_status,
+    review_status: null,
+    display_payload: overrides.display_payload ?? null,
+    confirmed_payload: null,
+    review_resolution: null,
+    validation_errors: null,
+    fields: overrides.fields ?? [],
+    confirmed_by: null,
+    confirmed_at: null,
+    version: overrides.version ?? 1,
+    created_at: '2026-07-08T03:00:00Z',
+    updated_at: '2026-07-08T03:00:00Z',
+    availability: createAvailability(overrides.availability),
+  }
+}
+
+function createField(
+  field_pointer: string,
+  overrides: Partial<ReservationV4TaskCardResult['fields'][number]> = {},
+): ReservationV4TaskCardResult['fields'][number] {
+  return {
+    field_path: field_pointer.replace(/^\//, '').replace(/\//g, '.'),
+    field_pointer,
+    display_name: overrides.display_name ?? field_pointer,
+    value: overrides.value ?? '',
+    editable: overrides.editable ?? true,
+    required: overrides.required ?? false,
+    control_type: overrides.control_type ?? 'TEXT',
+    edit_scope: overrides.edit_scope ?? 'NORMAL_TASK',
+    write_target: overrides.write_target ?? 'CONFIRMED_PAYLOAD_JSON',
+    options_source: overrides.options_source ?? null,
+    raw_readonly: overrides.raw_readonly ?? false,
+    validation_errors: overrides.validation_errors ?? [],
+    control_hint: overrides.control_hint ?? null,
+  }
+}
+
+function createAvailability(
+  overrides: Partial<ReservationV4TaskCardResult['availability']> = {},
+): ReservationV4TaskCardResult['availability'] {
+  return {
+    blocked: overrides.blocked ?? false,
+    read_only: overrides.read_only ?? false,
+    editable: overrides.editable ?? true,
+    confirmable: overrides.confirmable ?? true,
+    reviewable: overrides.reviewable ?? false,
+    ackable: overrides.ackable ?? false,
+    readonly_reason_code: overrides.readonly_reason_code ?? null,
+    blocked_by_order_task_id: overrides.blocked_by_order_task_id ?? null,
+    blocked_by_card_id: overrides.blocked_by_card_id ?? null,
+    blocked_reason: overrides.blocked_reason ?? null,
+  }
+}
diff --git a/client/src/tests/reservationViews.spec.ts b/client/src/tests/reservationViews.spec.ts
index a591b7a..a8c134f 100644
--- a/client/src/tests/reservationViews.spec.ts
+++ b/client/src/tests/reservationViews.spec.ts
@@ -10,7 +10,11 @@ import ReservationOrderListView from '@/views/reservation/ReservationOrderListVi
 import ReservationSourceMessageConversationView from '@/views/reservation/ReservationSourceMessageConversationView.vue'
 import ReservationTaskListView from '@/views/reservation/ReservationTaskListView.vue'
 import { useAuthStore } from '@/stores/authStore'
-import type { ReservationTaskListResult, SourceMessageConversationResult } from '@/types/reservation'
+import type {
+  ReservationV4OrderTaskListResult,
+  ReservationV4WorkbenchListResult,
+  SourceMessageConversationResult,
+} from '@/types/reservation'
 
 vi.mock('@/services/reservationService', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/services/reservationService')>()
@@ -19,6 +23,8 @@ vi.mock('@/services/reservationService', async (importOriginal) => {
     fetchReservationOrderDetail: vi.fn(),
     fetchReservationOrders: vi.fn(),
     fetchReservationTaskList: vi.fn(),
+    fetchReservationV4OrderTasks: vi.fn(),
+    fetchReservationV4WorkbenchItems: vi.fn(),
     fetchSourceMessageConversation: vi.fn(),
   }
 })
@@ -54,37 +60,47 @@ function createOrderListResult(
   }
 }
 
-function createTaskListResult(
-  displayOrderKey: string,
-  sourceSubject: string,
+function createV4WorkbenchResult(
+  displayOrderKey = 'GRP-001',
+  sourceSubject = 'Booking Request',
   page: { page_num: number; page_size: number; total: number } = {
     page_num: 1,
     page_size: 20,
     total: 1,
   },
-): ReservationTaskListResult {
+): ReservationV4WorkbenchListResult {
   return {
     items: [
       {
-        task_id: displayOrderKey === 'GRP-NEW' ? '10002' : '10001',
-        order_id: '20001',
+        item_type: 'ORDER_TASK',
+        target_id: displayOrderKey === 'GRP-NEW' ? '9002' : '9001',
         hotel_id: 'HOTEL-TEST',
-        display_order_key: displayOrderKey,
-        temporary_order_no: null,
-        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: sourceSubject,
-        source_sender_summary: null,
-        source_received_at: null,
-        external_conversation_id: null,
-        conversation_message_count: null,
+        source_message_summary: {
+          source_message_id: '30001',
+          hotel_id: 'HOTEL-TEST',
+          external_message_id: 'msg-30001',
+          external_conversation_id: 'thread-30001',
+          subject: sourceSubject,
+          sender_summary: 'guest@example.test',
+          received_at: '2026-07-08T03:00:00Z',
+          source_sent_at: null,
+          conversation_message_count: 2,
+        },
+        source_received_at: '2026-07-08T03:00:00Z',
+        display_order_key: displayOrderKey,
+        card_counts: {
+          total_count: 3,
+          readonly_count: 1,
+          pending_confirm_count: 1,
+          review_required_count: 1,
+          confirmed_count: 0,
+        },
+        next_action_card_id: '9101',
+        notification_status: null,
+        order_task_status: 'OPEN',
+        display_status: 'OPEN',
+        readonly_reason_code: null,
         created_at: '2026-07-08T03:00:00Z',
         updated_at: '2026-07-08T03:10:00Z',
       },
@@ -93,33 +109,33 @@ function createTaskListResult(
   }
 }
 
-function createSourceMessageOnlyTaskListResult(taskSubtype: 'S10' | 'S99' = 'S10') {
+function createV4SourceNotificationWorkbenchResult(routeCode: 'S10' | 'S99' = 'S10'): ReservationV4WorkbenchListResult {
   return {
     items: [
       {
-        task_id: taskSubtype === 'S10' ? '19990' : '19999',
-        order_id: taskSubtype === 'S10' ? '29990' : '29999',
+        item_type: 'SOURCE_NOTIFICATION',
+        target_id: routeCode === 'S10' ? '7001' : '7002',
         hotel_id: 'HOTEL-TEST',
-        display_order_key: null,
-        temporary_order_no: null,
-        task_type: 'MESSAGE_NOTIFICATION',
-        task_subtype: taskSubtype,
-        result_type: 'source_message_review_notification',
-        ai_task_type: 'Message Notification',
-        route_code: taskSubtype,
-        system_process_category: 'SOURCE_MESSAGE_NOTIFICATION',
-        task_status: 'COMPLETED',
-        card_name: 'Message Notification',
-        queue_sequence: null,
-        queue_participation: false,
-        can_process: false,
-        readonly_reason_code: 'QUEUE_EXCLUDED',
-        source_message_id: taskSubtype === 'S10' ? '39990' : '39999',
-        source_subject: taskSubtype === 'S10' ? 'FYI only' : 'Unclear email',
-        source_sender_summary: 'guest@example.test',
+        source_message_id: routeCode === 'S10' ? '39990' : '39999',
+        source_message_summary: {
+          source_message_id: routeCode === 'S10' ? '39990' : '39999',
+          hotel_id: 'HOTEL-TEST',
+          external_message_id: `msg-${routeCode}`,
+          external_conversation_id: 'thread-source-only',
+          subject: routeCode === 'S10' ? 'FYI only' : 'Unclear email',
+          sender_summary: 'guest@example.test',
+          received_at: '2026-07-08T03:00:00Z',
+          source_sent_at: null,
+          conversation_message_count: 1,
+        },
         source_received_at: '2026-07-08T03:00:00Z',
-        external_conversation_id: 'thread-source-only',
-        conversation_message_count: 1,
+        display_order_key: null,
+        card_counts: null,
+        next_action_card_id: null,
+        notification_status: 'ACK_REQUIRED',
+        order_task_status: null,
+        display_status: 'ACK_REQUIRED',
+        readonly_reason_code: null,
         created_at: '2026-07-08T03:00:00Z',
         updated_at: '2026-07-08T03:10:00Z',
       },
@@ -132,19 +148,73 @@ function createSourceMessageOnlyTaskListResult(taskSubtype: 'S10' | 'S99' = 'S10
   }
 }
 
-function createParentGroupCancelAllotmentTaskListResult(): ReservationTaskListResult {
-  const result = createTaskListResult('PARENT-2608-BLOCK', 'Parent split confirmation')
-  result.items[0] = {
-    ...result.items[0]!,
-    task_type: 'CANCEL_BOOKING',
-    task_subtype: 'cancel_allotment_control_block',
-    result_type: 'normal_task',
-    ai_task_type: 'Cancel Allotment',
-    route_code: 'R08_CANCEL_ALLOTMENT_CONTROL_BLOCK_NORMAL',
-    system_process_category: 'BUSINESS_TASK',
-    card_name: 'CANCEL_ALLOTMENT',
+function createV4OrderTaskListResult(
+  displayOrderKey = 'GRP-002',
+  sourceSubject = 'Booking Update',
+  page: { page_num: number; page_size: number; total: number } = {
+    page_num: 1,
+    page_size: 20,
+    total: 1,
+  },
+): ReservationV4OrderTaskListResult {
+  return {
+    items: [
+      {
+        order_task: {
+          order_task_id: displayOrderKey === 'GRP-NEW' ? '9002' : '9001',
+          hotel_id: 'HOTEL-TEST',
+          source_message_id: '30002',
+          ai_batch_id: '8001',
+          order_ref: 'order-1',
+          order_context_index: 1,
+          order_id: '20001',
+          target_booking_type: 'GROUP',
+          target_locator_type: 'GROUP_CODE',
+          target_locator_value: displayOrderKey,
+          target_resolution_status: 'RESOLVED',
+          order_task_status: 'OPEN',
+          display_order_key: displayOrderKey,
+          source_received_at: '2026-07-08T04:00:00Z',
+          version: 0,
+          created_at: '2026-07-08T04:00:00Z',
+          updated_at: '2026-07-08T04:10:00Z',
+        },
+        source_message_summary: {
+          source_message_id: '30002',
+          hotel_id: 'HOTEL-TEST',
+          external_message_id: 'msg-30002',
+          external_conversation_id: 'thread-30002',
+          subject: sourceSubject,
+          sender_summary: 'agent@example.test',
+          received_at: '2026-07-08T04:00:00Z',
+          source_sent_at: null,
+          conversation_message_count: 3,
+        },
+        card_counts: {
+          total_count: 2,
+          readonly_count: 1,
+          pending_confirm_count: 1,
+          review_required_count: 0,
+          confirmed_count: 0,
+        },
+        next_action_card_id: '9102',
+        display_status: 'OPEN',
+        availability: {
+          blocked: false,
+          read_only: false,
+          editable: true,
+          confirmable: true,
+          reviewable: false,
+          ackable: false,
+          readonly_reason_code: null,
+          blocked_by_order_task_id: null,
+          blocked_by_card_id: null,
+          blocked_reason: null,
+        },
+      },
+    ],
+    page,
   }
-  return result
 }
 
 function createOrderDetailResult(displayName = 'GRP-001') {
@@ -343,6 +413,8 @@ async function mountWithPlugins(component: object, initialPath = '/', stubs: Rec
       { path: '/', component: { template: '<div />' } },
       { path: '/reservation/orders/:orderId', component: { template: '<div />' } },
       { path: '/reservation/tasks/:taskId', component: { template: '<div />' } },
+      { path: '/reservation/order-tasks/:orderTaskId', component: { template: '<div />' } },
+      { path: '/reservation/source-notifications/:notificationId', component: { template: '<div />' } },
       { path: '/reservation/source-messages/:sourceMessageId/conversation', component: { template: '<div />' } },
     ],
   })
@@ -369,6 +441,8 @@ describe('reservation P0 views', () => {
     vi.mocked(service.fetchReservationOrderDetail).mockReset()
     vi.mocked(service.fetchReservationOrders).mockReset()
     vi.mocked(service.fetchReservationTaskList).mockReset()
+    vi.mocked(service.fetchReservationV4OrderTasks).mockReset()
+    vi.mocked(service.fetchReservationV4WorkbenchItems).mockReset()
     vi.mocked(service.fetchSourceMessageConversation).mockReset()
   })
 
@@ -483,209 +557,127 @@ describe('reservation P0 views', () => {
     expect(wrapper.text()).toContain('GRP-002')
   })
 
-  it('renders task list items returned by the backend', async () => {
-    vi.mocked(service.fetchReservationTaskList).mockResolvedValue(createTaskListResult('GRP-001', 'Booking Request'))
+  it('renders V4 workbench items returned by the backend', async () => {
+    vi.mocked(service.fetchReservationV4WorkbenchItems).mockResolvedValue(createV4WorkbenchResult('GRP-001', 'Booking Request'))
 
     const wrapper = await mountWithPlugins(ReservationTaskListView)
     await vi.dynamicImportSettled()
 
     expect(wrapper.text()).toContain('GRP-001')
     expect(wrapper.text()).toContain('Booking Request')
-    expect(wrapper.text()).toContain('新预订')
+    expect(wrapper.text()).toContain('订单任务')
+    expect(wrapper.text()).toContain('待确认 1')
+    expect(wrapper.text()).toContain('待复核 1')
     expect(wrapper.text()).toContain('查看邮件会话')
     expect(wrapper.text()).not.toContain('接口待补')
-    expect(wrapper.text()).not.toContain('NEW_BOOKING / NEW_BOOKING')
+    expect(service.fetchReservationV4WorkbenchItems).toHaveBeenCalledWith(
+      expect.objectContaining({
+        page_num: 1,
+        page_size: 20,
+      }),
+    )
+    expect(service.fetchReservationTaskList).not.toHaveBeenCalled()
   })
 
   it('renders task source received time in the source email column', async () => {
-    const taskListResult = createTaskListResult('GRP-001', 'Booking Request')
-    taskListResult.items[0] = {
-      ...taskListResult.items[0]!,
-      source_sender_summary: 'guest@example.test',
-      source_received_at: '2026-07-08T03:00:00Z',
-    }
-    vi.mocked(service.fetchReservationTaskList).mockResolvedValue(taskListResult)
+    vi.mocked(service.fetchReservationV4WorkbenchItems).mockResolvedValue(createV4WorkbenchResult('GRP-001', 'Booking Request'))
 
     const wrapper = await mountWithPlugins(ReservationTaskListView)
     await vi.dynamicImportSettled()
 
     expect(wrapper.text()).toContain('来源时间')
     expect(wrapper.text()).toContain('2026-07-08 10:00:00')
+    expect(wrapper.text()).toContain('guest@example.test')
   })
 
-  it('filters source-message-only tasks with S10 and S99 subtypes', async () => {
-    vi.mocked(service.fetchReservationTaskList).mockResolvedValue(createSourceMessageOnlyTaskListResult('S10'))
+  it('renders V4 S10/S99 source notification rows without a visible order action', async () => {
+    vi.mocked(service.fetchReservationV4WorkbenchItems).mockResolvedValue(createV4SourceNotificationWorkbenchResult('S10'))
 
     const wrapper = await mountWithPlugins(ReservationTaskListView)
     await vi.dynamicImportSettled()
 
-    const taskTypeOptions = wrapper.find('select[name="task_type"]').findAll('option')
-      .map((option) => option.attributes('value'))
-    const taskSubtypeOptions = wrapper.find('select[name="task_subtype"]').findAll('option')
-      .map((option) => option.attributes('value'))
+    expect(wrapper.text()).toContain('FYI only')
+    expect(wrapper.text()).toContain('来源通知')
+    expect(wrapper.text()).toContain('待确认已读')
+    expect(wrapper.text()).toContain('查看通知')
+    expect(wrapper.text()).toContain('查看邮件会话')
+    expect(wrapper.text()).not.toContain('查看订单')
+  })
 
-    expect(taskTypeOptions).toEqual([
-      '',
-      'NEW_BOOKING',
-      'UPDATE_BOOKING',
-      'CANCEL_BOOKING',
-      'MANUAL_REVIEW',
-      'SOURCE_MESSAGE_ONLY',
-    ])
-    expect(taskTypeOptions).not.toContain('INFORMATIONAL_MESSAGE')
-    expect(taskSubtypeOptions).toEqual([
-      '',
-      'NEW_BOOKING',
-      'UPDATE_BOOKING',
-      'CANCEL_BOOKING',
-      'RATE_CHANGE',
-      'UPDATE_STAY_DATES',
-      'UPDATE_ROOM_TYPE',
-      'UPDATE_FIX_CHARGE',
-      'NEW_GROUP_BLOCK',
-      'NEW_FIT_RESERVATION',
-      'MANUAL_REVIEW',
-      'S10',
-      'S99',
-    ])
-    expect(taskSubtypeOptions).not.toContain('S000')
-    expect(taskSubtypeOptions).not.toContain('S999')
-    expect(taskSubtypeOptions).not.toContain('linked_parent_release_after_child_split')
-    expect(wrapper.find('select[name="task_type"]').text()).toContain('来源消息只读')
-    expect(wrapper.find('select[name="task_subtype"]').text()).toContain('纯信息类邮件（S10）')
-    expect(wrapper.find('select[name="task_subtype"]').text()).toContain('无法形成业务素材包（S99）')
+  it('filters V4 workbench with supported backend fields only', async () => {
+    vi.mocked(service.fetchReservationV4WorkbenchItems)
+      .mockResolvedValueOnce(createV4WorkbenchResult('GRP-001', 'Booking Request', { page_num: 1, page_size: 20, total: 45 }))
+      .mockResolvedValueOnce(createV4SourceNotificationWorkbenchResult('S10'))
 
-    await wrapper.find('select[name="task_type"]').setValue('SOURCE_MESSAGE_ONLY')
-    await vi.dynamicImportSettled()
-    await wrapper.find('select[name="task_subtype"]').setValue('S99')
+    const wrapper = await mountWithPlugins(ReservationTaskListView)
     await vi.dynamicImportSettled()
 
-    expect(service.fetchReservationTaskList).toHaveBeenLastCalledWith(
+    const itemTypeOptions = wrapper.find('select[name="item_type"]').findAll('option')
+      .map((option) => option.attributes('value'))
+
+    expect(itemTypeOptions).toEqual(['', 'ORDER_TASK', 'SOURCE_NOTIFICATION'])
+    expect(wrapper.find('select[name="item_type"]').text()).toContain('来源通知')
+    expect(wrapper.find('select[name="item_type"]').text()).not.toContain('INFORMATIONAL_MESSAGE')
+
+    await wrapper.find('select[name="item_type"]').setValue('SOURCE_NOTIFICATION')
+    await vi.dynamicImportSettled()
+
+    expect(service.fetchReservationV4WorkbenchItems).toHaveBeenLastCalledWith(
       expect.objectContaining({
-        task_type: 'SOURCE_MESSAGE_ONLY',
-        task_subtype: 'S99',
+        item_type: 'SOURCE_NOTIFICATION',
         page_num: 1,
       }),
     )
-    const lastTaskRequest = vi.mocked(service.fetchReservationTaskList).mock.calls[
-      vi.mocked(service.fetchReservationTaskList).mock.calls.length - 1
+    const lastTaskRequest = vi.mocked(service.fetchReservationV4WorkbenchItems).mock.calls[
+      vi.mocked(service.fetchReservationV4WorkbenchItems).mock.calls.length - 1
     ]?.[0] ?? {}
-    expect(Object.keys(lastTaskRequest).sort()).toEqual([
-      'keyword',
-      'order_status',
-      'page_num',
-      'page_size',
-      'queue_participation',
-      'task_status',
-      'task_subtype',
-      'task_type',
-    ])
+    expect(Object.keys(lastTaskRequest).sort()).toEqual(['item_type', 'keyword', 'page_num', 'page_size'])
+    expect(lastTaskRequest).not.toHaveProperty('task_type')
+    expect(lastTaskRequest).not.toHaveProperty('task_subtype')
     expect(lastTaskRequest).not.toHaveProperty('result_type')
     expect(lastTaskRequest).not.toHaveProperty('route_code')
-    expect(lastTaskRequest).not.toHaveProperty('system_process_category')
   })
 
-  it('renders R08 parent group cancel allotment as a business card', async () => {
-    vi.mocked(service.fetchReservationTaskList).mockResolvedValue(createParentGroupCancelAllotmentTaskListResult())
+  it('filters and paginates V4 business order tasks with supported backend fields', async () => {
+    vi.mocked(service.fetchReservationV4WorkbenchItems)
+      .mockResolvedValueOnce(createV4WorkbenchResult('GRP-001', 'Booking Request', { page_num: 1, page_size: 20, total: 45 }))
+    vi.mocked(service.fetchReservationV4OrderTasks)
+      .mockResolvedValueOnce(createV4OrderTaskListResult('GRP-001', 'Booking Request', { page_num: 1, page_size: 20, total: 45 }))
+      .mockResolvedValueOnce(createV4OrderTaskListResult('GRP-001', 'Booking Request', { page_num: 1, page_size: 20, total: 45 }))
+      .mockResolvedValueOnce(createV4OrderTaskListResult('GRP-001', 'Booking Request', { page_num: 1, page_size: 20, total: 45 }))
+      .mockResolvedValueOnce(createV4OrderTaskListResult('GRP-002', 'Booking Update', { page_num: 2, page_size: 20, total: 45 }))
 
     const wrapper = await mountWithPlugins(ReservationTaskListView)
     await vi.dynamicImportSettled()
 
-    expect(wrapper.text()).toContain('PARENT-2608-BLOCK')
-    expect(wrapper.text()).toContain('Parent Group')
-    expect(wrapper.text()).toContain('取消 Parent Group 配额')
-    expect(wrapper.text()).toContain('取消 Parent Group 整块配额')
-    expect(wrapper.text()).toContain('查看订单')
-    expect(wrapper.text()).not.toContain('适配契约异常')
-    expect(wrapper.text()).not.toContain('linked_parent_release_after_child_split')
-  })
+    expect(wrapper.find('select[name="order_task_status"]').attributes('disabled')).toBeDefined()
+    expect(wrapper.find('select[name="card_status"]').attributes('disabled')).toBeDefined()
 
-  it('renders source-message-only task rows without a visible order action', async () => {
-    vi.mocked(service.fetchReservationTaskList).mockResolvedValue(createSourceMessageOnlyTaskListResult('S10'))
+    await wrapper.find('select[name="item_type"]').setValue('ORDER_TASK')
+    await vi.dynamicImportSettled()
+    expect(wrapper.find('select[name="order_task_status"]').attributes('disabled')).toBeUndefined()
+    expect(wrapper.find('select[name="card_status"]').attributes('disabled')).toBeUndefined()
 
-    const wrapper = await mountWithPlugins(ReservationTaskListView)
+    await wrapper.find('select[name="order_task_status"]').setValue('OPEN')
+    await vi.dynamicImportSettled()
+    await wrapper.find('select[name="card_status"]').setValue('REVIEW_REQUIRED')
     await vi.dynamicImportSettled()
 
-    expect(wrapper.text()).toContain('来源消息只读')
-    expect(wrapper.text()).toContain('纯信息类邮件（S10）')
-    expect(wrapper.text()).toContain('来源消息通知')
-    expect(wrapper.text()).toContain('FYI only')
-    expect(wrapper.text()).toContain('查看任务')
-    expect(wrapper.text()).toContain('查看邮件会话')
-    expect(wrapper.text()).not.toContain('查看订单')
-    expect(wrapper.text()).not.toContain('29990')
-  })
-
-  it('does not treat a business task as source-message-only only because subtype is S10', async () => {
-    const result = createTaskListResult('GRP-S10-BUSINESS', 'Business booking request')
-    result.items[0] = {
-      ...result.items[0]!,
-      task_type: 'NEW_BOOKING',
-      task_subtype: 'S10',
-      result_type: 'normal_task',
-      ai_task_type: 'NEW_BOOKING',
-      route_code: 'S10',
-      system_process_category: 'BUSINESS_TASK',
-      card_name: 'New Booking',
-    }
-    vi.mocked(service.fetchReservationTaskList).mockResolvedValue(result)
-
-    const wrapper = await mountWithPlugins(ReservationTaskListView)
-    await vi.dynamicImportSettled()
-
-    const rowText = wrapper.find('tbody').text()
-    expect(rowText).toContain('GRP-S10-BUSINESS')
-    expect(rowText).toContain('20001')
-    expect(rowText).toContain('查看订单')
-    expect(rowText).not.toContain('来源消息只读')
-    expect(rowText).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-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()
-
-    expect(wrapper.text()).not.toContain('订单状态筛选待后端接入')
-    expect(wrapper.find('select[name="order_status"]').attributes('disabled')).toBeUndefined()
-    expect(wrapper.find('select[name="task_status"]').text()).toContain('执行中')
-    expect(wrapper.find('select[name="task_status"]').text()).toContain('失败')
-
-    await wrapper.find('select[name="task_status"]').setValue('FAILED')
-    await vi.dynamicImportSettled()
-    await wrapper.find('select[name="task_subtype"]').setValue('RATE_CHANGE')
-    await vi.dynamicImportSettled()
-    await wrapper.find('select[name="order_status"]').setValue('ENDED')
-    await vi.dynamicImportSettled()
-    await wrapper.find('select[name="queue_participation"]').setValue('true')
-    await vi.dynamicImportSettled()
-
-    const taskListCalls = vi.mocked(service.fetchReservationTaskList).mock.calls
+    const taskListCalls = vi.mocked(service.fetchReservationV4OrderTasks).mock.calls
     const filteredTaskRequest = taskListCalls[taskListCalls.length - 1]?.[0] ?? {}
     expect(filteredTaskRequest).toMatchObject({
-      task_status: 'FAILED',
-      task_subtype: 'RATE_CHANGE',
-      order_status: 'ENDED',
-      queue_participation: true,
+      order_task_status: 'OPEN',
+      card_status: 'REVIEW_REQUIRED',
       page_num: 1,
     })
 
     await wrapper.findAll('button').find((button) => button.text().includes('下一页'))?.trigger('click')
     await vi.dynamicImportSettled()
 
-    expect(service.fetchReservationTaskList).toHaveBeenLastCalledWith(
+    expect(service.fetchReservationV4OrderTasks).toHaveBeenLastCalledWith(
       expect.objectContaining({
-        task_status: 'FAILED',
-        task_subtype: 'RATE_CHANGE',
-        order_status: 'ENDED',
-        queue_participation: true,
+        order_task_status: 'OPEN',
+        card_status: 'REVIEW_REQUIRED',
         page_num: 2,
         page_size: 20,
       }),
@@ -695,8 +687,8 @@ describe('reservation P0 views', () => {
   })
 
   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 }),
+    vi.mocked(service.fetchReservationV4WorkbenchItems).mockResolvedValue(
+      createV4WorkbenchResult('GRP-001', 'Booking Request', { page_num: 2, page_size: 10, total: 21 }),
     )
 
     const wrapper = await mountWithPlugins(ReservationTaskListView)
@@ -706,9 +698,9 @@ describe('reservation P0 views', () => {
   })
 
   it('reloads the task list when the selected hotel changes', async () => {
-    vi.mocked(service.fetchReservationTaskList)
-      .mockResolvedValueOnce(createTaskListResult('GRP-001', 'Booking Request'))
-      .mockResolvedValueOnce(createTaskListResult('GRP-002', 'Booking Update'))
+    vi.mocked(service.fetchReservationV4WorkbenchItems)
+      .mockResolvedValueOnce(createV4WorkbenchResult('GRP-001', 'Booking Request'))
+      .mockResolvedValueOnce(createV4WorkbenchResult('GRP-002', 'Booking Update'))
 
     const wrapper = await mountWithPlugins(ReservationTaskListView)
     await vi.dynamicImportSettled()
@@ -717,8 +709,8 @@ describe('reservation P0 views', () => {
     authStore.setSelectedHotelId('HOTEL-BKK')
     await vi.dynamicImportSettled()
 
-    expect(service.fetchReservationTaskList).toHaveBeenCalledTimes(2)
-    expect(service.fetchReservationTaskList).toHaveBeenLastCalledWith(
+    expect(service.fetchReservationV4WorkbenchItems).toHaveBeenCalledTimes(2)
+    expect(service.fetchReservationV4WorkbenchItems).toHaveBeenLastCalledWith(
       expect.objectContaining({
         page_num: 1,
       }),
@@ -748,21 +740,21 @@ describe('reservation P0 views', () => {
   })
 
   it('keeps the latest task list response when filters change quickly', async () => {
-    const firstRequest = createDeferred<Awaited<ReturnType<typeof service.fetchReservationTaskList>>>()
-    const secondRequest = createDeferred<Awaited<ReturnType<typeof service.fetchReservationTaskList>>>()
-    vi.mocked(service.fetchReservationTaskList)
+    const firstRequest = createDeferred<Awaited<ReturnType<typeof service.fetchReservationV4WorkbenchItems>>>()
+    const secondRequest = createDeferred<Awaited<ReturnType<typeof service.fetchReservationV4WorkbenchItems>>>()
+    vi.mocked(service.fetchReservationV4WorkbenchItems)
       .mockReturnValueOnce(firstRequest.promise)
       .mockReturnValueOnce(secondRequest.promise)
 
     const wrapper = await mountWithPlugins(ReservationTaskListView)
     await wrapper.find('input[type="search"]').setValue('fresh')
-    expect(service.fetchReservationTaskList).toHaveBeenCalledTimes(2)
+    expect(service.fetchReservationV4WorkbenchItems).toHaveBeenCalledTimes(2)
 
-    secondRequest.resolve(createTaskListResult('GRP-NEW', 'New Booking Request'))
+    secondRequest.resolve(createV4WorkbenchResult('GRP-NEW', 'New Booking Request'))
     await flushPromises()
     expect(wrapper.text()).toContain('GRP-NEW')
 
-    firstRequest.resolve(createTaskListResult('GRP-OLD', 'Old Booking Request'))
+    firstRequest.resolve(createV4WorkbenchResult('GRP-OLD', 'Old Booking Request'))
     await flushPromises()
     expect(wrapper.text()).toContain('GRP-NEW')
     expect(wrapper.text()).not.toContain('GRP-OLD')
diff --git a/client/src/types/reservation.ts b/client/src/types/reservation.ts
index 52c3d25..51f9af3 100644
--- a/client/src/types/reservation.ts
+++ b/client/src/types/reservation.ts
@@ -147,6 +147,228 @@ export interface ReservationTaskListResult {
   page: ReservationPageResult
 }
 
+export type ReservationV4WorkbenchItemType = 'ORDER_TASK' | 'SOURCE_NOTIFICATION'
+export type ReservationV4OrderTaskStatus = 'OPEN' | 'COMPLETED'
+export type ReservationV4CardStatus =
+  | 'READONLY'
+  | 'PENDING_CONFIRM'
+  | 'REVIEW_REQUIRED'
+  | 'CONFIRMED'
+  | 'ACK_REQUIRED'
+  | 'ACKED'
+export type ReservationV4CardType =
+  | 'SOURCE_MESSAGE_DISPLAY'
+  | 'SOURCE_MESSAGE_NOTIFICATION'
+  | 'BASIC_INFORMATION'
+  | 'ROOM_INFORMATION'
+  | 'TRACE_RESERVATION_NOTES'
+  | 'ROOMING_LIST'
+  | 'PAYMENT'
+  | string
+
+export interface ReservationV4WorkbenchFilters {
+  hotel_id?: string
+  item_type?: ReservationV4WorkbenchItemType | ''
+  keyword?: string
+  page_num?: number
+  page_size?: number
+}
+
+export interface ReservationV4OrderTaskListFilters {
+  hotel_id?: string
+  order_id?: string
+  order_task_status?: ReservationV4OrderTaskStatus | ''
+  card_status?: ReservationV4CardStatus | ''
+  keyword?: string
+  page_num?: number
+  page_size?: number
+}
+
+export interface ReservationV4SourceMessageSummary {
+  source_message_id: string
+  hotel_id: string
+  external_message_id: string | null
+  external_conversation_id: string | null
+  subject: string | null
+  sender_summary: string | null
+  received_at: string | null
+  source_sent_at: string | null
+  conversation_message_count: number | null
+}
+
+export interface ReservationV4CardCounts {
+  total_count: number
+  readonly_count: number
+  pending_confirm_count: number
+  review_required_count: number
+  confirmed_count: number
+}
+
+export interface ReservationV4ActionAvailability {
+  blocked: boolean
+  read_only: boolean
+  editable: boolean
+  confirmable: boolean
+  reviewable: boolean
+  ackable: boolean
+  readonly_reason_code: string | null
+  readonly_reason_message?: string | null
+  blocked_by_order_task_id: string | null
+  blocked_by_card_id: string | null
+  blocked_reason: string | null
+}
+
+export interface ReservationV4WorkbenchItem {
+  item_type: ReservationV4WorkbenchItemType | string
+  target_id: string
+  hotel_id: string
+  source_message_id: string | null
+  source_message_summary: ReservationV4SourceMessageSummary | null
+  source_received_at: string | null
+  display_order_key: string | null
+  card_counts: ReservationV4CardCounts | null
+  next_action_card_id: string | null
+  notification_status: ReservationV4CardStatus | string | null
+  order_task_status: ReservationV4OrderTaskStatus | string | null
+  display_status: string | null
+  readonly_reason_code: string | null
+  created_at: string | null
+  updated_at: string | null
+}
+
+export interface ReservationV4WorkbenchListResult {
+  items: ReservationV4WorkbenchItem[]
+  page: ReservationPageResult
+}
+
+export interface ReservationV4OrderTaskSummary {
+  order_task_id: string
+  hotel_id: string
+  source_message_id: string
+  ai_batch_id: string
+  order_ref: string | null
+  order_context_index: number | null
+  order_id: string | null
+  target_booking_type: string | null
+  target_locator_type: string | null
+  target_locator_value: string | null
+  target_resolution_status: string | null
+  order_task_status: ReservationV4OrderTaskStatus | string
+  display_order_key: string | null
+  source_received_at: string | null
+  version: number
+  created_at: string | null
+  updated_at: string | null
+}
+
+export interface ReservationV4OrderTaskListItem {
+  order_task: ReservationV4OrderTaskSummary
+  source_message_summary: ReservationV4SourceMessageSummary | null
+  card_counts: ReservationV4CardCounts
+  next_action_card_id: string | null
+  display_status: string | null
+  availability: ReservationV4ActionAvailability
+}
+
+export interface ReservationV4OrderTaskListResult {
+  items: ReservationV4OrderTaskListItem[]
+  page: ReservationPageResult
+}
+
+export interface ReservationV4TaskCardFieldResult {
+  field_path: string
+  field_pointer: string
+  display_name: string
+  value: unknown
+  editable: boolean | null
+  required: boolean | null
+  control_type: string | null
+  edit_scope: string | null
+  write_target: string | null
+  options_source: string | null
+  raw_readonly: boolean | null
+  validation_errors: string[]
+  control_hint: string | null
+}
+
+export interface ReservationV4TaskCardResult {
+  card_id: string
+  card_type: ReservationV4CardType
+  event_type: string | null
+  source_event_index: number | null
+  card_sort_order: number | null
+  card_status: ReservationV4CardStatus | string
+  review_status: string | null
+  display_payload: ReservationRecord | null
+  confirmed_payload: ReservationRecord | null
+  review_resolution: ReservationRecord | null
+  validation_errors: unknown
+  fields: ReservationV4TaskCardFieldResult[]
+  confirmed_by: string | null
+  confirmed_at: string | null
+  version: number
+  created_at: string | null
+  updated_at: string | null
+  availability: ReservationV4ActionAvailability
+}
+
+export interface ReservationV4OrderTaskDetailResult {
+  order_task: ReservationV4OrderTaskSummary
+  source_message_summary: ReservationV4SourceMessageSummary | null
+  bound_order: ReservationOrderSummaryResult | null
+  source_message_card: ReservationV4TaskCardResult | null
+  basic_information_card: ReservationV4TaskCardResult | null
+  business_cards: ReservationV4TaskCardResult[]
+  card_counts: ReservationV4CardCounts
+  adapter_contract_errors: ReservationAiTransitionDisplayResult[]
+  availability: ReservationV4ActionAvailability
+}
+
+export interface ReservationV4SourceNotificationSummary {
+  notification_id: string
+  hotel_id: string
+  source_message_id: string
+  ai_batch_id: string
+  ai_transition_id: string | null
+  route_code: string
+  notification_status: ReservationV4CardStatus | string
+  source_received_at: string | null
+  ack_by: string | null
+  ack_at: string | null
+  version: number
+  created_at: string | null
+  updated_at: string | null
+}
+
+export interface ReservationV4SourceNotificationDetailResult {
+  notification: ReservationV4SourceNotificationSummary
+  source_message_card: ReservationV4TaskCardResult | null
+  conversation_summary: ReservationV4SourceMessageSummary | null
+  availability: ReservationV4ActionAvailability
+}
+
+export interface ReservationV4CardConfirmRequest {
+  version: number
+  confirmed_payload?: ReservationRecord
+}
+
+export interface ReservationV4ReviewFieldOverrideRequest {
+  field_pointer: string
+  value: unknown
+}
+
+export interface ReservationV4ReviewResolutionRequest {
+  version: number
+  field_overrides: ReservationV4ReviewFieldOverrideRequest[]
+  reason?: string
+  confirmed_order_id?: string
+}
+
+export interface ReservationV4SourceNotificationAckRequest {
+  version: number
+  reason?: string
+}
+
 export interface ReservationOrderSummaryResult {
   order_id: string
   hotel_id: string
diff --git a/client/src/utils/reservationV4FieldRules.ts b/client/src/utils/reservationV4FieldRules.ts
new file mode 100644
index 0000000..beb47bb
--- /dev/null
+++ b/client/src/utils/reservationV4FieldRules.ts
@@ -0,0 +1,397 @@
+import type {
+  ReservationRecord,
+  ReservationV4ReviewFieldOverrideRequest,
+  ReservationV4TaskCardFieldResult,
+} from '@/types/reservation'
+
+const confirmEditScopes = new Set(['NORMAL_TASK', 'NORMAL_AND_MANUAL_REVIEW', 'CONFIRM'])
+const reviewEditScopes = new Set(['MANUAL_REVIEW_ONLY', 'NORMAL_AND_MANUAL_REVIEW', 'REVIEW'])
+const confirmWriteTargets = new Set([
+  'CONFIRMED_PAYLOAD_JSON',
+  'CONFIRMED_PAYLOAD',
+  'CONFIRMED_PAYLOAD.FIELD_VALUES',
+  'FIELD_VALUES',
+])
+const reviewWriteTargets = new Set([
+  'REVIEW_RESOLUTION_FIELD_OVERRIDES',
+  'REVIEW_RESOLUTION.FIELD_OVERRIDES',
+  'FIELD_OVERRIDES',
+])
+const readonlyControlTypes = new Set(['READONLY', 'FILE', 'WORKFLOW_STATE', 'STRUCTURED_TABLE'])
+const reviewWritablePointerPrefixes = ['/basic_information/', '/business_fields/']
+const hiddenDisplayValue = Symbol('reservation-v4-hidden-display-value')
+
+export type ReservationV4FieldErrorMap = Record<string, string>
+
+export function reservationV4FieldKey(field: ReservationV4TaskCardFieldResult): string {
+  return field.field_pointer || field.field_path
+}
+
+export function buildReservationV4InitialFieldValues(
+  fields: ReservationV4TaskCardFieldResult[],
+): ReservationRecord {
+  return fields.reduce<ReservationRecord>((values, field) => {
+    values[reservationV4FieldKey(field)] = field.value ?? ''
+    return values
+  }, {})
+}
+
+export function buildReservationV4ConfirmedPayload(
+  fields: ReservationV4TaskCardFieldResult[],
+  values: ReservationRecord,
+): ReservationRecord {
+  return fields
+    .filter(isReservationV4ConfirmWritableField)
+    .reduce<ReservationRecord>((payload, field) => {
+      assignByField(payload, field, readV4FieldValue(field, values))
+      return payload
+    }, {})
+}
+
+export function buildReservationV4ReviewOverrides(
+  fields: ReservationV4TaskCardFieldResult[],
+  values: ReservationRecord,
+): ReservationV4ReviewFieldOverrideRequest[] {
+  return fields
+    .filter(isReservationV4ReviewWritableField)
+    .map((field) => ({
+      field_pointer: field.field_pointer || fieldPathToPointer(field.field_path),
+      value: readV4FieldValue(field, values),
+    }))
+}
+
+export function validateReservationV4Fields(
+  fields: ReservationV4TaskCardFieldResult[],
+  values: ReservationRecord,
+): ReservationV4FieldErrorMap {
+  return fields.filter(isReservationV4EditableField).reduce<ReservationV4FieldErrorMap>((errors, field) => {
+    const key = reservationV4FieldKey(field)
+    if (field.required && isEmptyV4Value(readV4FieldValue(field, values))) {
+      errors[key] = `${field.display_name} is required`
+    }
+    return errors
+  }, {})
+}
+
+export function isReservationV4ConfirmWritableField(field: ReservationV4TaskCardFieldResult): boolean {
+  if (!isReservationV4EditableField(field)) {
+    return false
+  }
+  if (isUnsafeV4Field(field)) {
+    return false
+  }
+  const editScope = normalizeV4RuleCode(field.edit_scope)
+  if (!confirmEditScopes.has(editScope)) {
+    return false
+  }
+  return confirmWriteTargets.has(normalizeV4RuleCode(field.write_target))
+}
+
+export function isReservationV4ReviewWritableField(field: ReservationV4TaskCardFieldResult): boolean {
+  if (!isReservationV4EditableField(field)) {
+    return false
+  }
+  const pointer = field.field_pointer || fieldPathToPointer(field.field_path)
+  if (!reviewWritablePointerPrefixes.some((prefix) => pointer.startsWith(prefix))) {
+    return false
+  }
+  if (isUnsafeV4Field(field)) {
+    return false
+  }
+  const editScope = normalizeV4RuleCode(field.edit_scope)
+  if (!reviewEditScopes.has(editScope)) {
+    return false
+  }
+  return reviewWriteTargets.has(normalizeV4RuleCode(field.write_target))
+}
+
+export function isReservationV4EditableField(field: ReservationV4TaskCardFieldResult): boolean {
+  if (field.editable !== true || field.raw_readonly === true) {
+    return false
+  }
+  if (normalizeV4RuleCode(field.write_target) === 'NONE') {
+    return false
+  }
+  return !readonlyControlTypes.has(normalizeV4RuleCode(field.control_type))
+}
+
+export function readV4FieldValue(
+  field: ReservationV4TaskCardFieldResult,
+  values: ReservationRecord,
+): unknown {
+  const pointer = field.field_pointer ? values[field.field_pointer] : undefined
+  if (pointer !== undefined) {
+    return pointer
+  }
+  const path = field.field_path ? values[field.field_path] : undefined
+  return path !== undefined ? path : field.value ?? ''
+}
+
+export function fieldPathToPointer(fieldPath: string): string {
+  if (!fieldPath) {
+    return ''
+  }
+  return `/${fieldPath.split('.').map(encodePointerSegment).join('/')}`
+}
+
+export function mapReservationV4BackendDetailsToFields(
+  details: unknown,
+  fields: ReservationV4TaskCardFieldResult[],
+): {
+  fieldErrors: ReservationV4FieldErrorMap
+  globalErrors: string[]
+} {
+  const messages = normalizeBackendDetailMessages(details)
+  const fieldErrors: ReservationV4FieldErrorMap = {}
+  const globalErrors: string[] = []
+
+  for (const message of messages) {
+    const matchedField = fields.find((field) =>
+      message.includes(field.field_pointer) ||
+      Boolean(field.field_path && message.includes(field.field_path)),
+    )
+    if (matchedField) {
+      fieldErrors[reservationV4FieldKey(matchedField)] = message
+    } else {
+      globalErrors.push(message)
+    }
+  }
+
+  return {
+    fieldErrors,
+    globalErrors,
+  }
+}
+
+export function staticReservationV4Options(optionsSource: string | null): Array<{ value: string; label: string }> {
+  switch (normalizeV4RuleCode(optionsSource)) {
+    case 'RESERVATION_V4_ACCOUNT_CATALOG':
+    case 'ACCOUNT_CATALOG':
+      return [
+        { value: 'HANATOUR', label: 'HANATOUR' },
+        { value: 'LIAN_TAI', label: 'LIAN TAI' },
+        { value: 'QBD_TRAVEL', label: 'QBD Travel' },
+      ]
+    case 'RESERVATION_V4_ROOM_TYPE_CATALOG':
+    case 'ROOM_TYPE_CATALOG':
+      return [
+        { value: 'TWN', label: 'TWN' },
+        { value: 'DBL', label: 'DBL' },
+        { value: 'KING', label: 'KING' },
+        { value: 'SGL', label: 'SGL' },
+        { value: 'TRP', label: 'TRP' },
+      ]
+    case 'RESERVATION_V4_RATE_CODE_CATALOG':
+    case 'RATE_CODE_CATALOG':
+      return [
+        { value: 'BAR', label: 'BAR' },
+        { value: 'RACK', label: 'RACK' },
+        { value: 'GROUP', label: 'GROUP' },
+        { value: 'FIT', label: 'FIT' },
+      ]
+    default:
+      return []
+  }
+}
+
+export function isReservationV4UnsafeDisplayKey(key: string): boolean {
+  const normalizedKey = key.toLowerCase()
+  return [
+    'raw',
+    'html_body',
+    'body',
+    'agentbus',
+    'payload',
+    'url',
+    'oss',
+    'evidence',
+    'attachment',
+    'file_reference',
+  ].some((fragment) => normalizedKey.includes(fragment))
+}
+
+export function stringifyReservationV4SafeDisplayValue(
+  value: unknown,
+  emptyLabel: string,
+  hiddenLabel: string,
+): string {
+  const sanitizedValue = sanitizeReservationV4DisplayValue(value)
+  if (sanitizedValue === hiddenDisplayValue) {
+    return hiddenLabel
+  }
+  if (isEmptyV4Value(sanitizedValue)) {
+    return emptyLabel
+  }
+  if (Array.isArray(sanitizedValue)) {
+    return sanitizedValue.length ? JSON.stringify(sanitizedValue) : emptyLabel
+  }
+  if (isRecord(sanitizedValue)) {
+    return Object.keys(sanitizedValue).length ? JSON.stringify(sanitizedValue) : hiddenLabel
+  }
+  return String(sanitizedValue)
+}
+
+function assignByField(
+  payload: ReservationRecord,
+  field: ReservationV4TaskCardFieldResult,
+  value: unknown,
+): void {
+  const pointer = field.field_pointer || fieldPathToPointer(field.field_path)
+  assignByPointer(payload, pointer, value)
+}
+
+function assignByPointer(target: ReservationRecord, pointer: string, value: unknown): void {
+  const segments = decodePointer(pointer)
+  if (!segments.length) {
+    return
+  }
+
+  let current: ReservationRecord | unknown[] = target
+  segments.forEach((segment, index) => {
+    const isLast = index === segments.length - 1
+    if (isLast) {
+      setContainerValue(current, segment, value)
+      return
+    }
+
+    const nextSegment = segments[index + 1] ?? ''
+    const nextContainer = readContainerValue(current, segment)
+    if (isRecord(nextContainer) || Array.isArray(nextContainer)) {
+      current = nextContainer
+      return
+    }
+
+    const createdContainer: ReservationRecord | unknown[] = isNumericSegment(nextSegment) ? [] : {}
+    setContainerValue(current, segment, createdContainer)
+    current = createdContainer
+  })
+}
+
+function readContainerValue(container: ReservationRecord | unknown[], segment: string): unknown {
+  if (Array.isArray(container)) {
+    return container[Number(segment)]
+  }
+  return container[segment]
+}
+
+function setContainerValue(container: ReservationRecord | unknown[], segment: string, value: unknown): void {
+  if (Array.isArray(container)) {
+    container[Number(segment)] = value
+    return
+  }
+  container[segment] = value
+}
+
+function decodePointer(pointer: string): string[] {
+  if (!pointer || pointer === '/') {
+    return []
+  }
+  return pointer
+    .replace(/^\//, '')
+    .split('/')
+    .filter(Boolean)
+    .map((segment) => segment.replace(/~1/g, '/').replace(/~0/g, '~'))
+}
+
+function encodePointerSegment(segment: string): string {
+  return segment.replace(/~/g, '~0').replace(/\//g, '~1')
+}
+
+function normalizeBackendDetailMessages(details: unknown): string[] {
+  if (details === null || details === undefined || details === '') {
+    return []
+  }
+  if (Array.isArray(details)) {
+    return details.flatMap((item) => normalizeBackendDetailMessages(item))
+  }
+  if (typeof details === 'string') {
+    return [details]
+  }
+  if (typeof details === 'object') {
+    const record = details as ReservationRecord
+    const path = readFirstDetailString(record, ['field_path', 'field_pointer', 'field', 'path', 'json_pointer'])
+    const message = typeof record.message === 'string'
+      ? record.message
+      : typeof record.error_message === 'string'
+        ? record.error_message
+        : JSON.stringify(record)
+    return [`${path ? `${path}: ` : ''}${message}`]
+  }
+  return [String(details)]
+}
+
+function readFirstDetailString(record: ReservationRecord, keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key]
+    if (typeof value === 'string' && value.trim()) {
+      return value.trim()
+    }
+  }
+  return ''
+}
+
+function sanitizeReservationV4DisplayValue(value: unknown): unknown {
+  if (value === null || value === undefined || value === '') {
+    return value
+  }
+  if (typeof value === 'string') {
+    return isUnsafeUrlLikeValue(value) ? hiddenDisplayValue : value
+  }
+  if (Array.isArray(value)) {
+    if (!value.length) {
+      return value
+    }
+    const sanitizedItems = value
+      .map((item) => sanitizeReservationV4DisplayValue(item))
+      .filter((item) => item !== hiddenDisplayValue)
+    return sanitizedItems.length ? sanitizedItems : hiddenDisplayValue
+  }
+  if (isRecord(value)) {
+    const sanitizedRecord = Object.entries(value).reduce<ReservationRecord>((record, [key, nestedValue]) => {
+      if (isReservationV4UnsafeDisplayKey(key)) {
+        return record
+      }
+      const sanitizedValue = sanitizeReservationV4DisplayValue(nestedValue)
+      if (sanitizedValue !== hiddenDisplayValue) {
+        record[key] = sanitizedValue
+      }
+      return record
+    }, {})
+    return Object.keys(sanitizedRecord).length ? sanitizedRecord : hiddenDisplayValue
+  }
+  return value
+}
+
+function isUnsafeV4Field(field: ReservationV4TaskCardFieldResult): boolean {
+  return isReservationV4UnsafeDisplayKey(field.field_path) || isReservationV4UnsafeDisplayKey(field.field_pointer)
+}
+
+function isUnsafeUrlLikeValue(value: string): boolean {
+  const trimmedValue = value.trim()
+  return /^(https?:\/\/|oss:\/\/|s3:\/\/)/i.test(trimmedValue)
+}
+
+function normalizeV4RuleCode(value: string | null | undefined): string {
+  return value?.trim().replace(/[.\s-]+/g, '_').toUpperCase() ?? ''
+}
+
+function isEmptyV4Value(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 isNumericSegment(segment: string): boolean {
+  return /^\d+$/.test(segment)
+}
+
+function isRecord(value: unknown): value is ReservationRecord {
+  return Boolean(value && typeof value === 'object' && !Array.isArray(value))
+}
diff --git a/client/src/views/reservation/ReservationTaskListView.vue b/client/src/views/reservation/ReservationTaskListView.vue
index c200893..75c84f2 100644
--- a/client/src/views/reservation/ReservationTaskListView.vue
+++ b/client/src/views/reservation/ReservationTaskListView.vue
@@ -32,82 +32,43 @@
           >
         </label>
         <label>
-          <span>{{ t('taskList.taskType') }}</span>
+          <span>{{ t('taskList.itemType') }}</span>
           <select
-            v-model="filters.task_type"
-            name="task_type"
-            @change="resetToFirstPage"
+            v-model="filters.item_type"
+            name="item_type"
+            @change="changeItemType"
           >
             <option value="">{{ t('common.all') }}</option>
-            <option value="NEW_BOOKING">{{ t('cardType.NEW_BOOKING') }}</option>
-            <option value="UPDATE_BOOKING">{{ t('cardType.UPDATE_BOOKING') }}</option>
-            <option value="CANCEL_BOOKING">{{ t('cardType.CANCEL_BOOKING') }}</option>
-            <option value="MANUAL_REVIEW">{{ t('cardType.MANUAL_REVIEW') }}</option>
-            <option value="SOURCE_MESSAGE_ONLY">{{ t('cardType.SOURCE_MESSAGE_ONLY') }}</option>
+            <option value="ORDER_TASK">{{ t('taskList.itemTypeOrderTask') }}</option>
+            <option value="SOURCE_NOTIFICATION">{{ t('taskList.itemTypeSourceNotification') }}</option>
           </select>
         </label>
         <label>
-          <span>{{ t('taskList.taskSubtype') }}</span>
+          <span>{{ t('taskList.orderTaskStatus') }}</span>
           <select
-            v-model="filters.task_subtype"
-            name="task_subtype"
+            v-model="filters.order_task_status"
+            name="order_task_status"
+            :disabled="!isOrderTaskMode"
             @change="resetToFirstPage"
           >
             <option value="">{{ t('common.all') }}</option>
-            <option value="NEW_BOOKING">{{ t('taskSubtype.NEW_BOOKING') }}</option>
-            <option value="UPDATE_BOOKING">{{ t('taskSubtype.UPDATE_BOOKING') }}</option>
-            <option value="CANCEL_BOOKING">{{ t('taskSubtype.CANCEL_BOOKING') }}</option>
-            <option value="RATE_CHANGE">{{ t('taskSubtype.RATE_CHANGE') }}</option>
-            <option value="UPDATE_STAY_DATES">{{ t('taskSubtype.UPDATE_STAY_DATES') }}</option>
-            <option value="UPDATE_ROOM_TYPE">{{ t('taskSubtype.UPDATE_ROOM_TYPE') }}</option>
-            <option value="UPDATE_FIX_CHARGE">{{ t('taskSubtype.UPDATE_FIX_CHARGE') }}</option>
-            <option value="NEW_GROUP_BLOCK">{{ t('taskSubtype.NEW_GROUP_BLOCK') }}</option>
-            <option value="NEW_FIT_RESERVATION">{{ t('taskSubtype.NEW_FIT_RESERVATION') }}</option>
-            <option value="MANUAL_REVIEW">{{ t('taskSubtype.MANUAL_REVIEW') }}</option>
-            <option value="S10">{{ t('taskSubtype.S10') }}</option>
-            <option value="S99">{{ t('taskSubtype.S99') }}</option>
-          </select>
-        </label>
-        <label>
-          <span>{{ t('workbench.taskStatus') }}</span>
-          <select
-            v-model="filters.task_status"
-            name="task_status"
-            @change="resetToFirstPage"
-          >
-            <option value="">{{ t('common.all') }}</option>
-            <option value="PENDING_CONFIRM">{{ t('status.PENDING_CONFIRM') }}</option>
-            <option value="READY">{{ t('status.READY') }}</option>
-            <option value="EXECUTING">{{ t('status.EXECUTING') }}</option>
-            <option value="FAILED">{{ t('status.FAILED') }}</option>
-            <option value="BLOCKED">{{ t('status.BLOCKED') }}</option>
+            <option value="OPEN">{{ t('status.OPEN') }}</option>
             <option value="COMPLETED">{{ t('status.COMPLETED') }}</option>
           </select>
         </label>
         <label>
-          <span>{{ t('workbench.orderStatus') }}</span>
+          <span>{{ t('taskList.cardStatus') }}</span>
           <select
-            v-model="filters.order_status"
-            name="order_status"
+            v-model="filters.card_status"
+            name="card_status"
+            :disabled="!isOrderTaskMode"
             @change="resetToFirstPage"
           >
             <option value="">{{ t('common.all') }}</option>
-            <option value="TEMPORARY">{{ t('status.TEMPORARY') }}</option>
-            <option value="ACTIVE">{{ t('status.ACTIVE') }}</option>
-            <option value="ENDED">{{ t('status.ENDED') }}</option>
-            <option value="LOGIC_DELETED">{{ t('status.LOGIC_DELETED') }}</option>
-          </select>
-        </label>
-        <label>
-          <span>{{ t('taskList.queueParticipation') }}</span>
-          <select
-            v-model="filters.queue_participation"
-            name="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>
+            <option value="PENDING_CONFIRM">{{ t('status.PENDING_CONFIRM') }}</option>
+            <option value="REVIEW_REQUIRED">{{ t('status.REVIEW_REQUIRED') }}</option>
+            <option value="CONFIRMED">{{ t('status.CONFIRMED') }}</option>
+            <option value="READONLY">{{ t('status.READONLY') }}</option>
           </select>
         </label>
       </div>
@@ -138,7 +99,7 @@
         {{ errorMessage }}
       </div>
       <div
-        v-else-if="!tasks.length"
+        v-else-if="!items.length"
         class="empty-state"
       >
         {{ t('common.noData') }}
@@ -151,65 +112,79 @@
         <table>
           <thead>
             <tr>
-              <th>{{ t('taskList.columns.task') }}</th>
+              <th>{{ t('taskList.columns.item') }}</th>
               <th>{{ t('taskList.columns.order') }}</th>
-              <th>{{ t('taskList.columns.card') }}</th>
               <th>{{ t('taskList.columns.status') }}</th>
               <th>{{ t('taskList.columns.source') }}</th>
-              <th>{{ t('taskList.columns.queue') }}</th>
+              <th>{{ t('taskList.columns.cards') }}</th>
               <th>{{ t('workbench.columns.operation') }}</th>
             </tr>
           </thead>
           <tbody>
             <tr
-              v-for="task in tasks"
-              :key="task.task_id"
+              v-for="item in items"
+              :key="`${item.item_type}-${item.target_id}`"
             >
               <td>
-                <strong class="th-code">#{{ task.task_id }}</strong>
-                <small>{{ formatReservationTaskRouteSummary(t, task) }}</small>
+                <strong>{{ itemKindLabel(item) }}</strong>
+                <small class="th-code">#{{ item.target_id }}</small>
               </td>
               <td>
-                <template v-if="isReadonlyDiagnosticTask(task)">
-                  <strong>{{ t('taskList.sourceOnlyOrderLabel') }}</strong>
-                  <small>{{ t('taskList.hiddenTechnicalOrder') }}</small>
+                <template v-if="item.item_type === 'ORDER_TASK'">
+                  <strong>{{ item.display_order_key ?? t('taskList.orderUnresolved') }}</strong>
+                  <small
+                    v-if="item.order_id"
+                    class="th-code"
+                  >{{ item.order_id }}</small>
                 </template>
                 <template v-else>
-                  <strong>{{ task.display_order_key ?? task.temporary_order_no ?? task.order_id }}</strong>
-                  <small class="th-code">{{ task.order_id }}</small>
+                  <strong>{{ t('taskList.sourceNotificationNoOrder') }}</strong>
+                  <small>{{ t('taskList.sourceNotificationNoOrderHint') }}</small>
                 </template>
               </td>
               <td>
-                <span>{{ formatReservationTaskCardLabel(t, task) }}</span>
-                <small v-if="task.result_type">{{ formatReservationResultType(t, task.result_type) }}</small>
-              </td>
-              <td><ReservationStatusBadge :status="task.task_status" /></td>
-              <td>
-                <span>{{ task.source_subject ?? t('taskList.noSourceSubject') }}</span>
-                <small>{{ task.source_sender_summary ?? task.source_message_id ?? '-' }}</small>
-                <small>{{ t('taskList.sourceReceivedAt') }}: {{ formatReservationDateTime(task.source_received_at) }}</small>
+                <ReservationStatusBadge :status="displayStatus(item)" />
+                <small v-if="item.readonly_reason_code">
+                  {{ formatReservationReadonlyReason(t, item.readonly_reason_code) }}
+                </small>
               </td>
               <td>
-                <span>{{ task.queue_sequence ?? '-' }}</span>
-                <small>{{ task.can_process ? t('taskList.canProcess') : formatReservationReadonlyReason(t, task.readonly_reason_code) }}</small>
+                <span>{{ sourceSubject(item) }}</span>
+                <small>{{ sourceSender(item) }}</small>
+                <small>{{ t('taskList.sourceReceivedAt') }}: {{ formatReservationDateTime(sourceReceivedAt(item)) }}</small>
+              </td>
+              <td>
+                <template v-if="item.card_counts">
+                  <span>{{ t('taskList.cardCountsTotal', { total: item.card_counts.total_count }) }}</span>
+                  <small>
+                    {{ t('taskList.cardCountsPending', { count: item.card_counts.pending_confirm_count }) }}
+                    ·
+                    {{ t('taskList.cardCountsReview', { count: item.card_counts.review_required_count }) }}
+                    ·
+                    {{ t('taskList.cardCountsConfirmed', { count: item.card_counts.confirmed_count }) }}
+                  </small>
+                </template>
+                <template v-else>
+                  <span>{{ item.notification_status ? formatStatusLabel(item.notification_status) : '-' }}</span>
+                </template>
               </td>
               <td>
                 <div class="row-actions">
                   <RouterLink
                     class="row-action"
-                    :to="`/reservation/tasks/${task.task_id}`"
+                    :to="detailPath(item)"
                   >
-                    {{ t('taskList.viewTask') }}
+                    {{ item.item_type === 'SOURCE_NOTIFICATION' ? t('taskList.viewNotification') : t('taskList.viewTask') }}
                   </RouterLink>
                   <RouterLink
-                    v-if="!isReadonlyDiagnosticTask(task)"
+                    v-if="item.order_id"
                     class="row-action"
-                    :to="`/reservation/orders/${task.order_id}`"
+                    :to="`/reservation/orders/${item.order_id}`"
                   >
                     {{ t('taskList.viewOrder') }}
                   </RouterLink>
                   <span
-                    v-if="!task.source_message_id"
+                    v-if="!item.source_message_id"
                     class="pending-link"
                   >
                     {{ t('common.endpointMissing') }}
@@ -217,7 +192,7 @@
                   <RouterLink
                     v-else
                     class="row-action"
-                    :to="`/reservation/source-messages/${task.source_message_id}/conversation`"
+                    :to="`/reservation/source-messages/${item.source_message_id}/conversation`"
                   >
                     {{ t('taskList.viewConversation') }}
                   </RouterLink>
@@ -270,35 +245,53 @@ import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
 import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
-import { fetchReservationTaskList } from '@/services/reservationService'
+import {
+  fetchReservationV4OrderTasks,
+  fetchReservationV4WorkbenchItems,
+} from '@/services/reservationService'
 import { useAuthStore } from '@/stores/authStore'
-import type { ReservationPageResult, ReservationTaskListFilters, ReservationTaskListItem } from '@/types/reservation'
+import type {
+  ReservationPageResult,
+  ReservationV4OrderTaskListFilters,
+  ReservationV4OrderTaskListItem,
+  ReservationV4WorkbenchFilters,
+  ReservationV4WorkbenchItem,
+  ReservationV4WorkbenchItemType,
+} from '@/types/reservation'
 import {
   formatReservationReadonlyReason,
-  formatReservationResultType,
-  formatReservationTaskCardLabel,
-  formatReservationTaskRouteSummary,
-  isReservationReadonlyDiagnosticTask,
 } from '@/utils/reservationDisplay'
 import { formatReservationDateTime } from '@/utils/reservationFormat'
 
+type WorkbenchItemFilter = ReservationV4WorkbenchItemType | ''
+type WorkbenchRow = ReservationV4WorkbenchItem & {
+  order_id?: string | null
+}
+
 const { t } = useI18n()
 const authStore = useAuthStore()
 const loading = ref(false)
 const errorMessage = ref('')
-const tasks = ref<ReservationTaskListItem[]>([])
+const items = ref<WorkbenchRow[]>([])
 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))))
+const isOrderTaskMode = computed(() => filters.item_type === 'ORDER_TASK')
 let taskListRequestSequence = 0
-const filters = reactive<ReservationTaskListFilters>({
+
+const filters = reactive<{
+  keyword: string
+  item_type: WorkbenchItemFilter
+  order_task_status: '' | 'OPEN' | 'COMPLETED'
+  card_status: '' | 'READONLY' | 'PENDING_CONFIRM' | 'REVIEW_REQUIRED' | 'CONFIRMED'
+  page_num: number
+  page_size: number
+}>({
   keyword: '',
-  task_type: '',
-  task_subtype: '',
-  task_status: '',
-  order_status: '',
-  queue_participation: undefined,
+  item_type: '',
+  order_task_status: '',
+  card_status: '',
   page_num: 1,
   page_size: 20,
 })
@@ -326,18 +319,20 @@ async function loadTasks(): Promise<void> {
   loading.value = true
   errorMessage.value = ''
   try {
-    const result = await fetchReservationTaskList({ ...filters })
+    const result = isOrderTaskMode.value
+      ? await fetchReservationV4OrderTasks(buildOrderTaskFilters())
+      : await fetchReservationV4WorkbenchItems(buildWorkbenchFilters())
     if (requestSequence !== taskListRequestSequence) {
       return
     }
-    tasks.value = result.items
+    items.value = result.items.map((item) => 'order_task' in item ? toWorkbenchRowFromOrderTask(item) : item)
     page.value = result.page
   } catch (error) {
     if (requestSequence !== taskListRequestSequence) {
       return
     }
-    tasks.value = []
-    page.value = createPage(filters.page_num ?? 1, filters.page_size ?? 20, 0)
+    items.value = []
+    page.value = createPage(filters.page_num, filters.page_size, 0)
     errorMessage.value = error instanceof Error ? error.message : String(error)
   } finally {
     if (requestSequence === taskListRequestSequence) {
@@ -346,17 +341,63 @@ async function loadTasks(): Promise<void> {
   }
 }
 
+function buildWorkbenchFilters(): ReservationV4WorkbenchFilters {
+  return {
+    keyword: filters.keyword,
+    item_type: filters.item_type,
+    page_num: filters.page_num,
+    page_size: filters.page_size,
+  }
+}
+
+function buildOrderTaskFilters(): ReservationV4OrderTaskListFilters {
+  return {
+    keyword: filters.keyword,
+    order_task_status: filters.order_task_status,
+    card_status: filters.card_status,
+    page_num: filters.page_num,
+    page_size: filters.page_size,
+  }
+}
+
+function toWorkbenchRowFromOrderTask(item: ReservationV4OrderTaskListItem): WorkbenchRow {
+  return {
+    item_type: 'ORDER_TASK',
+    target_id: item.order_task.order_task_id,
+    hotel_id: item.order_task.hotel_id,
+    source_message_id: item.order_task.source_message_id,
+    source_message_summary: item.source_message_summary,
+    source_received_at: item.order_task.source_received_at,
+    display_order_key: item.order_task.display_order_key,
+    card_counts: item.card_counts,
+    next_action_card_id: item.next_action_card_id,
+    notification_status: null,
+    order_task_status: item.order_task.order_task_status,
+    display_status: item.display_status,
+    readonly_reason_code: item.availability.readonly_reason_code,
+    created_at: item.order_task.created_at,
+    updated_at: item.order_task.updated_at,
+    order_id: item.order_task.order_id,
+  }
+}
+
 function resetFilters(): void {
   filters.keyword = ''
-  filters.task_type = ''
-  filters.task_subtype = ''
-  filters.task_status = ''
-  filters.order_status = ''
-  filters.queue_participation = undefined
+  filters.item_type = ''
+  filters.order_task_status = ''
+  filters.card_status = ''
   filters.page_num = 1
   filters.page_size = 20
 }
 
+function changeItemType(): void {
+  if (!isOrderTaskMode.value) {
+    filters.order_task_status = ''
+    filters.card_status = ''
+  }
+  resetToFirstPage()
+}
+
 function resetToFirstPage(): void {
   filters.page_num = 1
 }
@@ -373,8 +414,37 @@ function goToPage(page: number): void {
   filters.page_num = Math.min(Math.max(page, 1), totalPages.value)
 }
 
-function isReadonlyDiagnosticTask(task: ReservationTaskListItem): boolean {
-  return isReservationReadonlyDiagnosticTask(task)
+function itemKindLabel(item: WorkbenchRow): string {
+  return item.item_type === 'SOURCE_NOTIFICATION'
+    ? t('taskList.itemTypeSourceNotification')
+    : t('taskList.itemTypeOrderTask')
+}
+
+function displayStatus(item: WorkbenchRow): string {
+  return item.display_status ?? item.notification_status ?? item.order_task_status ?? 'OPEN'
+}
+
+function formatStatusLabel(status: string): string {
+  return t(`status.${status}`, status)
+}
+
+function detailPath(item: WorkbenchRow): string {
+  if (item.item_type === 'SOURCE_NOTIFICATION') {
+    return `/reservation/source-notifications/${item.target_id}`
+  }
+  return `/reservation/order-tasks/${item.target_id}`
+}
+
+function sourceSubject(item: WorkbenchRow): string {
+  return item.source_message_summary?.subject ?? t('taskList.noSourceSubject')
+}
+
+function sourceSender(item: WorkbenchRow): string {
+  return item.source_message_summary?.sender_summary ?? item.source_message_id ?? '-'
+}
+
+function sourceReceivedAt(item: WorkbenchRow): string | null {
+  return item.source_received_at ?? item.source_message_summary?.received_at ?? null
 }
 
 function createPage(pageNum: number, pageSize: number, total: number): ReservationPageResult {
@@ -413,7 +483,7 @@ function createPage(pageNum: number, pageSize: number, total: number): Reservati
 
 .filter-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 14px;
   padding: 18px 20px 0;
 }
@@ -446,13 +516,6 @@ function createPage(pageNum: number, pageSize: number, total: number): Reservati
   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;
diff --git a/client/src/views/reservation/ReservationV4OrderTaskDetailView.vue b/client/src/views/reservation/ReservationV4OrderTaskDetailView.vue
new file mode 100644
index 0000000..2b4b2dd
--- /dev/null
+++ b/client/src/views/reservation/ReservationV4OrderTaskDetailView.vue
@@ -0,0 +1,862 @@
+<template>
+  <div class="th-page v4-task-detail-view">
+    <header class="page-heading">
+      <div>
+        <h1>{{ t('taskV4.title') }}</h1>
+        <p>{{ t('taskV4.subtitle') }}</p>
+      </div>
+      <button
+        type="button"
+        class="secondary-button"
+        :disabled="loading"
+        @click="loadDetail"
+      >
+        {{ t('common.refresh') }}
+      </button>
+    </header>
+
+    <div
+      v-if="loading"
+      class="empty-state"
+    >
+      {{ t('common.loading') }}
+    </div>
+    <div
+      v-else-if="errorMessage"
+      class="empty-state empty-state--error"
+    >
+      {{ errorMessage }}
+    </div>
+    <template v-else-if="detail">
+      <section class="th-section summary-section">
+        <div class="th-section-header">
+          <div>
+            <h2 class="th-section-title">
+              {{ t('taskV4.orderTaskSummary') }}
+            </h2>
+            <p class="th-muted">
+              #{{ detail.order_task.order_task_id }}
+            </p>
+          </div>
+          <ReservationStatusBadge :status="detail.order_task.order_task_status" />
+        </div>
+
+        <div class="summary-grid">
+          <div>
+            <span>{{ t('taskV4.orderReference') }}</span>
+            <strong>{{ displayOrderReference }}</strong>
+          </div>
+          <div>
+            <span>{{ t('taskV4.targetBookingType') }}</span>
+            <strong>{{ detail.order_task.target_booking_type ?? '-' }}</strong>
+          </div>
+          <div>
+            <span>{{ t('taskV4.targetLocator') }}</span>
+            <strong>{{ targetLocator }}</strong>
+          </div>
+          <div>
+            <span>{{ t('taskV4.targetResolutionStatus') }}</span>
+            <strong>{{ detail.order_task.target_resolution_status ?? '-' }}</strong>
+          </div>
+          <div>
+            <span>{{ t('taskV4.cardCounts') }}</span>
+            <strong>
+              {{ t('taskList.cardCountsTotal', { total: detail.card_counts.total_count }) }}
+            </strong>
+            <small>
+              {{ t('taskList.cardCountsPending', { count: detail.card_counts.pending_confirm_count }) }}
+              ·
+              {{ t('taskList.cardCountsReview', { count: detail.card_counts.review_required_count }) }}
+              ·
+              {{ t('taskList.cardCountsConfirmed', { count: detail.card_counts.confirmed_count }) }}
+            </small>
+          </div>
+          <div>
+            <span>{{ t('task.sourceReceivedAt') }}</span>
+            <strong>{{ formatReservationDateTime(detail.order_task.source_received_at) }}</strong>
+          </div>
+        </div>
+      </section>
+
+      <ReservationV4SourceMessageCard
+        :title="t('taskV4.sourceMessageCard')"
+        :source-message-summary="detail.source_message_summary"
+        :source-card="detail.source_message_card"
+      />
+
+      <TaskCardSection
+        v-if="detail.basic_information_card"
+        :card="detail.basic_information_card"
+        :title="t('taskV4.basicInformationCard')"
+      />
+
+      <section class="card-stack">
+        <div class="th-section-header card-stack__header">
+          <div>
+            <h2 class="th-section-title">
+              {{ t('taskV4.businessCards') }}
+            </h2>
+            <p class="th-muted">
+              {{ t('taskList.cardCountsTotal', { total: detail.business_cards.length }) }}
+            </p>
+          </div>
+        </div>
+        <div
+          v-if="!detail.business_cards.length"
+          class="empty-state"
+        >
+          {{ t('taskV4.noBusinessCards') }}
+        </div>
+        <template v-else>
+          <TaskCardSection
+            v-for="businessCard in detail.business_cards"
+            :key="businessCard.card_id"
+            :card="businessCard"
+            :title="cardTitle(businessCard)"
+          />
+        </template>
+      </section>
+
+      <section class="th-section diagnostics-section">
+        <div class="th-section-header">
+          <div>
+            <h2 class="th-section-title">
+              {{ t('taskV4.adapterContractErrors') }}
+            </h2>
+            <p class="th-muted">
+              {{ t('taskV4.noAdapterContractErrors') }}
+            </p>
+          </div>
+        </div>
+        <div
+          v-if="detail.adapter_contract_errors.length"
+          class="diagnostic-list"
+        >
+          <article
+            v-for="error in detail.adapter_contract_errors"
+            :key="error.transition_id ?? `${error.route_code}-${error.adapter_error_code}`"
+            class="diagnostic-item"
+          >
+            <strong>{{ error.adapter_error_code ?? t('resultType.ADAPTER_CONTRACT_ERROR') }}</strong>
+            <p>{{ error.adapter_error_message ?? '-' }}</p>
+            <small>{{ formatTransitionSummary(error) }}</small>
+          </article>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineComponent, h, nextTick, ref, watch } from 'vue'
+import { useRoute, RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
+import ReservationV4SourceMessageCard from '@/components/reservation/ReservationV4SourceMessageCard.vue'
+import ReservationV4TaskCardFieldRenderer from '@/components/reservation/ReservationV4TaskCardFieldRenderer.vue'
+import { ApiError } from '@/services/httpClient'
+import {
+  confirmReservationV4OrderTaskCard,
+  fetchReservationV4OrderTaskDetail,
+  resolveReservationV4OrderTaskCardReview,
+} from '@/services/reservationService'
+import { useAuthStore } from '@/stores/authStore'
+import type {
+  ReservationAiTransitionDisplayResult,
+  ReservationRecord,
+  ReservationV4OrderTaskDetailResult,
+  ReservationV4TaskCardResult,
+} from '@/types/reservation'
+import {
+  formatReservationReadonlyReason,
+  formatReservationResultType,
+  formatReservationRouteCode,
+  formatReservationTaskCard,
+} from '@/utils/reservationDisplay'
+import { formatReservationDateTime } from '@/utils/reservationFormat'
+import {
+  buildReservationV4ConfirmedPayload,
+  buildReservationV4InitialFieldValues,
+  buildReservationV4ReviewOverrides,
+  isReservationV4ConfirmWritableField,
+  isReservationV4ReviewWritableField,
+  isReservationV4UnsafeDisplayKey,
+  mapReservationV4BackendDetailsToFields,
+  reservationV4FieldKey,
+  stringifyReservationV4SafeDisplayValue,
+  validateReservationV4Fields,
+} from '@/utils/reservationV4FieldRules'
+
+const route = useRoute()
+const authStore = useAuthStore()
+const { t } = useI18n()
+const loading = ref(false)
+const errorMessage = ref('')
+const cardSuccessMessages = ref<Record<string, string>>({})
+const detail = ref<ReservationV4OrderTaskDetailResult | null>(null)
+const cardValues = ref<Record<string, ReservationRecord>>({})
+const cardFieldErrors = ref<Record<string, Record<string, string>>>({})
+const cardActionErrors = ref<Record<string, string[]>>({})
+const reviewForms = ref<Record<string, { confirmed_order_id: string; reason: string }>>({})
+const submittingCardId = ref<string | null>(null)
+let requestSequence = 0
+
+const orderTaskId = computed(() => String(route.params.orderTaskId ?? ''))
+const displayOrderReference = computed(() => {
+  const orderTask = detail.value?.order_task
+  return orderTask?.display_order_key ?? orderTask?.order_ref ?? orderTask?.order_id ?? '-'
+})
+const targetLocator = computed(() => {
+  const orderTask = detail.value?.order_task
+  if (!orderTask) {
+    return '-'
+  }
+  return [orderTask.target_locator_type, orderTask.target_locator_value].filter(Boolean).join(': ') || '-'
+})
+const hasConfirmPermission = computed(() => authStore.hasPermission('RESERVATION_TASK_CONFIRM'))
+const hasReviewPermission = computed(() => authStore.hasPermission('RESERVATION_MANUAL_REVIEW_RESOLVE'))
+
+watch(
+  [orderTaskId, () => authStore.selectedHotelId],
+  () => {
+    void loadDetail()
+  },
+  { immediate: true },
+)
+
+async function loadDetail(): Promise<void> {
+  if (!orderTaskId.value) {
+    return
+  }
+  const currentRequest = ++requestSequence
+  loading.value = true
+  errorMessage.value = ''
+  cardSuccessMessages.value = {}
+  try {
+    const result = await fetchReservationV4OrderTaskDetail(orderTaskId.value)
+    if (currentRequest !== requestSequence) {
+      return
+    }
+    applyDetail(result)
+  } catch (error) {
+    if (currentRequest !== requestSequence) {
+      return
+    }
+    detail.value = null
+    errorMessage.value = formatApiError(error, t('taskV4.error.loadFailed')).message
+  } finally {
+    if (currentRequest === requestSequence) {
+      loading.value = false
+    }
+  }
+}
+
+function applyDetail(result: ReservationV4OrderTaskDetailResult): void {
+  detail.value = result
+  const cards = [
+    result.source_message_card,
+    result.basic_information_card,
+    ...result.business_cards,
+  ].filter((card): card is ReservationV4TaskCardResult => Boolean(card))
+  cardValues.value = cards.reduce<Record<string, ReservationRecord>>((values, card) => {
+    values[card.card_id] = buildReservationV4InitialFieldValues(card.fields)
+    return values
+  }, {})
+  cardFieldErrors.value = {}
+  cardActionErrors.value = {}
+  cardSuccessMessages.value = {}
+  reviewForms.value = cards.reduce<Record<string, { confirmed_order_id: string; reason: string }>>((forms, card) => {
+    forms[card.card_id] = {
+      confirmed_order_id: result.order_task.order_id ?? '',
+      reason: '',
+    }
+    return forms
+  }, {})
+}
+
+function setCardValues(card: ReservationV4TaskCardResult, values: ReservationRecord): void {
+  cardValues.value = {
+    ...cardValues.value,
+    [card.card_id]: values,
+  }
+}
+
+function canConfirmCard(card: ReservationV4TaskCardResult): boolean {
+  return hasConfirmPermission.value &&
+    card.card_status === 'PENDING_CONFIRM' &&
+    card.availability.confirmable &&
+    submittingCardId.value !== card.card_id
+}
+
+function canReviewCard(card: ReservationV4TaskCardResult): boolean {
+  return hasReviewPermission.value &&
+    card.card_status === 'REVIEW_REQUIRED' &&
+    card.availability.reviewable &&
+    submittingCardId.value !== card.card_id
+}
+
+async function submitConfirm(card: ReservationV4TaskCardResult): Promise<void> {
+  const writableFields = card.fields.filter(isReservationV4ConfirmWritableField)
+  const localErrors = validateReservationV4Fields(writableFields, cardValues.value[card.card_id] ?? {})
+  cardFieldErrors.value = {
+    ...cardFieldErrors.value,
+    [card.card_id]: localErrors,
+  }
+  if (Object.keys(localErrors).length) {
+    cardActionErrors.value = {
+      ...cardActionErrors.value,
+      [card.card_id]: [t('taskV4.validationFailed')],
+    }
+    return
+  }
+
+  submittingCardId.value = card.card_id
+  cardActionErrors.value = {
+    ...cardActionErrors.value,
+    [card.card_id]: [],
+  }
+  cardSuccessMessages.value = {
+    ...cardSuccessMessages.value,
+    [card.card_id]: '',
+  }
+  try {
+    const result = await confirmReservationV4OrderTaskCard(orderTaskId.value, card.card_id, {
+      version: card.version,
+      confirmed_payload: buildReservationV4ConfirmedPayload(card.fields, cardValues.value[card.card_id] ?? {}),
+    })
+    applyDetail(result)
+    cardSuccessMessages.value = {
+      ...cardSuccessMessages.value,
+      [card.card_id]: t('taskV4.cardConfirmed'),
+    }
+    await nextTick()
+  } catch (error) {
+    applyCardActionError(card, error, t('taskV4.error.actionFailed'))
+  } finally {
+    submittingCardId.value = null
+  }
+}
+
+async function submitReview(card: ReservationV4TaskCardResult): Promise<void> {
+  const writableFields = card.fields.filter(isReservationV4ReviewWritableField)
+  const localErrors = validateReservationV4Fields(writableFields, cardValues.value[card.card_id] ?? {})
+  cardFieldErrors.value = {
+    ...cardFieldErrors.value,
+    [card.card_id]: localErrors,
+  }
+  if (Object.keys(localErrors).length) {
+    cardActionErrors.value = {
+      ...cardActionErrors.value,
+      [card.card_id]: [t('taskV4.validationFailed')],
+    }
+    return
+  }
+
+  const form = reviewForms.value[card.card_id] ?? { confirmed_order_id: '', reason: '' }
+  if (requiresConfirmedOrderId() && !form.confirmed_order_id.trim()) {
+    cardActionErrors.value = {
+      ...cardActionErrors.value,
+      [card.card_id]: [t('taskV4.confirmedOrderRequired')],
+    }
+    return
+  }
+
+  submittingCardId.value = card.card_id
+  cardActionErrors.value = {
+    ...cardActionErrors.value,
+    [card.card_id]: [],
+  }
+  cardSuccessMessages.value = {
+    ...cardSuccessMessages.value,
+    [card.card_id]: '',
+  }
+  try {
+    const result = await resolveReservationV4OrderTaskCardReview(orderTaskId.value, card.card_id, {
+      version: card.version,
+      confirmed_order_id: form.confirmed_order_id.trim() || undefined,
+      reason: form.reason.trim() || undefined,
+      field_overrides: buildReservationV4ReviewOverrides(card.fields, cardValues.value[card.card_id] ?? {}),
+    })
+    applyDetail(result)
+    cardSuccessMessages.value = {
+      ...cardSuccessMessages.value,
+      [card.card_id]: t('taskV4.reviewResolved'),
+    }
+    await nextTick()
+  } catch (error) {
+    applyCardActionError(card, error, t('taskV4.error.actionFailed'))
+  } finally {
+    submittingCardId.value = null
+  }
+}
+
+function requiresConfirmedOrderId(): boolean {
+  const orderTask = detail.value?.order_task
+  if (!orderTask) {
+    return false
+  }
+  return !orderTask.order_id || orderTask.target_resolution_status !== 'RESOLVED'
+}
+
+function editableFieldKeys(card: ReservationV4TaskCardResult): string[] {
+  const writableFields = card.card_status === 'REVIEW_REQUIRED'
+    ? card.fields.filter(isReservationV4ReviewWritableField)
+    : card.fields.filter(isReservationV4ConfirmWritableField)
+  return writableFields.map(reservationV4FieldKey)
+}
+
+function applyCardActionError(card: ReservationV4TaskCardResult, error: unknown, fallback: string): void {
+  const formatted = formatApiError(error, fallback)
+  const mappedErrors = mapReservationV4BackendDetailsToFields(formatted.details, card.fields)
+  cardFieldErrors.value = {
+    ...cardFieldErrors.value,
+    [card.card_id]: mappedErrors.fieldErrors,
+  }
+  cardActionErrors.value = {
+    ...cardActionErrors.value,
+    [card.card_id]: [formatted.message, ...mappedErrors.globalErrors].filter(Boolean),
+  }
+}
+
+function cardTitle(card: ReservationV4TaskCardResult): string {
+  return formatReservationTaskCard(t, card.card_type)
+}
+
+function availabilityReason(card: ReservationV4TaskCardResult): string {
+  return card.availability.readonly_reason_message ??
+    (card.availability.readonly_reason_code
+      ? formatReservationReadonlyReason(t, card.availability.readonly_reason_code)
+      : card.availability.blocked_reason ?? '')
+}
+
+function formatTransitionSummary(error: ReservationAiTransitionDisplayResult): string {
+  return [
+    error.route_code ? formatReservationRouteCode(t, error.route_code) : '',
+    error.result_type ? formatReservationResultType(t, error.result_type) : '',
+    error.transition_id ? `#${error.transition_id}` : '',
+  ].filter(Boolean).join(' · ')
+}
+
+function safePayloadRows(payload: ReservationRecord | null): Array<{ key: string; value: string }> {
+  if (!payload) {
+    return []
+  }
+  return Object.entries(payload)
+    .filter(([key]) => !isUnsafePayloadKey(key))
+    .slice(0, 12)
+    .map(([key, value]) => ({
+      key,
+      value: stringifySafeValue(value),
+    }))
+}
+
+function isUnsafePayloadKey(key: string): boolean {
+  return isReservationV4UnsafeDisplayKey(key)
+}
+
+function stringifySafeValue(value: unknown): string {
+  return stringifyReservationV4SafeDisplayValue(
+    value,
+    t('taskV4.field.empty'),
+    t('taskV4.field.hidden'),
+  )
+}
+
+function formatApiError(error: unknown, fallback: string): {
+  message: string
+  details: unknown
+} {
+  if (!(error instanceof ApiError)) {
+    return {
+      message: error instanceof Error ? error.message : fallback,
+      details: [],
+    }
+  }
+  const payload = error.details
+  if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
+    const record = payload as ReservationRecord
+    return {
+      message: typeof record.message === 'string' ? record.message : fallback,
+      details: record.details ?? [],
+    }
+  }
+  return {
+    message: fallback,
+    details: payload,
+  }
+}
+
+const TaskCardSection = defineComponent({
+  name: 'TaskCardSection',
+  props: {
+    card: {
+      type: Object as () => ReservationV4TaskCardResult,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => h('section', { class: 'th-section task-card-section' }, [
+      h('div', { class: 'th-section-header' }, [
+        h('div', [
+          h('h2', { class: 'th-section-title' }, props.title),
+          h('p', { class: 'th-muted' }, `#${props.card.card_id}`),
+        ]),
+        h(ReservationStatusBadge, { status: props.card.card_status }),
+      ]),
+      h('div', { class: 'card-meta-grid' }, [
+        h('div', [h('span', t('task.reviewStatus')), h('strong', props.card.review_status ?? '-')]),
+        h('div', [h('span', t('taskV4.readonlyReason')), h('strong', availabilityReason(props.card) || '-')]),
+        h('div', [h('span', t('taskV4.blockedReason')), h('strong', props.card.availability.blocked_reason ?? '-')]),
+        h('div', [h('span', t('taskV4.orderTaskId')), h('strong', detail.value?.order_task.order_task_id ?? '-')]),
+      ]),
+      h(ReservationV4TaskCardFieldRenderer, {
+        fields: props.card.fields,
+        modelValue: cardValues.value[props.card.card_id] ?? {},
+        readOnly: !props.card.availability.editable ||
+          props.card.availability.read_only ||
+          submittingCardId.value === props.card.card_id,
+        editableKeys: editableFieldKeys(props.card),
+        validationErrors: cardFieldErrors.value[props.card.card_id] ?? {},
+        'onUpdate:modelValue': (values: ReservationRecord) => setCardValues(props.card, values),
+      }),
+      safePayloadRows(props.card.display_payload).length
+        ? h('details', { class: 'safe-payload' }, [
+          h('summary', t('taskV4.displayPayload')),
+          h('dl', safePayloadRows(props.card.display_payload).flatMap((row) => [
+            h('dt', row.key),
+            h('dd', row.value),
+          ])),
+        ])
+        : null,
+      (cardActionErrors.value[props.card.card_id]?.length ?? 0) > 0
+        ? h('div', { class: 'action-message action-message--error' },
+          (cardActionErrors.value[props.card.card_id] ?? []).map((message) => h('p', message)),
+        )
+        : null,
+      cardSuccessMessages.value[props.card.card_id]
+        ? h('p', { class: 'action-message action-message--success' }, cardSuccessMessages.value[props.card.card_id])
+        : null,
+      props.card.card_status === 'REVIEW_REQUIRED'
+        ? h('div', { class: 'review-box' }, [
+          h('label', [
+            h('span', t('taskV4.confirmedOrderId')),
+            h('input', {
+              value: reviewForms.value[props.card.card_id]?.confirmed_order_id ?? '',
+              placeholder: t('taskV4.confirmedOrderIdPlaceholder'),
+              onInput: (event: Event) => {
+                const target = event.target as HTMLInputElement
+                reviewForms.value[props.card.card_id] = {
+                  ...(reviewForms.value[props.card.card_id] ?? { reason: '' }),
+                  confirmed_order_id: target.value,
+                }
+              },
+            }),
+          ]),
+          h('label', [
+            h('span', t('taskV4.reviewReason')),
+            h('textarea', {
+              value: reviewForms.value[props.card.card_id]?.reason ?? '',
+              placeholder: t('taskV4.reviewReasonPlaceholder'),
+              rows: 3,
+              onInput: (event: Event) => {
+                const target = event.target as HTMLTextAreaElement
+                reviewForms.value[props.card.card_id] = {
+                  ...(reviewForms.value[props.card.card_id] ?? { confirmed_order_id: '' }),
+                  reason: target.value,
+                }
+              },
+            }),
+          ]),
+          h('button', {
+            type: 'button',
+            class: 'primary-button',
+            disabled: !canReviewCard(props.card),
+            onClick: () => void submitReview(props.card),
+          }, submittingCardId.value === props.card.card_id ? t('taskV4.resolvingReview') : t('taskV4.resolveReview')),
+        ])
+        : h('button', {
+          type: 'button',
+          class: 'primary-button',
+          disabled: !canConfirmCard(props.card),
+          onClick: () => void submitConfirm(props.card),
+        }, submittingCardId.value === props.card.card_id ? t('taskV4.confirmingCard') : t('taskV4.confirmCard')),
+      detail.value?.bound_order?.order_id
+        ? h(RouterLink, {
+          class: 'card-order-link',
+          to: `/reservation/orders/${detail.value.bound_order.order_id}`,
+        }, () => t('task.viewOrder'))
+        : null,
+    ])
+  },
+})
+</script>
+
+<style scoped>
+.v4-task-detail-view {
+  max-width: 1320px;
+}
+
+.page-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.page-heading h1,
+.page-heading p {
+  margin: 0;
+}
+
+.page-heading h1 {
+  color: var(--th-color-slate-900);
+  font-size: 28px;
+}
+
+.page-heading p {
+  margin-top: 8px;
+  color: var(--th-color-slate-500);
+  font-size: 14px;
+}
+
+.empty-state {
+  min-height: 220px;
+  display: grid;
+  place-items: center;
+  color: var(--th-color-slate-500);
+  font-size: 13px;
+  padding: 24px;
+}
+
+.empty-state--error {
+  color: var(--th-color-danger);
+}
+
+.summary-section,
+.task-card-section,
+.diagnostics-section,
+.card-stack {
+  overflow: hidden;
+}
+
+.summary-grid,
+.card-meta-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  padding: 0 20px 20px;
+}
+
+.summary-grid div,
+.card-meta-grid div {
+  display: grid;
+  gap: 5px;
+}
+
+.summary-grid span,
+.card-meta-grid span {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.summary-grid strong,
+.card-meta-grid strong {
+  color: var(--th-color-slate-900);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.summary-grid small {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+}
+
+.card-stack {
+  display: grid;
+  gap: 14px;
+}
+
+.card-stack__header {
+  border: 0;
+  padding: 0;
+}
+
+.task-card-section :deep(.v4-field-renderer) {
+  padding: 0 20px 18px;
+}
+
+.primary-button,
+.secondary-button {
+  min-height: 38px;
+  border-radius: var(--th-radius-sm);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 800;
+  padding: 8px 14px;
+}
+
+.primary-button {
+  justify-self: start;
+  margin: 0 20px 18px;
+  border: 0;
+  background: var(--th-color-blue-600);
+  color: var(--th-color-white);
+}
+
+.secondary-button {
+  border: 1px solid var(--th-color-slate-200);
+  background: var(--th-color-white);
+  color: var(--th-color-slate-700);
+}
+
+.primary-button:disabled,
+.secondary-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.review-box {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
+  gap: 12px;
+  align-items: end;
+  border-top: 1px solid var(--th-color-slate-200);
+  padding: 16px 20px 18px;
+}
+
+.review-box label {
+  display: grid;
+  gap: 7px;
+}
+
+.review-box span {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.review-box input,
+.review-box textarea {
+  min-height: 38px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  color: var(--th-color-slate-900);
+  font: inherit;
+  padding: 8px 10px;
+}
+
+.review-box .primary-button {
+  margin: 0;
+}
+
+.action-message {
+  margin: 0 20px 18px;
+  border-radius: var(--th-radius-sm);
+  font-size: 13px;
+  font-weight: 700;
+  padding: 10px 12px;
+}
+
+.action-message p {
+  margin: 0;
+}
+
+.action-message p + p {
+  margin-top: 5px;
+}
+
+.action-message--error {
+  background: var(--th-color-danger-bg);
+  color: var(--th-color-danger);
+}
+
+.action-message--success {
+  background: var(--th-color-success-bg);
+  color: var(--th-color-success);
+}
+
+.safe-payload {
+  margin: 0 20px 18px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  padding: 10px 12px;
+}
+
+.safe-payload summary {
+  color: var(--th-color-slate-700);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.safe-payload dl {
+  display: grid;
+  grid-template-columns: minmax(120px, 220px) minmax(0, 1fr);
+  gap: 8px 12px;
+  margin: 12px 0 0;
+}
+
+.safe-payload dt {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.safe-payload dd {
+  margin: 0;
+  color: var(--th-color-slate-900);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.card-order-link {
+  display: inline-flex;
+  margin: 0 20px 18px;
+  color: var(--th-color-blue-600);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.diagnostic-list {
+  display: grid;
+  gap: 10px;
+  padding: 0 20px 20px;
+}
+
+.diagnostic-item {
+  border: 1px solid var(--th-color-danger-bg);
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-danger-bg);
+  color: var(--th-color-danger);
+  padding: 10px 12px;
+}
+
+.diagnostic-item strong,
+.diagnostic-item p,
+.diagnostic-item small {
+  display: block;
+  margin: 0;
+}
+
+.diagnostic-item p {
+  margin-top: 5px;
+}
+
+.diagnostic-item small {
+  margin-top: 5px;
+}
+
+@media (max-width: 980px) {
+  .summary-grid,
+  .card-meta-grid,
+  .review-box {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/client/src/views/reservation/ReservationV4SourceNotificationDetailView.vue b/client/src/views/reservation/ReservationV4SourceNotificationDetailView.vue
new file mode 100644
index 0000000..f48638c
--- /dev/null
+++ b/client/src/views/reservation/ReservationV4SourceNotificationDetailView.vue
@@ -0,0 +1,376 @@
+<template>
+  <div class="th-page source-notification-view">
+    <header class="page-heading">
+      <div>
+        <h1>{{ t('sourceNotification.title') }}</h1>
+        <p>{{ t('sourceNotification.subtitle') }}</p>
+      </div>
+      <button
+        type="button"
+        class="secondary-button"
+        :disabled="loading"
+        @click="loadDetail"
+      >
+        {{ t('common.refresh') }}
+      </button>
+    </header>
+
+    <div
+      v-if="loading"
+      class="empty-state"
+    >
+      {{ t('common.loading') }}
+    </div>
+    <div
+      v-else-if="errorMessage"
+      class="empty-state empty-state--error"
+    >
+      {{ errorMessage }}
+    </div>
+
+    <template v-else-if="detail">
+      <section class="th-section summary-section">
+        <div class="th-section-header">
+          <div>
+            <h2 class="th-section-title">
+              {{ t('sourceNotification.summary') }}
+            </h2>
+            <p class="th-muted">
+              #{{ detail.notification.notification_id }}
+            </p>
+          </div>
+          <ReservationStatusBadge :status="detail.notification.notification_status" />
+        </div>
+
+        <div class="summary-grid">
+          <div>
+            <span>{{ t('sourceNotification.routeCode') }}</span>
+            <strong>{{ formatReservationRouteCode(t, detail.notification.route_code) }}</strong>
+          </div>
+          <div>
+            <span>{{ t('sourceNotification.status') }}</span>
+            <strong>{{ t(`status.${detail.notification.notification_status}`, detail.notification.notification_status) }}</strong>
+          </div>
+          <div>
+            <span>{{ t('task.sourceReceivedAt') }}</span>
+            <strong>{{ formatReservationDateTime(detail.notification.source_received_at) }}</strong>
+          </div>
+          <div>
+            <span>{{ t('taskV4.readonlyReason') }}</span>
+            <strong>{{ availabilityReason }}</strong>
+          </div>
+        </div>
+      </section>
+
+      <ReservationV4SourceMessageCard
+        :title="t('sourceNotification.sourceMessage')"
+        :source-message-summary="detail.conversation_summary"
+        :source-card="detail.source_message_card"
+      />
+
+      <section class="th-section ack-section">
+        <div class="th-section-header">
+          <div>
+            <h2 class="th-section-title">
+              {{ t('sourceNotification.ack') }}
+            </h2>
+            <p class="th-muted">
+              {{ t('sourceNotification.noBusinessEntry') }}
+            </p>
+          </div>
+        </div>
+
+        <label>
+          <span>{{ t('sourceNotification.ackReason') }}</span>
+          <textarea
+            v-model="ackReason"
+            rows="3"
+            :placeholder="t('sourceNotification.ackReasonPlaceholder')"
+          />
+        </label>
+
+        <div
+          v-if="actionError"
+          class="action-message action-message--error"
+        >
+          {{ actionError }}
+        </div>
+        <div
+          v-if="successMessage"
+          class="action-message action-message--success"
+        >
+          {{ successMessage }}
+        </div>
+
+        <button
+          type="button"
+          class="primary-button"
+          :disabled="!canAck"
+          @click="ackNotification"
+        >
+          {{ submitting ? t('sourceNotification.acking') : t('sourceNotification.ack') }}
+        </button>
+      </section>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
+import ReservationV4SourceMessageCard from '@/components/reservation/ReservationV4SourceMessageCard.vue'
+import { ApiError } from '@/services/httpClient'
+import {
+  ackReservationV4SourceNotification,
+  fetchReservationV4SourceNotificationDetail,
+} from '@/services/reservationService'
+import { useAuthStore } from '@/stores/authStore'
+import type { ReservationRecord, ReservationV4SourceNotificationDetailResult } from '@/types/reservation'
+import {
+  formatReservationReadonlyReason,
+  formatReservationRouteCode,
+} from '@/utils/reservationDisplay'
+import { formatReservationDateTime } from '@/utils/reservationFormat'
+
+const route = useRoute()
+const authStore = useAuthStore()
+const { t } = useI18n()
+const detail = ref<ReservationV4SourceNotificationDetailResult | null>(null)
+const loading = ref(false)
+const submitting = ref(false)
+const errorMessage = ref('')
+const actionError = ref('')
+const successMessage = ref('')
+const ackReason = ref('')
+let requestSequence = 0
+
+const notificationId = computed(() => String(route.params.notificationId ?? ''))
+const canAck = computed(() =>
+  Boolean(detail.value?.availability.ackable) &&
+  authStore.hasPermission('RESERVATION_TASK_CONFIRM') &&
+  !submitting.value,
+)
+const availabilityReason = computed(() => {
+  const availability = detail.value?.availability
+  if (!availability) {
+    return '-'
+  }
+  return availability.readonly_reason_message ??
+    (availability.readonly_reason_code
+      ? formatReservationReadonlyReason(t, availability.readonly_reason_code)
+      : availability.blocked_reason ?? '-')
+})
+
+watch(
+  [notificationId, () => authStore.selectedHotelId],
+  () => {
+    void loadDetail()
+  },
+  { immediate: true },
+)
+
+async function loadDetail(): Promise<void> {
+  if (!notificationId.value) {
+    return
+  }
+  const currentRequest = ++requestSequence
+  loading.value = true
+  errorMessage.value = ''
+  successMessage.value = ''
+  actionError.value = ''
+  try {
+    const result = await fetchReservationV4SourceNotificationDetail(notificationId.value)
+    if (currentRequest !== requestSequence) {
+      return
+    }
+    detail.value = result
+  } catch (error) {
+    if (currentRequest !== requestSequence) {
+      return
+    }
+    detail.value = null
+    errorMessage.value = formatApiError(error, t('sourceNotification.error.loadFailed'))
+  } finally {
+    if (currentRequest === requestSequence) {
+      loading.value = false
+    }
+  }
+}
+
+async function ackNotification(): Promise<void> {
+  if (!detail.value) {
+    return
+  }
+  submitting.value = true
+  actionError.value = ''
+  successMessage.value = ''
+  try {
+    detail.value = await ackReservationV4SourceNotification(notificationId.value, {
+      version: detail.value.notification.version,
+      reason: ackReason.value.trim() || undefined,
+    })
+    successMessage.value = t('sourceNotification.acked')
+    ackReason.value = ''
+  } catch (error) {
+    actionError.value = formatApiError(error, t('sourceNotification.error.ackFailed'))
+  } finally {
+    submitting.value = false
+  }
+}
+
+function formatApiError(error: unknown, fallback: string): string {
+  if (!(error instanceof ApiError)) {
+    return error instanceof Error ? error.message : fallback
+  }
+  const payload = error.details
+  if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
+    const record = payload as ReservationRecord
+    return typeof record.message === 'string' ? record.message : fallback
+  }
+  return fallback
+}
+</script>
+
+<style scoped>
+.source-notification-view {
+  max-width: 1320px;
+}
+
+.page-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.page-heading h1,
+.page-heading p {
+  margin: 0;
+}
+
+.page-heading h1 {
+  color: var(--th-color-slate-900);
+  font-size: 28px;
+}
+
+.page-heading p {
+  margin-top: 8px;
+  color: var(--th-color-slate-500);
+  font-size: 14px;
+}
+
+.empty-state {
+  min-height: 220px;
+  display: grid;
+  place-items: center;
+  color: var(--th-color-slate-500);
+  font-size: 13px;
+  padding: 24px;
+}
+
+.empty-state--error {
+  color: var(--th-color-danger);
+}
+
+.summary-section,
+.ack-section {
+  overflow: hidden;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  padding: 0 20px 20px;
+}
+
+.summary-grid div {
+  display: grid;
+  gap: 5px;
+}
+
+.summary-grid span,
+.ack-section label span {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.summary-grid strong {
+  color: var(--th-color-slate-900);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.ack-section label {
+  display: grid;
+  gap: 7px;
+  padding: 0 20px 18px;
+}
+
+.ack-section textarea {
+  min-height: 88px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  color: var(--th-color-slate-900);
+  font: inherit;
+  padding: 10px 12px;
+  resize: vertical;
+}
+
+.primary-button,
+.secondary-button {
+  min-height: 38px;
+  border-radius: var(--th-radius-sm);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 800;
+  padding: 8px 14px;
+}
+
+.primary-button {
+  margin: 0 20px 18px;
+  border: 0;
+  background: var(--th-color-blue-600);
+  color: var(--th-color-white);
+}
+
+.secondary-button {
+  border: 1px solid var(--th-color-slate-200);
+  background: var(--th-color-white);
+  color: var(--th-color-slate-700);
+}
+
+.primary-button:disabled,
+.secondary-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.action-message {
+  margin: 0 20px 18px;
+  border-radius: var(--th-radius-sm);
+  font-size: 13px;
+  font-weight: 700;
+  padding: 10px 12px;
+}
+
+.action-message--error {
+  background: var(--th-color-danger-bg);
+  color: var(--th-color-danger);
+}
+
+.action-message--success {
+  background: var(--th-color-success-bg);
+  color: var(--th-color-success);
+}
+
+@media (max-width: 900px) {
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/project/frontend-backend/README.md b/docs/project/frontend-backend/README.md
index 84d2295..3614b37 100644
--- a/docs/project/frontend-backend/README.md
+++ b/docs/project/frontend-backend/README.md
@@ -45,6 +45,7 @@
 | SuperAgent 查询上下文接口 1、2 | `docs/project/requirements/M002-ai-query-minimal-fields.md` | 阶段记录，用于理解接口 1、2 的最小字段实现；如与总契约冲突，以总契约为准。 |
 | 订单任务主流程 V3 | `docs/project/requirements/M002-order-task-workflow-v3.md` | 当前开发基线，基于 0711 P0 冻结基线和 0712 P0.1 Parent Group 修订，覆盖 S10/S99、40 路由、方案 C、type-known manual review 同卡解阻和 fail-closed。 |
 | 任务卡字段控件契约 V1 | `docs/project/requirements/M002-task-field-control-contract-v1.md` | 后端已返回 `fields[]` 控件元数据，规定人工复核控件复用和前后端边界；前端待接入。 |
+| 订单任务多卡模型 V4 | `docs/project/requirements/M002-v4-order-task-card-domain-model-cp2.md` | 当前 V4 后端主入口；后端已开放工作台统一列表、V4 订单任务列表 / 详情、卡片确认、复核解阻、S10/S99 来源通知详情和 ack，前端页面接入仍按后续 checkpoint 跟进。 |
 | Manual Invoice 手工开票生成 | `docs/project/requirements/M009-manual-invoice-generation-v1.md` | 当前有效；后端 CP2 已支持无订单 / 无任务手工填写字段、填 Excel 模板、转 PDF、OSS 输出和生成记录。 |
 | Rooming List Excel 生成 | `docs/project/requirements/M010-rooming-list-excel-generation-v1.md` | 当前有效；后端 CP1 已支持前端上传来源名单并填写目标字段，同步生成 `.xlsx` 直接下载；前端 V1 已新增 `/reservation/rooming-lists/new`，按 Blob 下载处理，不落库、不上传 OSS。 |
 | 订单任务主流程 V2 | `docs/project/requirements/M002-order-task-workflow-v2.md` | 已实现阶段记录，保留用于理解当前代码中的 S000/S999、订单任务流转和 OPERA 模拟骨架。 |
diff --git a/docs/project/frontend-backend/backend-to-frontend-notes.md b/docs/project/frontend-backend/backend-to-frontend-notes.md
index 9d93e35..d3b4cd6 100644
--- a/docs/project/frontend-backend/backend-to-frontend-notes.md
+++ b/docs/project/frontend-backend/backend-to-frontend-notes.md
@@ -461,6 +461,21 @@ RESERVATION_ROOMING_LIST_GENERATE
 - 页面不要把上传文件内容、客人名单、生成文件内容写入浏览器日志、埋点、错误上报、URL 或 localStorage。
 - 第一版没有 preview 接口、生成记录接口、OSS URL、历史下载和订单 / 任务预填；前端不要在页面上承诺这些能力。
 
+### 5.13 M002 V4 前端接入约束
+
+后端已提供以下 V4 查询和写接口，前端接入时按这些约束实现；在前端页面正式集成并完成联调前，不把 V4 前端页面视为完成：
+
+- `/reservation/tasks` 应使用 `GET /api/reservation/workbench-items` 作为默认工作台列表入口，展示 V4 订单任务和 S10/S99 来源通知混排摘要；当筛选工作项类型为订单任务时，改用 `GET /api/reservation/order-tasks`，仅发送后端当前支持的 `keyword`、`order_task_status`、`card_status`、`page_num`、`page_size`。
+- `/reservation/order-tasks/{orderTaskId}` 应使用 `GET /api/reservation/order-tasks/{orderTaskId}` 展示 `source_message_card`、`basic_information_card`、`business_cards[]`、`card_counts`、`order_task` 摘要和 `adapter_contract_errors[]` 只读诊断。
+- `/reservation/source-notifications/{notificationId}` 应使用 `GET /api/reservation/source-notifications/{notificationId}` 展示 S10/S99 来源通知详情，并通过 `POST /api/reservation/source-notifications/{notificationId}/ack` 确认已读 / 已处理。
+- V4 卡片确认应使用 `POST /api/reservation/order-tasks/{orderTaskId}/cards/{cardId}/confirm`，请求带 `version`；前端只从当前卡 `fields[]` 中挑选 `editable=true`、`raw_readonly!=true`、`write_target` 指向确认 payload 的字段构造 `confirmed_payload`。
+- V4 复核解阻应使用 `POST /api/reservation/order-tasks/{orderTaskId}/cards/{cardId}/review-resolution`，请求带 `version`；`field_overrides[]` 只使用当前卡 `fields[].field_pointer`，订单任务归属未解决时允许用户填写 `confirmed_order_id`。
+- 所有按钮应按后端 `availability.confirmable`、`availability.reviewable`、`availability.ackable` 和前端权限共同控制；不可操作原因优先展示 `readonly_reason_message`，否则按 `readonly_reason_code` 做友好映射。
+- `fields[].validation_errors` 应展示在对应字段旁边；接口返回 `V4_FIELD_VALIDATION_FAILED` 且 `details[]` 带嵌套路径时，前端应尝试定位到对应 field，定位不到则在当前卡片动作错误区展示。
+- `options_source` 第一版仍按前端固定种子渲染 Account / Room Type / Rate Code，不调用真实目录 lookup API。
+- 前端不展示 `ai_payload_json`、邮件完整正文、附件 URL、raw evidence 或 SuperAgent 原始 payload；来源邮件详情仍从邮件会话页面查看，卡片内仅展示后端普通接口返回的安全摘要、邮件片段和附件名称。
+- V4 主流程不调用旧 V2/V3 草稿、旧任务确认、旧同卡复核接口，也不展示 OPERA 模拟操作入口。
+
 ## 6. 不给前端直接调用的接口
 
 - `POST /api/system/reservation/demo-data` 只用于 dev/test 联调造数，不是生产业务页面接口；访问口令不能进入前端代码。
@@ -488,7 +503,7 @@ RESERVATION_ROOMING_LIST_GENERATE
 - 业务卡目录校验会递归检查 `business_fields` 下的嵌套结构。例如 `UPDATE_BOOKING` 的房型可能位于 `/business_fields/after/room_items/0/room_type_code`，错误详情会使用 `business_fields.after.room_items.0.room_type_code`；前端展示错误时优先用 `fields[].validation_errors`，接口 400 时可直接展示 `details[]`。
 - `review-resolution` 请求示例：`{"version":0,"reason":"确认房型映射","confirmed_order_id":"123456","field_overrides":[{"field_pointer":"/business_fields/room_items/0/pms_room_type_code","value":"RM2"}]}`。`confirmed_order_id` 在订单任务归属未解决时必填；如果订单任务已经绑定订单且 `target_resolution_status=RESOLVED`，只能不传或传当前同一个订单 ID，不能借该接口切换到其它订单。`field_pointer` 必须来自当前卡允许编辑的 `basic_information.*` 或 `business_fields.*` 叶子字段；展示 payload 有 `missing_fields[]` 时只提交清单里的 pointer，没有显式清单时只提交当前值为 `null` / 空字符串的未解决叶子字段；如果是目录校验错误，也可以提交后端 `fields[].validation_errors` 对应的字段 pointer。前端不要提交来源邮件、路由、`target_order`、`order_ref`、缺失字段清单、`manual_review`、raw evidence、校验诊断字段，也不能替换整个对象 / 数组。
 - V4 `fields[]` 第一版字段说明：Basic Information 固定返回 `/basic_information/account_code`、`/basic_information/market_code`、`/basic_information/source_code`；其中 Account `control_type=select`、`options_source=reservation_v4_account_catalog`，Market / Source 为只读派生字段。业务卡会按展示 payload 里的业务叶子字段返回字段白名单，例如 `/room_items/0/room_type_code` 或 `/business_fields/room_items/0/pms_room_type_code`；前端不要自行补未返回字段。
-- V4 CP8 仍没有独立目录 lookup API。前端第一版可先按后端文档固定种子渲染 Account / Room Type / Rate Code 选项；后续真实目录或管理后台目录接入时再切换为 lookup。
+- V4 CP8 仍没有独立目录 lookup API。前端第一版可先按后端文档固定种子渲染 Account / Room Type / Rate Code 选项；后续真实目录或管理后台目录接入时再切换为 lookup。用户提交确认或复核时只提交稳定 `code`，不要提交显示名、派生 Market / Source 或目录完整对象；后端确认前仍会重新校验目录。
 - V4 新模型确认口径是不保存后端草稿、卡片最终确认后锁定、技术异常不进入用户可处理卡、当前不生成 OPERA 模拟操作。Basic Information 必须先确认；其它业务卡第一版不强制逐张顺序确认。现有 V3 `draft`、`confirm`、`manual-review-resolutions` 和 OPERA 模拟接口仍只代表旧链路能力，不能直接等同 V4 多卡最终接口。
 - V4 S10/S99 已采用来源通知模型入库：新 V4 `route_code=S10/S99` 不再挂隐藏技术订单，也不再创建旧 `SOURCE_MESSAGE_ONLY` 任务；对应工作台 / 来源通知详情查询接口和 ack 写接口已开放。旧 `SOURCE_MESSAGE_ONLY` 只读任务仅代表 V3 S10/S99 和旧 S000/S999 兼容数据。
 - M002 V3 的结构化 `S10/S99` 入站、40 条 P0.1 路由枚举 / 稳定配置、`UNHANDLED_CURRENT_INTENT`、`adapter_contract_error` transition 最小落库、任务列表 / 订单时间线 / 任务详情 V3 路由字段和只读诊断块透出、type-known manual review 同卡解阻第一版、typed infrastructure error、P0 fixtures 回归基线和 Parent Group / Cancel Allotment 路由修订均已完成。