Merge commit 'aab64371402d93293bde384139aaa607906928a8' into worktree/pr977-merge-20260731

packages/client/ui-conversation/src/client/skeleton/ApprovalPanel.module.css

@@ -19,6 +19,13 @@
   border-radius: 20px;
   background: var(--dsw-specific-input-major);
   box-shadow: var(--dsw-shadow-lv2);
+  /* Elevated surface in dark, same as the menus: `.body` inside scrolls once
+     the justification or command passes the cap, so the thumb takes the l2
+     pair. Declared on the card because the elevation belongs to the surface,
+     and the custom properties inherit down to the region that actually
+     scrolls (see ui-theme styles/scrollbar.css for the rebinding contract). */
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
 }
 
 /* Tinted full-width header band. */
@@ -40,11 +47,22 @@
   background: var(--dsw-alias-state-warn-primary);
 }
 
+/* Scroll region: an agent's justification and its command are unbounded model
+   text (a one-line `cd` or a 40-line heredoc), and the seat sits in a
+   fixed-height column — uncapped, a long command pushed the action row past
+   the viewport and the approval could not be answered at all. The strip and
+   the action row stay outside, so the buttons are always on screen. */
 .body {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  padding: 12px 16px 14px;
+  /* border-box so the cap is the region's OUTER height: the composer's draft
+     area counts its padding inside the same number, and the two seats are
+     only interchangeable if they occupy the same box. */
+  box-sizing: border-box;
+  max-height: var(--dsh-composer-text-max-height);
+  overflow-y: auto;
+  padding: 12px 16px 0;
 }
 
 /* The model's justification is the panel's message, not a footnote. */
@@ -63,11 +81,15 @@
   word-break: break-all;
 }
 
+/* Card-level row, not body content. Its padding reproduces the metrics the row
+   had inside the body: 14px above (the flex gap of 6 plus the row's 8px top
+   margin, neither of which reaches it out here) and the body's former 14px
+   bottom pad below, so the resting card is unchanged. */
 .actionRow {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
-  margin-top: 8px;
+  padding: 14px 16px 14px;
 }
 
 .allow,

packages/client/ui-conversation/src/client/skeleton/ApprovalPanel.tsx

@@ -4,7 +4,11 @@
 // pending, this panel occupies the composer slot in place of the InputBar:
 // an amber "Waiting for approval" strip on the card top, the model's
 // justification as the headline, the paired command in muted code text, and
-// a right-aligned refuse/allow action row. One-shot: the buttons disable
+// a right-aligned refuse/allow action row. Justification and command are
+// unbounded model text, so they scroll inside the card at the shared composer
+// cap (`data-approval-scroll`) and the action row stays outside it — the
+// buttons must be reachable no matter how long the command is.
+// One-shot: the buttons disable
 // after a click and the panel leaves (the InputBar returns) on the broadcast
 // resolved frame. The draft's "Always allow this type" is deferred with
 // grant storage.
@@ -53,17 +57,20 @@ function ApprovalFlow({ pending, command }: { pending: PendingApproval; command?
     <div className={css.root} data-approval-key={pending.key}>
       <div className={css.card}>
         <div className={css.strip}><span className={css.dot} />等待审批</div>
-        <div className={css.body}>
+        {/* Tab stop: the region scrolls once the command passes the cap and
+            holds nothing focusable of its own, so without one a keyboard-only
+            user cannot reach the command's tail before answering. */}
+        <div className={css.body} data-approval-scroll="" tabIndex={0} role="group" aria-label="审批详情">
           <div className={css.headline}>{pending.reason ?? `工具 ${pending.toolName} 请求越权执行`}</div>
           {command !== undefined && <div className={css.command}>{command}</div>}
-          <div className={css.actionRow}>
-            <button type="button" className={css.reject} disabled={answered} onClick={() => { answer('rejected') }}>
-              拒绝
-            </button>
-            <button type="button" className={css.allow} disabled={answered} onClick={() => { answer('allowed-once') }}>
-              允许一次
-            </button>
-          </div>
+        </div>
+        <div className={css.actionRow}>
+          <button type="button" className={css.reject} disabled={answered} onClick={() => { answer('rejected') }}>
+            拒绝
+          </button>
+          <button type="button" className={css.allow} disabled={answered} onClick={() => { answer('allowed-once') }}>
+            允许一次
+          </button>
         </div>
       </div>
     </div>

packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css

@@ -143,6 +143,14 @@
   display: flex;
   flex: none;
   flex-direction: column;
+  /* One cap for every scrolling text region a composer seat can hold: the
+     InputBar draft (figma Input 75:8208 max 14 lines × 24px line) and the
+     takeover panels' bodies top out at the same height, so electing a
+     takeover never grows the footer past the card it replaces. Declared on
+     the seat because it is the chain's only shared ancestor — fallback and
+     elected overlay are siblings — and custom properties inherit down to
+     whichever entry is mounted. */
+  --dsh-composer-text-max-height: 336px;
 }
 
 /* Active phase: header is ordinary column chrome above the scrollport (not

packages/client/ui-conversation/src/client/skeleton/InputBar.module.css

@@ -209,7 +209,9 @@
 .mirror {
   visibility: hidden;
   pointer-events: none;
-  max-height: 336px;
+  /* 14-line cap, shared with the composer takeovers (declared on
+     ConversationRoot .composerSeat). */
+  max-height: var(--dsh-composer-text-max-height);
   overflow: hidden;
 }
 

packages/client/ui-question/README.i18n.yaml

@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-question/README.md
-README.md: 0700375758774610fcd897b9a3e16484206a871d
-README.zh.md: d9e5eb22cef13e16ab1ce2cebba9e563bd9d08d9
+README.md: 5ebba2a1da6e6108b82e9deb235b84f987600345
+README.zh.md: 0aa6428a9b6472fc5b525c11b4716ebc50c378c3

packages/client/ui-question/README.md

@@ -6,6 +6,8 @@ Web `ask_user_question` feature plugin. Its host half mounts `dsh-tool-ask-user`
 
 The component renders one question at a time with progress navigation, single- and multi-select choices, recommendation badges derived from label suffixes, and custom answers. Question detail reuses the assistant-output `MarkdownText` primitive, including its GFM rendering and untrusted-content policy. The capped card keeps its title, navigation, and submission actions fixed while long detail and choices share an internal scroll region. Single-select choices advance immediately, and Enter submits once every question is answered or skipped; Enter during IME composition confirms the input candidate without advancing. It submits one structured answer batch for the whole request: “Skip this question” retains other drafts and emits the existing blank `{ selected: [] }` shape for that item, while close rejects the whole wait as `ASK_CANCELLED`.
 
+A request whose single question declares a presentation intent renders as that intent's own surface instead. `plan-review` — set by `dsh-plan-mode` on the `exit_plan_mode` review — takes the waiting-approval card shape: a `Plan review` strip, the plan as the scrolling markdown body, the question text as the card's accessible name, and one decision row of `Chat about it` / `Refuse` / `Approve`. Approve and Refuse answer with the asker's own option labels (the intent names which label approves, so the verdict never rides option order) and keep the asker's descriptions as tooltips; `Chat about it` rejects the wait as `ASK_CANCELLED`, returning the composer so the user can say what they want instead. The card claims a request only when it can send every answer that request allows: one question, the intent declared, the plan present as `detail`, the named approve label offered, and a binary single choice (at most one option besides approve, not multi-select). Anything else — no intent, a batch of several questions, a missing plan, an approve label naming no option, a third option, a multi-select decision — stays on the generic flow, which can express it. An intent changes the layout, never which answers are reachable.
+
 Selection state is local to a component keyed by the request rpcId. A replay with the same id preserves a still-mounted draft, while `question/resolved` from the host removes the composer. The host remains authoritative: successful HTTP delivery does not remove pending state locally.
 
 Composer chrome copy (pager, buttons, placeholders, validation feedback) is bilingual: the plugin registers zh/en dictionaries under the `question` namespace of `dsh-client-locale` and hands the entry its bound translator plus the locale snapshot source through the inject face, so a locale switch re-renders a mounted composer. Question and option text arrives from the model and renders verbatim; carrier failure messages also display untranslated.

packages/client/ui-question/README.zh.md

@@ -6,6 +6,8 @@ Web `ask_user_question` 功能插件。只有选择 Web 功能时，其主机侧
 
 组件每次渲染一个问题，提供进度导航、单选和多选选项、由标签后缀派生的推荐徽标，以及自定义答案。问题详情复用助手输出的 `MarkdownText` 原语，包括其 GFM 渲染与不受信内容策略。封顶卡片保持标题、导航与提交动作固定，超长的详情与选项共享内部滚动区。单选选项会立即前进；所有问题均已回答或跳过后，Enter 会提交；IME 输入法组合期间按 Enter 只会确认输入候选，不会前进。组件为整个请求提交一批结构化答案：「跳过此问题」会保留其他草稿，并为该项发出既有的空 `{ selected: [] }` 形状；关闭则以 `ASK_CANCELLED` 拒绝整个等待。
 
+若某个请求的唯一问题声明了呈现意图，则改为渲染该意图自己的界面。`plan-review` —— 由 `dsh-plan-mode` 在 `exit_plan_mode` 审阅上设置 —— 采用等待审批卡片的形状：一条 `Plan review` 条带、计划作为可滚动的 markdown 主体、问题文本作为卡片的无障碍名称，以及一行 `Chat about it` / `Refuse` / `Approve` 的决定操作。Approve 与 Refuse 用提问方自己的选项标签回答（意图指名哪个标签表示批准，因此裁决绝不依赖选项顺序），并把提问方的描述保留为 tooltip；`Chat about it` 以 `ASK_CANCELLED` 拒绝该等待，让编辑器归位，用户可以直接说出他想说的话。卡片只在能够发出该请求允许的每一个答案时才接管：只有一个问题、声明了意图、计划以 `detail` 存在、提供了被指名的批准标签，且是二元单选（除批准外最多一个选项，且非多选）。其他任何情形 —— 没有意图、一批含多个问题、缺少计划、批准标签未命中任何选项、出现第三个选项、多选决定 —— 都留在能够表达它的通用流程上。意图改变的只是布局，从不改变可达的答案。
+
 选择状态只存在于以请求 rpcId 为 key 的组件本地。使用相同 id 回放时，只要组件仍挂载，就会保留草稿；主机发出的 `question/resolved` 则会移除编辑器。主机仍具有最终决定权：HTTP 交付成功不会在本地移除待处理状态。
 
 编辑器外框文案（翻页器、按钮、占位符、校验提示）是双语的：插件在 `dsh-client-locale` 的 `question` 命名空间下注册 zh/en 词典，并通过 inject face 把绑定的翻译函数和 locale 快照源交给该配置项，因此切换语言会重新渲染已挂载的编辑器。问题与选项文本来自模型并原样渲染；载体失败消息也不经翻译直接显示。

packages/client/ui-question/src/client/PlanReviewPanel.module.css

@@ -0,0 +1,113 @@
+/* Plan-review takeover: the waiting-approval card language (amber strip on a
+   floating capsule, right-aligned actions) applied to a reviewed plan. Kept as
+   its own module rather than shared with ui-conversation's ApprovalPanel: the
+   two takeovers agree on tokens and geometry, not on content — this one's body
+   is scrollable markdown, that one's is a headline plus a command line. Warn
+   semantics ride the alias state tokens; no hardcoded colors. */
+
+/* Mirrors the question card's frame so the takeover is a content swap. */
+.frame {
+  display: flex;
+  justify-content: center;
+  padding: 6px 24px 10px;
+}
+
+.card {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  width: 100%;
+  max-width: 776px;
+  /* Composer seat sits in a fixed-height conversation column (overflow
+     hidden): cap the card against the viewport and scroll the plan, so the
+     strip and the decision row stay reachable on a long plan. */
+  max-height: min(60vh, 520px);
+  border: 1px solid var(--dsw-alias-state-warn-secondary);
+  border-radius: 20px;
+  background: var(--dsw-specific-input-major);
+  box-shadow: var(--dsw-shadow-lv2);
+  color: var(--dsw-alias-label-primary);
+  /* Elevated surface in dark: the plan body inside scrolls once the card hits
+     the cap above, so the thumb takes the l2 pair (see ui-theme
+     styles/scrollbar.css for the rebinding contract). */
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
+}
+
+.card,
+.card * {
+  box-sizing: border-box;
+}
+
+/* Tinted full-width header band, as on the approval takeover. */
+.strip {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+  padding: 10px 16px;
+  background: var(--dsw-alias-state-warn-tertiary);
+  color: var(--dsw-alias-state-warn-primary);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--dsw-alias-state-warn-primary);
+}
+
+/* The plan is the panel's message: it takes the whole body and the scroll. */
+.body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 12px 16px 4px;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: 12px;
+  padding: 8px 16px 12px;
+}
+
+.feedback {
+  min-height: 16px;
+  color: var(--dsw-alias-state-error-primary);
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+}
+
+@media (max-width: 720px) {
+  .frame {
+    padding: 6px 10px 10px;
+  }
+
+  .card {
+    border-radius: 16px;
+  }
+
+  .body {
+    padding: 10px 12px 4px;
+  }
+
+  .footer {
+    align-items: flex-end;
+    padding: 8px 12px 10px;
+  }
+}

packages/client/ui-question/src/client/PlanReviewPanel.tsx

@@ -0,0 +1,100 @@
+// PlanReviewPanel: the composer takeover for a question carrying the
+// `plan-review` presentation intent. A plan under review is one decision over
+// one body of markdown, so it takes the waiting-approval card shape — tinted
+// strip, content, right-aligned action row — instead of the generic question
+// flow's pager, numbered options, skip and custom-answer affordances, which
+// read as a quiz the user is being graded on.
+//
+// The three actions are the whole decision surface: approve and decline answer
+// the question with the option labels the asker offered (localised copy on the
+// buttons, the asker's descriptions as their tooltips), while "discuss"
+// dismisses the request so the composer returns and the user can simply say
+// what they want. Dismissal is the generic flow's own cancel verb, promoted to
+// a labelled button because in a two-outcome decision it is the third real
+// answer, not an escape hatch.
+
+import { useState } from 'react'
+import { Button, IconEditOutline16, MarkdownText } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PendingQuestion, PlanReview, QuestionComposerProps } from './contract/slots.ts'
+import css from './PlanReviewPanel.module.css'
+
+/** The panel's own props: the question domain face, the narrowed review, and the locale seat. */
+export type PlanReviewPanelProps =
+  { pending: PendingQuestion; review: PlanReview } & Pick<QuestionComposerProps, 't'>
+
+/**
+ * Optional-prop spread for a decision button's tooltip: `title` is optional on
+ * the DOM props, and exactOptionalPropertyTypes rejects an explicit undefined.
+ *
+ * @param description - the asker's option description, when it carries one.
+ * @returns The `title` prop to spread, or nothing.
+ */
+function tooltip(description: string | undefined): { title?: string } {
+  return description === undefined ? {} : { title: description }
+}
+
+/**
+ * Render a plan review as a decision card.
+ *
+ * @param props - the question domain face, the narrowed plan review, and `t`.
+ * @returns The plan-review takeover for this request.
+ */
+export function PlanReviewPanel({ pending, review, t }: PlanReviewPanelProps) {
+  // One-shot latch shaped like the approval takeover's: the panel leaves only
+  // when the host's resolved frame lands, so until then a second click must
+  // not re-fire. A failed send (rejected receipt / transport) re-arms it and
+  // shows why, since nothing else would tell the user the click was lost.
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const settle = (send: () => Promise<void>): void => {
+    setBusy(true)
+    setError(null)
+    void send().catch((cause: unknown) => {
+      setBusy(false)
+      setError(cause instanceof Error ? cause.message : String(cause))
+    })
+  }
+  const decide = (label: string): void => {
+    settle(() => pending.answer({ answers: [{ id: review.id, selected: [label] }] }))
+  }
+  const decline = review.decline
+
+  return (
+    <div className={css.frame} data-plan-review-key={pending.key}>
+      <section className={css.card} aria-label={review.question}>
+        <div className={css.strip}>
+          <span className={css.dot} />
+          {t('plan.header')}
+        </div>
+        <div className={css.body} data-plan-review-scroll>
+          <MarkdownText text={review.plan} />
+        </div>
+        <div className={css.footer}>
+          <div className={css.feedback} role="status">{error}</div>
+          <div className={css.actions}>
+            <Button
+              size="sm" variant="ghost" icon={<IconEditOutline16 />}
+              disabled={busy} onClick={() => { settle(() => pending.cancel()) }}
+            >
+              {t('plan.discuss')}
+            </Button>
+            {decline !== undefined && (
+              <Button
+                size="sm" variant="outline" {...tooltip(decline.description)}
+                disabled={busy} onClick={() => { decide(decline.label) }}
+              >
+                {t('plan.decline')}
+              </Button>
+            )}
+            <Button
+              size="sm" variant="primary" {...tooltip(review.approve.description)}
+              disabled={busy} onClick={() => { decide(review.approve.label) }}
+            >
+              {t('plan.approve')}
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

packages/client/ui-question/src/client/QuestionComposer.tsx

@@ -5,9 +5,10 @@ import {
   IconCloseOutline16, IconEditOutline16, MarkdownText,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import {
-  PendingQuestion,
+  PendingQuestion, planReviewOf,
   type QuestionAnswer, type QuestionComposerProps,
 } from './contract/slots.ts'
+import { PlanReviewPanel } from './PlanReviewPanel.tsx'
 import css from './QuestionComposer.module.css'
 
 interface DraftAnswer {
@@ -46,14 +47,24 @@ function isComposing(event: KeyboardEvent<HTMLTextAreaElement | HTMLInputElement
 /**
  * Composer takeover boundary; the carrier key keys local drafts, so a
  * same-request replay (same key, new carrier object) preserves them.
+ *
+ * One takeover, two shapes: a request that declares a presentation intent this
+ * package renders takes that shape (a plan review is one decision over one
+ * plan, not a question set), and every other request takes the generic flow.
+ * The routing lives here, at the one entry that owns the composer seat, so
+ * neither shape can claim a request the other is already rendering.
+ *
  * @param props - the selector-matched pending question carrier plus the framework standard kit.
- * @returns The question flow for this request.
+ * @returns The question flow, or the intent's own surface, for this request.
  */
 export function QuestionComposer(props: QuestionComposerProps) {
   // Domain-face mint rides the carrier's stable identity (never minted in a
   // select/render dispatch — per-dispatch minting would churn memo identity).
   const question = useMemo(() => new PendingQuestion(props.matched), [props.matched])
-  return <QuestionFlow key={question.key} pending={question} t={props.t} />
+  const review = useMemo(() => planReviewOf(question.questions), [question])
+  return review === undefined
+    ? <QuestionFlow key={question.key} pending={question} t={props.t} />
+    : <PlanReviewPanel key={question.key} pending={question} review={review} t={props.t} />
 }
 
 function QuestionFlow({ pending, t }: { pending: PendingQuestion } & Pick<QuestionComposerProps, 't'>) {

packages/client/ui-question/src/client/contract/slots.ts

@@ -19,6 +19,71 @@ export type QuestionWait = PendingWait<'question'>
 /** One structured answer batch covering every question of the request. */
 export type QuestionAnswer = QuestionResponsePayload['answer']
 
+/** One question of the request, as the carrier payload carries it. */
+type QuestionItem = QuestionWait['payload']['questions'][number]
+
+/** One option the asker offered on a question. */
+type QuestionOption = NonNullable<QuestionItem['options']>[number]
+
+/**
+ * A request narrowed to the `plan-review` presentation intent: everything the
+ * decision card renders and answers with, so the panel never re-reads the
+ * request shape. `approve` and `decline` are the asker's own options — an
+ * answer must carry one of those labels verbatim — and `plan` is the markdown
+ * body under review.
+ */
+export interface PlanReview {
+  /** The reviewed question's id, echoed in the answer. */
+  id: string
+  /** The question text, kept as the card's accessible name. */
+  question: string
+  /** The plan markdown under review. */
+  plan: string
+  /** The option that approves the plan. */
+  approve: QuestionOption
+  /** The option that declines it; absent when the asker offered no other option. */
+  decline?: QuestionOption
+}
+
+/**
+ * Narrow a request to a renderable plan review, or return undefined to leave it
+ * to the generic question flow.
+ *
+ * The card is one decision over one plan, and it claims a request only when it
+ * can send every answer that request allows — an intent changes the layout,
+ * never which answers are reachable. So the batch must be a single question
+ * that declares the intent, carries the plan as its detail, offers the approve
+ * label the intent names, and is a binary single choice: at most one option
+ * besides approve, and not multi-select. A third option or a multi-select batch
+ * has answers two buttons cannot express, so the generic flow keeps it — as it
+ * keeps any request whose intent the asker's own service would have rejected,
+ * because the client sits downstream of a wire boundary and every request must
+ * stay answerable.
+ *
+ * @param questions - the request's whole question batch.
+ * @returns The narrowed review, or undefined when the generic flow owns it.
+ */
+export function planReviewOf(questions: readonly QuestionItem[]): PlanReview | undefined {
+  if (questions.length !== 1) return undefined
+  // Length-checked above; the index read is the narrowing tax, not a guess.
+  const question = questions[0] as QuestionItem
+  const intent = question.intent
+  if (intent?.kind !== 'plan-review' || question.detail === undefined) return undefined
+  if (question.multiSelect === true) return undefined
+  const options = question.options ?? []
+  if (options.length > 2) return undefined
+  const approve = options.find(option => option.label === intent.approve)
+  if (approve === undefined) return undefined
+  const decline = options.find(option => option.label !== intent.approve)
+  return {
+    id: question.id,
+    question: question.question,
+    plan: question.detail,
+    approve,
+    ...(decline === undefined ? {} : { decline }),
+  }
+}
+
 /**
  * Question domain face over the carrier: render identity and questions
  * transparently forwarded; answer/cancel own the wire encoding (the ok value

packages/client/ui-question/src/client/index.ts

@@ -5,6 +5,12 @@
  * question carrier (matched prop), and the whole behavior surface rides the
  * carrier (domain encoding in contract/slots.ts PendingQuestion); copy rides
  * the standard locale seat. Export discipline: packages/client/AGENTS.md.
+ *
+ * One entry, two shapes: the composer renders a request that declares a
+ * presentation intent as that intent's own surface (`plan-review` → the plan
+ * decision card) and every other request as the generic question flow. A
+ * separate chain entry per shape would race the same carrier, so the shape
+ * choice lives inside this entry — see QuestionComposer.
  */
 import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ComposerChainProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
@@ -15,7 +21,9 @@ import { QuestionComposer } from './QuestionComposer.tsx'
 import { en, zh, type QuestionKey } from './locales.ts'
 
 export { PendingQuestion } from './contract/slots.ts'
-export type { QuestionAnswer, QuestionComposerProps, QuestionWait } from './contract/slots.ts'
+export type {
+  PlanReview, QuestionAnswer, QuestionComposerProps, QuestionWait,
+} from './contract/slots.ts'
 export type { QuestionKey } from './locales.ts'
 
 declare module '@deepseek-ai/dsh-client-ui-slots' {

packages/client/ui-question/src/client/locales.ts

@@ -11,6 +11,10 @@ export const zh = {
   'custom.placeholder': '输入你的答案',
   'action.skip': '跳过本题',
   'action.next': '下一题',
+  'plan.header': '计划待审',
+  'plan.approve': '确认执行',
+  'plan.decline': '拒绝',
+  'plan.discuss': '去聊天里说',
 } satisfies Record<string, string>
 
 /** The question namespace key union. */
@@ -27,4 +31,8 @@ export const en = {
   'custom.placeholder': 'Type your answer',
   'action.skip': 'Skip this question',
   'action.next': 'Next',
+  'plan.header': 'Plan review',
+  'plan.approve': 'Approve',
+  'plan.decline': 'Refuse',
+  'plan.discuss': 'Chat about it',
 } satisfies Record<QuestionKey, string>

packages/client/ui-question/tests/plan-review-panel.spec.tsx

@@ -0,0 +1,228 @@
+// @vitest-environment jsdom
+// The plan-review takeover, driven through the composer entry that routes to
+// it: a request carrying the intent must reach the decision card and answer
+// with the asker's own option labels, and a request that does not (or cannot)
+// must keep the generic question flow.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import type {
+  ConversationSnapshot, SessionId, SessionListState, WorkspaceListState,
+} from '@deepseek-ai/dsh-client-runtime/client'
+import { PendingWait } from '@deepseek-ai/dsh-client-runtime/client'
+import type { RpcReceipt } from '@deepseek-ai/dsh-client-connection/client'
+import { RpcId } from '@deepseek-ai/dsh-client-connection/client'
+import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots'
+import { planReviewOf, type QuestionComposerProps, type QuestionWait } from '../src/client/contract/slots.ts'
+import { QuestionComposer } from '../src/client/QuestionComposer.tsx'
+import { en, zh } from '../src/client/locales.ts'
+import { en as commonEn } from '@deepseek-ai/dsh-client-locale/src/locales/en.ts'
+import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts'
+
+afterEach(cleanup)
+
+const SID = 's1' as SessionId
+
+/** Seat stub over a dictionary pair mirroring the real lookup chain: package dictionary, then common vocabulary, then the key. */
+const seatOver = (dict: Record<string, string>, common: Record<string, string>): QuestionComposerProps['t'] =>
+  (key => dict[key] ?? common[key] ?? key)
+
+/** Framework standard-kit stubs: the panel consumes only the locale seat. */
+const kit = {
+  sessionId: SID,
+  useSession: (() => { throw new Error('unused') }) as unknown as SnapshotSelectorHook<ConversationSnapshot>,
+  useSessions: (() => { throw new Error('unused') }) as unknown as SnapshotSelectorHook<SessionListState>,
+  useWorkspaces: (() => { throw new Error('unused') }) as unknown as SnapshotSelectorHook<WorkspaceListState>,
+  useProjection: (() => undefined) as never,
+  useInput: (() => { throw new Error('unused') }) as never,
+  inputActions: { setDraft: () => { throw new Error('unused') }, submit: () => { throw new Error('unused') } } as never,
+  t: seatOver(zh, commonZh),
+}
+
+const PLAN = '# Ship the picker\n\n- read the store\n- render the rows\n'
+
+/** The plan-mode request shape: one question, the plan as detail, approve named. */
+const questions = (): QuestionWait['payload']['questions'] => [{
+  id: 'plan-review',
+  header: 'Plan review',
+  question: 'Approve this plan and leave plan mode?',
+  detail: PLAN,
+  options: [
+    { label: 'Approve', description: 'Leave plan mode; the plan is carried out from the next step.' },
+    { label: 'Keep planning', description: 'Stay in plan mode; feedback goes back to the model.' },
+  ],
+  intent: { kind: 'plan-review', approve: 'Approve' },
+}]
+
+/** Carrier fixture over a scripted respond carrier. */
+function wait(
+  payload: QuestionWait['payload'] = { questions: questions() },
+  respond = vi.fn(() => Promise.resolve<RpcReceipt>({ accepted: true })),
+) {
+  return { carrier: new PendingWait('question', RpcId('q-1'), SID, payload, respond), respond }
+}
+
+/** The client-response envelope respond must have received for a decision. */
+function decidedEnvelope(label: string) {
+  return {
+    type: 'client-response', rpcId: RpcId('q-1'),
+    result: { ok: true, value: { sessionId: SID, answer: { answers: [{ id: 'plan-review', selected: [label] }] } } },
+  }
+}
+
+describe('planReviewOf', () => {
+  it('narrows a plan-review request to its decision, options included', () => {
+    expect(planReviewOf(questions())).toEqual({
+      id: 'plan-review',
+      question: 'Approve this plan and leave plan mode?',
+      plan: PLAN,
+      approve: { label: 'Approve', description: 'Leave plan mode; the plan is carried out from the next step.' },
+      decline: { label: 'Keep planning', description: 'Stay in plan mode; feedback goes back to the model.' },
+    })
+  })
+
+  it('leaves the decline absent when the asker offered approve alone', () => {
+    const [question] = questions()
+    const review = planReviewOf([{ ...question as object, options: [{ label: 'Approve' }] } as never])
+    expect(review?.approve).toEqual({ label: 'Approve' })
+    expect(review === undefined ? true : 'decline' in review).toBe(false)
+  })
+
+  it.each([
+    ['a batch of more than one question', () => [...questions(), ...questions()]],
+    ['no intent at all', () => [{ ...questions()[0] as object, intent: undefined }]],
+    ['an intent without the plan as detail', () => [{ ...questions()[0] as object, detail: undefined }]],
+    ['an intent whose approve names no option', () => [{
+      ...questions()[0] as object, intent: { kind: 'plan-review', approve: 'Ship it' },
+    }]],
+    ['an intent with no options at all', () => [{ ...questions()[0] as object, options: undefined }]],
+    // Two buttons cannot send a third label or a combination, and the generic
+    // flow can: an intent never costs the user a reachable answer.
+    ['a third option the card could not offer', () => [{
+      ...questions()[0] as object,
+      options: [{ label: 'Approve' }, { label: 'Keep planning' }, { label: 'Start over' }],
+    }]],
+    ['a multi-select decision', () => [{ ...questions()[0] as object, multiSelect: true }]],
+  ])('declines %s, leaving the request to the generic flow', (_case, build) => {
+    expect(planReviewOf(build() as never)).toBeUndefined()
+  })
+
+  it('declines an empty batch, which the generic flow reports as such', () => {
+    expect(planReviewOf([])).toBeUndefined()
+  })
+})
+
+describe('PlanReviewPanel', () => {
+  it('renders the plan under a review strip, with none of the quiz affordances', () => {
+    const { carrier } = wait()
+    render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
+
+    expect(document.querySelector('[data-plan-review-key="q:q-1"]')).toBeTruthy()
+    expect(screen.getByText(zh['plan.header'])).toBeTruthy()
+    // The plan renders as markdown, so its heading is a heading.
+    expect(screen.getByRole('heading', { name: 'Ship the picker' })).toBeTruthy()
+    expect(screen.getByText('render the rows')).toBeTruthy()
+    // The question text stays as the card's accessible name rather than a title
+    // that reads like a test item.
+    expect(screen.getByLabelText('Approve this plan and leave plan mode?')).toBeTruthy()
+    // No pager, no numbered options, no skip, no custom answer.
+    expect(screen.queryByText('1 / 1')).toBeNull()
+    expect(screen.queryByRole('radio')).toBeNull()
+    expect(screen.queryByText(zh['action.skip'])).toBeNull()
+    expect(screen.queryByRole('textbox')).toBeNull()
+  })
+
+  it('answers with the asker\'s approve label and keeps its description as the tooltip', () => {
+    const { carrier, respond } = wait()
+    render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
+
+    const approve = screen.getByRole('button', { name: zh['plan.approve'] })
+    expect(approve.getAttribute('title')).toBe('Leave plan mode; the plan is carried out from the next step.')
+    fireEvent.click(approve)
+    expect(respond).toHaveBeenCalledWith(decidedEnvelope('Approve'))
+    // One-shot: every action locks until the host's resolved frame lands.
+    expect(approve.hasAttribute('disabled')).toBe(true)
+    expect(screen.getByRole('button', { name: zh['plan.decline'] }).hasAttribute('disabled')).toBe(true)
+    fireEvent.click(approve)
+    expect(respond).toHaveBeenCalledTimes(1)
+  })
+
+  it('answers with the asker\'s decline label', () => {
+    const { carrier, respond } = wait()
+    render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
+
+    fireEvent.click(screen.getByRole('button', { name: zh['plan.decline'] }))
+    expect(respond).toHaveBeenCalledWith(decidedEnvelope('Keep planning'))
+  })
+
+  it('dismisses the request so the composer returns for a plain message', () => {
+    const { carrier, respond } = wait()
+    render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
+
+    fireEvent.click(screen.getByRole('button', { name: zh['plan.discuss'] }))
+    expect(respond).toHaveBeenCalledWith({
+      type: 'client-response', rpcId: RpcId('q-1'),
+      result: {
+        ok: false,
+        error: { code: 'cancelled', message: 'the user closed this question request', details: {} },
+      },
+    })
+  })
+
+  it('omits the tooltip for an option carrying no description', () => {
+    const { carrier } = wait({ questions: [{
+      ...questions()[0] as object,
+      options: [{ label: 'Approve' }, { label: 'Keep planning' }],
+    }] as never })
+    render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
+
+    expect(screen.getByRole('button', { name: zh['plan.approve'] }).hasAttribute('title')).toBe(false)
+    expect(screen.getByRole('button', { name: zh['plan.decline'] }).hasAttribute('title')).toBe(false)
+  })
+
+  it('hides the decline action when the asker offered approve alone', () => {
+    const { carrier } = wait({ questions: [{
+      ...questions()[0] as object, options: [{ label: 'Approve' }],
+    }] as never })
+    render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
+
+    expect(screen.queryByRole('button', { name: zh['plan.decline'] })).toBeNull()
+    expect(screen.getByRole('button', { name: zh['plan.approve'] })).toBeTruthy()
+  })
+
+  it('re-arms the actions and says why when the decision does not land', async () => {
+    const { carrier, respond } = wait(
+      { questions: questions() },
+      vi.fn(() => Promise.resolve<RpcReceipt>({ accepted: false, reason: 'not-pending' })),
+    )
+    render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
+
+    fireEvent.click(screen.getByRole('button', { name: zh['plan.approve'] }))
+    const failure = await screen.findByText('question response rejected: not-pending')
+    expect(failure.getAttribute('role')).toBe('status')
+    // Re-armed for the retry: a lost click must not leave a dead card.
+    expect(screen.getByRole('button', { name: zh['plan.approve'] }).hasAttribute('disabled')).toBe(false)
+    fireEvent.click(screen.getByRole('button', { name: zh['plan.approve'] }))
+    expect(respond).toHaveBeenCalledTimes(2)
+  })
+
+  it('reports a non-Error transport failure as its stringified value', async () => {
+    // A non-Error rejection is the case under test: a carrier can reject with
+    // anything, and the panel must still show the user something.
+    // oxlint-disable-next-line typescript/prefer-promise-reject-errors
+    const { carrier } = wait({ questions: questions() }, vi.fn(() => Promise.reject('socket gone')))
+    render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
+
+    fireEvent.click(screen.getByRole('button', { name: zh['plan.discuss'] }))
+    expect(await screen.findByText('socket gone')).toBeTruthy()
+  })
+
+  it('carries the same decision surface in English', () => {
+    const { carrier } = wait()
+    render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} t={seatOver(en, commonEn)} />)
+
+    expect(screen.getByText('Plan review')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Approve' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Refuse' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Chat about it' })).toBeTruthy()
+  })
+})