Merge remote-tracking branch 'origin/master' into worktree/fix-multi-select-custom-answer

# Conflicts:
#	apps/web/tests/snapshots/question-composer/answered.expected.md
#	apps/web/tests/snapshots/question-composer/session.jsonl
#	docs/core-data-structures/user-interaction.i18n.yaml
#	packages/client/ui-question/README.i18n.yaml
#	packages/host/apiproxy/README.i18n.yaml
#	packages/host/apiproxy/README.md
#	packages/host/apiproxy/README.zh.md
#	packages/ui/tui/README.i18n.yaml
#	packages/ui/user-interaction/README.i18n.yaml

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.module.css

@@ -139,7 +139,11 @@
 
 .option {
   display: flex;
-  align-items: center;
+  /* flex-start, not center: with a wrapped description the indicator must
+     stay on the FIRST line (centering drifts it down the taller copy block).
+     The 8px padding makes a single-line row 40px exactly, so nothing reads
+     as top-heavy; .number/.checkbox re-center against the first line box. */
+  align-items: flex-start;
   gap: 8px;
   width: 100%;
   min-height: 40px;
@@ -148,7 +152,7 @@
      intrinsic height, and centered content then paints outside the row box —
      over the title and the next row. Overflow belongs to .options. */
   flex-shrink: 0;
-  padding: 6px 12px 6px 8px;
+  padding: 8px 12px 8px 8px;
   border: 1px solid transparent;
   border-radius: 12px;
   background: transparent;
@@ -180,6 +184,9 @@
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
+  /* (24px first-line box − 20px indicator) / 2: centers the indicator against
+     the first text line under the row's flex-start alignment. */
+  margin-top: 2px;
   border-radius: 6px;
   background: var(--dsw-alias-bg-overlay);
   color: var(--dsw-alias-label-secondary);
@@ -197,6 +204,8 @@
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
+  /* Same first-line centering as .number under flex-start alignment. */
+  margin-top: 2px;
 }
 
 .checkbox::before {
@@ -263,14 +272,16 @@
    inline text input; focus or a typed draft lifts it to the selected look. */
 .customRow {
   display: flex;
-  align-items: center;
+  /* Same first-line alignment as .option — the indicator seat carries the
+     2px re-centering margin. */
+  align-items: flex-start;
   gap: 8px;
   width: 100%;
   min-height: 40px;
   /* Same reason as .option: the custom row is scroll content, and shrinking
      it pushes the inline input past the footer. */
   flex-shrink: 0;
-  padding: 6px 12px 6px 8px;
+  padding: 8px 12px 8px 8px;
   border: 1px solid transparent;
   border-radius: 12px;
   transition: background-color 120ms ease, border-color 120ms ease;
@@ -378,9 +389,7 @@
 
   .option,
   .customRow {
-    align-items: flex-start;
-    gap: 8px;
-    padding: 6px;
+    padding: 8px 6px;
   }
 
   .footer {

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>