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

# Conflicts: # packages/client/ui-question/README.i18n.yaml # packages/client/ui-question/src/client/QuestionComposer.tsx # packages/host/apiproxy/README.i18n.yaml # packages/ui/tui/README.i18n.yaml
2026-07-30 17:34:48 +08:00
parent 9d106d1fa0 aaf8fd07e0
commit c86b7c2c3a
475 changed files with 10747 additions and 2556 deletions
--- a/packages/client/ui-question/README.i18n.yaml
+++ b/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: c36f1474e175b52c7d35af6b479ab5bfeabcd9ff
-README.zh.md: 8986dee718a98920a20757aafb1bd4b54ac8f782
+README.md: 2f9abf836ce72f4f47548311535a720159616879
+README.zh.md: b627bcb8c22c182868b184af5424f527c8237bb1
--- a/packages/client/ui-question/README.md
+++ b/packages/client/ui-question/README.md
@@ -8,6 +8,8 @@ The component renders one question at a time with progress navigation, single- a

 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.
+
 ## Model Experience

 Indirectly, through `dsh-tool-ask-user`; that package owns the model-visible tool schema and structured result.
--- a/packages/client/ui-question/README.zh.md
+++ b/packages/client/ui-question/README.zh.md
@@ -8,6 +8,8 @@ Web `ask_user_question` 功能插件。只有选择 Web 功能时，其主机侧

 选择状态只存在于以请求 rpcId 为 key 的组件本地。使用相同 id 回放时，只要组件仍挂载，就会保留草稿；主机发出的 `question/resolved` 则会移除编辑器。主机仍具有最终决定权：HTTP 交付成功不会在本地移除待处理状态。

+编辑器外框文案（翻页器、按钮、占位符、校验提示）是双语的：插件在 `dsh-client-locale` 的 `question` 命名空间下注册 zh/en 词典，并通过 inject face 把绑定的翻译函数和 locale 快照源交给该配置项，因此切换语言会重新渲染已挂载的编辑器。问题与选项文本来自模型并原样渲染；载体失败消息也不经翻译直接显示。
+
 ## 模型体验

 通过 `dsh-tool-ask-user` 间接影响；该包拥有模型可见的工具 schema 和结构化结果。
--- a/packages/client/ui-question/package.json
+++ b/packages/client/ui-question/package.json
@@ -24,6 +24,7 @@
  },
  "dshClient": {
    "inject": [
+      "@deepseek-ai/dsh-client-locale",
      "@deepseek-ai/dsh-client-ui-conversation"
    ],
    "platform": "web"
@@ -44,11 +45,13 @@
    "react": "^18.2.0"
  },
  "peerDependencies": {
+    "@deepseek-ai/dsh-client-locale": "^0.0.1",
    "@deepseek-ai/dsh-invariants": "^0.0.1",
    "cordis": "^4.0.0-rc.7"
  },
  "devDependencies": {
    "@deepseek-ai/dsh-agent": "workspace:^",
+    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
    "@deepseek-ai/dsh-system-prompt": "workspace:^",
    "@deepseek-ai/dsh-tools": "workspace:^",
--- a/packages/client/ui-question/src/client/QuestionComposer.module.css
+++ b/packages/client/ui-question/src/client/QuestionComposer.module.css
@@ -1,28 +1,33 @@
+/* The takeover seats where the input card sits, so the frame mirrors the
+   InputBar geometry (side pad 32, card cap 800) to keep both edges flush. */
 .frame {
  display: flex;
  justify-content: center;
-  padding: 6px 24px 10px;
+  padding: 6px 32px 10px;
 }

+/* Figma Input 973:36348 body over the 1019:36938 header: no banner strip —
+   the card keeps zero padding and sections carry their own insets. */
 .card {
  display: flex;
  flex-direction: column;
  width: 100%;
-  max-width: 720px;
+  max-width: 800px;
  /* Composer seat sits in a fixed-height conversation column (overflow
     hidden): cap the card against the viewport and scroll the option list
     so header and footer actions stay reachable on long batches. */
  max-height: min(60vh, 520px);
-  padding: 14px 16px 12px;
+  padding: 0 0 10px;
  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
-  border-radius: 18px;
+  border-radius: 20px;
  background: var(--dsw-specific-input-major);
-  box-shadow: var(--dsw-shadow-lv1-blur);
+  box-shadow: var(--dsw-shadow-lv2);
  color: var(--dsw-alias-label-primary);
-  /* Elevated surface in dark, same as the menus: the option list inside scrolls
+  overflow: hidden;
+  /* Elevated surface in dark, same as the menus: the body inside scrolls
     once the card hits the cap above, 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 `.options` (see ui-theme styles/scrollbar.css
+     properties inherit down to `.body` (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);
@@ -33,64 +38,63 @@
  box-sizing: border-box;
 }

+/* Figma 1019:36938 header, user-tuned: heading block left, close right; the
+   pager sits in the footer to balance the card. */
 .header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
-  margin-bottom: 8px;
+  padding: 20px 16px 0 24px;
 }

 .headingBlock {
  min-width: 0;
-  padding: 1px 2px;
 }

 .eyebrow {
-  margin-bottom: 2px;
+  /* Eyebrow-to-title gap widened from the figma 2px (user-tuned). */
+  margin-bottom: 5px;
  color: var(--dsw-alias-label-tertiary);
  font-size: 11px;
  line-height: 16px;
 }

 .title {
-  display: flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-  gap: 6px;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
-  font-weight: 600;
-}
-
-.multiSelectHint {
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 400;
-  white-space: nowrap;
+  font-weight: 500;
 }

 .detail {
  margin: 0 2px 8px;
 }

-.headerActions,
 .footerActions {
  display: flex;
  align-items: center;
-  gap: 4px;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.pager {
+  display: flex;
+  align-items: center;
+  gap: 6px;
  flex-shrink: 0;
 }

 .progress {
-  padding: 0 6px;
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 12px;
+  padding: 0 4px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 14px;
  line-height: 24px;
+  font-weight: 500;
  white-space: nowrap;
+  /* Narrow the plain spaces around the slash without touching glyph tracking. */
+  word-spacing: -2px;
 }

 .iconButton {
@@ -128,21 +132,23 @@
 .options {
  display: flex;
  flex-direction: column;
-  gap: 4px;
+  gap: 1px;
+  margin: 8px 0 0;
+  padding: 4px 12px;
 }

 .option {
  display: flex;
  align-items: center;
-  gap: 10px;
+  gap: 8px;
  width: 100%;
-  min-height: 42px;
+  min-height: 40px;
  /* Rows are the scroll content, never the slack absorber: a shrinkable row
     collapses to min-height while its wrapped copy keeps the taller
     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: 5px 8px;
+  padding: 6px 12px 6px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
@@ -161,25 +167,63 @@
  border-color: var(--dsw-alias-border-l2);
 }

-.option:disabled,
-.customTrigger:disabled {
+.option:disabled {
  cursor: default;
 }

+/* Leading indicator (figma 20×20, radius 6): single-select shows the option
+   number, multi-select swaps in a checkbox; the custom-answer row follows —
+   its checkbox mirrors the typed draft (styling only, exclusivity holds). */
 .number {
  display: grid;
  place-items: center;
-  flex: 0 0 28px;
-  width: 28px;
-  height: 28px;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 999px;
-  background: var(--dsw-alias-bg-module-platform);
-  color: var(--dsw-alias-label-tertiary);
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-overlay);
+  color: var(--dsw-alias-label-secondary);
  font-size: 12px;
+  font-weight: 500;
  line-height: 18px;
 }

+/* Multi-select box (figma 1055:41594, user-tuned down to 14×14): a radius-4
+   box centered in the 20px indicator seat; the box itself is the ::before
+   layer so the check icon stacks over it in the same grid cell. */
+.checkbox {
+  display: grid;
+  place-items: center;
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.checkbox::before {
+  content: '';
+  grid-area: 1 / 1;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--dsw-alias-border-l4);
+  border-radius: 4px;
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+
+.checkbox > svg {
+  grid-area: 1 / 1;
+}
+
+/* Checked: label-primary fill with a primary-foreground check — the pair
+   inverts with the theme (dark fill in light mode, light fill in dark mode). */
+.checkboxChecked {
+  color: var(--dsw-alias-label-primary-foreground);
+}
+
+.checkboxChecked::before {
+  border-color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-label-primary);
+}
+
 .optionCopy {
  min-width: 0;
  flex: 1;
@@ -194,103 +238,101 @@

 .optionLabel {
  font-size: 14px;
-  line-height: 20px;
-  font-weight: 600;
+  line-height: 24px;
+  font-weight: 500;
 }

 .badge {
-  padding: 0 6px;
-  border-radius: 999px;
-  background: var(--dsw-alias-bg-module-platform);
-  color: var(--dsw-alias-label-secondary);
+  padding: 0 4px;
+  border-radius: 6px;
+  background: var(--dsw-specific-sidebar-nav-item-active-accent);
+  color: var(--dsw-alias-button-info-fill);
  font-size: 11px;
  line-height: 18px;
+  font-weight: 600;
 }

 .description {
  color: var(--dsw-alias-label-tertiary);
-  font-size: 13px;
-  line-height: 20px;
+  font-size: 14px;
+  line-height: 24px;
  font-weight: 400;
 }

-.choiceIcon {
-  display: grid;
-  place-items: center;
-  width: 20px;
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.custom {
-  /* Same reason as .option: the custom block is scroll content, and shrinking
-     it pushes its trigger row (and the open textarea) past the footer. */
-  flex-shrink: 0;
-  border: 1px solid transparent;
-  border-radius: 12px;
-}
-
-.customOpen {
-  border-color: var(--dsw-alias-border-l2);
-  background: var(--dsw-alias-bg-module-platform);
-}
-
-.customOptionless {
-  border: none;
-  background: transparent;
-}
-
-.customTrigger {
+/* Custom answer row (figma 973:36427): an option-shaped row whose copy is an
+   inline text input; focus or a typed draft lifts it to the selected look. */
+.customRow {
  display: flex;
  align-items: center;
-  gap: 10px;
+  gap: 8px;
  width: 100%;
-  min-height: 42px;
-  padding: 5px 8px;
-  border: none;
-  background: transparent;
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 14px;
-  line-height: 20px;
-  text-align: left;
-  cursor: pointer;
+  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;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  transition: background-color 120ms ease, border-color 120ms ease;
 }

-.customTrigger:hover:not(:disabled) {
-  color: var(--dsw-alias-label-primary);
+.customRow:hover,
+.customRow:focus-within,
+.customRowActive {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.customRow:focus-within,
+.customRowActive {
+  border-color: var(--dsw-alias-border-l2);
 }

 .customInput {
-  display: block;
-  width: calc(100% - 20px);
-  min-height: 54px;
-  max-height: 140px;
-  margin: 0 10px 10px;
-  padding: 7px 10px;
-  resize: vertical;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 10px;
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
  outline: none;
-  background: var(--dsw-specific-input-major);
+  background: transparent;
  color: var(--dsw-alias-label-primary);
  caret-color: var(--dsw-alias-state-business-primary);
  font: inherit;
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.customInput:focus {
-  border-color: var(--dsw-alias-state-business-primary);
+  font-size: 14px;
+  line-height: 24px;
 }

 .customInput::placeholder {
  color: var(--dsw-alias-label-caption);
 }

-.customOptionless .customInput {
-  width: 100%;
-  min-height: 58px;
-  margin: 0;
+/* Optionless question: the free-form answer is the whole body. The 12px side
+   margins add to the .options 12px padding so both edges align with the
+   title's 24px inset; type matches the option rows, no resize handle. */
+.customTextarea {
+  display: block;
+  min-height: 64px;
+  max-height: 140px;
+  flex-shrink: 0;
+  margin: 0 12px;
+  padding: 8px 12px;
+  resize: none;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  outline: none;
  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-primary);
+  caret-color: var(--dsw-alias-state-business-primary);
+  font: inherit;
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.customTextarea:focus {
+  border-color: var(--dsw-alias-state-business-primary);
+}
+
+.customTextarea::placeholder {
+  color: var(--dsw-alias-label-caption);
 }

 .footer {
@@ -299,15 +341,17 @@
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
-  margin-top: 8px;
-  padding: 0 2px;
+  margin-top: 12px;
+  padding: 0 10px 0 18px;
 }

 .feedback {
+  flex: 1;
  min-height: 16px;
  color: var(--dsw-alias-state-error-primary);
  font-size: 11px;
  line-height: 16px;
+  text-align: right;
 }

@media (max-width: 720px) {
@@ -316,21 +360,15 @@
  }

  .card {
-    padding: 12px 10px 10px;
    border-radius: 16px;
  }

  .header {
-    display: block;
+    padding: 10px 12px 0 18px;
  }

-  .headerActions {
-    justify-content: flex-end;
-    margin-top: 8px;
-  }
-
-  .headingBlock {
-    padding: 0 2px;
+  .options {
+    padding: 4px 8px;
  }

  .title {
@@ -339,18 +377,15 @@
  }

  .option,
-  .customTrigger {
+  .customRow {
    align-items: flex-start;
    gap: 8px;
    padding: 6px;
  }

-  .choiceIcon {
-    margin-top: 3px;
-  }
-
  .footer {
    align-items: flex-end;
+    padding: 0 10px;
  }

  .footerActions {
@@ -359,7 +394,8 @@
 }

@media (prefers-reduced-motion: reduce) {
-  .option {
+  .option,
+  .customRow {
    transition: none;
  }
 }
--- a/packages/client/ui-question/src/client/QuestionComposer.tsx
+++ b/packages/client/ui-question/src/client/QuestionComposer.tsx
@@ -1,19 +1,29 @@
-import { useMemo, useState, type KeyboardEvent } from 'react'
+import { useMemo, useState, type ChangeEvent, type KeyboardEvent } from 'react'
 import clsx from 'clsx'
 import {
-  Button, IconCheckOutline16, IconChevronLeftOutline14, IconChevronRightOutline14,
+  Button, IconCheckOutline14, IconChevronLeftOutline14, IconChevronRightOutline14,
  IconCloseOutline16, IconEditOutline16, MarkdownText,
 } from '@deepseek-ai/dsh-client-ui-primitives'
-import { PendingQuestion, type QuestionAnswer, type QuestionComposerProps } from './contract/slots.ts'
+import {
+  PendingQuestion,
+  type QuestionAnswer, type QuestionComposerProps,
+} from './contract/slots.ts'
 import css from './QuestionComposer.module.css'

 interface DraftAnswer {
  selected: string[]
  custom: string
-  customOpen: boolean
  skipped: boolean
 }

+/**
+ * Displayed feedback: validation feedback is stored as a dictionary KEY and
+ * translated at render, so already-shown feedback follows a locale switch;
+ * runtime failure messages (finished strings from the wire) pass through
+ * verbatim.
+ */
+type Feedback = { key: 'error.incomplete' | 'error.unanswered' } | { text: string }
+
 /**
 * Split the conventional recommendation suffix without changing the answer value.
 * @param label - Original option label returned if selected.
@@ -26,17 +36,8 @@ export function parseRecommendedLabel(label: string): { label: string; recommend
    : { label, recommended: false }
 }

-/**
- * Remove a conventional multi-select suffix so the hint can be styled separately.
- * @param title - Question title supplied by the interaction request.
- * @returns Question title without a trailing multi-select marker.
- */
-export function parseQuestionTitle(title: string): string {
-  return title.replace(/\s*[（(]可多选[）)]\s*$/, '')
-}
-
-/** Return whether a textarea key event belongs to an active IME composition. */
-function isComposing(event: KeyboardEvent<HTMLTextAreaElement>): boolean {
+/** Return whether a text-field key event belongs to an active IME composition. */
+function isComposing(event: KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>): boolean {
  // keyCode 229 is the legacy IME-composition signal engines emit without isComposing.
  // oxlint-disable-next-line typescript/no-deprecated
  return event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229
@@ -52,17 +53,17 @@ 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} />
+  return <QuestionFlow key={question.key} pending={question} t={props.t} />
 }

-function QuestionFlow({ pending }: { pending: PendingQuestion }) {
+function QuestionFlow({ pending, t }: { pending: PendingQuestion } & Pick<QuestionComposerProps, 't'>) {
  const questions = pending.questions
  const [index, setIndex] = useState(0)
-  const [drafts, setDrafts] = useState<DraftAnswer[]>(() => questions.map(question => ({
-    selected: [], custom: '', customOpen: (question.options?.length ?? 0) === 0, skipped: false,
+  const [drafts, setDrafts] = useState<DraftAnswer[]>(() => questions.map(() => ({
+    selected: [], custom: '', skipped: false,
  })))
  const [busy, setBusy] = useState<'answer' | 'cancel' | null>(null)
-  const [error, setError] = useState<string | null>(null)
+  const [error, setError] = useState<Feedback | null>(null)
  // index stays in bounds (every setIndex site clamps) and drafts mirrors questions 1:1.
  // oxlint-disable-next-line typescript/no-non-null-assertion
  const question = questions[index]!
@@ -75,7 +76,7 @@ function QuestionFlow({ pending }: { pending: PendingQuestion }) {
    setError(null)
    void pending.cancel().catch((cause: unknown) => {
      setBusy(null)
-      setError(cause instanceof Error ? cause.message : String(cause))
+      setError({ text: cause instanceof Error ? cause.message : String(cause) })
    })
  }

@@ -92,22 +93,13 @@ function QuestionFlow({ pending }: { pending: PendingQuestion }) {
          : [...current.selected, label]
        return { ...current, selected, skipped: false }
      }
-      return { selected: [label], custom: '', customOpen: false, skipped: false }
+      return { selected: [label], custom: '', skipped: false }
    })
    if (question.multiSelect !== true && index < questions.length - 1) {
      setIndex(current => current + 1)
    }
  }

-  const openCustom = (): void => {
-    updateDraft(current => ({
-      ...current,
-      selected: question.multiSelect === true ? current.selected : [],
-      customOpen: true,
-      skipped: false,
-    }))
-  }
-
  const answered = (item: DraftAnswer): boolean =>
    item.selected.length > 0 || item.custom.trim() !== ''

@@ -117,7 +109,7 @@ function QuestionFlow({ pending }: { pending: PendingQuestion }) {
    const missing = values.findIndex(item => !completed(item))
    if (missing >= 0) {
      setIndex(missing)
-      setError('请先完成这道问题。')
+      setError({ key: 'error.incomplete' })
      return
    }
    const answer: QuestionAnswer = {
@@ -136,13 +128,13 @@ function QuestionFlow({ pending }: { pending: PendingQuestion }) {
    setError(null)
    void pending.answer(answer).catch((cause: unknown) => {
      setBusy(null)
-      setError(cause instanceof Error ? cause.message : String(cause))
+      setError({ text: cause instanceof Error ? cause.message : String(cause) })
    })
  }

  const continueFlow = (): void => {
    if (!answered(draft)) {
-      setError('请选择一个选项或填写自定义答案。')
+      setError({ key: 'error.unanswered' })
      return
    }
    if (index < questions.length - 1) {
@@ -153,13 +145,29 @@ function QuestionFlow({ pending }: { pending: PendingQuestion }) {
    submitDrafts(drafts)
  }

+  // Shared by the inline custom input and the optionless textarea: a
+  // multi-select draft retains checked labels, while a single-select custom
+  // answer replaces its selection. Enter continues the flow (Shift+Enter
+  // stays a newline in the textarea; on the single-line input it is inert).
+  const draftCustom = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
+    const value = event.target.value
+    updateDraft(current => ({
+      ...current,
+      selected: question.multiSelect === true ? current.selected : [],
+      custom: value,
+      skipped: false,
+    }))
+  }
+
+  const continueFromCustom = (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
+    if (event.key !== 'Enter' || event.shiftKey || isComposing(event)) return
+    event.preventDefault()
+    continueFlow()
+  }
+
  const skipQuestion = (): void => {
    const nextDrafts = drafts.map((item, itemIndex) => itemIndex === index
-      ? {
-        selected: [], custom: '',
-        customOpen: (question.options?.length ?? 0) === 0,
-        skipped: true,
-      }
+      ? { selected: [], custom: '', skipped: true }
      : item)
    setDrafts(nextDrafts)
    setError(null)
@@ -177,36 +185,16 @@ function QuestionFlow({ pending }: { pending: PendingQuestion }) {
          <div className={css.headingBlock}>
            {question.header !== undefined && <div className={css.eyebrow}>{question.header}</div>}
            <h2 className={css.title} id={`question-${pending.key}-${String(index)}`}>
-              <span>{question.multiSelect === true
-                ? parseQuestionTitle(question.question)
-                : question.question}</span>
-              {question.multiSelect === true && <span className={css.multiSelectHint}>可多选</span>}
+              {question.question}
            </h2>
          </div>
-          <div className={css.headerActions}>
-            <span className={css.progress}>{index + 1} / {questions.length}</span>
-            <button
-              type="button" className={css.iconButton} aria-label="上一题"
-              disabled={index === 0 || busy !== null}
-              onClick={() => { setIndex(index - 1); setError(null) }}
-            >
-              <IconChevronLeftOutline14 />
-            </button>
-            <button
-              type="button" className={css.iconButton} aria-label="下一题"
-              disabled={index === questions.length - 1 || busy !== null}
-              onClick={() => { setIndex(index + 1); setError(null) }}
-            >
-              <IconChevronRightOutline14 />
-            </button>
-            <button
-              type="button" className={css.iconButton} aria-label="放弃整组问题"
-              title="放弃整组问题"
-              disabled={busy !== null} onClick={cancelFlow}
-            >
-              <IconCloseOutline16 />
-            </button>
-          </div>
+          <button
+            type="button" className={css.iconButton} aria-label={t('nav.cancel')}
+            title={t('nav.cancel')}
+            disabled={busy !== null} onClick={cancelFlow}
+          >
+            <IconCloseOutline16 />
+          </button>
        </header>

        <div className={css.body} data-question-scroll>
@@ -220,7 +208,7 @@ function QuestionFlow({ pending }: { pending: PendingQuestion }) {
              return (
                <button
                  type="button" key={`${option.label}-${String(optionIndex)}`}
-                  className={clsx(css.option, selected && css.optionSelected)}
+                  className={clsx(css.option, selected && question.multiSelect !== true && css.optionSelected)}
                  role={question.multiSelect === true ? 'checkbox' : 'radio'}
                  aria-checked={selected}
                  aria-label={display.label}
@@ -232,81 +220,103 @@ function QuestionFlow({ pending }: { pending: PendingQuestion }) {
                    submitDrafts(drafts)
                  }}
                >
-                  <span className={css.number}>{optionIndex + 1}</span>
+                  {question.multiSelect === true
+                    ? (
+                      <span className={clsx(css.checkbox, selected && css.checkboxChecked)} aria-hidden="true">
+                        {selected && <IconCheckOutline14 size={12} />}
+                      </span>
+                    )
+                    : <span className={css.number}>{optionIndex + 1}</span>}
                  <span className={css.optionCopy}>
                    <span className={css.optionLine}>
                      <span className={css.optionLabel}>{display.label}</span>
-                      {display.recommended && <span className={css.badge}>推荐</span>}
+                      {display.recommended && (
+                        <span className={css.badge}>{t('option.recommended')}</span>
+                      )}
                      {option.description !== undefined && (
                        <span className={css.description}>{option.description}</span>
                      )}
                    </span>
                  </span>
-                  <span className={css.choiceIcon}>
-                    {selected ? <IconCheckOutline16 /> : <IconChevronRightOutline14 />}
-                  </span>
                </button>
              )
            })}

-            <div className={clsx(
-              css.custom,
-              draft.customOpen && css.customOpen,
-              !hasOptions && css.customOptionless,
-            )}>
-              {hasOptions && (
-                <button
-                  type="button" className={css.customTrigger}
-                  disabled={busy !== null} onClick={openCustom}
-                  aria-expanded={draft.customOpen}
-                >
-                  <span className={css.number}><IconEditOutline16 /></span>
-                  <span>其他，请填写自定义答案</span>
-                </button>
-              )}
-              {draft.customOpen && (
+            {hasOptions
+              ? (
+                <div className={clsx(css.customRow, draft.custom !== '' && css.customRowActive)}>
+                  {question.multiSelect === true
+                    ? (
+                      <span
+                        className={clsx(css.checkbox, draft.custom !== '' && css.checkboxChecked)}
+                        aria-hidden="true"
+                      >
+                        {draft.custom !== '' && <IconCheckOutline14 size={12} />}
+                      </span>
+                    )
+                    : (
+                      <span className={css.number} aria-hidden="true">
+                        <IconEditOutline16 size={12} />
+                      </span>
+                    )}
+                  <input
+                    type="text"
+                    className={css.customInput}
+                    value={draft.custom}
+                    disabled={busy !== null}
+                    placeholder={t('custom.placeholder')}
+                    onChange={draftCustom}
+                    onKeyDown={continueFromCustom}
+                  />
+                </div>
+              )
+              : (
                <textarea
                  autoFocus
-                  className={css.customInput}
+                  className={css.customTextarea}
                  value={draft.custom}
                  disabled={busy !== null}
                  rows={2}
-                  placeholder="输入你的答案"
-                  onChange={(event) => {
-                    const value = event.target.value
-                    updateDraft(current => ({
-                      ...current,
-                      selected: question.multiSelect === true ? current.selected : [],
-                      custom: value,
-                      customOpen: true,
-                      skipped: false,
-                    }))
-                  }}
-                  onKeyDown={(event) => {
-                    if (event.key === 'Enter' && !event.shiftKey && !isComposing(event)) {
-                      event.preventDefault()
-                      continueFlow()
-                    }
-                  }}
+                  placeholder={t('custom.placeholder')}
+                  onChange={draftCustom}
+                  onKeyDown={continueFromCustom}
                />
              )}
-            </div>
          </div>
        </div>

        <footer className={css.footer}>
-          <div className={css.feedback} role="status">{error}</div>
+          <div className={css.pager}>
+            <button
+              type="button" className={css.iconButton} aria-label={t('nav.prev')}
+              disabled={index === 0 || busy !== null}
+              onClick={() => { setIndex(index - 1); setError(null) }}
+            >
+              <IconChevronLeftOutline14 />
+            </button>
+            <span className={css.progress}>{index + 1} / {questions.length}</span>
+            <button
+              type="button" className={css.iconButton} aria-label={t('nav.next')}
+              disabled={index === questions.length - 1 || busy !== null}
+              onClick={() => { setIndex(index + 1); setError(null) }}
+            >
+              <IconChevronRightOutline14 />
+            </button>
+          </div>
+          <div className={css.feedback} role="status">
+            {error === null ? null : 'key' in error ? t(error.key) : error.text}
+          </div>
          <div className={css.footerActions}>
-            <Button variant="ghost" size="sm" disabled={busy !== null} onClick={skipQuestion}>
-              跳过本题
+            <Button variant="outline" disabled={busy !== null} onClick={skipQuestion}>
+              {t('action.skip')}
            </Button>
            <Button
-              variant="primary" size="sm"
+              variant="primary"
              disabled={busy !== null || !answered(draft)} onClick={continueFlow}
            >
              {busy === 'answer'
-                ? '正在提交…'
-                : index === questions.length - 1 ? '提交' : '下一题'}
+                ? t('submitting')
+                : index === questions.length - 1 ? t('submit') : t('action.next')}
            </Button>
          </div>
        </footer>
--- a/packages/client/ui-question/src/client/contract/slots.ts
+++ b/packages/client/ui-question/src/client/contract/slots.ts
@@ -6,7 +6,7 @@
 * cancelled error encoding, receipt checks — lives HERE, with the package
 * that consumes it.
 */
-import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 // Also pulls ui-conversation's SlotMap merge (the 'conversation.composer'
 // entry) into every program that sees this contract, so PropsRuntime resolves.
 import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
@@ -70,8 +70,9 @@ export class PendingQuestion {
 /**
 * Full component props: the framework runtime share (chain currency +
 * session/global standard kit) plus the chain `matched` share — the entry's
- * selector result, already narrowed to the question carrier. No injected
- * share: the carrier plus the domain face above carry the whole behavior
- * surface.
+ * selector result, already narrowed to the question carrier — plus the
+ * standard locale seat; the carrier plus the domain face above carry the
+ * whole behavior surface.
 */
-export type QuestionComposerProps = PropsRuntime<'conversation.composer'> & { matched: QuestionWait }
+export type QuestionComposerProps =
+  PropsRuntime<'conversation.composer'> & { matched: QuestionWait } & PropsLocale<'question'>
--- a/packages/client/ui-question/src/client/index.ts
+++ b/packages/client/ui-question/src/client/index.ts
@@ -1,18 +1,32 @@
 /**
 * Web question plugin, browser half: QuestionComposer registered as a
- * selector-routed entry of the conversation-declared composer chain. Pure
- * consumer — the selector narrows the owner's currency to the question
- * carrier (matched prop), and the whole behavior surface rides the carrier
- * (domain encoding in contract/slots.ts PendingQuestion); no inject face, no
- * service dependency beyond slots. Export discipline: packages/client/AGENTS.md.
+ * selector-routed entry of the conversation-declared composer chain, plus the
+ * `question` dictionaries. The selector narrows the owner's currency to the
+ * 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.
 */
 import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ComposerChainProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
+// Type-only: pulls the locale plugin's Context merge (ctx.locale).
+import type {} from '@deepseek-ai/dsh-client-locale/client'
 import type { QuestionWait } from './contract/slots.ts'
 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 { QuestionKey } from './locales.ts'
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    /** The question composer's copy. */
+    question: QuestionKey
+  }
+}
+
+/** Dictionary namespace owned by this plugin. */
+const NS = 'question'

 /**
 * Required services (cordis fiber inject). 'conversation' is an ordering
@@ -20,7 +34,7 @@ export type { QuestionAnswer, QuestionComposerProps, QuestionWait } from './cont
 * declared by ui-conversation's apply, and register() into an undeclared
 * slot throws — service waiting orders this apply after the declaring one.
 */
-export const inject = ['slots', 'conversation']
+export const inject = ['slots', 'conversation', 'locale']

 /** Chain routing: claim the composer while a question wait is pending (pure — owner props only). */
 function selectQuestion({ interactions }: ComposerChainProps): QuestionWait | null {
@@ -28,14 +42,19 @@ function selectQuestion({ interactions }: ComposerChainProps): QuestionWait | nu
 }

 /**
- * Client plugin body: register the question composer into the composer chain.
- * Zero business face — data and verbs both live on the matched carrier.
+ * Client plugin body: register the `question` dictionaries and the question
+ * composer into the composer chain. Zero business face — data and verbs live
+ * on the matched carrier; t rides the standard locale seat.
 * @param ctx - client root context.
 */
 export function apply(ctx: ClientContext): void {
-  const slots = ctx.slots
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'ui-question: dictionaries')
+
  ctx.effect(
-    () => slots.register({ name: 'conversation.composer', select: selectQuestion }, QuestionComposer),
+    () => ctx.slots.register(
+      { name: 'conversation.composer', select: selectQuestion, locale: NS },
+      QuestionComposer,
+    ),
    'ui-question: composer chain registration',
  )
 }
--- a/packages/client/ui-question/src/client/locales.ts
+++ b/packages/client/ui-question/src/client/locales.ts
@@ -0,0 +1,30 @@
+/** `question` namespace dictionaries. */
+
+/** Simplified Chinese dictionary (the key-set source of truth). */
+export const zh = {
+  'error.incomplete': '请先完成这道问题。',
+  'error.unanswered': '请选择一个选项或填写自定义答案。',
+  'nav.prev': '上一题',
+  'nav.next': '下一题',
+  'nav.cancel': '放弃整组问题',
+  'option.recommended': '推荐',
+  'custom.placeholder': '输入你的答案',
+  'action.skip': '跳过本题',
+  'action.next': '下一题',
+} satisfies Record<string, string>
+
+/** The question namespace key union. */
+export type QuestionKey = keyof typeof zh
+
+/** English dictionary, checked complete against the zh key set. */
+export const en = {
+  'error.incomplete': 'Please complete this question first.',
+  'error.unanswered': 'Please select an option or enter a custom answer.',
+  'nav.prev': 'Previous question',
+  'nav.next': 'Next question',
+  'nav.cancel': 'Dismiss all questions',
+  'option.recommended': 'Recommended',
+  'custom.placeholder': 'Type your answer',
+  'action.skip': 'Skip this question',
+  'action.next': 'Next',
+} satisfies Record<QuestionKey, string>
--- a/packages/client/ui-question/tests/browser-plugin.spec.ts
+++ b/packages/client/ui-question/tests/browser-plugin.spec.ts
@@ -9,6 +9,7 @@
 import { Context } from 'cordis'
 import { describe, expect, it } from 'vitest'
 import { SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
+import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import { QuestionComposer } from '../src/client/QuestionComposer.tsx'
 import { apply, inject } from '../src/client/index.ts'

@@ -24,12 +25,13 @@ async function bench() {
  // 'conversation' inject is an ordering edge (the declaring plugin provides
  // it after declaring the chain); the bench declares the chain itself.
  ctx.provide('conversation', {})
+  ctx.provide('locale', new LocaleService(ctx))
  return { ctx, slots }
 }

 describe('apply', () => {
  it('declares the services it binds', () => {
-    expect(inject).toEqual(['slots', 'conversation'])
+    expect(inject).toEqual(['slots', 'conversation', 'locale'])
  })

  it('fails loud when no live entry has declared the composer slot', async () => {
@@ -38,6 +40,7 @@ describe('apply', () => {
    // Satisfy the ordering inject without declaring the chain: apply must
    // then hit the undeclared-slot throw, not sit waiting on the service.
    ctx.provide('conversation', {})
+    ctx.provide('locale', new LocaleService(ctx))
    await expect(ctx.plugin({ inject: [...inject], apply }))
      .rejects.toThrow(/slot "conversation.composer" is not declared/)
  })
@@ -47,8 +50,10 @@ describe('apply', () => {
    await ctx.plugin({ inject: [...inject], apply }).await()
    const entry = slots.entries('conversation.composer')[0]!
    expect(entry.component).toBe(QuestionComposer)
-    // The whole behavior surface rides the matched carrier: no business face.
+    // The whole behavior surface rides the matched carrier: no business face;
+    // copy rides the standard locale seat.
    expect(entry.inject).toBeUndefined()
+    expect(entry.locale).toBe('question')
    // The selector narrows the chain currency: question wait in → that wait; none → null.
    const select = entry.select as (owner: { interactions: readonly { kind: string }[] }) => unknown
    const question = { kind: 'question' }
--- a/packages/client/ui-question/tests/question-composer.spec.tsx
+++ b/packages/client/ui-question/tests/question-composer.spec.tsx
@@ -8,18 +8,23 @@ 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 { PendingQuestion } from '../src/client/contract/slots.ts'
-import {
-  QuestionComposer, parseQuestionTitle, parseRecommendedLabel,
-} from '../src/client/QuestionComposer.tsx'
+import { PendingQuestion, type QuestionComposerProps } from '../src/client/contract/slots.ts'
+import { QuestionComposer, parseRecommendedLabel } 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

-/** Framework standard-kit stubs: the composer consumes none of them, the
- *  composed props type mandates their delivery (framework hooks are plain
- *  stubs per the client testing discipline). */
+/** 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 composer consumes only the locale seat;
+ *  the composed props type mandates delivery of the rest (framework hooks are
+ *  plain stubs per the client testing discipline). */
 const kit = {
  sessionId: SID,
  useSession: (() => { throw new Error('unused') }) as unknown as SnapshotSelectorHook<ConversationSnapshot>,
@@ -28,6 +33,8 @@ const kit = {
  useProjection: (() => undefined) as never,
  useInput: (() => { throw new Error('unused') }) as never,
  inputActions: { setDraft: () => { throw new Error('unused') }, submit: () => { throw new Error('unused') } } as never,
+  // The seat's key domain is question ∪ common.
+  t: seatOver(zh, commonZh),
 }

 const QUESTIONS = [
@@ -68,6 +75,7 @@ describe('QuestionComposer', () => {
    const { carrier, respond } = wait()
    render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)

+    expect(screen.getByText('偏好')).toBeTruthy()
    expect(screen.getByText('1 / 3')).toBeTruthy()
    expect(screen.getByText('推荐')).toBeTruthy()
    expect(screen.getByText('工程落地型')).toBeTruthy()
@@ -89,9 +97,8 @@ describe('QuestionComposer', () => {
    fireEvent.keyDown(custom, { key: 'Enter' })

    expect(screen.getByText('3 / 3')).toBeTruthy()
-    expect(screen.getByText('选择重要信号')).toBeTruthy()
-    expect(screen.getByText('可多选')).toBeTruthy()
-    expect(screen.queryByText('（可多选）')).toBeNull()
+    // The model's question text renders verbatim — no marker filtering.
+    expect(screen.getByText('选择重要信号（可多选）')).toBeTruthy()
    fireEvent.click(screen.getByRole('checkbox', { name: '系统设计' }))
    fireEvent.click(screen.getByRole('checkbox', { name: '系统设计' }))
    fireEvent.click(screen.getByRole('checkbox', { name: '系统设计' }))
@@ -175,11 +182,10 @@ describe('QuestionComposer', () => {
    expect(screen.getByText('3 / 3')).toBeTruthy()
  })

-  it('opens custom input, reports missing skipped answers, and supports header navigation', () => {
+  it('shows the inline custom input, reports missing answers, and supports pager navigation', () => {
    const { carrier, respond } = wait()
    render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)

-    fireEvent.click(screen.getByRole('button', { name: '其他，请填写自定义答案' }))
    expect(screen.getByPlaceholderText('输入你的答案')).toBeTruthy()
    fireEvent.click(screen.getByRole('radio', { name: '工程落地型' }))
    const emptyCustom = screen.getByPlaceholderText('输入你的答案')
@@ -240,6 +246,16 @@ describe('QuestionComposer', () => {
    expect(await screen.findByText('字符串错误')).toBeTruthy()
  })

+  it('renders chrome copy through the English dictionary', () => {
+    const respond = vi.fn(() => Promise.resolve<RpcReceipt>({ accepted: true }))
+    const carrier = new PendingWait(
+      'question', RpcId('solo'), SID, { questions: [{ id: 'detail', question: '补充你的要求' }] }, respond)
+    render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} t={seatOver(en, commonEn)} />)
+    expect(screen.getByLabelText('Dismiss all questions')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Skip this question' })).toBeTruthy()
+    expect(screen.getByPlaceholderText('Type your answer')).toBeTruthy()
+  })
+
  it('same-key carrier replacement (baseline replay) keeps drafts', () => {
    const first = wait('same-id')
    const view = render(<QuestionComposer matched={first.carrier} interactions={[first.carrier]} {...kit} />)
@@ -295,11 +311,3 @@ describe('parseRecommendedLabel', () => {
    expect(parseRecommendedLabel('Plain')).toEqual({ label: 'Plain', recommended: false })
  })
 })
-
-describe('parseQuestionTitle', () => {
-  it('removes Chinese and ASCII multi-select suffixes', () => {
-    expect(parseQuestionTitle('选择信号（可多选）')).toBe('选择信号')
-    expect(parseQuestionTitle('选择信号 (可多选)')).toBe('选择信号')
-    expect(parseQuestionTitle('选择信号')).toBe('选择信号')
-  })
-})
--- a/packages/client/ui-question/tsconfig.json
+++ b/packages/client/ui-question/tsconfig.json
@@ -14,6 +14,9 @@
    {
      "path": "../connection"
    },
+    {
+      "path": "../locale"
+    },
    {
      "path": "../runtime"
    },