feat(web): answerable ask_user_question flow with toolview verdict row

The pending question now owns exactly two surfaces: the redesigned
QuestionComposer takeover (footer pager, checkbox multi-select,
always-visible custom input, locale-injected bilingual chrome) collects
the answers, and a dedicated ask_user_question toolview row reports the
interaction outcome — waiting, N/M answered, cancelled (ASK_CANCELLED),
or interrupted with stopped semantics (ASK_ABORTED). PendingCard narrows
to approval waits only. Toolview leading icons and the hover chevron
unify on the tertiary label color, the checklist glyph matches the
14px figma extract, and dev-watch registers CSS modules so css-only
edits rebuild.

packages/client/ui-conversation/src/client/apply.ts

@@ -14,6 +14,7 @@ import { InputBar } from './skeleton/InputBar.tsx'
 import { ChatView } from './chat/ChatView.tsx'
 import { bashToolviewSample } from './toolviews/bash-sample.tsx'
 import { todoToolview } from './toolviews/todo-row.tsx'
+import { askQuestionToolview } from './toolviews/ask-question-row.tsx'
 import { todoDockEntry } from './skeleton/TodoPanel.tsx'
 import { queueDockEntry } from './queue/QueueDock.tsx'
 import { ConversationRoot } from './skeleton/ConversationRoot.tsx'
@@ -187,6 +188,9 @@ export function apply(ctx: Context): void {
   // The todo_write row rides the same seam (a product registration, not a sample).
   ctx.plugin(todoToolview)
 
+  // The ask_user_question row: waiting/answered/cancelled interaction outcome.
+  ctx.plugin(askQuestionToolview)
+
   // The plan strip rides the input dock above the queue rows (same posture).
   ctx.plugin(todoDockEntry)
 

packages/client/ui-conversation/src/client/chat/ChatView.tsx

@@ -361,7 +361,10 @@ export function ChatView({ useSession, useSessions, useStore, renderSlot, sessio
               ))}
             </div>
           )}
-          {pending.map(item => <PendingCard key={item.key} item={item} />)}
+          {/* Approval waits only: a pending question already shows as the
+              ask_user_question row (waiting state) plus the composer takeover. */}
+          {pending.filter(item => item.kind === 'approval')
+            .map(item => <PendingCard key={item.key} item={item} />)}
           {/* Turn-level loading signal: rides the whole running turn (first-token
               wait, tool execution, streaming) so it never flickers per step. */}
           {running && <TurnDots />}

packages/client/ui-conversation/src/client/chat/PendingCard.tsx

@@ -1,31 +1,22 @@
-// PendingCard: approval/question placeholder card (visible, not answerable —
-// the composer-takeover approval panel is a P-II item; wire pending semantics
-// already exist so the flow must show them).
+// PendingCard: approval placeholder card (visible, not answerable — the
+// composer-takeover approval panel is a P-II item; wire pending semantics
+// already exist so the flow must show them). Question waits render through
+// the ask_user_question toolview row + the composer takeover instead.
 
 import { memo } from 'react'
-import type { PendingInteraction } from '@deepseek-ai/dsh-client-runtime/client'
-import { JsonBlock } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PendingWait } from '@deepseek-ai/dsh-client-runtime/client'
 import css from './PendingCard.module.css'
 
 export interface PendingCardProps {
-  item: PendingInteraction
+  item: PendingWait<'approval'>
 }
 
 export const PendingCard = memo(function PendingCard({ item }: PendingCardProps) {
   return (
     <div className={css.card}>
-      {item.kind === 'approval' ? (
-        <>
-          <div className={css.title}>等待审批：<span className={css.mono}>{item.payload.toolName}</span></div>
-          {item.payload.reason !== undefined && <div className={css.reason}>{item.payload.reason}</div>}
-        </>
-      ) : (
-        <>
-          <div className={css.title}>等待回答（{item.payload.questions.length} 题）</div>
-          <JsonBlock label="问题内容" payload={item.payload.questions} />
-        </>
-      )}
-      <div className={css.hint}>请在原客户端处理（web 端作答后续里程碑提供）</div>
+      <div className={css.title}>等待审批：<span className={css.mono}>{item.payload.toolName}</span></div>
+      {item.payload.reason !== undefined && <div className={css.reason}>{item.payload.reason}</div>}
+      <div className={css.hint}>请在原客户端处理（web 端审批后续里程碑提供）</div>
     </div>
   )
 })

packages/client/ui-conversation/src/client/chat/ToolRow.module.css

@@ -62,12 +62,6 @@
   color: var(--dsw-alias-label-tertiary);
 }
 
-/* The others-variant sparkle glyph is one gray step darker than the icon
-   family in the source design. */
-.root[data-variant='others'] .leading {
-  color: var(--dsw-alias-label-secondary);
-}
-
 /* Cordis lifecycle tools retain their generic row mechanics while carrying a
    shared product accent and tool-owned action title. */
 .root[data-tool^='cordis_'] .leading,
@@ -87,10 +81,6 @@ button.leading {
   cursor: pointer;
 }
 
-.chevron {
-  color: var(--dsw-alias-label-secondary);
-}
-
 /* Hover preview on expandable rows: the idle tool icon crossfades (100ms)
    into a down chevron before the row is opened. The chevron overlays the
    icon cell absolutely so both can stay mounted for the opacity transition. */

packages/client/ui-conversation/src/client/chat/ToolRow.tsx

@@ -7,7 +7,6 @@
 // expandable content, retiring the details-panel handoff where feasible.
 
 import { useState, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'
-import clsx from 'clsx'
 import { CodeBlock, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
 import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ToolRowState, ToolRowVariant } from '../contract/tool-call-model.ts'
@@ -74,12 +73,12 @@ export function ToolRow({
     ? (
       <>
         <span className={css.iconIdle}>{icon}</span>
-        <IconChevronDownOutline14 className={clsx(css.chevron, css.chevronHover)} />
+        <IconChevronDownOutline14 className={css.chevronHover} />
       </>
     )
     : icon
   const leading = open
-    ? <IconChevronDownOutline14 className={css.chevron} />
+    ? <IconChevronDownOutline14 />
     : leadingFor(state, collapsedIcon)
   return (
     <div className={css.root} data-variant={variant} data-tool={toolName} data-state={state}>

packages/client/ui-conversation/src/client/toolviews/ask-question-row.tsx

@@ -0,0 +1,94 @@
+// ask_user_question toolview: question-flavored summary row replacing the
+// generic "Tool call" card, registered into the keyed
+// 'conversation.chat.toolview' hole like todo-row. The row composes ToolRow
+// (chrome, running sweep, leading expansion) and swaps in the interaction
+// outcome — `waiting` while pending, answered-count once settled, `cancelled`
+// when the user dismissed the whole set — because the questions themselves
+// render in the composer takeover.
+
+import { IconQuestionOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { Context } from 'cordis'
+import type { ToolRowProps } from '../contract/slots.ts'
+import { toolRowModel } from '../contract/tool-call-model.ts'
+import { ToolRow } from '../chat/ToolRow.tsx'
+
+/** One parsed answer entry, shape-checked (result JSON crosses the wire). */
+interface AnswerEntry { selected?: unknown; custom?: unknown }
+
+function isAnswer(value: unknown): value is AnswerEntry {
+  return typeof value === 'object' && value !== null
+}
+
+/** `${answered}/${total} answered` off the result JSON (a skipped question has
+ *  empty `selected` and no `custom`); null on unexpected shape (generic fallback). */
+function answeredSummary(text: string): string | null {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(text)
+  } catch {
+    return null
+  }
+  if (typeof parsed !== 'object' || parsed === null) return null
+  const answers = (parsed as { answers?: unknown }).answers
+  if (!Array.isArray(answers) || !answers.every(isAnswer)) return null
+  const answered = answers.filter(a =>
+    (Array.isArray(a.selected) && a.selected.length > 0)
+    || (typeof a.custom === 'string' && a.custom !== '')).length
+  return `${answered}/${answers.length} answered`
+}
+
+/** One-line question-interaction row (row click opens details; leading toggle
+ *  expands the raw args). */
+export function AskQuestionRow({ toolName, block, openDetails }: ToolRowProps) {
+  const model = toolRowModel(toolName, block)
+  // Composer verdicts settle the call as specific UserInteractionErrors
+  // (apiproxy ask_user_question handler): 'ASK_CANCELLED' is the user's own
+  // dismissal of the set, 'ASK_ABORTED' is a turn interrupt landing while the
+  // question was pending. Both name their verdict instead of the generic
+  // failed shape, and the abort keeps the shared stopped (amber) semantics of
+  // any other interrupted tool call.
+  const code = 'kind' in block ? block.error?.code : undefined
+  let summary = model.summary
+  let state = model.state
+  if (code === 'ASK_CANCELLED') {
+    summary = 'cancelled'
+  } else if (code === 'ASK_ABORTED') {
+    summary = 'interrupted'
+    state = 'stopped'
+  } else if (model.state === 'running') {
+    summary = 'waiting'
+  } else if ('kind' in block && model.state === 'ok') {
+    const text = block.content.filter(b => b.type === 'text').map(b => b.text).join('')
+    summary = answeredSummary(text) ?? model.summary
+  }
+  return (
+    <ToolRow
+      variant={model.variant}
+      toolName={toolName}
+      icon={<IconQuestionOutline14 />}
+      title="Ask question"
+      summary={summary}
+      body={model.body}
+      state={state}
+      onOpenDetails={openDetails}
+    />
+  )
+}
+
+/**
+ * The ask-question row as a plain registrant plugin, riding the same
+ * load-order seam as todo-toolview: `inject: ['conversation']` guarantees the
+ * chat entry (and with it the 'conversation.chat.toolview' declaration) is on
+ * the ledger.
+ */
+export const askQuestionToolview = {
+  name: 'ask-question-toolview',
+  inject: ['slots', 'conversation'],
+  /**
+   * Register the ask-question row into the chat view's keyed toolview hole.
+   * @param ctx - registrant context (disposal rides ctx.effect inside slots.register).
+   */
+  apply(ctx: Context): void {
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'ask_user_question' }, AskQuestionRow)
+  },
+}

packages/client/ui-conversation/src/client/toolviews/todo-row.module.css

@@ -1,58 +0,0 @@
-/* todo_write plan-update row: ToolRow chrome (figma 780:53675) —
-   [16 checklist] gap6 [title 14/24] gap8 [2x2 dot] gap8 [summary FILL truncate]. */
-
-.row {
-  display: flex;
-  align-items: center;
-  height: 24px;
-  min-width: 0;
-  cursor: pointer;
-  border-radius: 6px;
-}
-
-.leading {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 6px;
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.title {
-  flex: none;
-  font-size: 14px;
-  line-height: 24px;
-  font-weight: 500; /* figma wt510, rendered 500 */
-  color: var(--dsw-alias-label-primary-dimmed);
-}
-
-.sep {
-  flex: none;
-  width: 2px;
-  height: 2px;
-  border-radius: 1px;
-  margin: 0 8px;
-  background: var(--dsw-alias-label-caption);
-}
-
-.summary {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 14px;
-  line-height: 24px;
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.err {
-  flex: none;
-  margin-left: 8px;
-  color: var(--dsw-alias-state-error-primary);
-  font-size: 11px;
-  line-height: 16px;
-}

packages/client/ui-conversation/src/client/toolviews/todo-row.tsx

@@ -1,16 +1,16 @@
 // todo_write toolview: plan-flavored summary row replacing the generic
 // "Tool call" card, registered into the keyed 'conversation.chat.toolview'
 // hole like the bash sample (a product registration, not a sample). The row
-// summarizes the written list (counts + active item) from the call args; the
+// composes ToolRow (chrome, running sweep, leading expansion) and swaps in a
+// summary of the written list (counts + active item) from the call args; the
 // durable list itself renders in the TodoPanel above the composer, so the
-// row stays one line. Chrome matches ToolRow (figma 780:53675).
+// row stays one line.
 
-import type { KeyboardEvent } from 'react'
+import { IconChecklistOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { Context } from 'cordis'
-import { IconChecklistOutline16, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ToolRowProps } from '../contract/slots.ts'
-import { toolRowModel, type ToolRowState } from '../contract/tool-call-model.ts'
-import css from './todo-row.module.css'
+import { toolRowModel } from '../contract/tool-call-model.ts'
+import { ToolRow } from '../chat/ToolRow.tsx'
 
 /** One parsed args item, shape-checked (model JSON: any field may be missing or mistyped). */
 interface TodoWriteItem { content?: unknown; status?: unknown }
@@ -40,48 +40,25 @@ function summarize(argsRaw: string): string | null {
     : head
 }
 
-/** Leading-slot state substitution matches ToolRow / bash: icon yields to the
- *  state semantic while running or failed; ok keeps the checklist glyph. */
-function leadingFor(state: ToolRowState) {
-  switch (state) {
-    case 'running': return <StateDot state="ongoing" />
-    case 'error': return <StateDot state="error" />
-    case 'stopped': return <StateDot state="warning" />
-    default: return <IconChecklistOutline16 />
-  }
-}
-
-/** One-line plan update row (click opens the raw args in details). Non-ok
- *  execution states keep the generic row's dot semantics — a cancelled call
- *  wrote no todo/write, so it must not read as a completed update. */
+/** One-line plan update row (row click opens details; leading toggle expands
+ *  the raw args). Non-ok execution states keep the shared row's dot semantics
+ *  — a cancelled call wrote no todo/write, so it must not read as a completed
+ *  update. */
 export function TodoRow({ toolName, block, openDetails }: ToolRowProps) {
   const model = toolRowModel(toolName, block)
   const argsRaw = ('kind' in block ? block.call?.argsRaw : block.argsRaw) ?? ''
   const summary = summarize(argsRaw) ?? model.summary
-  // Button semantics, not a <button>: the row carries inline spans a button
-  // would flatten, and ToolRow takes the same role/tabIndex/Enter-Space route.
-  const openFromKeyboard = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.key !== 'Enter' && event.key !== ' ') return
-    event.preventDefault()
-    openDetails()
-  }
   return (
-    <div
-      className={css.row}
-      data-sample="todo-row"
-      data-state={model.state}
-      role="button"
-      tabIndex={0}
-      onClick={openDetails}
-      onKeyDown={openFromKeyboard}
-    >
-      <span className={css.leading} aria-hidden>{leadingFor(model.state)}</span>
-      <span className={css.title}>更新任务清单</span>
-      <span className={css.sep} aria-hidden />
-      <span className={css.summary}>{summary}</span>
-      {model.state === 'error' && <span className={css.err}>failed</span>}
-      {model.state === 'stopped' && <span className={css.err}>已中断</span>}
-    </div>
+    <ToolRow
+      variant={model.variant}
+      toolName={toolName}
+      icon={<IconChecklistOutline14 />}
+      title="更新任务清单"
+      summary={summary}
+      body={model.body}
+      state={model.state}
+      onOpenDetails={openDetails}
+    />
   )
 }