Merge remote-tracking branch 'origin/master' into feat/todo-multi-in-progress

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

@@ -1,31 +1,68 @@
 /** Registers the conversation components, shared store, and service callbacks. */
 import type { Context } from 'cordis'
-import type { BoundActions } from '@deepseek-ai/dsh-client-ui-slots'
+import { deferRegistration, resolveSlotLabel, type BoundActions } from '@deepseek-ai/dsh-client-ui-slots'
 import type { ISessions, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import type {} from '@deepseek-ai/dsh-client-ui-layout/client'
+// Type-only: pulls the locale plugin's Context merge (ctx.locale).
+import type {} from '@deepseek-ai/dsh-client-locale/client'
 import type { ViewTab } from './contract/views.ts'
 import type {
-  ApprovalWait, ChatViewInjected, ComposerBarInjected, ComposerChainProps, ConversationInjected,
+  ApprovalWait, ChatScrollPosition, ChatViewInjected, ComposerBarInjected, ComposerChainProps, ConversationInjected,
   ConversationSessionInjected, DetailsInjected,
 } from './contract/slots.ts'
+import type { InputNotice } from './input/contract.ts'
 import { resolveToolPath } from './contract/tool-call-model.ts'
 import { createChatStore } from './stores.ts'
 import { ConversationService } from './service.ts'
 import type { IConversation } from './service.ts'
 import { InputHub } from './input/hub.ts'
+import { ComposerSubmissionPolicy } from './input/submission-policy.ts'
 import { InputBar } from './skeleton/InputBar.tsx'
+import { EnterBehaviorRow } from './settings/EnterBehaviorRow.tsx'
+import type { EnterBehaviorRowInjected } from './settings/EnterBehaviorRow.tsx'
 import { ChatView } from './chat/ChatView.tsx'
+import { StatsLine } from './chat/StatsLine.tsx'
 import { bashToolviewSample } from './toolviews/bash-sample.tsx'
+import { readToolview } from './toolviews/read-row.tsx'
+import { fileMutationToolview } from './toolviews/file-mutation-row.tsx'
+import { searchToolview } from './toolviews/search-row.tsx'
+import { webToolview } from './toolviews/web-row.tsx'
 import { ApprovalPanel } from './skeleton/ApprovalPanel.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'
 import { ConversationSession } from './skeleton/ConversationSession.tsx'
 import { DetailsPanel } from './skeleton/DetailsPanel.tsx'
+import { en, NS, zh, type ConversationKey } from './locales.ts'
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    /** The conversation surfaces' copy (skeleton, chat view, toolviews, docks). */
+    conversation: ConversationKey
+  }
+}
 
 /** Services required by the conversation plugin. */
-export const inject = ['slots', 'layout', 'sessions', 'workspaces']
+export const inject = ['slots', 'layout', 'sessions', 'workspaces', 'locale']
+
+// Static no-session sources for the composer-bar hooks compartment: module
+// constants so the render side's per-source hook cache (observableHook) keeps
+// one identity across every no-session render.
+const ABSENT_NOTICES = {
+  getSnapshot: (): InputNotice | null => null,
+  subscribe: () => () => {},
+}
+const EMPTY_LEXICON: ReadonlyMap<'/' | '@', readonly string[]> = new Map()
+const ABSENT_LEXICON = {
+  getSnapshot: () => EMPTY_LEXICON,
+  subscribe: () => () => {},
+}
+const ABSENT_MENU_LAUNCHER = {
+  getSnapshot: (): string | null => null,
+  subscribe: () => () => {},
+}
 
 /** Resolve the session-scoped conversation face (scope-addressed send/cancel), failing loud. */
 function scopedConversation(sessions: ISessions, id: SessionId): IConversation {
@@ -50,15 +87,43 @@ export function apply(ctx: Context): void {
   const layout = ctx.layout
   const slots = ctx.slots
 
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'ui-conversation: dictionaries')
+
+  // Registration-time text (the view tab label) reads through the bound
+  // translate as a thunk, so it follows the active locale without
+  // re-registration; components read the standard `t` seat instead.
+  const t = ctx.locale.bind(NS)
+
   // Apply-time construction keeps store identity bound to this fiber.
   const chatStore = createChatStore()
+  const submissionPolicy = new ComposerSubmissionPolicy()
+
+  ctx.effect(() => {
+    const row = deferRegistration(ctx.slots, 'settings.general.item', EnterBehaviorRow, () =>
+      ctx.slots.register({
+        name: 'settings.general.item',
+        id: 'composer-enter',
+        order: 20,
+        locale: NS,
+        inject: (): EnterBehaviorRowInjected => ({
+          hooks: { busyEnter: submissionPolicy.busyEnter },
+          setBusyEnter: (behavior) => { submissionPolicy.setBusyEnter(behavior) },
+        }),
+      }, EnterBehaviorRow))
+    return () => { row.dispose() }
+  }, 'ui-conversation: Enter behavior settings row')
+
+  // Chat semantic reader positions by session, surviving view switches and
+  // width reflow when the tab ring remounts the view. Deliberately not
+  // persisted: a fresh page load keeps the open-jump-to-bottom default.
+  const chatScrollPositions = new Map<SessionId, ChatScrollPosition>()
 
   const viewTabs = (): ViewTab[] => {
     const tabs: ViewTab[] = []
     for (const entry of slots.entries('conversation.view')) {
       /* v8 ignore next -- unreachable: list registration validates id at load. */
       if (entry.options.id === undefined) continue
-      tabs.push({ id: entry.options.id, label: entry.options.label ?? entry.options.id })
+      tabs.push({ id: entry.options.id, label: resolveSlotLabel(entry.options.label) ?? entry.options.id })
     }
     return tabs
   }
@@ -87,10 +152,11 @@ export function apply(ctx: Context): void {
   // frame while strict session slots fill only their session-bound regions.
   slots.register({
     name: 'conversation',
+    locale: NS,
     children: {
       'conversation.session': { kind: 'single', scope: 'session' },
       'conversation.composer': { kind: 'chain', scope: 'session' },
-      'conversation.composer.bar': { kind: 'single', scope: 'session' },
+      'conversation.composer.bar': { kind: 'single', scope: 'session-maybe' },
       'conversation.input.overlay': { kind: 'list', scope: 'session' },
       'conversation.input.dock': { kind: 'list', scope: 'session' },
       'conversation.composer.dock': { kind: 'list', scope: 'session' },
@@ -118,7 +184,11 @@ export function apply(ctx: Context): void {
   // the resident parent keeps Hero and composer layout identity stable.
   slots.register({
     name: 'conversation.session',
-    children: { 'conversation.view': { kind: 'list', scope: 'session' } },
+    locale: NS,
+    children: {
+      'conversation.view': { kind: 'list', scope: 'session' },
+      'conversation.session.header.actions': { kind: 'list', scope: 'session' },
+    },
     store: chatStore,
     inject: (sessionId: SessionId, _actions: BoundActions<typeof chatStore>): ConversationSessionInjected => ({
       views: {
@@ -135,8 +205,12 @@ export function apply(ctx: Context): void {
   // chain's fallback (decision 20). Public machine surface arrives via the
   // provide channel above; the keyboard command face and the stop/retry
   // verbs ride this inject (package-internal — hub and bar are one plugin).
+  // Session-maybe: with no current session the machine faces are absent and
+  // the hooks compartment binds static empty sources (module constants, so
+  // observableHook caching and hook order stay stable across transitions).
   slots.register({
     name: 'conversation.composer.bar',
+    locale: NS,
     // The two named control seats in the bar's tool row (plan beside the
     // access control, model right); empty until their owning plugins
     // register (B ruling).
@@ -144,10 +218,36 @@ export function apply(ctx: Context): void {
       'conversation.input.plan': { kind: 'single', scope: 'session' },
       'conversation.input.model': { kind: 'single', scope: 'session' },
     },
-    inject: (sessionId: SessionId): ComposerBarInjected => {
+    inject: (sessionId: SessionId | undefined): ComposerBarInjected => {
+      if (sessionId === undefined) {
+        return {
+          keyboard: undefined,
+          resolveSubmitMode: (running, gesture, steeringAvailable) =>
+            submissionPolicy.resolve(running, gesture, steeringAvailable),
+          toggleCommandMenu: undefined,
+          stop: undefined,
+          command: undefined,
+          hooks: { notices: ABSENT_NOTICES, lexicon: ABSENT_LEXICON, menuLauncher: ABSENT_MENU_LAUNCHER },
+        }
+      }
       const shell = inputHub.shell(sessionId)
+      const slash = inputHub.slash(sessionId)
       return {
         keyboard: shell,
+        resolveSubmitMode: (running, gesture, steeringAvailable) =>
+          submissionPolicy.resolve(running, gesture, steeringAvailable),
+        toggleCommandMenu: slash === undefined
+          ? undefined
+          : (selection) => {
+            shell.dismissPopup()
+            const snapshot = shell.snapshot
+            slash.toggleSource('command', {
+              trigger: '/',
+              query: '',
+              position: snapshot.draft.slice(0, selection.start).trim() === '' ? 'leading' : 'inline',
+              span: { ...selection, draftRev: snapshot.draftRev },
+            })
+          },
         stop: () => {
           scopedConversation(sessions, sessionId).cancel().catch(() => {
             // Stop failure surfaces via snapshot.promptError; nothing to restore.
@@ -159,7 +259,11 @@ export function apply(ctx: Context): void {
           const result = await session.command(line)
           return result.ok && result.value.matched
         },
-        hooks: { notices: shell.notices, lexicon: shell.lexicon },
+        hooks: {
+          notices: shell.notices,
+          lexicon: shell.lexicon,
+          menuLauncher: slash?.launcher ?? ABSENT_MENU_LAUNCHER,
+        },
       }
     },
   }, InputBar)
@@ -172,7 +276,7 @@ export function apply(ctx: Context): void {
   // pending — a question is a conversation the model is waiting on, while an
   // approval only blocks one tool call; answering the question first cannot
   // strand the approval (it re-elects the moment the question resolves).
-  slots.register({ name: 'conversation.composer', select: selectApproval, priority: 1 }, ApprovalPanel)
+  slots.register({ name: 'conversation.composer', select: selectApproval, priority: 1, locale: NS }, ApprovalPanel)
 
   // The chat view: first entry of the ring this package just declared.
   // Declaring the keyed toolview hole here is claiming it: ChatView is the
@@ -183,7 +287,8 @@ export function apply(ctx: Context): void {
     name: 'conversation.view',
     id: 'chat',
     order: 0,
-    label: 'Chat',
+    label: () => t('view.chat'),
+    locale: NS,
     children: {
       'conversation.chat.toolview': { kind: 'keyed', scope: 'session' },
       'conversation.chat.commandview': { kind: 'keyed', scope: 'session' },
@@ -204,10 +309,33 @@ export function apply(ctx: Context): void {
           })
         },
         loadOlder: () => { void scoped.loadOlder() },
+        // Unregistered 'trajectory' id is safe: the tab ring falls back to
+        // the first view, and the untouched inspect target stays inert.
+        inspectCall: (callId) => {
+          actions.setInspect({ callId })
+          actions.setView('trajectory')
+        },
+        chatScroll: {
+          save: (position) => {
+            if (position === null) chatScrollPositions.delete(sessionId)
+            else chatScrollPositions.set(sessionId, position)
+          },
+          read: () => chatScrollPositions.get(sessionId) ?? null,
+        },
+        forkAt: (seq) => {
+          sessions.fork({ sessionId, atSeq: seq, increaseTitle: true })
+            .then((childId) => { sessions.open(childId) })
+            .catch(() => {
+              // Fork or child-rename failure keeps the source view untouched.
+            })
+        },
       }
     },
   }, ChatView)
 
+  // Session stats stick with the composer (composer.dock = stats-line family).
+  slots.register({ name: 'conversation.composer.dock', id: 'stats', order: 0 }, StatsLine)
+
   // Class-plugin mount (packages/AGENTS.md service form): the service
   // registers itself as `conversation` and lives on its own child fiber.
   // Mounted AFTER the chat entry register above — construction guarantee for
@@ -217,12 +345,33 @@ export function apply(ctx: Context): void {
   ctx.plugin(ConversationService, { input: inputHub })
 
   // The bash sample rides that exact seam, in third-party posture
-  // (ToolRow-matching Bash · {description} chrome; scoped badge in child sessions).
+  // (ToolRow-matching Bash · {description} chrome).
   ctx.plugin(bashToolviewSample)
 
+  // The read row rides the same seam (a product registration, not a sample):
+  // Read · {path} chrome with the file's read card resident below it.
+  ctx.plugin(readToolview)
+
+  // The write/edit rows ride the same seam: a file-mutation call declares the
+  // diff render intent, so these rows stack the applied diff card under their
+  // path-link summary (the terminal card's posture, applied to diffs).
+  ctx.plugin(fileMutationToolview)
+
+  // The grep/glob search row rides the same seam: one component registered
+  // under both tool names, since both declare the same search render intent.
+  ctx.plugin(searchToolview)
+
+  // The web rows ride the same seam: one WebRow registered under both
+  // web_search and web_fetch, rendering the completed retrieval's web card
+  // resident under the summary (a product registration, not a sample).
+  ctx.plugin(webToolview)
+
   // 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)
 
@@ -232,6 +381,7 @@ export function apply(ctx: Context): void {
 
   slots.register({
     name: 'details',
+    locale: NS,
     store: chatStore,
     inject: (): DetailsInjected => ({
       closeDetails: () => { layout.closeDetails() },

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

@@ -34,11 +34,3 @@
   /* Optical align with 28px icon hit targets that pad 6px past the glyph. */
   margin-left: -6px;
 }
-
-/* Hover-capable pointers: reveal shared actions on root hover/focus. */
-@media (hover: hover) {
-  .root:hover .actions,
-  .root:focus-within .actions {
-    opacity: 1;
-  }
-}

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

@@ -4,13 +4,17 @@
 // view groups them into tool rows through its keyed toolview slot (figma
 // step-summary flow). Shared by finalized nodes and the streaming partial;
 // the turn-level loading dots live in the chat view's tail, not here.
-// Finalized nodes append IconActions (copy / branch / clock) once streaming ends.
+// Finalized content (text) nodes append IconActions once streaming ends
+// (`time` is omitted for mid-turn narration); their branch action is enabled
+// only when the node is also the completed turn's transcript tail. Think /
+// tool-head-only nodes stay chrome-free.
 
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import type { AssistantBlock } from '@deepseek-ai/dsh-client-runtime/client'
 import {
   IconThinkOutline14, JsonBlock, MarkdownText,
 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ChatViewSlotProps } from '../contract/slots.ts'
 import { MessageIconActions } from './MessageIconActions.tsx'
 import { ToolRow } from './ToolRow.tsx'
 import css from './AssistantMarkdown.module.css'
@@ -18,10 +22,22 @@ import css from './AssistantMarkdown.module.css'
 export interface AssistantMarkdownProps {
   blocks: readonly AssistantBlock[]
   streaming: boolean
-  /** Frozen partial of an aborted turn: rendered with a 已停止 marker. */
+  /** Frozen partial of an aborted turn: rendered with a stopped marker. */
   interrupted?: boolean | undefined
-  /** Unix epoch ms for the finalized IconActions clock; omitted while streaming. */
+  /** Unix epoch ms for the IconActions clock; omitted while streaming or when
+   *  the parent withholds chrome (mid-turn content assistants). */
   time?: number | undefined
+  /** Turn wall time in ms for the IconActions run-time label; omitted when the
+   *  turn's triggering input is outside the loaded window. */
+  runMs?: number | undefined
+  /** Event sequence used as the fork boundary; omitted while streaming. */
+  seq?: number | undefined
+  /** Fork the session through this finalized message's completed turn when eligible. */
+  onFork?: ((seq: number) => void) | undefined
+  /** The message is not the transcript tail of a completed turn. */
+  forkUnavailable?: boolean | undefined
+  /** The owning view's locale seat, passed down as a plain prop. */
+  t: ChatViewSlotProps['t']
 }
 
 function firstLine(text: string): string {
@@ -29,6 +45,13 @@ function firstLine(text: string): string {
   return nl === -1 ? text : text.slice(0, nl)
 }
 
+/** Latest non-blank reasoning line while the block is still streaming. */
+function latestLine(text: string): string {
+  const visible = text.trimEnd()
+  const nl = visible.lastIndexOf('\n')
+  return nl === -1 ? visible : visible.slice(nl + 1)
+}
+
 /** Joined text blocks for the copy action (reasoning / tool heads stay out). */
 function copyText(blocks: readonly AssistantBlock[]): string {
   const parts: string[] = []
@@ -38,24 +61,32 @@ function copyText(blocks: readonly AssistantBlock[]): string {
   return parts.join('')
 }
 
+/** True when the node has model-visible text content worth chrome under. */
+function hasContentText(blocks: readonly AssistantBlock[]): boolean {
+  return blocks.some(block => block.kind === 'text' && block.text.trim() !== '')
+}
+
 /** Reasoning block as the Think variant summary row (figma 39:28304). */
-function ThinkRow({ text, running }: { text: string; running: boolean }) {
+function ThinkRow({ text, running, t }: { text: string; running: boolean; t: AssistantMarkdownProps['t'] }) {
   return (
     <ToolRow
+      t={t}
       variant="think"
       icon={<IconThinkOutline14 size={14} />}
       title="Think"
-      summary={firstLine(text)}
+      summary={running ? latestLine(text) : firstLine(text)}
       body={text}
       state={running ? 'running' : 'ok'}
-      expandOnRowClick
     />
   )
 }
 
 export const AssistantMarkdown = memo(function AssistantMarkdown({
-  blocks, streaming, interrupted, time,
+  blocks, streaming, interrupted, time, runMs, seq, onFork, forkUnavailable, t,
 }: AssistantMarkdownProps) {
+  // Stable per locale revision (t identity changes on switch): a fresh object
+  // per render would rebuild MarkdownText's component table every chunk.
+  const codeLabels = useMemo(() => ({ copyLabel: t('copy'), copiedLabel: t('copied') }), [t])
   const last = blocks.length - 1
   // Tool-call heads render as tool rows in the chat view's grouping pass, so
   // a node that is only those heads (or empty) would paint an empty root
@@ -64,28 +95,41 @@ export const AssistantMarkdown = memo(function AssistantMarkdown({
     || interrupted === true
     || blocks.some(block => block.kind !== 'tool-call')
   if (!hasVisible) return null
-  // Footer only after the turn settles with a known event time; streaming omits it.
-  const showActions = !streaming && time !== undefined
+  // Footer only under settled content text; Think-only / streaming omit it.
+  const showActions = !streaming && time !== undefined && hasContentText(blocks)
   return (
-    <div className={css.root} data-streaming={streaming || undefined}>
+    <div className={css.root} data-streaming={streaming || undefined} data-time-hover-root>
       <div className={css.body}>
         {blocks.map((block, i) => {
           switch (block.kind) {
-            case 'text': return <MarkdownText key={i} text={block.text} streaming={streaming} />
-            case 'reasoning': return <ThinkRow key={i} text={block.text} running={streaming && i === last} />
+            case 'text': return (
+              <MarkdownText key={i} text={block.text} streaming={streaming} codeLabels={codeLabels} />
+            )
+            case 'reasoning': return <ThinkRow key={i} text={block.text} running={streaming && i === last} t={t} />
             // Grouped into tool rows by ChatView; hasVisible above skips an empty shell.
             case 'tool-call': return null
-            default: return <JsonBlock key={i} label="未知内容块" payload={block.block} />
+            default: return (
+              <JsonBlock
+                key={i}
+                label={t('message.unknownBlock')}
+                payload={block.block}
+                truncatedLabel={total => t('json.truncated', { total })}
+              />
+            )
           }
         })}
-        {interrupted && <span className={css.stopped}>已停止</span>}
+        {interrupted && <span className={css.stopped}>{t('message.stopped')}</span>}
       </div>
       {showActions && (
         <MessageIconActions
           text={copyText(blocks)}
           time={time}
+          runMs={runMs}
           clock="end"
+          onBranch={onFork === undefined || seq === undefined ? undefined : () => { onFork(seq) }}
+          branchUnavailable={forkUnavailable}
           className={css.actions}
+          t={t}
         />
       )}
     </div>

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

@@ -1,6 +1,8 @@
 /* Chat flow: one 16px rhythm everywhere — between blocks (prose <-> tool
    runs) via the column gap and between consecutive tool rows via the group
-   gap. Input padding cap rides the skeleton. */
+   gap. Input padding cap rides the skeleton. Under
+   `[data-conversation-scroll]` the column host owns overflow and this view
+   is ordinary flow (see ConversationRoot active-phase rules). */
 
 .root {
   position: relative;
@@ -14,13 +16,28 @@
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
-  padding: 16px 24px;
+  /* Sides = composer clearance + 16px: on narrow viewports the transcript
+     stays exactly 32px narrower than the input card (the shared width rule). */
+  padding: 16px calc(var(--dsh-composer-side-clearance) + 16px);
 }
 
-/* Message column: 736px fixed width, centered on the same axis as the
-   input box; the scroller itself stays full-bleed. */
+:global([data-conversation-scroll]) .root {
+  flex: 0 0 auto;
+  min-height: auto;
+  height: auto;
+}
+
+:global([data-conversation-scroll]) .scroll {
+  overflow: visible;
+  flex: 0 0 auto;
+  min-height: auto;
+}
+
+/* Message column: shared chat width (ConversationRoot --dsh-chat-content-width),
+   centered on the same axis as the input box (which caps at chat + 16px); the
+   scroller itself stays full-bleed. */
 .column {
-  max-width: 736px;
+  max-width: var(--dsh-chat-content-width);
   width: 100%;
   margin: 0 auto;
   display: flex;
@@ -28,6 +45,12 @@
   gap: 16px;
 }
 
+/* Settled-flow identity boundary. It is neutral today and becomes the natural
+   measurement/mount unit for a virtualizer without changing the column gap. */
+.flowItem {
+  min-width: 0;
+}
+
 .toolGroup {
   display: flex;
   flex-direction: column;
@@ -52,33 +75,54 @@
   border-left: 1px solid var(--dsw-alias-border-l2);
 }
 
-/* Turn loader: one row of four 2.5px pixels (StateDot blue) chasing left to
-   right with a stepped trail — flat keyframe holds, no tweening. Phase
-   offsets come from per-rect animation-delay (index * -250ms) set inline
-   by the component. */
-.turnDots {
+/* Turn activity keeps the former loader's one-line footprint. A pale
+   brand-blue band sweeps from left to right; reduced-motion keeps it static. */
+.turnStatus {
   align-self: flex-start;
   flex: none;
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  /* One message line box: the dots center inside the text line height. */
   height: 26px;
-  /* Same pin as StateDot: ongoing blue has no alias token (business-primary
-     is the 500 step, not this 450). */
-  color: var(--dsw-static-deepseek-450);
+  font: var(--dsw-font-s-strong-14);
+  white-space: nowrap;
+  background: linear-gradient(
+    90deg,
+    var(--dsw-static-deepseek-500) 0%,
+    var(--dsw-static-deepseek-500) 40%,
+    var(--dsw-static-deepseek-200) 50%,
+    var(--dsw-static-deepseek-500) 60%,
+    var(--dsw-static-deepseek-500) 100%
+  );
+  background-position: 100% 0;
+  background-size: 250% 100%;
+  background-clip: text;
+  color: transparent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: dsh-turn-status-shimmer 1.8s linear infinite;
 }
 
-.turnDotCell {
-  fill: currentColor;
-  opacity: 0.15;
-  animation: dsh-turn-dots-chase 1s infinite;
+.turnStatusClock {
+  margin-left: 8px;
+  font: var(--dsw-font-xs-13);
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-label-caption);
+  -webkit-text-fill-color: var(--dsw-alias-label-caption);
 }
 
-@keyframes dsh-turn-dots-chase {
-  0%, 24.9% { opacity: 1; }
-  25%, 49.9% { opacity: 0.6; }
-  50%, 74.9% { opacity: 0.35; }
-  75%, 100% { opacity: 0.15; }
+@keyframes dsh-turn-status-shimmer {
+  to {
+    background-position: 0 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .turnStatus {
+    background-position: 0 0;
+    background-size: 100% 100%;
+    animation: none;
+  }
 }
 
 .hint {
@@ -113,16 +157,37 @@
   opacity: 0.6;
 }
 
-/* Back-to-bottom: 34px circular icon button at the column's right edge. */
-.toBottom {
-  position: absolute;
-  right: max(24px, calc((100% - 736px) / 2));
+/* Back-to-bottom: zero-height sticky slot so the control does not extend
+   scrollHeight; the button translates up into the viewport. Under the
+   conversation host, clearance sits above the sticky composer stack. */
+.toBottomSlot {
+  position: sticky;
   bottom: 16px;
-  width: 34px;
-  height: 34px;
+  /* Above the sticky composer (z-index 7) so the control stays clickable and
+     visible over the input card. */
+  z-index: 8;
+  height: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: max(0px, calc((100% - var(--dsh-chat-content-width)) / 2));
+  pointer-events: none;
+}
+
+:global([data-conversation-scroll]) .toBottomSlot {
+  /* Clears the sticky composer stack (docks + input card + stats): the live
+     height rides --dsh-composer-height (ConversationRoot's seat observer) so
+     the control follows a growing textarea; the fallback covers the first
+     paint before the observer fires. */
+  bottom: calc(var(--dsh-composer-height, 152px) + 16px);
+}
+
+.toBottom {
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 34px;
+  height: 34px;
+  margin-top: -34px;
   padding: 0;
   border: 1px solid var(--dsw-alias-border-l2);
   border-radius: 100px;
@@ -130,6 +195,7 @@
   background: var(--dsw-alias-button-floating-fill);
   box-shadow: var(--dsw-shadow-lv2);
   cursor: pointer;
+  pointer-events: auto;
 }
 
 .toBottom:hover {

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

@@ -1,11 +1,16 @@
 // ChatView: the default conversation view — message flow with user bubbles,
 // assistant narration, tool summary rows grouped into step runs, pending
-// cards, paging, bottom-follow, and the session stats line under the flow
-// (chrome dissolved into the view: the footer is part of what a chat view
-// IS, not registration metadata). Pure component registered directly; its
-// registration declares the keyed 'conversation.chat.toolview' hole, so tool
-// rows render through the props renderSlot share (entryKey = tool name,
-// GenericToolCard as the render-site fallback).
+// cards, paging, and bottom-follow. Session stats live on
+// 'conversation.composer.dock' (sticky with the composer). Pure component
+// registered directly; its registration declares the keyed
+// 'conversation.chat.toolview' hole, so tool rows render through the props
+// renderSlot share (entryKey = tool name, GenericToolCard as the render-site
+// fallback).
+//
+// Scroll: when nested under `[data-conversation-scroll]` (active conversation
+// column), that host is the scrollport and this view is flow content; when
+// mounted alone (unit tests), `.scroll` owns overflow. Bottom-follow and
+// prepend anchoring always target the resolved scrollport.
 //
 // Render economics (architecture RFC performance model): the list parent
 // subscribes to snapshot segments that do NOT change per streaming chunk
@@ -17,7 +22,7 @@
 // memoized rows never churns them.
 
 import {
-  memo, useLayoutEffect, useMemo, useRef, useState, type ReactNode,
+  memo, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode,
 } from 'react'
 import type {
   CodeSubCall, CommandNode, ConversationNode, ConversationSnapshot, RunningToolCall, ToolResultNode,
@@ -25,46 +30,139 @@ import type {
 import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots'
 import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ChatViewSlotProps } from '../contract/slots.ts'
-import { deriveChatFlow, type ChatFlowItem } from './chat-flow.ts'
+import { assistantActionsSeqs, deriveChatFlow, messageBranchSeqs, runningTurnStartTime, type ChatFlowItem } from './chat-flow.ts'
 import { AssistantMarkdown } from './AssistantMarkdown.tsx'
 import { GenericCommandCard } from './GenericCommandCard.tsx'
 import { GenericToolCard } from './GenericToolCard.tsx'
-import { MessageItem } from './MessageItem.tsx'
-import { StatsLine } from './StatsLine.tsx'
+import { MessageItem, PendingSteeringBubble } from './MessageItem.tsx'
+import { formatRunDuration } from './message-chrome.ts'
 import css from './ChatView.module.css'
 
 const FOLLOW_THRESHOLD = 24
 
+/** Active column host when present; otherwise the view-local scroller. */
+function scrollerOf(from: HTMLElement): HTMLElement {
+  return (from.closest('[data-conversation-scroll]')) ?? from
+}
+
+interface PagingAnchor {
+  /** Stable node/call identity, independent of boundary-spanning group keys. */
+  key: string
+  /** Row top relative to the scrollport after the latest user scroll. */
+  top: number
+}
+
+/** Find an already-rendered settled row without interpolating a selector. */
+function anchorElement(list: HTMLElement, key: string): HTMLElement | null {
+  for (const row of list.querySelectorAll<HTMLElement>('[data-chat-anchor-key]')) {
+    if (row.dataset.chatAnchorKey === key) return row
+  }
+  return null
+}
+
+/** Row position in scrollport coordinates (viewport-independent). */
+function flowTop(row: HTMLElement, scrollport: HTMLElement): number {
+  return row.getBoundingClientRect().top - scrollport.getBoundingClientRect().top
+}
+
+/** Select a visible stable node/call identity, falling back only when layout
+ * has not exposed a visible box yet. */
+function pagingAnchor(list: HTMLElement, scrollport: HTMLElement): HTMLElement | null {
+  const viewport = scrollport.getBoundingClientRect()
+  const composer = scrollport.querySelector<HTMLElement>('[data-composer-seat]')
+  const visibleBottom = composer?.getBoundingClientRect().top ?? viewport.bottom
+  // Scroll events are hot: hit-test a few points through the stretched flow
+  // rows before considering the full mounted set. The fallback keeps jsdom
+  // and pre-layout states deterministic; a virtualizer naturally bounds it.
+  if (typeof document.elementsFromPoint === 'function' && visibleBottom > viewport.top) {
+    const content = list.getBoundingClientRect()
+    const left = Math.max(viewport.left, content.left)
+    const right = Math.min(viewport.right, content.right)
+    const x = left + Math.max(0, right - left) / 2
+    const height = visibleBottom - viewport.top
+    const points = [1, Math.min(32, height / 3), height / 2, Math.max(1, height - 1)]
+    for (const offset of points) {
+      for (const element of document.elementsFromPoint(x, viewport.top + offset)) {
+        const row = element instanceof HTMLElement
+          ? element.closest<HTMLElement>('[data-chat-anchor-key]')
+          : null
+        if (row !== null && list.contains(row)) return row
+      }
+    }
+  }
+  const rows = [...list.querySelectorAll<HTMLElement>('[data-chat-anchor-key]')]
+  const visibleRows = rows.filter((row) => {
+    const rect = row.getBoundingClientRect()
+    return rect.bottom > viewport.top && rect.top < visibleBottom
+  })
+  return visibleRows[0] ?? rows[0] ?? null
+}
+
 type OpenFile = (path: string) => void
 
+type InspectCall = (callId: string) => void
+
 /** The declared toolview hole's render share (stable framework binding, passed through memoized rows). */
 type RenderToolRow = ChatViewSlotProps['renderSlot']
 
+type ChatScrollPosition = NonNullable<ReturnType<ChatViewSlotProps['chatScroll']['read']>>
+
 /** ui-slots' UseSession is deliberately wide (dependency direction); the
  *  chat view narrows once to the runtime snapshot the binding actually feeds. */
 type UseConversation = SnapshotSelectorHook<ConversationSnapshot>
 
+function activeRetrySeq(nodes: readonly ConversationNode[], running: boolean): number | null {
+  if (!running) return null
+  for (let index = nodes.length - 1; index >= 0; index -= 1) {
+    const node = nodes[index]
+    if (node === undefined) continue
+    if (node.kind === 'model-retry') return node.retryState === 'cancelled' ? null : node.seq
+    if (node.kind === 'assistant' || node.kind === 'user') return null
+  }
+  return null
+}
+
+/** Capture a reflow-resistant reader position from the current rendered window. */
+function scrollPosition(list: HTMLElement, scrollport: HTMLElement): ChatScrollPosition | null {
+  const row = pagingAnchor(list, scrollport)
+  const anchorKey = row?.dataset.chatAnchorKey
+  if (row === null || anchorKey === undefined) return null
+  return {
+    anchorKey,
+    anchorTop: flowTop(row, scrollport),
+    scrollTop: scrollport.scrollTop,
+  }
+}
+
 /** One `run_code` sub-dispatch row: the identical keyed-slot dispatch as a
  *  top-level call (same registrations, same fallback), nested by the parent.
  *  A started-but-unsettled sub-call arrives as the RunningToolCall shape and
  *  renders the running state exactly as a native in-flight row. */
-const SubCallRow = memo(function SubCallRow({ renderSlot, node, openFile, selected, cwd }: {
+const SubCallRow = memo(function SubCallRow({ renderSlot, node, openFile, selected, cwd, inspectCall, t }: {
   renderSlot: RenderToolRow
   node: CodeSubCall
   openFile: OpenFile
   selected: boolean
   cwd: string | undefined
+  inspectCall: InspectCall
+  t: ChatViewSlotProps['t']
 }) {
   const settled = 'kind' in node
   const toolName = settled ? node.call?.name ?? '' : node.name
   const owner = useMemo(() => ({
     callId: node.callId, toolName, block: node, openFile, cwd,
-  }), [node, toolName, openFile, cwd])
+    inspect: () => { inspectCall(node.callId) },
+  }), [node, toolName, openFile, cwd, inspectCall])
   return (
-    <div className={css.callRow} data-selected={selected || undefined}>
+    <div
+      className={css.callRow}
+      data-chat-anchor-key={`call:${node.callId}`}
+      data-chat-call-id={node.callId}
+      data-selected={selected || undefined}
+    >
       {renderSlot('conversation.chat.toolview', owner, {
         entryKey: toolName,
-        fallback: <GenericToolCard {...owner} />,
+        fallback: <GenericToolCard {...owner} t={t} />,
       })}
     </div>
   )
@@ -76,7 +174,7 @@ const SubCallRow = memo(function SubCallRow({ renderSlot, node, openFile, select
  *  renders its logged sub-dispatches as always-visible indented rows —
  *  each one the same keyed-slot dispatch as a native top-level call. */
 const CallRow = memo(function CallRow({
-  renderSlot, callId, toolName, block, openFile, selected, subCalls, selectedCallId, cwd,
+  renderSlot, callId, toolName, block, openFile, selected, subCalls, selectedCallId, cwd, inspectCall, t,
 }: {
   renderSlot: RenderToolRow
   callId: string
@@ -91,15 +189,23 @@ const CallRow = memo(function CallRow({
   selectedCallId?: string | undefined
   /** Session workspace root for path-relative summaries. */
   cwd: string | undefined
+  inspectCall: InspectCall
+  t: ChatViewSlotProps['t']
 }) {
   const owner = useMemo(() => ({
     callId, toolName, block, openFile, cwd,
-  }), [callId, toolName, block, openFile, cwd])
+    inspect: () => { inspectCall(callId) },
+  }), [callId, toolName, block, openFile, cwd, inspectCall])
   return (
-    <div className={css.callRow} data-selected={selected || undefined}>
+    <div
+      className={css.callRow}
+      data-chat-anchor-key={`call:${callId}`}
+      data-chat-call-id={callId}
+      data-selected={selected || undefined}
+    >
       {renderSlot('conversation.chat.toolview', owner, {
         entryKey: toolName,
-        fallback: <GenericToolCard {...owner} />,
+        fallback: <GenericToolCard {...owner} t={t} />,
       })}
       {subCalls !== undefined && subCalls.length > 0 && (
         <div className={css.subCalls} data-subcalls>
@@ -111,6 +217,8 @@ const CallRow = memo(function CallRow({
               openFile={openFile}
               selected={node.callId === selectedCallId}
               cwd={cwd}
+              inspectCall={inspectCall}
+              t={t}
             />
           ))}
         </div>
@@ -120,7 +228,7 @@ const CallRow = memo(function CallRow({
 })
 
 /** Consecutive tool results as one step-run group (uniform 16px rhythm). */
-const ToolGroup = memo(function ToolGroup({ renderSlot, results, openFile, selectedCallId, codeDispatches, cwd }: {
+const ToolGroup = memo(function ToolGroup({ renderSlot, results, openFile, selectedCallId, codeDispatches, cwd, inspectCall, t }: {
   renderSlot: RenderToolRow
   results: readonly ToolResultNode[]
   openFile: OpenFile
@@ -130,6 +238,8 @@ const ToolGroup = memo(function ToolGroup({ renderSlot, results, openFile, selec
   codeDispatches: ReadonlyMap<string, readonly CodeSubCall[]>
   /** Session workspace root for path-relative summaries. */
   cwd: string | undefined
+  inspectCall: InspectCall
+  t: ChatViewSlotProps['t']
 }) {
   return (
     <div className={css.toolGroup}>
@@ -145,6 +255,8 @@ const ToolGroup = memo(function ToolGroup({ renderSlot, results, openFile, selec
           subCalls={codeDispatches.get(node.callId)}
           selectedCallId={selectedCallId}
           cwd={cwd}
+          inspectCall={inspectCall}
+          t={t}
         />
       ))}
     </div>
@@ -154,160 +266,315 @@ const ToolGroup = memo(function ToolGroup({ renderSlot, results, openFile, selec
 /** One command lifecycle row: keyed dispatch on the command name with the
  *  generic card as the render-site fallback (zero registration required). A
  *  run-less cross-window node has no name and always lands on the fallback. */
-const CommandRow = memo(function CommandRow({ renderSlot, node }: {
+const CommandRow = memo(function CommandRow({ renderSlot, node, t }: {
   renderSlot: RenderToolRow
   node: CommandNode
+  t: ChatViewSlotProps['t']
 }) {
   const owner = useMemo(() => ({ node }), [node])
   return (
     <div className={css.callRow}>
       {renderSlot('conversation.chat.commandview', owner, {
         entryKey: node.name ?? '',
-        fallback: <GenericCommandCard {...owner} />,
+        fallback: <GenericCommandCard {...owner} t={t} />,
       })}
     </div>
   )
 })
 
-/** Turn loader: one row of four 2.5px pixels (half a notch above the StateDot
- *  2px cell, same blue) chasing left to right with a stepped trail — flat
- *  keyframe holds, no tweening, no rotation. Phase offsets come from
- *  per-rect animation-delay. */
-const LOADER_CELLS = [0, 5, 10, 15] as const
-
-function TurnDots() {
+/** Turn-level model activity label retained across first-token, tool, and streaming phases. */
+function TurnStatus({ startTime, t }: {
+  /** The running turn's logged `turn/start` time; null falls back to mount
+   *  time when that boundary is outside the window. */
+  startTime: number | null
+  /** The owning view's locale seat. */
+  t: ChatViewSlotProps['t']
+}) {
+  const [mountedAt] = useState(() => Date.now())
+  // Anchored to turn/start so a mid-turn reload keeps the real
+  // elapsed time and the final footer's Ran-for label matches this clock.
+  const anchor = startTime ?? mountedAt
+  const [elapsedMs, setElapsedMs] = useState(() => Math.max(0, Date.now() - anchor))
+  useEffect(() => {
+    const tick = (): void => {
+      setElapsedMs(Math.max(0, Date.now() - anchor))
+    }
+    tick()
+    const id = setInterval(tick, 1000)
+    return () => { clearInterval(id) }
+  }, [anchor])
+  // Short turns keep the plain label; the clock only appears once the turn
+  // has clearly been running for a while.
+  const showClock = elapsedMs >= 15_000
   return (
-    /* The wrapper is a 26px line box (message line height) so the loader
-       occupies one text line and centers the dots inside it. */
-    <div className={css.turnDots} aria-hidden="true">
-      <svg
-        width="17.5"
-        height="2.5"
-        viewBox="0 0 17.5 2.5"
-        shapeRendering="crispEdges"
-      >
-        {LOADER_CELLS.map((x, index) => (
-          <rect
-            key={x}
-            className={css.turnDotCell}
-            x={x}
-            y="0"
-            width="2.5"
-            height="2.5"
-            /* Negative delay phases the chase so every cell animates from mount. */
-            style={{ animationDelay: `${(index - LOADER_CELLS.length) * 250}ms` }}
-          />
-        ))}
-      </svg>
+    <div className={css.turnStatus} role="status" aria-live="polite">
+      Deep diving...
+      {showClock && (
+        <span className={css.turnStatusClock} aria-hidden>
+          {formatRunDuration(elapsedMs, t)}
+        </span>
+      )}
     </div>
   )
 }
 
-/** The streaming partial, isolated so chunk batches re-render only this tail.
- *  onGrow lets the scroll owner follow content the parent never re-renders for. */
-function StreamingTail({ useSession, onGrow }: {
+/** The streaming partial, isolated so chunk batches re-render only this tail;
+ *  the column ResizeObserver owns bottom-follow when its box grows. */
+function StreamingTail({ useSession, t }: {
   useSession: UseConversation
-  onGrow: () => void
+  t: ChatViewSlotProps['t']
 }) {
   const partial = useSession(s => s.partial)
-  useLayoutEffect(() => {
-    onGrow()
-  })
   if (partial === null) return null
-  return <AssistantMarkdown blocks={partial.blocks} streaming />
+  return <AssistantMarkdown blocks={partial.blocks} streaming t={t} />
 }
 
 /**
  * The chat view slot entry: pure component over the composed props (tool rows
  * render through the declared keyed hole's renderSlot share).
  */
-export function ChatView({ useSession, useSessions, useStore, renderSlot, sessionId, openFile, loadOlder }: ChatViewSlotProps) {
+export function ChatView({
+  useSession, useSessions, useStore, renderSlot, sessionId, openFile, loadOlder, inspectCall, chatScroll, forkAt, t,
+}: ChatViewSlotProps) {
   const nodes = useSession(s => s.nodes)
+  const turnTimings = useSession(s => s.turnTimings)
+  const turnEnds = useSession(s => s.turnEnds)
+  const inbox = useSession(s => s.queue)
   // Workspace root off the session list row: path summaries display relative to it.
   const cwd = useSessions(s => s.byId[sessionId]?.cwd)
   const running = useSession(s => s.running)
   const runningCalls = useSession(s => s.runningCalls)
   const codeDispatches = useSession(s => s.codeDispatches)
   const openState = useSession(s => s.openState)
-  const openErrorMessage = useSession(s => s.openError === null ? null : `${s.openError.message}（${s.openError.code}）`)
+  const openError = useSession(s => s.openError)
   const hasMore = useSession(s => s.hasMore)
   const loadingOlder = useSession(s => s.loadingOlder)
   const selectedCallId = useStore(s => s.selection?.callId)
 
   const items = useMemo(() => deriveChatFlow(nodes), [nodes])
+  const pendingSteering = useMemo(
+    () => inbox.filter(item => item.placement === 'steering'),
+    [inbox],
+  )
+  const activeRetry = useMemo(() => activeRetrySeq(nodes, running), [nodes, running])
+  // Only the last content assistant of each turn owns IconActions; mid-turn
+  // text (before tools) omits `time` so AssistantMarkdown stays chrome-free.
+  const actionSeqs = useMemo(() => assistantActionsSeqs(nodes), [nodes])
+  const branchSeqs = useMemo(() => messageBranchSeqs(nodes, turnEnds), [nodes, turnEnds])
+  const runningTurnStart = useMemo(() => runningTurnStartTime(turnTimings), [turnTimings])
 
   const listRef = useRef<HTMLDivElement | null>(null)
+  const columnRef = useRef<HTMLDivElement | null>(null)
   const atBottomRef = useRef(true)
   const [atBottom, setAtBottom] = useState(true)
-  /** Paging anchor: height/position at click, compensated after the prepend lands. */
-  const anchorRef = useRef<{ h: number; t: number } | null>(null)
+  /** Last position delivered or written on the main thread. */
+  const observedTopRef = useRef(0)
+  /** Pre-input position for the current wheel gesture. */
+  const wheelStartRef = useRef<number | null>(null)
+  const wheelEpochRef = useRef(0)
+  /** Paging anchor: semantic row/position at click, updated by reader scrolls
+   * while the request is pending and restored after the prepend lands. */
+  const anchorRef = useRef<PagingAnchor | null>(null)
   const firstSeqRef = useRef<number | null>(null)
   const openedRef = useRef(false)
   const lastKeyRef = useRef<string | null>(null)
+  const lastSteeringIdRef = useRef<string | null>(null)
+  /** Flow tip signature — follow-scroll only when this moves, never on a
+   *  scroll-driven at-bottom chrome re-render (that was snapping inertial
+   *  scrolls the rest of the way to the floor). */
+  const followSigRef = useRef<string | null>(null)
 
   const firstSeq = nodes[0]?.seq ?? null
   const lastItem = items[items.length - 1]
+  const lastKey = lastItem?.key ?? null
+  const lastSteeringId = pendingSteering[pendingSteering.length - 1]?.id ?? null
+  const followSig = `${openState}:${firstSeq}:${lastKey}:${nodes.length}:${running ? 1 : 0}:${runningCalls.length}:${lastSteeringId ?? ''}`
 
-  const toBottom = (el: HTMLDivElement): void => {
+  const toBottom = (el: HTMLElement): void => {
+    wheelStartRef.current = null
+    wheelEpochRef.current += 1
+    anchorRef.current = null
     el.scrollTop = el.scrollHeight
+    observedTopRef.current = el.scrollTop
     atBottomRef.current = true
     setAtBottom(true)
+    chatScroll.save(null)
   }
 
   useLayoutEffect(() => {
-    const el = listRef.current
+    const local = listRef.current
     /* v8 ignore next -- ref-null guard: React attaches the ref before layout effects run. */
-    if (el === null) return
-    // Open completed: jump to the bottom once.
+    if (local === null) return
+    const el = scrollerOf(local)
+    // Open completed: jump to the bottom once — unless a scroll position
+    // survives from a previous mount (view-tab switch away and back), which
+    // is restored instead of snapping the reader back to the floor.
     if (openState === 'open' && !openedRef.current) {
       openedRef.current = true
-      toBottom(el)
+      const saved = chatScroll.read()
+      if (saved === null) {
+        toBottom(el)
+      } else {
+        el.scrollTop = saved.scrollTop
+        const row = anchorElement(local, saved.anchorKey)
+        if (row !== null) el.scrollTop += flowTop(row, el) - saved.anchorTop
+        observedTopRef.current = el.scrollTop
+        const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= FOLLOW_THRESHOLD + 1
+        atBottomRef.current = isAtBottom
+        setAtBottom(isAtBottom)
+        const normalized = isAtBottom ? null : scrollPosition(local, el)
+        if (isAtBottom) chatScroll.save(null)
+        else if (normalized !== null) chatScroll.save(normalized)
+      }
       firstSeqRef.current = firstSeq
-      lastKeyRef.current = lastItem?.key ?? null
+      lastKeyRef.current = lastKey
+      lastSteeringIdRef.current = lastSteeringId
+      followSigRef.current = followSig
       return
     }
-    // Prepend (head seq decreased): compensate by the height delta.
+    // Prepend (head seq decreased): preserve the same settled row at the
+    // position established by the reader's latest scroll. This excludes
+    // unrelated tail/composer growth while the request was in flight.
     if (anchorRef.current !== null && firstSeq !== null && firstSeqRef.current !== null && firstSeq < firstSeqRef.current) {
-      el.scrollTop = anchorRef.current.t + (el.scrollHeight - anchorRef.current.h)
+      const anchor = anchorRef.current
       anchorRef.current = null
+      const row = anchorElement(local, anchor.key)
+      if (row !== null) el.scrollTop += flowTop(row, el) - anchor.top
+      observedTopRef.current = el.scrollTop
       firstSeqRef.current = firstSeq
       /* v8 ignore next -- ?? arm: a prepend adds nodes, so the flow list here is never empty. */
-      lastKeyRef.current = lastItem?.key ?? null
+      lastKeyRef.current = lastKey
+      lastSteeringIdRef.current = lastSteeringId
+      followSigRef.current = followSig
       return
     }
     firstSeqRef.current = firstSeq
     // Own words must be visible: a new trailing user node force-scrolls
     // (send lives in the composer, so arrival is detected here, not armed there).
-    const lastKey = lastItem?.key ?? null
     const appendedUser = lastKey !== lastKeyRef.current
       && lastItem !== undefined && lastItem.kind === 'node' && lastItem.node.kind === 'user'
+    const appendedSteering = lastSteeringId !== null && lastSteeringId !== lastSteeringIdRef.current
+    const tipMoved = followSigRef.current !== followSig
     lastKeyRef.current = lastKey
-    if (appendedUser || atBottomRef.current) toBottom(el)
+    lastSteeringIdRef.current = lastSteeringId
+    followSigRef.current = followSig
+    // Follow new flow content while pinned; do NOT re-pin on every render
+    // merely because atBottomRef is true (scroll threshold → setState → snap).
+    if (appendedUser || appendedSteering || (tipMoved && atBottomRef.current)) toBottom(el)
   })
 
-  const onScroll = (): void => {
-    const el = listRef.current
-    /* v8 ignore next -- ref-null guard: the handler only fires on the mounted element. */
-    if (el === null) return
-    const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= FOLLOW_THRESHOLD + 1
+  const onScrollRef = useRef(() => {})
+  onScrollRef.current = () => {
+    const local = listRef.current
+    /* v8 ignore next -- ref-null guard: the handler only fires while mounted. */
+    if (local === null) return
+    const el = scrollerOf(local)
+    // Only wheel input may make raw scroll geometry change follow ownership.
+    // Browser clamping and delayed programmatic scroll events otherwise have
+    // the same event shape and must preserve the current ownership state.
+    const floor = Math.max(0, el.scrollHeight - el.clientHeight)
+    const wheelStart = wheelStartRef.current
+    const movedByWheel = wheelStart !== null
+      && Math.abs(el.scrollTop - Math.min(wheelStart, floor)) > 0.5
+    const isAtBottom = movedByWheel
+      ? floor - el.scrollTop <= FOLLOW_THRESHOLD + 1
+      : atBottomRef.current
+    if (!movedByWheel && isAtBottom) {
+      toBottom(el)
+      return
+    }
     atBottomRef.current = isAtBottom
     setAtBottom(isAtBottom)
+    const position = isAtBottom ? null : scrollPosition(local, el)
+    if (isAtBottom) {
+      anchorRef.current = null
+    } else if (anchorRef.current !== null && position !== null) {
+      anchorRef.current = { key: position.anchorKey, top: position.anchorTop }
+    }
+    // Continuous save (unmount happens after ref detach, so saving there is
+    // too late); pinned-to-bottom clears so a remount keeps following.
+    if (isAtBottom) chatScroll.save(null)
+    else if (position !== null) chatScroll.save(position)
+    observedTopRef.current = el.scrollTop
   }
 
-  // Follow streaming growth the parent never re-renders for (stable ref).
+  // Bind scroll and the wheel provenance needed to distinguish reader input
+  // from layout-driven scrolls on the resolved scrollport once per mount.
+  useEffect(() => {
+    const local = listRef.current
+    /* v8 ignore next -- ref-null guard: effect runs after the list node commits. */
+    if (local === null) return
+    const el = scrollerOf(local)
+    const onScroll = (): void => { onScrollRef.current() }
+    const onWheel = (event: WheelEvent): void => {
+      if (event.ctrlKey || event.deltaY === 0) return
+      const startTop = observedTopRef.current
+      const floor = Math.max(0, el.scrollHeight - el.clientHeight)
+      const canMove = event.deltaY < 0 ? startTop > 1 : startTop < floor - 1
+      if (!canMove) return
+      wheelStartRef.current = startTop
+      const epoch = ++wheelEpochRef.current
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (wheelEpochRef.current === epoch) wheelStartRef.current = null
+        })
+      })
+    }
+    el.addEventListener('scroll', onScroll, { passive: true })
+    el.addEventListener('wheel', onWheel, { capture: true, passive: true })
+    return () => {
+      wheelStartRef.current = null
+      el.removeEventListener('scroll', onScroll)
+      el.removeEventListener('wheel', onWheel, true)
+    }
+  }, [])
+
   // The ref starts null and is assigned every render, so the placeholder
   // initializer a function initial value would need never exists.
   const followRef = useRef<(() => void) | null>(null)
   followRef.current = () => {
-    const el = listRef.current
-    if (el !== null && atBottomRef.current) el.scrollTop = el.scrollHeight
+    const local = listRef.current
+    if (local !== null && atBottomRef.current) {
+      const el = scrollerOf(local)
+      el.scrollTop = el.scrollHeight
+      observedTopRef.current = el.scrollTop
+      chatScroll.save(null)
+    }
   }
-  const onGrow = useRef(() => followRef.current?.()).current
+  // Streaming, tool disclosures, and other flow changes resize the column;
+  // the sticky composer resizes outside it. This observer owns ChatView's
+  // dynamic-height follow decisions and writes only while the reader is pinned.
+  useEffect(() => {
+    const column = columnRef.current
+    const local = listRef.current
+    if (column === null || local === null || typeof ResizeObserver === 'undefined') return
+    const scrollport = scrollerOf(local)
+    const composer = scrollport.querySelector<HTMLElement>('[data-composer-seat]')
+    const observer = new ResizeObserver(() => { followRef.current?.() })
+    observer.observe(column)
+    if (composer !== null) observer.observe(composer)
+    return () => { observer.disconnect() }
+  }, [])
+
+  // A failed/empty page leaves the head unchanged. Once the request leaves
+  // its busy state there is no future prepend for the saved anchor to own.
+  useEffect(() => {
+    if (!loadingOlder) anchorRef.current = null
+  }, [loadingOlder])
 
   const loadOlderAnchored = (): void => {
-    const el = listRef.current
+    const local = listRef.current
     /* v8 ignore next -- ref-null guard: the paging button renders inside the list tree. */
-    if (el !== null) anchorRef.current = { h: el.scrollHeight, t: el.scrollTop }
+    if (local !== null) {
+      const el = scrollerOf(local)
+      const row = pagingAnchor(local, el)
+      if (row !== null && row.dataset.chatAnchorKey !== undefined) {
+        anchorRef.current = {
+          key: row.dataset.chatAnchorKey,
+          top: flowTop(row, el),
+        }
+      }
+    }
     loadOlder()
   }
 
@@ -318,51 +585,81 @@ export function ChatView({ useSession, useSessions, useStore, renderSlot, sessio
           || codeDispatches.get(r.callId)?.some(sub => sub.callId === selectedCallId) === true)
       return (
         <ToolGroup
-          key={item.key}
           renderSlot={renderSlot}
           results={item.results}
           openFile={openFile}
           selectedCallId={inGroup ? selectedCallId : undefined}
           codeDispatches={codeDispatches}
           cwd={cwd}
+          inspectCall={inspectCall}
+          t={t}
         />
       )
     }
     const node: ConversationNode = item.node
     if (node.kind === 'assistant') {
+      const timing = actionSeqs.has(node.seq) ? turnTimings.get(node.turn) : undefined
       return (
         <AssistantMarkdown
-          key={item.key}
           blocks={node.blocks}
           streaming={false}
           interrupted={node.interrupted}
-          time={node.time}
+          time={actionSeqs.has(node.seq) ? node.time : undefined}
+          runMs={timing?.endTime === undefined
+            ? undefined
+            : Math.max(0, timing.endTime - timing.startTime)}
+          seq={node.seq}
+          onFork={forkAt}
+          forkUnavailable={!branchSeqs.has(node.seq)}
+          t={t}
         />
       )
     }
     if (node.kind === 'command') {
-      return <CommandRow key={item.key} renderSlot={renderSlot} node={node} />
+      return <CommandRow renderSlot={renderSlot} node={node} t={t} />
     }
     /* v8 ignore next -- tool-result never reaches here: deriveChatFlow folds them into groups. */
     if (node.kind === 'tool-result') return null
-    return <MessageItem key={item.key} node={node} />
+    return (
+      <MessageItem
+        node={node}
+        retryActive={node.kind === 'model-retry' && node.seq === activeRetry}
+        onFork={forkAt}
+        forkUnavailable={!branchSeqs.has(node.seq)}
+        t={t}
+      />
+    )
   }
 
   return (
     <div className={css.root}>
-      <div ref={listRef} className={css.scroll} onScroll={onScroll}>
-        <div className={css.column}>
-          {openState === 'loading' && <div className={css.hint}>载入历史…</div>}
-          {openState === 'error' && <div className={css.openError}>历史加载失败：{openErrorMessage}</div>}
+      <div ref={listRef} className={css.scroll}>
+        <div ref={columnRef} className={css.column} data-chat-flow="">
+          {openState === 'loading' && <div className={css.hint}>{t('chat.loadingHistory')}</div>}
+          {openState === 'error' && openError !== null && (
+            <div className={css.openError}>
+              {t('chat.loadError', { message: openError.message, code: openError.code })}
+            </div>
+          )}
           {hasMore && (
             <div className={css.older}>
               <button type="button" disabled={loadingOlder} onClick={loadOlderAnchored}>
-                {loadingOlder ? '加载中…' : '加载更早'}
+                {loadingOlder ? t('loading') : t('chat.loadOlder')}
               </button>
             </div>
           )}
-          {items.map(renderItem)}
-          <StreamingTail useSession={useSession} onGrow={onGrow} />
+          {items.map(item => (
+            <div
+              key={item.key}
+              className={css.flowItem}
+              data-chat-anchor-key={item.kind === 'node' ? `node:${String(item.node.seq)}` : undefined}
+              data-chat-flow-key={item.key}
+              data-chat-flow-kind={item.kind === 'node' ? item.node.kind : 'tool-group'}
+            >
+              {renderItem(item)}
+            </div>
+          ))}
+          <StreamingTail useSession={useSession} t={t} />
           {runningCalls.length > 0 && (
             <div className={css.toolGroup}>
               {runningCalls.map(call => (
@@ -377,6 +674,8 @@ export function ChatView({ useSession, useSessions, useStore, renderSlot, sessio
                   subCalls={codeDispatches.get(call.callId)}
                   selectedCallId={selectedCallId}
                   cwd={cwd}
+                  inspectCall={inspectCall}
+                  t={t}
                 />
               ))}
             </div>
@@ -386,24 +685,28 @@ export function ChatView({ useSession, useSessions, useStore, renderSlot, sessio
               double-render the same wait. */}
           {/* Turn-level loading signal: rides the whole running turn (first-token
               wait, tool execution, streaming) so it never flickers per step. */}
-          {running && <TurnDots />}
+          {running && <TurnStatus startTime={runningTurnStart} t={t} />}
+          {pendingSteering.map(item => (
+            <PendingSteeringBubble key={item.id} content={item.content} t={t} />
+          ))}
         </div>
+        {!atBottom && (
+          <div className={css.toBottomSlot}>
+            <button
+              type="button"
+              className={css.toBottom}
+              aria-label={t('chat.toBottom')}
+              onClick={() => {
+                const local = listRef.current
+                /* v8 ignore next -- ref-null guard: the button only renders alongside the mounted list. */
+                if (local !== null) toBottom(scrollerOf(local))
+              }}
+            >
+              <IconChevronDownOutline14 />
+            </button>
+          </div>
+        )}
       </div>
-      <StatsLine useSession={useSession} />
-      {!atBottom && (
-        <button
-          type="button"
-          className={css.toBottom}
-          aria-label="回到底部"
-          onClick={() => {
-            const el = listRef.current
-            /* v8 ignore next -- ref-null guard: the button only renders alongside the mounted list. */
-            if (el !== null) toBottom(el)
-          }}
-        >
-          <IconChevronDownOutline14 />
-        </button>
-      )}
     </div>
   )
 }

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

@@ -0,0 +1,56 @@
+// CompactionItem: the one row a landed compaction contributes to the flow.
+// The conversation it shadowed on the model surface stays above it, so this
+// marker reports where the model stopped seeing that history — it never
+// replaces it. The framed checkpoint payload is written for the model and is
+// not rendered; the disclosure shows the summary from the checkpoint's own
+// provenance, and a window cut that left that provenance outside makes the row
+// non-expandable rather than empty.
+
+import { memo, useState } from 'react'
+import type { CompactionSummaryNode } from '@deepseek-ai/dsh-client-runtime/client'
+import {
+  IconChevronDownOutline14,
+  IconChevronRightOutline14,
+  MarkdownText,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ChatViewSlotProps } from '../contract/slots.ts'
+import css from './MessageItem.module.css'
+
+interface CompactionItemProps {
+  node: CompactionSummaryNode
+  /** The owning view's locale seat. */
+  t: ChatViewSlotProps['t']
+}
+
+/**
+ * The collapsed-by-default compaction marker.
+ * @param props - the marker node off the snapshot cache.
+ * @returns the marker row, with the summary disclosure when one is available.
+ */
+export const CompactionItem = memo(function CompactionItem({ node, t }: CompactionItemProps) {
+  const [expanded, setExpanded] = useState(false)
+  const expandable = node.summary !== null
+  const open = expandable && expanded
+  return (
+    <div className={css.compactionRow}>
+      <button
+        type="button"
+        className={css.compactionButton}
+        disabled={!expandable}
+        aria-expanded={expandable ? open : undefined}
+        onClick={() => { setExpanded(value => !value) }}
+      >
+        <span className={css.compactionLeading}>
+          {open ? <IconChevronDownOutline14 /> : <IconChevronRightOutline14 />}
+        </span>
+        <span className={css.compactionTitle}>{t('message.compaction')}</span>
+        <span className={css.compactionSep} aria-hidden />
+        <span className={css.compactionSummary}>
+          {expandable ? t('message.compaction.expand') : t('message.compaction.unavailable')}
+        </span>
+      </button>
+      {open && node.summary !== null
+        && <div className={css.compactionBody}><MarkdownText text={node.summary} /></div>}
+    </div>
+  )
+})

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

@@ -0,0 +1,29 @@
+/* Figma 10:2482: 24px Tool calls header, 4px gap, 141px code block cap. */
+
+.root {
+  min-width: 0;
+}
+
+.root[data-open] {
+  padding-bottom: 4px;
+}
+
+.chevron {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.body {
+  box-sizing: border-box;
+  width: calc(100% - 22px);
+  max-height: 141px;
+  margin: 4px 0 0 22px;
+  overflow: auto;
+  padding: 10px 16px 12px 12px;
+  border: none;
+  border-radius: 8px;
+  background: var(--dsw-alias-markdown-code-block);
+  color: var(--dsw-alias-label-tertiary);
+  font: 400 11px/16px var(--ds-font-family-code);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

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

@@ -0,0 +1,84 @@
+import { useMemo, useState } from 'react'
+import type { ContextMessageNode } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ChatViewSlotProps } from '../contract/slots.ts'
+import { IconBrowseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { DisclosureRow } from './DisclosureRow.tsx'
+import css from './ContextInjectionRow.module.css'
+
+const MAX_CHARS = 20_000
+
+function inlineJson(payload: unknown): string {
+  const raw = JSON.stringify(payload)
+  let formatted = ''
+  let quoted = false
+  let escaped = false
+
+  for (let index = 0; index < raw.length; index++) {
+    const char = raw.charAt(index)
+    if (quoted) {
+      formatted += char
+      if (escaped) escaped = false
+      else if (char === '\\') escaped = true
+      else if (char === '"') quoted = false
+      continue
+    }
+    if (char === '"') {
+      quoted = true
+      formatted += char
+      continue
+    }
+    if (char === '{' || char === '[') {
+      formatted += char
+      const close = char === '{' ? '}' : ']'
+      if (raw[index + 1] !== close) formatted += ' '
+      continue
+    }
+    if (char === '}' || char === ']') {
+      const open = char === '}' ? '{' : '['
+      if (raw[index - 1] !== open) formatted += ' '
+      formatted += char
+      continue
+    }
+    formatted += char === ':' || char === ',' ? `${char} ` : char
+  }
+  return formatted
+}
+
+/** Props for the logged non-user message presentation. */
+export interface ContextInjectionRowProps {
+  content: ContextMessageNode['content']
+  source: ContextMessageNode['source']
+  /** The owning view's locale seat, passed down as a plain prop. */
+  t: ChatViewSlotProps['t']
+}
+
+/**
+ * Render logged context with the Tool calls disclosure chrome from Figma.
+ * @param props - Durable content and source provenance.
+ * @returns A collapsed context row with a bounded JSON body.
+ */
+export function ContextInjectionRow({ content, source, t }: ContextInjectionRowProps) {
+  const [open, setOpen] = useState(false)
+  const body = useMemo(() => {
+    if (!open) return ''
+    const text = inlineJson({ content, source })
+    return text.length > MAX_CHARS
+      ? `${text.slice(0, MAX_CHARS)}\n${t('json.truncated', { total: text.length })}`
+      : text
+  }, [content, open, source, t])
+
+  return (
+    <DisclosureRow
+      className={css.root}
+      icon={<IconBrowseOutline16 size={14} />}
+      chevronClassName={css.chevron}
+      title={t('message.contextInjection')}
+      open={open}
+      expandable
+      expandOnRowClick
+      onToggle={() => { setOpen(value => !value) }}
+    >
+      <pre className={css.body} data-context-injection-body>{body}</pre>
+    </DisclosureRow>
+  )
+}

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

@@ -0,0 +1,69 @@
+/* Shared Tool calls disclosure header: [16px leading] gap 6 [title 14/24]. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+
+.row {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  min-width: 0;
+}
+
+.row[data-expandable] {
+  cursor: pointer;
+}
+
+.leading {
+  position: relative;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+button.leading {
+  cursor: pointer;
+}
+
+.iconIdle {
+  display: inline-flex;
+  opacity: 1;
+  transition: opacity 100ms ease;
+}
+
+.chevronHover {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.row:hover .iconIdle {
+  opacity: 0;
+}
+
+.row:hover .chevronHover {
+  opacity: 1;
+}
+
+.title {
+  flex: none;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-secondary);
+}

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

@@ -0,0 +1,104 @@
+import { type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'
+import clsx from 'clsx'
+import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './DisclosureRow.module.css'
+
+/** Shared 24px disclosure chrome for conversation flow rows. */
+export interface DisclosureRowProps {
+  icon: ReactNode
+  title: string
+  open: boolean
+  expandable: boolean
+  onToggle: () => void
+  /** Makes the complete title row the disclosure target. */
+  expandOnRowClick?: boolean | undefined
+  /** Replaces the collapsed icon with a chevron while the row is hovered. */
+  previewChevron?: boolean | undefined
+  /** Keeps `collapsedContent` inline while open (ToolRow's summary stays readable next to the expanded card). */
+  keepContentWhenOpen?: boolean | undefined
+  collapsedContent?: ReactNode
+  children?: ReactNode
+  className?: string | undefined
+  rowClassName?: string | undefined
+  leadingClassName?: string | undefined
+  chevronClassName?: string | undefined
+  titleClassName?: string | undefined
+}
+
+/**
+ * Render one disclosure header and its controlled expanded content.
+ * @param props - Visual content, controlled state, and interaction policy.
+ * @returns The disclosure row.
+ */
+export function DisclosureRow({
+  icon,
+  title,
+  open,
+  expandable,
+  onToggle,
+  expandOnRowClick = false,
+  previewChevron = expandable,
+  keepContentWhenOpen = false,
+  collapsedContent,
+  children,
+  className,
+  rowClassName,
+  leadingClassName,
+  chevronClassName,
+  titleClassName,
+}: DisclosureRowProps) {
+  const rowExpands = expandable && expandOnRowClick
+  const toggleFromLeading = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation()
+    onToggle()
+  }
+  const toggleFromKeyboard = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!rowExpands || (event.key !== 'Enter' && event.key !== ' ')) return
+    event.preventDefault()
+    onToggle()
+  }
+  const collapsedLeading = previewChevron
+    ? (
+      <>
+        <span className={css.iconIdle}>{icon}</span>
+        <IconChevronDownOutline14 className={clsx(chevronClassName, css.chevronHover)} />
+      </>
+    )
+    : icon
+  const leading = open
+    ? <IconChevronDownOutline14 className={chevronClassName} />
+    : collapsedLeading
+
+  return (
+    <div className={clsx(css.root, className)} data-open={open || undefined}>
+      <div
+        className={clsx(css.row, rowClassName)}
+        data-disclosure-row
+        data-expandable={rowExpands || undefined}
+        role={rowExpands ? 'button' : undefined}
+        tabIndex={rowExpands ? 0 : undefined}
+        aria-expanded={rowExpands ? open : undefined}
+        onClick={rowExpands ? onToggle : undefined}
+        onKeyDown={rowExpands ? toggleFromKeyboard : undefined}
+      >
+        {expandable && !rowExpands ? (
+          <button
+            type="button"
+            className={clsx(css.leading, leadingClassName)}
+            aria-expanded={open}
+            onClick={toggleFromLeading}
+          >
+            {leading}
+          </button>
+        ) : (
+          <span className={clsx(css.leading, leadingClassName)}>
+            {leading}
+          </span>
+        )}
+        <span className={clsx(css.title, titleClassName)}>{title}</span>
+        {(keepContentWhenOpen || !open) && collapsedContent}
+      </div>
+      {open && children}
+    </div>
+  )
+}

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

@@ -1,12 +1,12 @@
 // GenericCommandCard: the default command row — a stripped-down
-// GenericToolCard rendering the dispatched command line and the settlement
-// text. Supplied by the chat view as the keyed commandview slot's render-site
+// GenericToolCard rendering the command name and its settlement text.
+// Supplied by the chat view as the keyed commandview slot's render-site
 // fallback (an unregistered command name lands here); registrants may compose
 // it as a base, feeding the same owner payload through.
 
 import { ToolRow } from './ToolRow.tsx'
 import type { ToolRowState } from '../contract/tool-call-model.ts'
-import type { CommandRowOwnerProps } from '../contract/slots.ts'
+import type { ChatViewSlotProps, CommandRowOwnerProps } from '../contract/slots.ts'
 import { IconApiOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
 
 /** Node state → row state semantic (running while unsettled; outcome kind after). */
@@ -15,19 +15,26 @@ function stateOf(outcome: CommandRowOwnerProps['node']['outcome']): ToolRowState
   return outcome.kind === 'error' ? 'error' : 'ok'
 }
 
-export function GenericCommandCard({ node }: CommandRowOwnerProps) {
+/** Card props: the owner payload plus the render site's locale seat (plain prop). */
+export interface GenericCommandCardProps extends CommandRowOwnerProps {
+  t: ChatViewSlotProps['t']
+}
+
+export function GenericCommandCard({ node, t }: GenericCommandCardProps) {
   const text = node.outcome?.text
   const summary = node.outcome === null
-    ? '执行中…'
-    : text ?? (node.outcome.kind === 'error' ? '命令失败' : '已完成')
-  // Display line rebuilt from the structured payload (args carries its own
-  // separator whitespace verbatim); a cross-window node whose run page fell
-  // out of the window has neither.
-  const title = node.name === null ? '命令' : `/${node.name}${node.args ?? ''}`
+    ? t('command.running')
+    : text ?? (node.outcome.kind === 'error' ? t('command.failed') : t('command.done'))
+  // Title is the bare command name: the row already reads `name · outcome`,
+  // and the dispatched line's own `/` and arguments only restate what the
+  // settlement text says (`permission · preset workspace-write`). A
+  // cross-window node whose run page fell out of the window has no name.
+  const title = node.name ?? t('command.title')
   return (
     <ToolRow
+      t={t}
       variant="others"
-      icon={<IconApiOutline14 size={16} />}
+      icon={<IconApiOutline14 size={14} />}
       title={title}
       summary={summary}
       // Expandable only when the outcome text overflows a one-line summary.

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

@@ -9,8 +9,12 @@ import {
   IconApiOutline14, IconBrowseOutline16, IconCodeOutline16, IconEditOutline16, IconSearchOutline16, IconSparkle16,
   IconThinkOutline14,
 } from '@deepseek-ai/dsh-client-ui-primitives'
-import type { ToolRowOwnerProps } from '../contract/slots.ts'
-import { terminalCardModel } from '../contract/terminal-card-model.ts'
+import type { ChatViewSlotProps, ToolRowOwnerProps } from '../contract/slots.ts'
+import { readCardModel } from '../contract/read-card-model.ts'
+import { diffCardModel } from '../contract/diff-card-model.ts'
+import { searchCardModel } from '../contract/search-card-model.ts'
+import { terminalCardModel, terminalFailed } from '../contract/terminal-card-model.ts'
+import { webCardModel } from '../contract/web-card-model.ts'
 import { toolRowModel, type ToolRowVariant } from '../contract/tool-call-model.ts'
 import { ToolRow } from './ToolRow.tsx'
 
@@ -26,25 +30,50 @@ const VARIANT_ICONS: Record<ToolRowVariant, ReactNode> = {
   others: <IconSparkle16 size={14} />,
 }
 
-export function GenericToolCard({ toolName, block, cwd, openFile }: ToolRowOwnerProps) {
+/** Card props: the owner payload plus the render site's locale seat (plain prop). */
+export interface GenericToolCardProps extends ToolRowOwnerProps {
+  t: ChatViewSlotProps['t']
+}
+
+export function GenericToolCard({ toolName, block, cwd, openFile, inspect, t }: GenericToolCardProps) {
   const model = toolRowModel(toolName, block, cwd)
   const terminal = terminalCardModel(block, cwd)
+  const read = readCardModel(block, cwd)
+  const diff = diffCardModel(block)
+  const search = searchCardModel(block)
+  const web = webCardModel(block)
+  // A failing exit status is the terminal card's own error signal (the call
+  // itself settles isError:false), surfaced as the row's red state dot.
+  const state = model.state === 'ok' && terminal !== null && terminalFailed(terminal)
+    ? 'error'
+    : model.state
   const singleFile = model.filePath !== undefined
   return (
     <ToolRow
+      t={t}
       variant={model.variant}
       toolName={toolName}
       icon={VARIANT_ICONS[model.variant]}
       title={model.title}
       // A terminal presenter's description is the contract's above-card text, so
-      // it outranks the args-derived summary here exactly as it does in BashRow.
-      summary={terminal?.description ?? model.summary}
-      // Single-file tools never expose an args body — the path link is the only action.
+      // it outranks the args-derived summary here exactly as it does in BashRow;
+      // a search result view's replacement title outranks it the same way.
+      summary={terminal?.description ?? search?.title ?? model.summary}
+      // Single-file tools never expose an args body — the path link is the only
+      // args interaction. A card is not an args body: a read/write/edit row is
+      // single-file AND carries a card, so the card expands under the path link.
       body={singleFile ? null : model.body}
+      output={model.output}
+      errorSummary={model.errorSummary}
       terminal={terminal}
-      state={model.state}
+      diff={diff}
+      read={read}
+      search={search}
+      web={web}
+      state={state}
       filePath={model.filePath}
       onOpenFile={singleFile ? openFile : undefined}
+      inspect={inspect}
     />
   )
 }

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

@@ -1,5 +1,6 @@
 /* Shared message IconActions row (user + assistant). Parent modules own
-   hover-reveal selectors and layout offsets via the composed className. */
+   layout offsets via the composed className. Icons stay visible when mounted;
+   the time label is hover-revealed inside a data-time-hover-root scope. */
 
 .actions {
   display: flex;
@@ -25,11 +26,23 @@
   white-space: nowrap;
 }
 
-/* Hover-capable pointers: hide until a parent hover/focus rule reveals. */
+/* Separator between the clock and the run-time label (time · Ran for 15s). */
+.runTimeDot {
+  margin: 0 10px;
+}
+
+/* Message containers opt in with data-time-hover-root: the time label fades
+   in on message hover (or keyboard focus within). Opacity keeps the layout
+   stable, and devices without hover keep the label always visible. */
 @media (hover: hover) {
-  .actions {
+  [data-time-hover-root] :is(.timeStart, .timeEnd) {
     opacity: 0;
-    transition: opacity var(--ds-transition-duration) var(--ds-ease-in-out);
+    transition: opacity 80ms ease;
+  }
+
+  [data-time-hover-root]:hover :is(.timeStart, .timeEnd),
+  [data-time-hover-root]:focus-within :is(.timeStart, .timeEnd) {
+    opacity: 1;
   }
 }
 
@@ -51,3 +64,23 @@
   background: var(--dsw-alias-interactive-bg-hover);
   color: var(--dsw-alias-label-secondary);
 }
+
+/* Unavailable stays focusable and hoverable so Tooltip can explain why. */
+.action[data-unavailable] {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.action[data-unavailable]:hover {
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}

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

@@ -1,64 +1,110 @@
-// Shared IconActions chrome for user and assistant messages: copy / branch
-// live (branch still a stub), date-aware clock, optional edit stub.
+// Shared IconActions chrome for user and assistant messages: copy
+// live, optional branch wiring, and an optional date-aware clock.
 
-import { useCallback } from 'react'
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
 import {
-  IconBranchOutline16, IconCopyOutline16, IconEditOutline16, Tooltip,
+  IconBranchOutline16, IconCheckOutline16, IconCopyOutline16, Tooltip, writeClipboard,
 } from '@deepseek-ai/dsh-client-ui-primitives'
-import { formatMessageClock, writeClipboard } from './message-chrome.ts'
+import type { ChatViewSlotProps } from '../contract/slots.ts'
+import { formatMessageClock, formatRunDuration } from './message-chrome.ts'
 import { useCalendarDay } from './use-calendar-day.ts'
 import css from './MessageIconActions.module.css'
 
 export interface MessageIconActionsProps {
   /** Plain text the copy action writes. */
   text: string
-  /** Unix epoch ms for the clock label. */
-  time: number
+  /** Unix epoch ms for the clock label; omitted for transient messages. */
+  time?: number | undefined
+  /** Turn wall time in ms, appended to the clock as `· Ran for 15s`; omitted when the turn's start is unknown. */
+  runMs?: number | undefined
   /** Clock before icons (user) or after (assistant). */
   clock: 'start' | 'end'
-  /** When true, append the stub edit control (user bubble). */
-  edit?: boolean | undefined
-  /** Parent layout / hover-reveal class composed onto the actions row. */
+  /** Fork the session at this message; omission hides the branch action. */
+  onBranch?: (() => void) | undefined
+  /** The message is not a completed transcript tail, so branch stays visible but unavailable. */
+  branchUnavailable?: boolean | undefined
+  /** Additional branch visibility gate for transient message chrome; defaults to true. */
+  showBranch?: boolean | undefined
+  /** Parent layout class composed onto the actions row. */
   className?: string | undefined
+  /** The owning view's locale seat, passed down as a plain prop. */
+  t: ChatViewSlotProps['t']
 }
 
 /**
  * Copy / branch (/ clock) IconActions row shared by user and assistant chrome.
- * @param props - Copy text, event time, clock side, optional edit, className.
+ * @param props - Copy text, event time, clock side, branch callback, className.
  * @returns The actions row element.
  */
 export function MessageIconActions({
-  text, time, clock, edit, className,
+  text, time, runMs, clock, onBranch, branchUnavailable = false, showBranch = true, className, t,
 }: MessageIconActionsProps) {
   const day = useCalendarDay()
+  const reasonId = useId()
+  // Same success chrome as CodeBlock: a short check swap after the write,
+  // gated so re-clicks during the window neither re-copy nor stack timers.
+  const [copied, setCopied] = useState(false)
+  const copyPending = useRef(false)
+  const copyTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const copyEpoch = useRef(0)
+  useEffect(() => () => {
+    copyEpoch.current += 1
+    copyPending.current = false
+    if (copyTimer.current !== null) clearTimeout(copyTimer.current)
+  }, [])
   const onCopy = useCallback(() => {
-    void writeClipboard(text)
-  }, [text])
-  const clockEl = (
+    if (copied || copyPending.current) return
+    const epoch = copyEpoch.current
+    copyPending.current = true
+    void writeClipboard(text).then((ok) => {
+      if (epoch !== copyEpoch.current) return
+      copyPending.current = false
+      if (!ok) return
+      setCopied(true)
+      copyTimer.current = window.setTimeout(() => {
+        copyTimer.current = null
+        setCopied(false)
+      }, 1000)
+    })
+  }, [copied, text])
+  const clockEl = time === undefined ? null : (
     <span className={clock === 'start' ? css.timeStart : css.timeEnd}>
-      {formatMessageClock(time, day)}
+      {formatMessageClock(time, t, day)}
+      {runMs !== undefined && (
+        <>
+          <span className={css.runTimeDot} aria-hidden>·</span>
+          {t('message.ranFor', { duration: formatRunDuration(runMs, t) })}
+        </>
+      )}
     </span>
   )
   return (
     <div className={className === undefined ? css.actions : `${css.actions} ${className}`}>
       {clock === 'start' ? clockEl : null}
-      <Tooltip label="复制" side="bottom">
-        <button type="button" className={css.action} aria-label="复制" onClick={onCopy}>
-          <IconCopyOutline16 />
+      <Tooltip label={copied ? t('copied') : t('copy')} side="bottom">
+        <button type="button" className={css.action} aria-label={copied ? t('copied') : t('copy')} onClick={onCopy}>
+          {copied ? <IconCheckOutline16 /> : <IconCopyOutline16 />}
         </button>
       </Tooltip>
-      <Tooltip label="在新对话中分支" side="bottom">
-        <button type="button" className={css.action} aria-label="在新对话中分支">
-          <IconBranchOutline16 />
-        </button>
-      </Tooltip>
-      {edit === true && (
-        <Tooltip label="编辑" side="bottom">
-          <button type="button" className={css.action} aria-label="编辑">
-            <IconEditOutline16 />
+      {showBranch && onBranch !== undefined && (
+        <Tooltip label={branchUnavailable ? t('message.branchUnavailable') : t('message.branch')} side="bottom">
+          {/* Native disabled buttons do not deliver the hover/focus events Tooltip needs. */}
+          <button
+            type="button"
+            className={css.action}
+            aria-label={t('message.branch')}
+            aria-disabled={branchUnavailable || undefined}
+            aria-describedby={branchUnavailable ? reasonId : undefined}
+            data-unavailable={branchUnavailable || undefined}
+            onClick={branchUnavailable ? undefined : onBranch}
+          >
+            <IconBranchOutline16 />
           </button>
         </Tooltip>
       )}
+      {showBranch && onBranch !== undefined && branchUnavailable && (
+        <span id={reasonId} className={css.visuallyHidden}>{t('message.branchUnavailable')}</span>
+      )}
       {clock === 'end' ? clockEl : null}
     </div>
   )

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

@@ -20,26 +20,217 @@
   color: var(--dsw-alias-label-primary);
 }
 
-/* Hover-capable pointers: reveal shared MessageIconActions on row hover/focus. */
-@media (hover: hover) {
-  .userRow:hover .actions,
-  .userRow:focus-within .actions {
-    opacity: 1;
+.contextRow {
+  padding: 2px 0;
+}
+
+/* Compaction marker: one dim 24px row with a chevron disclosure for the
+   summary body. Dimmed title (not label-primary) — the row is a boundary
+   notice, not conversation content. */
+.compactionRow {
+  padding: 2px 0;
+}
+
+.compactionButton {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 24px;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.compactionButton:not(:disabled) {
+  cursor: pointer;
+}
+
+.compactionButton:not(:disabled):hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.compactionLeading {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.compactionTitle {
+  flex: none;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-primary-dimmed);
+}
+
+.compactionSep {
+  flex: none;
+  width: 2px;
+  height: 2px;
+  margin: 0 8px;
+  border-radius: 1px;
+  background: var(--dsw-alias-label-caption);
+}
+
+.compactionSummary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 14px;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.compactionBody {
+  padding: 4px 0 4px 22px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.retryRow {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.retrySummary {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  padding: 2px 0;
+  gap: 7px;
+  border-radius: 3px;
+  color: inherit;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+.retrySummary::-webkit-details-marker {
+  display: none;
+}
+
+.retrySummary::after {
+  width: 6px;
+  height: 6px;
+  border-right: 1.5px solid currentcolor;
+  border-bottom: 1.5px solid currentcolor;
+  content: '';
+  opacity: 0.8;
+  transform: rotate(-45deg);
+  transition: transform 120ms ease;
+}
+
+.retrySummary:hover {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.retrySummary:focus-visible {
+  outline: 1.5px solid var(--dsw-alias-button-info-fill);
+  outline-offset: 2px;
+}
+
+.retryText {
+  color: inherit;
+}
+
+.retryRow[data-active] .retryText {
+  background:
+    linear-gradient(
+      90deg,
+      var(--dsw-alias-label-tertiary) 0%,
+      var(--dsw-alias-label-tertiary) 40%,
+      var(--dsw-alias-label-secondary) 50%,
+      var(--dsw-alias-label-tertiary) 60%,
+      var(--dsw-alias-label-tertiary) 100%
+    );
+  background-position: 100% 50%;
+  background-size: 200% 100%;
+  background-clip: text;
+  color: transparent;
+  animation: retry-shimmer 1.6s ease-in-out infinite;
+}
+
+.retryRow[open] .retrySummary::after {
+  transform: rotate(45deg);
+}
+
+.retryDetails {
+  display: grid;
+  gap: 2px;
+  margin-top: 3px;
+  padding-left: 14px;
+  overflow-wrap: anywhere;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.retryDetailLabel {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.turnErrorRow {
+  display: grid;
+  grid-template-columns: 10px minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: start;
+  padding: 2px 0;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.turnErrorDot {
+  margin-top: 5px;
+}
+
+.turnErrorCopy {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.turnErrorTitle {
+  margin-right: 6px;
+  color: var(--dsw-alias-state-error-primary);
+  font-weight: 600;
+}
+
+.turnErrorMessage {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.turnErrorCode {
+  color: var(--dsw-alias-label-tertiary);
+  font: var(--dsw-font-markdown-code-block-small);
+}
+
+@keyframes retry-shimmer {
+  from {
+    background-position: 100% 50%;
+  }
+
+  to {
+    background-position: 0 50%;
   }
 }
 
-.badge {
-  display: inline-block;
-  margin-bottom: 4px;
-  padding: 1px 6px;
-  border-radius: 6px;
-  background: var(--dsw-alias-state-warn-primary);
-  color: var(--dsw-alias-label-primary-foreground);
-  font-size: 11px;
-}
-
-.contextRow {
-  padding: 2px 0;
+@media (prefers-reduced-motion: reduce) {
+  .retryRow[data-active] .retryText {
+    background: none;
+    color: inherit;
+    animation: none;
+  }
 }
 
 /* Reference chip projection inside a user bubble (`<skill>name</skill>` model

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

@@ -1,20 +1,36 @@
-// MessageItem: the four simple node kinds — user bubble (right-aligned, with
-// clock + copy / branch / edit IconActions), steering (badged bubble), context
-// injection and unknown-surface JSON rows. Props are frozen node slices off
-// the snapshot cache; memo holds across streaming because unchanged nodes
-// keep their references.
+// MessageItem: simple chat nodes — user bubbles
+// (right-aligned, with clock + copy / branch IconActions), pending steering
+// (copy only), context injection, compaction marker, retry disclosure, and
+// unknown-surface JSON rows.
 
-import { memo } from 'react'
+import { memo, useEffect, useMemo, useState } from 'react'
 import type { ReactNode } from 'react'
 import type {
-  ContextMessageNode, SteeringMessageNode, UnknownSurfaceNode, UserMessageNode,
+  CompactionSummaryNode, ContextMessageNode, ModelRetryNode,
+  TurnErrorNode, UnknownSurfaceNode, UserMessageNode,
 } from '@deepseek-ai/dsh-client-runtime/client'
-import { JsonBlock, MessageText } from '@deepseek-ai/dsh-client-ui-primitives'
+import { JsonBlock, MessageText, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ChatViewSlotProps } from '../contract/slots.ts'
+import { CompactionItem } from './CompactionItem.tsx'
+import { ContextInjectionRow } from './ContextInjectionRow.tsx'
 import { MessageIconActions } from './MessageIconActions.tsx'
 import css from './MessageItem.module.css'
 
 export interface MessageItemProps {
-  node: UserMessageNode | SteeringMessageNode | ContextMessageNode | UnknownSurfaceNode
+  node:
+    | UserMessageNode
+    | ContextMessageNode
+    | CompactionSummaryNode
+    | ModelRetryNode
+    | TurnErrorNode
+    | UnknownSurfaceNode
+  retryActive?: boolean
+  /** Fork through this message's completed turn when eligible. */
+  onFork?: (seq: number) => void
+  /** The message is not the transcript tail of a completed turn. */
+  forkUnavailable?: boolean
+  /** The owning view's locale seat, passed down as a plain prop. */
+  t: ChatViewSlotProps['t']
 }
 
 function contentText(content: readonly unknown[]): { text: string; rest: unknown[] } {
@@ -28,6 +44,98 @@ function contentText(content: readonly unknown[]): { text: string; rest: unknown
   return { text: texts.join(''), rest }
 }
 
+function retrySeconds(milliseconds: number): number {
+  return Math.max(1, Math.ceil(milliseconds / 1_000))
+}
+
+interface RetryCountdown {
+  deadline: number
+  seconds: number
+}
+
+function ModelRetryItem({ node, active, t }: {
+  node: ModelRetryNode
+  active: boolean
+  t: ChatViewSlotProps['t']
+}) {
+  // Anchor the host-scheduled delay to this browser's first render of the
+  // retry node. Host event time and Date.now() may belong to different clocks.
+  const deadline = useMemo(() => Date.now() + node.delayMs, [node.delayMs, node.seq])
+  const scheduledSeconds = retrySeconds(node.delayMs)
+  const maximum = node.mode === 'normal' ? node.maxRetries : '∞'
+  const [countdown, setCountdown] = useState<RetryCountdown>(() => ({
+    deadline,
+    seconds: retrySeconds(deadline - Date.now()),
+  }))
+  const remainingSeconds = countdown.deadline === deadline
+    ? countdown.seconds
+    : retrySeconds(deadline - Date.now())
+
+  useEffect(() => {
+    if (!active) return
+    const updateCountdown = (): number => {
+      const next = retrySeconds(deadline - Date.now())
+      setCountdown(current => (
+        current.deadline === deadline && current.seconds === next
+          ? current
+          : { deadline, seconds: next }
+      ))
+      return next
+    }
+    if (updateCountdown() === 1) return
+    const timer = window.setInterval(() => {
+      if (updateCountdown() === 1) window.clearInterval(timer)
+    }, 250)
+    return () => { window.clearInterval(timer) }
+  }, [active, deadline])
+
+  const label = active
+    ? t('message.retry.active')
+    : node.retryState === 'cancelled'
+      ? t('message.retry.cancelled')
+      : node.retryState === 'started'
+        ? t('message.retry.started')
+        : t('message.retry.scheduled')
+  const seconds = active ? remainingSeconds : scheduledSeconds
+
+  return (
+    <details className={css.retryRow} data-active={active || undefined}>
+      <summary className={css.retrySummary}>
+        <span className={css.retryText} role="status">
+          {t('message.retry.status', { label, retry: node.retry, maximum, seconds })}
+        </span>
+      </summary>
+      <div className={css.retryDetails}>
+        <div>
+          <span className={css.retryDetailLabel}>{t('message.retry.delay')}</span>
+          {Math.round(node.delayMs)}ms
+        </div>
+        <div>
+          <span className={css.retryDetailLabel}>{t('message.retry.failure')}</span>
+          {node.failure.message}
+        </div>
+      </div>
+    </details>
+  )
+}
+
+/** Persistent, turn-positioned feedback for a terminal failure. */
+function TurnErrorItem({ node, t }: {
+  node: TurnErrorNode
+  t: ChatViewSlotProps['t']
+}) {
+  return (
+    <div className={css.turnErrorRow} role="status">
+      <StateDot state="error" className={css.turnErrorDot} />
+      <div className={css.turnErrorCopy}>
+        <span className={css.turnErrorTitle}>{t('message.turnError')}</span>
+        <span className={css.turnErrorMessage}>{node.message}</span>
+      </div>
+      {node.code !== undefined && <code className={css.turnErrorCode}>{node.code}</code>}
+    </div>
+  )
+}
+
 /**
  * Display projection of reference forms in a user bubble (free geometry — no
  * textarea alignment constraint here); everything else stays plain text. The
@@ -60,48 +168,95 @@ function projectUserText(text: string): ReactNode {
   return <>{parts}</>
 }
 
-export const MessageItem = memo(function MessageItem({ node }: MessageItemProps) {
+/** Right-aligned bubble shared by user and steering rows. */
+function UserStyleBubble({
+  content, actions, pending = false, t,
+}: {
+  content: readonly unknown[]
+  /** Optional IconActions (or similar) below the bubble; receives the joined text. */
+  actions?: (text: string) => ReactNode
+  /** Whether this is the Host-authoritative pre-admission steering projection. */
+  pending?: boolean
+  t: ChatViewSlotProps['t']
+}): ReactNode {
+  const { text, rest } = contentText(content)
+  const truncated = (total: number): string => t('json.truncated', { total })
+  return (
+    <div className={css.userRow} data-pending-steering={pending || undefined} data-time-hover-root>
+      <div className={css.bubble}>
+        {projectUserText(text)}
+        {rest.map((block, i) => <JsonBlock key={i} label={t('message.extraBlock')} payload={block} truncatedLabel={truncated} />)}
+      </div>
+      {actions?.(text)}
+    </div>
+  )
+}
+
+/**
+ * Render one Host-authoritative pending steering item with the same visual
+ * language as its eventual durable transcript node.
+ * @param props - Pending message content and conversation translator.
+ * @returns the pending steering bubble.
+ */
+export function PendingSteeringBubble({ content, t }: {
+  content: readonly unknown[]
+  t: ChatViewSlotProps['t']
+}): ReactNode {
+  return (
+    <UserStyleBubble
+      content={content}
+      pending
+      t={t}
+      actions={text => (
+        <MessageIconActions
+          text={text}
+          clock="start"
+          showBranch={false}
+          className={css.actions}
+          t={t}
+        />
+      )}
+    />
+  )
+}
+
+export const MessageItem = memo(function MessageItem({
+  node, retryActive = false, onFork, forkUnavailable = false, t,
+}: MessageItemProps) {
+  const truncated = (total: number): string => t('json.truncated', { total })
   switch (node.kind) {
-    case 'user': {
-      const { text, rest } = contentText(node.content)
+    case 'user':
       return (
-        <div className={css.userRow}>
-          <div className={css.bubble}>
-            {projectUserText(text)}
-            {rest.map((block, i) => <JsonBlock key={i} label="附加内容块" payload={block} />)}
-          </div>
-          <MessageIconActions
-            text={text}
-            time={node.time}
-            clock="start"
-            edit
-            className={css.actions}
-          />
-        </div>
+        <UserStyleBubble
+          content={node.content}
+          t={t}
+          actions={text => (
+            <MessageIconActions
+              text={text}
+              time={node.time}
+              clock="start"
+              onBranch={onFork === undefined ? undefined : () => { onFork(node.seq) }}
+              branchUnavailable={forkUnavailable}
+              className={css.actions}
+              t={t}
+            />
+          )}
+        />
       )
-    }
-    case 'steering': {
-      const { text, rest } = contentText(node.content)
-      return (
-        <div className={css.userRow}>
-          <div className={css.bubble}>
-            <span className={css.badge}>插话</span>
-            {projectUserText(text)}
-            {rest.map((block, i) => <JsonBlock key={i} label="附加内容块" payload={block} />)}
-          </div>
-        </div>
-      )
-    }
     case 'context':
       return (
-        <div className={css.contextRow}>
-          <JsonBlock label="上下文注入" payload={{ content: node.content, source: node.source }} />
-        </div>
+        <ContextInjectionRow content={node.content} source={node.source} t={t} />
       )
+    case 'compaction':
+      return <CompactionItem node={node} t={t} />
+    case 'model-retry':
+      return <ModelRetryItem node={node} active={retryActive} t={t} />
+    case 'turn-error':
+      return <TurnErrorItem node={node} t={t} />
     default:
       return (
         <div className={css.contextRow}>
-          <JsonBlock label={`未知 surface 事件：${node.type}`} payload={node.data} />
+          <JsonBlock label={t('message.unknownSurface', { type: node.type })} payload={node.data} truncatedLabel={truncated} />
         </div>
       )
   }

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

@@ -1,13 +1,25 @@
 /* Session stats row: 12/20 tertiary text under the flow, aligned to the
-   736px message column axis. */
+   shared message column axis (--dsh-chat-content-width). */
 
 .root {
-  max-width: 736px;
+  /* Block, not flex: text-overflow only elides a block's inline content, so
+     an overlong line ends in … instead of a mid-glyph clip. */
+  display: block;
+  text-align: center;
+  max-width: var(--dsh-chat-content-width);
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
-  padding: 4px 24px 8px;
+  padding: 4px calc(var(--dsh-composer-side-clearance) + 16px) 0px;
   font-size: 12px;
   line-height: 20px;
   color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sep {
+  color: var(--dsw-alias-separator-primary);
+  margin: 0 10px; /* carries the former flex gap */
 }

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

@@ -1,65 +1,161 @@
 // Settled-node identity prevents stream-delta updates from rerendering this row.
+// Mounted on 'conversation.composer.dock' so it sticks with the composer in the
+// active conversation scrollport (see ConversationRoot data-conversation-scroll).
 
-import { memo, useMemo } from 'react'
-import type { ConversationSnapshot } from '@deepseek-ai/dsh-client-runtime/client'
+import { Fragment, memo, useMemo } from 'react'
+import type { ConversationSnapshot, UseProjection } from '@deepseek-ai/dsh-client-runtime/client'
 import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots'
+import type { ContextPressureProjection, TokenUsageProjection } from '@deepseek-ai/dsh-token-meter/client'
 import css from './StatsLine.module.css'
 
-interface UsageTotals {
+interface WindowStats {
   turns: number
   steps: number
-  tokens: number
-  cacheHitPct: number | null
-}
-
-/** Token accounting slice of assistant `usage` (typed upstream as unknown). */
-interface UsageLike {
-  inputTokens?: number
-  outputTokens?: number
-  cacheReadTokens?: number
+  /** Summed request wall time (step/start → assistant/message); 0 when no node carries timing. */
+  llmMs: number
+  /** Summed tool wall time (tool/call → tool/result); 0 when no pair is in-window. */
+  toolMs: number
 }
 
 /**
- * Fold assistant nodes into display totals.
+ * Fold assistant and tool-result nodes into the window-scoped display totals.
+ *
+ * Counts and wall times describe the loaded window on purpose — they answer
+ * "what is on screen". Token accounting deliberately does NOT come from here:
+ * the window is paged and compaction rewrites it, so billing rides the durable
+ * `tokenUsage` projection instead.
  * @param nodes - snapshot nodes.
- * @returns totals; cacheHitPct null until any cache accounting arrives.
+ * @returns visible counts and summed wall times.
  */
-export function deriveStats(nodes: ConversationSnapshot['nodes']): UsageTotals {
+export function deriveStats(nodes: ConversationSnapshot['nodes']): WindowStats {
   const turns = new Set<number>()
   let steps = 0
-  let tokens = 0
-  let input = 0
-  let cacheRead = 0
+  let llmMs = 0
+  let toolMs = 0
   for (const node of nodes) {
+    if (node.kind === 'tool-result') {
+      if (node.callTime !== null) toolMs += Math.max(0, node.time - node.callTime)
+      continue
+    }
     if (node.kind !== 'assistant') continue
     turns.add(node.turn)
     steps += 1
-    const usage = node.usage as UsageLike | undefined
-    if (usage === undefined) continue
-    input += usage.inputTokens ?? 0
-    cacheRead += usage.cacheReadTokens ?? 0
-    tokens += (usage.inputTokens ?? 0) + (usage.outputTokens ?? 0) + (usage.cacheReadTokens ?? 0)
+    if (node.timing !== undefined && node.timing.stepStartTime !== null) {
+      llmMs += Math.max(0, node.timing.completedTime - node.timing.stepStartTime)
+    }
   }
-  const denom = input + cacheRead
+  return { turns: turns.size, steps, llmMs, toolMs }
+}
+
+/**
+ * Compact token count: 517 / 12.2K / 517K / 1.2M (one decimal under three digits).
+ * @param n - token count.
+ * @returns display string.
+ */
+export function formatTokens(n: number): string {
+  const scaled = (v: number): string =>
+    v >= 100 ? String(Math.round(v)) : String(Math.round(v * 10) / 10)
+  if (n < 1_000) return String(n)
+  if (n < 1_000_000) return `${scaled(n / 1_000)}K`
+  return `${scaled(n / 1_000_000)}M`
+}
+
+/**
+ * Compact duration: 45.2s under a minute, 2m42s from there on.
+ * @param ms - duration in milliseconds.
+ * @returns display string.
+ */
+export function formatDuration(ms: number): string {
+  const s = ms / 1_000
+  if (s < 60) return `${Math.round(s * 10) / 10}s`
+  const whole = Math.round(s)
+  return `${Math.floor(whole / 60)}m${whole % 60}s`
+}
+
+/**
+ * Cache-hit share of prompt-side input over the whole durable log.
+ * @param usage - the session's token-usage projection value.
+ * @returns rounded integer percent, or null when no input was billed.
+ */
+export function cacheHitPercent(usage: TokenUsageProjection): number | null {
+  const denominator = billedInputTokens(usage)
+  return denominator === 0
+    ? null
+    : Math.round(usage.cacheReadTokens / denominator * 100)
+}
+
+/** Sum the three disjoint prompt-side billing buckets. */
+function billedInputTokens(usage: TokenUsageProjection): number {
+  return usage.uncachedInputTokens + usage.cacheReadTokens + usage.cacheWriteTokens
+}
+
+interface ContextOccupancy {
+  percent: number
+  contextWindow: number
+}
+
+/**
+ * Approximate context occupancy, using the TUI's integer rounding and upper
+ * clamp. The numerator and capacity are independent last-wins projection
+ * fields, so this is a reference figure rather than an exact measurement of one
+ * request (see the token-meter README).
+ * @param pressure - the session's context-pressure projection value.
+ * @returns occupancy and its denominator, or null until both values are known.
+ */
+export function contextOccupancy(
+  pressure: ContextPressureProjection | undefined,
+): ContextOccupancy | null {
+  if (pressure?.pressureTokens === undefined || pressure.contextWindow === undefined) return null
   return {
-    turns: turns.size,
-    steps,
-    tokens,
-    cacheHitPct: denom === 0 ? null : Math.round((cacheRead / denom) * 100),
+    percent: Math.min(100, Math.round(pressure.pressureTokens / pressure.contextWindow * 100)),
+    contextWindow: pressure.contextWindow,
   }
 }
 
-/** Props: the conversation-snapshot selector hook (handed down by ChatView). */
-export interface StatsLineProps { useSession: SnapshotSelectorHook<ConversationSnapshot> }
+/** Props: the conversation-snapshot selector plus the projection read seat. */
+export interface StatsLineProps {
+  useSession: SnapshotSelectorHook<ConversationSnapshot>
+  useProjection: UseProjection
+}
 
-export const StatsLine = memo(function StatsLine({ useSession }: StatsLineProps) {
+export const StatsLine = memo(function StatsLine({ useSession, useProjection }: StatsLineProps) {
   const nodes = useSession(s => s.nodes)
+  const usage = useProjection('tokenUsage')
+  const pressure = useProjection('contextPressure')
   const stats = useMemo(() => deriveStats(nodes), [nodes])
-  if (stats.steps === 0) return null
-  const parts: string[] = []
-  if (stats.cacheHitPct !== null) parts.push(`cache hit ${stats.cacheHitPct}%`)
-  parts.push(`${stats.tokens.toLocaleString('en-US')} tokens`)
-  parts.push(`${stats.turns} turns`)
-  parts.push(`${stats.steps} steps`)
-  return <div className={css.root}>{parts.join(' · ')}</div>
+  // Pipe-separated groups (figma stats strip); a group with no data drops out whole.
+  const groups: string[] = []
+  if (stats.steps > 0) {
+    groups.push(`${stats.turns} turns · ${stats.steps} steps`)
+    const durations: string[] = []
+    if (stats.llmMs > 0) durations.push(`LLM ${formatDuration(stats.llmMs)}`)
+    if (stats.toolMs > 0) durations.push(`Tool call ${formatDuration(stats.toolMs)}`)
+    if (durations.length > 0) groups.push(durations.join(' · '))
+  }
+  const context = contextOccupancy(pressure)
+  if (context !== null) {
+    groups.push(`Context ${context.percent}% of ${formatTokens(context.contextWindow)}`)
+  }
+  // Billing rides the durable projection, so these survive paging and
+  // compaction. Suppress the empty projection on a brand-new session.
+  if (usage !== undefined
+    && (stats.steps > 0 || billedInputTokens(usage) > 0 || usage.outputTokens > 0)) {
+    const cacheHit = cacheHitPercent(usage)
+    if (cacheHit !== null) groups.push(`Cache hit ${cacheHit}%`)
+    groups.push(
+      `Input ${formatTokens(billedInputTokens(usage))} tok`
+      + ` · Output ${formatTokens(usage.outputTokens)} tok`,
+    )
+  }
+  if (groups.length === 0) return null
+  return (
+    <div className={css.root}>
+      {groups.map((group, i) => (
+        <Fragment key={group}>
+          {i > 0 && <><span className={css.sep} aria-hidden>|</span>{' '}</>}
+          <span>{group}</span>
+        </Fragment>
+      ))}
+    </div>
+  )
 })

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

@@ -9,10 +9,6 @@
 .row {
   position: relative; /* sweep-glare overlay anchor */
   overflow: hidden;
-  display: flex;
-  align-items: center;
-  height: 24px;
-  min-width: 0;
 }
 
 /* Running sweep (deepsuite ShimmerText pattern): a fixed-width glare band —
@@ -41,30 +37,8 @@
   90%, 100% { left: 100%; }
 }
 
-/* Expand-on-row (Think / code): pointer only — no row fill hover. */
-.row[data-expandable] {
-  cursor: pointer;
-}
-
 .leading {
-  position: relative; /* .chevronHover overlay anchor */
-  flex: none;
-  width: 16px;
-  height: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 6px;
-  padding: 0;
-  border: none;
-  background: none;
-  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);
+  flex-shrink: 0;
 }
 
 /* Cordis lifecycle tools retain their generic row mechanics while carrying a
@@ -82,44 +56,12 @@
   background: var(--dsw-alias-state-business-primary);
 }
 
-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. */
-.iconIdle {
-  display: inline-flex;
-  opacity: 1;
-  transition: opacity 100ms ease;
-}
-
-.chevronHover {
-  position: absolute;
-  inset: 0;
-  margin: auto;
-  opacity: 0;
-  transition: opacity 100ms ease;
-}
-
-.row:hover .iconIdle {
-  opacity: 0;
-}
-
-.row:hover .chevronHover {
-  opacity: 1;
-}
-
 .title {
-  flex: none;
-  font-size: 14px;
-  line-height: 24px;
-  color: var(--dsw-alias-label-secondary);
+  font-weight: 400;
 }
 
 .sep {
@@ -142,6 +84,22 @@ button.leading {
   color: var(--dsw-alias-label-tertiary);
 }
 
+/* Live reasoning follows its one-line summary to the inline end. */
+.summary[data-follow-end] {
+  text-overflow: clip;
+}
+
+/* Trailing summary fragment kept out of .summary's ellipsis, for a count whose
+   whole value is that it survives a narrow row (the todo row's parallel-active
+   `+n`). Repeats .summary's type because it sits beside that text. */
+.summarySuffix {
+  flex: none;
+  margin-left: 4px;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
 /* File-tool path: same geometry as .summary; hover underline + pointer. */
 .fileLink {
   flex: 1 1 auto;
@@ -165,8 +123,65 @@ button.leading {
   text-decoration: underline;
 }
 
-/* Expanded body: pad-left 22 indented gray text, no border, no fill. */
-.body {
+/* Error row's collapsed summary: the failure's first line in the error color. */
+.errorSummary {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* Expanded body + Inspect pill wrapper (sibling of .row: clicks never toggle). */
+.bodyWrap {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Hover-revealed jump to the trajectory record: a small pill in real flow
+   under the expanded body's bottom-left corner (it reserves its line, so
+   revealing never shifts layout); revealed by hovering anywhere on the tool
+   call — title row included — or by keyboard focus. */
+.inspectButton {
+  display: inline-flex;
+  align-self: flex-start;
+  align-items: center;
+  gap: 4px;
+  margin: 4px 0 2px 4px;
+  padding: 2px 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  /* Base background, not bg-overlay: the overlay token is a raised dark
+     surface and reads too heavy for a quiet in-flow affordance. */
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+  line-height: 16px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.root:hover .inspectButton,
+.inspectButton:focus-visible {
+  opacity: 1;
+}
+
+/* Solid hover fill (a translucent token would let content bleed through). */
+.inspectButton:hover {
+  background: var(--dsw-alias-interactive-bg-hover-solid);
+  color: var(--dsw-alias-label-primary);
+}
+
+/* Expanded-body scroll wrapper for the run_code CodeBlock; the IN/OUT card
+   and the terminal card scroll INSIDE their own surface instead, so the
+   scrollbar sits within the rounded card. */
+.bodyScroll {
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+/* Think expanded body: plain indented gray reasoning prose — no IN/OUT card
+   (the reasoning is not an input payload), pre-wrapped at the row's indent.
+   Uncapped: reasoning reads as message prose, so it flows with the page
+   instead of scrolling in a box. */
+.thinkBody {
   padding: 4px 0 4px 22px;
   font-size: 14px;
   line-height: 24px;
@@ -175,23 +190,130 @@ button.leading {
   color: var(--dsw-alias-label-tertiary);
 }
 
-/* The two block-shaped expanded bodies: the code variant's run_code program
-   through CodeBlock (shiki-highlighted TypeScript) and a terminal card's
-   command output through TerminalBlock. Both are drawn by the shared
-   primitive, so only the row's indentation is this file's concern — the margin
-   also replaces each primitive's own standalone vertical spacing with the
-   flow's row rhythm. */
-.codeBody,
-.terminalBody {
-  margin: 4px 0 4px 22px;
+/* Expanded input/output card (figma 1249:35657): the code-block surface and
+   radius from the TerminalBlock/CodeBlock family. The card itself is a plain
+   column — the padding and the IN/OUT gutter-label grid live on each section
+   so the divider spans the full card width and each section scrolls alone. */
+.ioCard {
+  display: flex;
+  flex-direction: column;
+  margin: 4px 0 4px 4px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 12px;
+  background: var(--dsw-alias-markdown-code-block);
+  font: var(--dsw-font-markdown-code-block-small);
 }
 
-/* Indented to the body's own column so the description reads as the card's
-   heading rather than as another summary row, and sits tight against the card
-   below it. Its own rule: grouping it with a body would put description
-   typography on a `CodeBlock` wrapper and change that body's spacing. */
-.terminalDescription {
-  margin: 4px 0 0 22px;
-  color: var(--dsw-alias-label-secondary);
-  font: var(--dsw-font-xs-13);
+/* One card section (IN or OUT): the gutter-label grid, capped and scrolling
+   independently so a long input never buries a short output (and vice versa). */
+.ioSection {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: 14px;
+  align-items: baseline;
+  padding: 12px 16px;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+/* Card-internal scrollbar: a 2px transparent border clips the thumb inward so
+   it floats off the rounded card edge instead of hugging it (the terminal
+   card's own output scroller carries the same treatment in TerminalBlock). */
+.ioSection::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  border-radius: 6px;
+}
+
+/* Track end-margins keep the thumb's travel out of the rounded corners. */
+.ioSection::-webkit-scrollbar-track {
+  margin: 6px 0;
+}
+
+/* Caption (not tertiary): one step dimmer than the payload text so the
+   gutter labels read as labels, not as part of the content. Sticky against
+   the section's own scroll so the label stays readable while its payload
+   scrolls underneath (top 0 = the section's padding edge inside the
+   scrollport; start-aligned because sticky needs a block-start anchor). */
+.ioLabel {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  color: var(--dsw-alias-label-caption);
+}
+
+/* l2 hairline between the IN and OUT sections, spanning the full card width
+   (it sits between the padded sections, not inside their grid). */
+.ioDivider {
+  flex: none;
+  height: 1px;
+  background: var(--dsw-alias-border-l2);
+}
+
+.ioText {
+  min-width: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* A failed call's OUT text shares the collapsed summary's error color. */
+.ioText[data-error] {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* The block-shaped expanded bodies: the code variant's run_code program
+   through CodeBlock (shiki-highlighted TypeScript), a terminal card's command
+   output through TerminalBlock, a diff card through DiffBlock, a read card's
+   line-numbered window through ReadBlock, a search card's grouped matches or
+   path list through SearchBlock, and a web card's citation/source list through
+   WebBlock. All are drawn by the shared primitive, so only the row's
+   indentation is this file's concern — the margin also replaces each
+   primitive's own standalone vertical spacing with the flow's row rhythm. */
+.codeBody,
+.terminalBody,
+.diffBody,
+.readBody,
+.searchBody,
+.webBody {
+  margin: 4px 0 4px 4px;
+}
+
+/* The recovery footer for a capped search: the result text (its `Full … stored
+   at …` locator) below the card in the muted tone, since the card holds only the
+   retained rows. Same column indent as the card body. */
+.searchRecovery {
+  margin: 4px 0 4px 4px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font: var(--dsw-font-xs-13);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* In-row code renders at the smaller code size (12/18) via each primitive's
+   rebindable content-font seam; standalone markdown code blocks keep 13/22. */
+.codeBody {
+  --dsl-code-block-content-font: var(--dsw-font-markdown-code-block-small);
+}
+
+/* The terminal card scrolls its OUTPUT inside its own surface (same l1
+   hairline as the IN/OUT card): the banner stays pinned and the scrollbar
+   never rides over it. 224px = the 260px card cap minus the ~36px banner. */
+.terminalBody {
+  --dsl-terminal-font: var(--dsw-font-markdown-code-block-small);
+  --dsl-terminal-line-height: 18px;
+  --dsl-terminal-output-max-height: 224px;
+  border: 1px solid var(--dsw-alias-border-l1);
+}
+
+/* Visually hidden run-state label for assistive technology: the StateDot and
+   the running sweep are aria-hidden / colour-only, so the text carries the
+   running/failed/interrupted state to a screen reader. */
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
 }

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

@@ -1,22 +1,44 @@
 // ToolRow: the single-line tool summary row (figma component set 122:9479) —
 // 16px leading slot (state dot / tool icon, chevron on hover or expanded) + title +
-// separator dot + FILL-truncated summary. The collapsed row is always one
-// line; the expanded body is indented gray text, the run_code program through
-// CodeBlock, or — for a call whose render intent is a terminal card — the
-// command's own output through TerminalBlock, capped at
-// CHAT_TERMINAL_MAX_LINES so the message flow stays scannable. Expand state is
-// component-local view state. File-tool summaries are path links that open
-// through the host; the row itself is not a details-panel control.
+// separator dot + FILL-truncated summary, drawn through the shared
+// DisclosureRow chrome with the whole row as the expand toggle (click /
+// Enter / Space, icon→chevron hover preview). The collapsed row is always
+// one line; every row with body, output, or a card material (terminal, diff,
+// read, search, web) is expandable; the summary stays inline while open,
+// except Think, where the running collapsed row follows the latest line at its
+// scroll end and the summary yields while open to avoid repeating the body.
+// The expanded body — an IN/OUT gutter-labeled card (figma 1249:35657) for
+// text input/output, the run_code program through CodeBlock, or a card
+// primitive (TerminalBlock, DiffBlock, ReadBlock, SearchBlock, WebBlock) for a
+// call that declared that render intent — lives in a max-height scroll
+// container so a long payload scrolls internally instead of taking over the
+// message flow; Think's prose is the exception and flows uncapped like message
+// text. Every card kind starts collapsed, so a run of tool calls stays
+// scannable; the details panel is the single-call full-height reading surface.
+// Expand state is component-local view state. File-tool summaries are path
+// links that open through the host (stopPropagation keeps the two gestures
+// independent); an error row's collapsed summary is the failure's first line in
+// the error color.
 
-import { useState, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'
+import { useEffect, useRef, useState, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'
 import clsx from 'clsx'
-import { CodeBlock, StateDot, TerminalBlock } from '@deepseek-ai/dsh-client-ui-primitives'
-import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
-import { CHAT_TERMINAL_MAX_LINES, type TerminalCardModel } from '../contract/terminal-card-model.ts'
+import {
+  CodeBlock, DiffBlock, ReadBlock, SearchBlock, StateDot, TerminalBlock, WebBlock,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { WebBlockProps } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
+import { CHAT_DIFF_MAX_LINES, type DiffCardModel } from '../contract/diff-card-model.ts'
+import { CHAT_READ_MAX_LINES, type ReadCardModel } from '../contract/read-card-model.ts'
+import { CHAT_SEARCH_MAX_LINES, type SearchCardModel } from '../contract/search-card-model.ts'
+import { terminalBlockLabels, type TerminalCardModel } from '../contract/terminal-card-model.ts'
 import type { ToolRowState, ToolRowVariant } from '../contract/tool-call-model.ts'
+import { DisclosureRow } from './DisclosureRow.tsx'
+import { useThrottledVisualUpdate } from './use-throttled-visual-update.ts'
 import css from './ToolRow.module.css'
 
 export interface ToolRowProps {
+  /** The render site's conversation locale seat (terminal/code body copy). */
+  t: TranslateNS<'conversation'>
   variant: ToolRowVariant
   /** Wire tool name for tool-owned styling layered over the generic variant. */
   toolName?: string | undefined
@@ -24,18 +46,52 @@ export interface ToolRowProps {
   icon: ReactNode
   title: string
   summary: string
-  /** Expanded-body text; null = no text body (`terminal` is the other body source). */
+  /**
+   * Trailing summary fragment rendered outside the ellipsized summary text, so
+   * a narrow row clips the summary before this. For a fragment whose whole
+   * value is surviving that clip — the todo row's parallel-active count.
+   * null/absent = the summary is the whole collapsed content. Dropped on an
+   * error row, whose collapsed summary is the failure line instead.
+   */
+  summarySuffix?: string | null | undefined
+  /** Expanded-body input text; null = no input section. */
   body: string | null
+  /** Flattened result text for the expanded Output section; null/absent = no output section. */
+  output?: string | null | undefined
+  /** Error first line shown as the collapsed summary on an error row; null/absent = keep `summary`. */
+  errorSummary?: string | null | undefined
   /**
    * Terminal-card material for a call whose render intent is a terminal card
-   * (derived by `terminalCardModel`); it replaces the text body when present.
-   * Null or absent leaves the text body, and a row with neither is not
-   * expandable (its leading slot never toggles).
+   * (derived by `terminalCardModel`); it replaces the text sections when
+   * present. A call carries at most one card kind, so the card props below are
+   * mutually exclusive.
    */
   terminal?: TerminalCardModel | null | undefined
+  /**
+   * Diff-card material for a call whose render intent is a diff card (derived by
+   * `diffCardModel`); it replaces the text body when present, the same way
+   * `terminal` does.
+   */
+  diff?: DiffCardModel | null | undefined
+  /**
+   * Read-card material for a call whose render intent is a read card (derived by
+   * `readCardModel`); it replaces the text body with the file's line-numbered,
+   * syntax-highlighted window when present.
+   */
+  read?: ReadCardModel | null | undefined
+  /**
+   * Search-card material for a call whose render intent is a search card
+   * (derived by `searchCardModel`); it replaces the text body with grouped
+   * matches or a path list when present.
+   */
+  search?: SearchCardModel | null | undefined
+  /**
+   * Web-card material for a call whose render intent is a web card (derived by
+   * `webCardModel`); it replaces the text body with the retrieval's citation
+   * list or fetched-source card when present.
+   */
+  web?: WebBlockProps | null | undefined
   state: ToolRowState
-  /** Makes the row itself the expand control instead of only its leading icon. */
-  expandOnRowClick?: boolean | undefined
   /**
    * Filesystem path from tool args; when set with onOpenFile, the summary
    * renders as a hover-underline link that opens the host default app.
@@ -43,6 +99,21 @@ export interface ToolRowProps {
   filePath?: string | undefined
   /** Open the path with the host OS default application (already cwd-resolved). */
   onOpenFile?: ((path: string) => void) | undefined
+  /**
+   * Jump to this call in the trajectory view: a hover-revealed Inspect pill
+   * over the expanded body. Absent = no affordance (rows without a call
+   * identity, like Think).
+   */
+  inspect?: (() => void) | undefined
+}
+
+/** The Inspect pill's code glyph (user-supplied 16×16), fill follows text color. */
+function IconInspect() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+      <path d="M16 8L10.8571 12V10.552L14.1383 8L10.8571 5.448V4L16 8ZM5.14286 10.552L1.86171 8L5.14286 5.448V4L0 8L5.14286 12V10.552ZM9.02514 4L5.59657 12H6.84057L10.2691 4H9.02514Z" fill="currentColor" />
+    </svg>
+  )
 }
 
 /** Leading-slot state substitution: the tool icon yields to the terminal state
@@ -56,90 +127,120 @@ function leadingFor(state: ToolRowState, icon: ReactNode): ReactNode {
   }
 }
 
+/** Visually hidden run-state label: the StateDot and the CSS sweep are both
+ *  aria-hidden / colour-only, so assistive technology needs this text to know a
+ *  row is running, failed, or interrupted. null in the ok state (the icon and
+ *  summary already describe a settled row). */
+function stateStatus(state: ToolRowState, t: TranslateNS<'conversation'>): string | null {
+  switch (state) {
+    case 'running': return t('row.running')
+    case 'error': return t('row.failed')
+    case 'stopped': return t('row.stopped')
+    default: return null
+  }
+}
+
 export function ToolRow({
+  t,
   variant,
   toolName,
   icon,
   title,
   summary,
+  summarySuffix,
   body,
+  output,
+  errorSummary,
   terminal,
+  diff,
+  read,
+  search,
+  web,
   state,
-  expandOnRowClick = false,
   filePath,
   onOpenFile,
+  inspect,
 }: ToolRowProps) {
   const [expanded, setExpanded] = useState(false)
+  const summaryRef = useRef<HTMLSpanElement>(null)
   const terminalBody = terminal ?? null
-  // A row that names a single file keeps one interaction (open that path);
-  // args expand is off whether or not the open callback is wired yet. Terminal
-  // material still expands: only the file variants carry a path, so a terminal
-  // card and a file link never land on the same row.
-  const singleFile = filePath !== undefined
-  const fileLink = singleFile && onOpenFile !== undefined
-  const expandable = (body !== null && !singleFile) || terminalBody !== null
-  // The text arms take the empty string for a null body: a row expandable
-  // only through its terminal material renders the terminal body instead, so
-  // this substitution never shows.
-  const text = body ?? ''
+  const diffBody = diff ?? null
+  const readBody = read ?? null
+  const searchBody = search ?? null
+  const webBody = web ?? null
+  const outputText = output ?? null
+  // A card replaces the text body; a call carries at most one card kind, so the
+  // card props are mutually exclusive. Any of them, or a text body/output,
+  // makes the row expandable.
+  const card = terminalBody ?? diffBody ?? readBody ?? searchBody ?? webBody
+  const expandable = body !== null || outputText !== null || card !== null
   const open = expanded && expandable
-  const rowExpands = expandable && expandOnRowClick
+  // The run-state label AT needs: the StateDot and the running sweep are both
+  // aria-hidden / colour-only, so a stopped or running row is otherwise silent.
+  const status = stateStatus(state, t)
+  // An error row's collapsed summary IS the failure: the first error line in
+  // the error color outranks both the args summary and a terminal description.
+  const failureLine = state === 'error' ? errorSummary ?? null : null
+  const summaryText = failureLine ?? summary
+  // The failure line replaces the summary wholesale, so a suffix derived from
+  // the call args has nothing left to sit beside.
+  const suffix = failureLine === null ? summarySuffix ?? null : null
+  // The failure line is error prose, not the path: no open-file affordance.
+  const fileLink = filePath !== undefined && onOpenFile !== undefined && failureLine === null
+  const isThink = variant === 'think'
+  const followSummaryEnd = isThink && state === 'running' && !open
+  const scheduleSummaryScroll = useThrottledVisualUpdate(() => {
+    const summaryElement = summaryRef.current
+    if (summaryElement === null) return
+    summaryElement.scrollLeft = followSummaryEnd
+      ? summaryElement.scrollWidth - summaryElement.clientWidth
+      : 0
+  })
+  useEffect(() => {
+    if (!isThink) return
+    scheduleSummaryScroll()
+  }, [followSummaryEnd, isThink, scheduleSummaryScroll, summaryText])
   const toggleExpand = () => {
     setExpanded(v => !v)
   }
-  const toggleFromLeading = (event: MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation()
-    toggleExpand()
-  }
-  const toggleFromKeyboard = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (!rowExpands || (event.key !== 'Enter' && event.key !== ' ')) return
-    event.preventDefault()
-    toggleExpand()
-  }
   const openFile = (event: MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation()
     if (filePath !== undefined) onOpenFile?.(filePath)
   }
-  // Expandable rows preview the toggle on hover: the tool icon yields to a
-  // down chevron (CSS swap on .row:hover); state dots still take precedence.
-  const collapsedIcon = expandable
-    ? (
-      <>
-        <span className={css.iconIdle}>{icon}</span>
-        <IconChevronDownOutline14 className={clsx(css.chevron, css.chevronHover)} />
-      </>
-    )
-    : icon
-  const leading = open
-    ? <IconChevronDownOutline14 className={css.chevron} />
-    : leadingFor(state, collapsedIcon)
+  // Keep Enter/Space on the focused path link from bubbling to the row's
+  // keydown handler, which would preventDefault() the key and toggle expand
+  // instead of activating the link — the keyboard analogue of openFile's
+  // stopPropagation. The native button still fires its own onClick from the key.
+  const fileLinkKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') event.stopPropagation()
+  }
+  // Think reasoning is prose, not an input payload: expanded, it renders as
+  // plain indented text (no IN/OUT card) and the inline summary yields to avoid
+  // repeating the body.
+  // The code variant's program renders through CodeBlock (shiki), so only its
+  // output joins the IN/OUT card; every other variant's input does too.
+  const cardBody = variant === 'code' ? null : body
+  // The state substitution rides the idle icon slot, so an expandable error
+  // row keeps DisclosureRow's icon→chevron hover preview (its default) instead
+  // of losing it with the icon.
   return (
     <div className={css.root} data-variant={variant} data-tool={toolName} data-state={state}>
-      <div
-        className={css.row}
-        data-expandable={rowExpands || undefined}
-        role={rowExpands ? 'button' : undefined}
-        tabIndex={rowExpands ? 0 : undefined}
-        aria-expanded={rowExpands ? open : undefined}
-        onClick={rowExpands ? toggleExpand : undefined}
-        onKeyDown={rowExpands ? toggleFromKeyboard : undefined}
-      >
-        {expandable && !rowExpands ? (
-          <button
-            type="button"
-            className={css.leading}
-            aria-expanded={open}
-            onClick={toggleFromLeading}
-          >
-            {leading}
-          </button>
-        ) : (
-          <span className={css.leading}>
-            {leading}
-          </span>
-        )}
-        <span className={css.title}>{title}</span>
-        {!open && (
+      {status !== null && <span className={css.visuallyHidden}>{status}</span>}
+      <DisclosureRow
+        rowClassName={css.row}
+        leadingClassName={css.leading}
+        titleClassName={css.title}
+        chevronClassName={css.chevron}
+        icon={leadingFor(state, icon)}
+        title={title}
+        open={open}
+        expandable={expandable}
+        expandOnRowClick
+        keepContentWhenOpen={!isThink}
+        onToggle={toggleExpand}
+        collapsedContent={summaryText !== '' && (
+          /* An empty summary drops the separator with it (a row that is only
+             its title shows no trailing dot). */
           <>
             <span className={css.sep} aria-hidden />
             {fileLink ? (
@@ -147,26 +248,96 @@ export function ToolRow({
                 type="button"
                 className={css.fileLink}
                 onClick={openFile}
+                onKeyDown={fileLinkKeyDown}
               >
-                {summary}
+                {summaryText}
               </button>
             ) : (
-              <span className={css.summary}>{summary}</span>
+              <span
+                ref={isThink ? summaryRef : undefined}
+                className={clsx(css.summary, failureLine !== null && css.errorSummary)}
+                data-follow-end={followSummaryEnd || undefined}
+              >
+                {summaryText}
+              </span>
             )}
+            {suffix !== null && <span className={css.summarySuffix}>{suffix}</span>}
           </>
         )}
-      </div>
-      {/* The terminal presenter's description belongs ABOVE the card per the
-          render-intent contract, so an expanded terminal row keeps showing it
-          even though the collapsed summary is hidden while open. */}
-      {open && terminalBody?.description !== undefined && (
-        <div className={css.terminalDescription}>{terminalBody.description}</div>
-      )}
-      {open && (terminalBody !== null
-        ? <TerminalBlock {...terminalBody.card} maxLines={CHAT_TERMINAL_MAX_LINES} className={css.terminalBody} />
-        : variant === 'code'
-          ? <CodeBlock code={text} lang="typescript" className={css.codeBody} />
-          : <div className={css.body}>{text}</div>)}
+      >
+        {/* The wrapper (sibling of the header row, so clicks inside never
+            toggle it) carries the expanded body and the Inspect pill below. */}
+        <div className={css.bodyWrap}>
+          {terminalBody !== null
+            ? (
+              <TerminalBlock
+                {...terminalBody.card}
+                maxLines={Infinity}
+                labels={terminalBlockLabels(t)}
+                className={css.terminalBody}
+              />
+            )
+            : diffBody !== null
+              ? <DiffBlock {...diffBody.card} maxLines={CHAT_DIFF_MAX_LINES} className={css.diffBody} />
+              : readBody !== null
+                ? <ReadBlock {...readBody} maxLines={CHAT_READ_MAX_LINES} className={css.readBody} />
+                : searchBody !== null
+                  ? (
+                    <>
+                      <SearchBlock {...searchBody.card} maxLines={CHAT_SEARCH_MAX_LINES} className={css.searchBody} />
+                      {/* A capped search's recovery locator lives only in the result
+                          text; show it below the card so the dropped rows survive. */}
+                      {searchBody.recovery !== undefined && (
+                        <div className={css.searchRecovery}>{searchBody.recovery}</div>
+                      )}
+                    </>
+                  )
+                  : webBody !== null
+                    ? <WebBlock {...webBody} className={css.webBody} />
+                    : isThink
+                      ? <div className={css.thinkBody}>{body}</div>
+                      : (
+                        <>
+                          {variant === 'code' && body !== null && (
+                            <div className={css.bodyScroll}>
+                              <CodeBlock code={body} lang="typescript" copyLabel={t('copy')} copiedLabel={t('copied')} className={css.codeBody} />
+                            </div>
+                          )}
+                          {(cardBody !== null || outputText !== null) && (
+                            <div className={css.ioCard}>
+                              {cardBody !== null && (
+                                <div className={css.ioSection}>
+                                  <span className={css.ioLabel}>IN</span>
+                                  <span className={css.ioText}>{cardBody}</span>
+                                </div>
+                              )}
+                              {cardBody !== null && outputText !== null && (
+                                <span className={css.ioDivider} aria-hidden />
+                              )}
+                              {outputText !== null && (
+                                <div className={css.ioSection}>
+                                  <span className={css.ioLabel}>OUT</span>
+                                  <span className={css.ioText} data-error={state === 'error' || undefined}>
+                                    {outputText}
+                                  </span>
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </>
+                      )}
+          {inspect !== undefined && (
+            <button
+              type="button"
+              className={css.inspectButton}
+              onClick={inspect}
+            >
+              <IconInspect />
+              Inspect
+            </button>
+          )}
+        </div>
+      </DisclosureRow>
     </div>
   )
 }

packages/client/ui-conversation/src/client/chat/chat-flow.ts

@@ -1,17 +1,27 @@
 /**
  * Chat flow derivation: ConversationSnapshot nodes -> render items. Tool
  * results group into consecutive-run tool groups (figma step-summary flow,
- * VERTICAL gap10) alternating with narration; everything else passes through.
+ * VERTICAL gap10) alternating with narration. Consecutive retry notices
+ * reuse the first notice's row while projecting the latest retry turn.
  * Item identity keys are stable across snapshots so the list parent can
- * subscribe to keys only while rows subscribe to content.
+ * subscribe to keys only while rows subscribe to content. IconActions ownership
+ * and completed-turn branch points are derived here too so ChatView and the
+ * flow share their gates.
  */
-import type { ConversationNode, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client'
+import type {
+  AssistantBlock, ConversationNode, ConversationSnapshot, ToolResultNode,
+} from '@deepseek-ai/dsh-client-runtime/client'
 
 /** One renderable flow item; key is the React key and the parent's identity unit. */
 export type ChatFlowItem =
   | { kind: 'node'; key: string; node: ConversationNode }
   | { kind: 'tool-group'; key: string; results: readonly ToolResultNode[] }
 
+/** True when the node has model-visible text content worth IconActions chrome. */
+function hasContentText(blocks: readonly AssistantBlock[]): boolean {
+  return blocks.some(block => block.kind === 'text' && block.text.trim() !== '')
+}
+
 /** An assistant node that renders nothing: only tool-call heads (rows render
  *  via the grouping pass) and blank text/reasoning. Skipped by the flow so it
  *  neither costs column gaps nor splits a tool-row run. Interrupted nodes
@@ -23,9 +33,71 @@ function rendersNothing(node: ConversationNode): boolean {
 }
 
 /**
- * Group finalized nodes into the step-summary flow.
+ * Seq set of assistants that own IconActions: the last content-text assistant
+ * in each turn. Mid-turn narration (text before tools) stays chrome-free.
  * @param nodes - snapshot nodes (surface order).
- * @returns flow items; consecutive tool-results merged into one group keyed by the first seq.
+ * @returns Seq values ChatView may pass as `time` into AssistantMarkdown.
+ */
+export function assistantActionsSeqs(nodes: readonly ConversationNode[]): ReadonlySet<number> {
+  const lastByTurn = new Map<number, number>()
+  for (const node of nodes) {
+    if (node.kind !== 'assistant' || !hasContentText(node.blocks)) continue
+    lastByTurn.set(node.turn, node.seq)
+  }
+  return new Set(lastByTurn.values())
+}
+
+/**
+ * Exact start time of the latest in-window turn without a matching end time.
+ * @param turnTimings - In-window turn timings in event order.
+ * @returns Unix epoch ms, or null when the running turn started outside the window.
+ */
+export function runningTurnStartTime(
+  turnTimings: ConversationSnapshot['turnTimings'],
+): number | null {
+  let latest: number | null = null
+  for (const timing of turnTimings.values()) {
+    if (timing.endTime === undefined) latest = timing.startTime
+  }
+  return latest
+}
+
+/**
+ * Seq set of message rows that may fork: the last transcript node of a
+ * completed turn, when that node owns message chrome. A later tool, reasoning,
+ * error, or other transcript node leaves the earlier message's branch action
+ * unavailable because the Host would include the whole turn.
+ * @param nodes - snapshot nodes in event order.
+ * @param turnEnds - completed turn boundaries retained from the event window.
+ * @returns Message seq values whose visible position matches the fork boundary.
+ */
+export function messageBranchSeqs(
+  nodes: readonly ConversationNode[],
+  turnEnds: ReadonlyMap<number, number>,
+): ReadonlySet<number> {
+  const result = new Set<number>()
+  const boundaries = [...turnEnds].sort((a, b) => a[1] - b[1])
+  let nodeIndex = 0
+  for (const [turn, endSeq] of boundaries) {
+    let tail: ConversationNode | undefined
+    while (nodeIndex < nodes.length) {
+      const candidate = nodes[nodeIndex]
+      if (candidate === undefined || candidate.seq > endSeq) break
+      tail = candidate
+      nodeIndex++
+    }
+    if (tail?.kind === 'user'
+      || (tail?.kind === 'assistant' && tail.turn === turn && hasContentText(tail.blocks))) {
+      result.add(tail.seq)
+    }
+  }
+  return result
+}
+
+/**
+ * Group finalized nodes into the step-summary flow.
+ * @param nodes - snapshot nodes in human-transcript and durable-notice order.
+ * @returns flow items; consecutive tool results group and retry notices reuse their first key.
  */
 export function deriveChatFlow(nodes: readonly ConversationNode[]): ChatFlowItem[] {
   const items: ChatFlowItem[] = []
@@ -39,6 +111,17 @@ export function deriveChatFlow(nodes: readonly ConversationNode[]): ChatFlowItem
       } else {
         group.push(node)
       }
+    } else if (node.kind === 'model-retry') {
+      group = null
+      const previous = items[items.length - 1]
+      if (
+        previous?.kind === 'node'
+        && previous.node.kind === 'model-retry'
+      ) {
+        items[items.length - 1] = { ...previous, node }
+      } else {
+        items.push({ kind: 'node', key: `n${node.seq}`, node })
+      }
     } else {
       group = null
       items.push({ kind: 'node', key: `n${node.seq}`, node })

packages/client/ui-conversation/src/client/chat/message-chrome.ts

@@ -1,45 +1,12 @@
-// Shared chrome helpers for user/assistant IconActions rows: clipboard write
-// and the compact date+clock label from a session-event epoch.
+// Shared time-label helpers for user/assistant IconActions rows.
 
-/**
- * Best-effort clipboard write; rejections stay swallowed (no success chrome).
- * @param text - Plain text to place on the clipboard.
- */
-export async function writeClipboard(text: string): Promise<void> {
-  // lib.dom types clipboard non-optional, but insecure contexts omit it —
-  // that runtime gap is exactly what this guard detects.
-  /* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */
-  if (navigator.clipboard?.writeText) {
-    try {
-      await navigator.clipboard.writeText(text)
-    } catch {
-      // Denied permissions / iframe policy.
-    }
-    return
-  }
-  // execCommand('copy') is the only clipboard fallback where the async API
-  // is missing (insecure contexts); deprecated but deliberately retained.
-  /* eslint-disable @typescript-eslint/no-deprecated */
-  const exec = typeof document.execCommand === 'function'
-    ? document.execCommand.bind(document)
-    : undefined
-  if (exec === undefined) return
-  const el = document.createElement('textarea')
-  el.value = text
-  el.setAttribute('readonly', '')
-  el.style.position = 'fixed'
-  el.style.left = '-9999px'
-  document.body.appendChild(el)
-  el.select()
-  try {
-    exec('copy')
-  } catch {
-    // Clipboard unavailable; the button stays idle.
-  }
-  /* eslint-enable @typescript-eslint/no-deprecated */
-  el.remove()
-}
+import type { Translate } from '@deepseek-ai/dsh-client-ui-slots'
 
+/** The date-template share of the conversation dictionary the clock consumes. */
+export type ClockTranslate = Translate<'clock.md' | 'clock.ymd'>
+
+/** The elapsed-duration share of the conversation dictionary. */
+export type RunDurationTranslate = Translate<'duration.seconds' | 'duration.minutes'>
 function pad2(n: number): string {
   return String(n).padStart(2, '0')
 }
@@ -67,14 +34,31 @@ export function msUntilNextLocalMidnight(ms: number): number {
 }
 
 /**
- * Compact local timestamp for message IconActions.
- * Same calendar day → `HH:mm`; earlier this year → `M月D日 HH:mm`;
- * other years → `YYYY年M月D日 HH:mm`.
+ * Localized elapsed-time label shared by running and settled turn chrome.
+ * @param ms - Elapsed duration in milliseconds (negatives clamp to zero).
+ * @param t - Translate seat supplying the duration templates.
+ * @returns Display string in whole seconds.
+ */
+export function formatRunDuration(ms: number, t: RunDurationTranslate): string {
+  const total = Math.max(0, Math.floor(ms / 1000))
+  const minutes = Math.floor(total / 60)
+  const seconds = total % 60
+  return minutes > 0
+    ? t('duration.minutes', { minutes, seconds: String(seconds).padStart(2, '0') })
+    : t('duration.seconds', { seconds })
+}
+
+/**
+ * Compact local timestamp for message IconActions. Same calendar day →
+ * `HH:mm`; earlier this year → the `clock.md` date template + clock; other
+ * years → the `clock.ymd` template + clock. Pure: the date templates arrive
+ * through the caller's locale seat.
  * @param time - Unix epoch ms from the source session event.
+ * @param t - translate seat supplying the `clock.md` / `clock.ymd` templates.
  * @param now - Reference instant for the day/year cut (defaults to wall clock).
  * @returns Date-aware clock string (24-hour, zero-padded time).
  */
-export function formatMessageClock(time: number, now: number = Date.now()): string {
+export function formatMessageClock(time: number, t: ClockTranslate, now: number = Date.now()): string {
   const d = new Date(time)
   const n = new Date(now)
   const clock = `${pad2(d.getHours())}:${pad2(d.getMinutes())}`
@@ -85,7 +69,7 @@ export function formatMessageClock(time: number, now: number = Date.now()): stri
   ) {
     return clock
   }
-  const md = `${d.getMonth() + 1}月${d.getDate()}日`
-  if (d.getFullYear() === n.getFullYear()) return `${md} ${clock}`
-  return `${d.getFullYear()}年${md} ${clock}`
+  const params = { y: d.getFullYear(), m: d.getMonth() + 1, d: d.getDate() }
+  const md = d.getFullYear() === n.getFullYear() ? t('clock.md', params) : t('clock.ymd', params)
+  return `${md} ${clock}`
 }

packages/client/ui-conversation/src/client/chat/use-throttled-visual-update.ts

@@ -0,0 +1,42 @@
+/** Frame-throttled scheduling for non-essential visual alignment. */
+
+import { useCallback, useLayoutEffect, useRef } from 'react'
+
+const DEFAULT_INTERVAL_FRAMES = 3
+
+/**
+ * Return a stable scheduler that coalesces visual updates over a frame interval.
+ * Repeated calls retain the latest callback, and unmount cancels pending work.
+ * @param update - DOM alignment to run after the throttle interval.
+ * @param intervalFrames - Frames to wait before applying the latest alignment.
+ * @returns a stable function that schedules the latest update.
+ */
+export function useThrottledVisualUpdate(
+  update: () => void,
+  intervalFrames = DEFAULT_INTERVAL_FRAMES,
+): () => void {
+  const updateRef = useRef(update)
+  updateRef.current = update
+  const pendingFrameRef = useRef<number | null>(null)
+
+  useLayoutEffect(() => () => {
+    if (pendingFrameRef.current === null) return
+    cancelAnimationFrame(pendingFrameRef.current)
+    pendingFrameRef.current = null
+  }, [])
+
+  return useCallback(() => {
+    if (pendingFrameRef.current !== null) return
+    let remainingFrames = intervalFrames
+    const advance = (): void => {
+      remainingFrames -= 1
+      if (remainingFrames > 0) {
+        pendingFrameRef.current = requestAnimationFrame(advance)
+        return
+      }
+      pendingFrameRef.current = null
+      updateRef.current()
+    }
+    pendingFrameRef.current = requestAnimationFrame(advance)
+  }, [intervalFrames])
+}

packages/client/ui-conversation/src/client/contract/composer-submission.ts

@@ -0,0 +1,10 @@
+/** Composer submission vocabulary shared by the input and settings domains. */
+
+/** Delivery mode requested for one ordinary composer message. */
+export type InputSubmitMode = 'queue' | 'steer'
+
+/** Configurable meaning of plain Enter while the addressed agent is busy. */
+export type BusyEnterBehavior = InputSubmitMode
+
+/** Keyboard gesture whose delivery mode the submission policy resolves. */
+export type ComposerSubmitGesture = 'enter' | 'accelerated'

packages/client/ui-conversation/src/client/contract/diff-card-model.ts

@@ -0,0 +1,97 @@
+/**
+ * Pure derivation of the diff-card props from a frozen call slice: the
+ * `card:'diff'` render intent the write/edit tools declare arrives on the
+ * snapshot as `callView`/`resultView`, and this is the one place that turns
+ * that pair into what {@link DiffBlock} draws. Both conversation render sites
+ * (the chat tool row's expanded body and the details panel's Output section)
+ * call this, so the hunks they show are derived once.
+ * @module
+ */
+import type { DiffBlockProps, DiffHunk } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ToolCallBlock } from './tool-call-model.ts'
+
+/**
+ * Diff-body lines the chat row shows before collapsing the middle — half the
+ * primitive's own default, which the details panel keeps. A chat row is a
+ * summary surface inside the message flow: the flow must stay scannable across
+ * many calls, while the details panel is the single-call reading surface. The
+ * same split {@link CHAT_TERMINAL_MAX_LINES} draws for a terminal card, so the
+ * two card kinds cap a long body at the same place in the flow. A design
+ * constant of this UI's row geometry, not a deployment choice.
+ */
+export const CHAT_DIFF_MAX_LINES = 8
+
+/**
+ * The {@link DiffBlock} props this derivation owns. Picked off the primitive's
+ * props so the two stay in step; `maxLines`/`className` belong to each render
+ * site.
+ */
+export interface DiffCardModel {
+  /**
+   * The props {@link DiffBlock} draws. Held as a nested object so a render site
+   * spreads exactly the primitive's own surface and can never leak a
+   * neighbouring field into it.
+   */
+  card: Pick<DiffBlockProps, 'diffs'>
+}
+
+/**
+ * Narrow a wire `card:'diff'` view's `diffs` to well-formed hunks. The event
+ * view crosses the wire and `toolEventViewSchema` validates only the `card`
+ * string, so a version mismatch or an anomalous plugin can deliver a `diff` card
+ * whose `diffs` is absent, not an array, or carries malformed hunks. Returning
+ * null for any of those routes the block to the generic path instead of letting
+ * DiffBlock's `for...of`/`split` throw and crash the row or the details panel.
+ * @param diffs - the view's `diffs` field, unverified.
+ * @returns the validated hunks, or null when the payload is not usable.
+ */
+function narrowDiffs(diffs: unknown): DiffHunk[] | null {
+  if (!Array.isArray(diffs) || diffs.length === 0) return null
+  const out: DiffHunk[] = []
+  for (const hunk of diffs) {
+    if (typeof hunk !== 'object' || hunk === null) return null
+    const { path, oldText, newText } = hunk as Record<string, unknown>
+    if (typeof path !== 'string') return null
+    if (oldText !== null && typeof oldText !== 'string') return null
+    if (typeof newText !== 'string') return null
+    out.push({ path, oldText, newText })
+  }
+  return out
+}
+
+/**
+ * Derive the diff-card props for a tool call, or null when this call is not a
+ * diff card and belongs on the generic path.
+ *
+ * The result side is authoritative once the call settles: the write/edit tools
+ * return the applied contextual hunks there (an edit's real before/after, a
+ * create's whole-file diff), which replace the call-time diff derived from the
+ * arguments alone. While the call is still running only the call side exists,
+ * so a running write/edit shows its intended change. Null is the documented
+ * generic-card default and covers every non-diff card — including a `card`
+ * value this UI version does not know, which arrives over the wire and cannot
+ * be trusted to be one of the compiled variants — and a settled call whose
+ * result view is generic (how write/edit keep their execution errors on the
+ * generic path).
+ *
+ * This derivation consumes only `diffs`; the render intent's `title` field is
+ * deliberately dropped. The row supplies its own title (`Edit`/`Write · path`
+ * from the args), which outranks the view's `title`. A tool that names its own
+ * diff header therefore does not surface that text on the Web row.
+ * @param block - RunningToolCall or ToolResultNode off the snapshot caches.
+ * @returns the diff-card props, or null for the generic path.
+ */
+export function diffCardModel(block: ToolCallBlock): DiffCardModel | null {
+  if (!('kind' in block)) {
+    // Running: the call view may carry the intended diff; the result is absent.
+    const call = block.callView?.card === 'diff' ? block.callView : null
+    const diffs = call === null ? null : narrowDiffs(call.diffs)
+    return diffs === null ? null : { card: { diffs } }
+  }
+  // Settled: the result view's applied hunks replace the call-time diff. A
+  // window that dropped the call head leaves only the result, which still
+  // renders — the result view carries the whole change.
+  const result = block.resultView?.card === 'diff' ? block.resultView : null
+  const diffs = result === null ? null : narrowDiffs(result.diffs)
+  return diffs === null ? null : { card: { diffs } }
+}

packages/client/ui-conversation/src/client/contract/queue.ts

@@ -0,0 +1,13 @@
+/** Queue contracts derived from the runtime session face and snapshot. */
+import type {
+  ConversationSnapshot, SessionFace,
+} from '@deepseek-ai/dsh-client-runtime/client'
+
+/** One address accepted by the runtime session's queue mutation verb. */
+export type QueueItemId = Parameters<SessionFace['updateQueue']>[0]
+
+/** One mutation accepted by the runtime session's queue mutation verb. */
+export type QueueAction = Parameters<SessionFace['updateQueue']>[1]
+
+/** One row projected by the runtime session's authoritative queue snapshot. */
+export type QueueRow = ConversationSnapshot['queue'][number]

packages/client/ui-conversation/src/client/contract/read-card-model.ts

@@ -0,0 +1,76 @@
+/**
+ * Pure derivation of the read-card props from a frozen call slice: the
+ * `card:'read'` render intent the read tool declares arrives on the snapshot as
+ * the settled result node's `resultView`, and this is the one place that turns
+ * it into what {@link ReadBlock} draws. Both conversation render sites (the chat
+ * tool row's resident body and the details panel's Output section) call this, so
+ * the path, lines, total, and language they show are derived once.
+ *
+ * The read card is result-side only ([read card note](../../../../../../.agents/notes/implemented/feature/2026-07-30-web-read-card.md)):
+ * a call carries no file content until `execute` returns, so the pending call
+ * stays a generic card (`kind: 'read'`). A running read therefore has no read
+ * card, and this returns null for it — the row keeps its args-derived summary
+ * until the result arrives.
+ * @module
+ */
+import type { ReadBlockLine, ReadBlockProps } from '@deepseek-ai/dsh-client-ui-primitives'
+import { relativizeToCwd, type ToolCallBlock } from './tool-call-model.ts'
+
+/**
+ * Content lines the chat row's resident read body shows before collapsing the
+ * middle — half the primitive's own default, which the details panel keeps. A
+ * chat row is a summary surface inside the message flow: the flow must stay
+ * scannable across many calls, while the details panel is the single-call
+ * reading surface. A design constant of this UI's row geometry, not a
+ * deployment choice, so it is fixed here rather than a plugin Config field. The
+ * same split [`CHAT_TERMINAL_MAX_LINES`](./terminal-card-model.ts) draws for
+ * terminal output.
+ */
+export const CHAT_READ_MAX_LINES = 8
+
+/**
+ * The {@link ReadBlock} props this derivation owns. Picked off the primitive's
+ * props so the two stay in step; `maxLines`/`className` belong to each render
+ * site.
+ */
+export type ReadCardModel = Pick<ReadBlockProps, 'label' | 'lines' | 'totalLines' | 'lang'>
+
+/**
+ * Derive the read-card props for a tool call, or null when this call is not a
+ * read card and belongs on the generic path.
+ *
+ * The read card is result-side only, so only a settled call whose result view
+ * declares `card:'read'` produces one. Every other case is null — the
+ * documented generic-card default:
+ *
+ * - A running call: it has no result view yet, and a read carries no content at
+ *   call time.
+ * - A settled call whose result view is not a read card — including a `card`
+ *   value this UI version does not know, which arrives over the wire and cannot
+ *   be trusted to be one of the compiled variants, and the read tool's own
+ *   generic fallback for an error result or a non-envelope body.
+ *
+ * The label is the read view's `title` when the tool supplied one (the
+ * presentation contract's replacement-title rule), otherwise the file path
+ * relativized to the session workspace so a workspace-rooted absolute path
+ * displays the same short form the row summary shows.
+ * @param block - RunningToolCall or ToolResultNode off the snapshot caches.
+ * @param sessionCwd - the session workspace root; a workspace-rooted absolute
+ *   path label displays relative to it. Absent leaves the path as authored.
+ * @returns the read-card props, or null for the generic path.
+ */
+export function readCardModel(block: ToolCallBlock, sessionCwd?: string): ReadCardModel | null {
+  // Running has no result view; a read carries no content until execute returns.
+  if (!('kind' in block)) return null
+  const result = block.resultView?.card === 'read' ? block.resultView : null
+  if (result === null) return null
+  // Lines arrive frozen off the snapshot; copy into the primitive's own line
+  // shape so the card never holds a reference into the runtime's cache.
+  const lines: ReadBlockLine[] = result.lines.map(line => ({ number: line.number, text: line.text }))
+  return {
+    label: result.title ?? relativizeToCwd(result.path, sessionCwd),
+    lines,
+    totalLines: result.totalLines,
+    lang: result.lang,
+  }
+}

packages/client/ui-conversation/src/client/contract/search-card-model.ts

@@ -0,0 +1,159 @@
+/**
+ * Pure derivation of the search-card props from a frozen call slice: the
+ * `card:'search'` render intent the `grep` and `glob` tools declare arrives on
+ * the snapshot as `resultView`, and this is the one place that turns it into
+ * what {@link SearchBlock} draws. Both conversation render sites (the chat tool
+ * row's resident body and the details panel's Output section) call this, so the
+ * grouped matches or the path list they show are derived once.
+ *
+ * The search card is result-time only: a search call has no matches or paths
+ * before `execute`, so its pending state stays a `GenericCallView`
+ * ({@link module:@deepseek-ai/dsh-tools/src/presentation}). This derivation
+ * therefore reads only `resultView` and returns null for a still-running call,
+ * unlike the terminal card whose call view carries the command before
+ * execution.
+ *
+ * A capped result also carries a recovery locator (grep/glob's `Full … stored
+ * at …` footer) in the raw `tool/result` content, not in the structured
+ * matches/paths the view carries. Since both render sites replace that raw
+ * result with the card, this derivation surfaces the block's own result text as
+ * {@link SearchCardModel.recovery} so the one path to the dropped rows is not
+ * lost.
+ * @module
+ */
+import type { SearchBlockProps, SearchFileGroup } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ToolCallBlock } from './tool-call-model.ts'
+
+/**
+ * Distributive `Omit`: a plain `Omit<A | B, K>` keeps only the keys common to
+ * both members, which would drop the `files`/`paths` discriminated fields.
+ * Distributing over the naked type parameter `T` preserves each shape.
+ */
+type DistributiveOmit<T, K extends keyof T> = T extends unknown ? Omit<T, K> : never
+
+/** The {@link SearchBlockProps} union minus each render site's own fields. */
+type SearchBlockModelProps = DistributiveOmit<SearchBlockProps, 'maxLines' | 'className'>
+
+/**
+ * Result rows the chat row's resident search body shows before collapsing the
+ * middle — half the primitive's own default, which the details panel keeps. A
+ * chat row is a summary surface inside the message flow: the flow must stay
+ * scannable across many calls, while the details panel is the single-call
+ * reading surface. A design constant of this UI's row geometry, not a
+ * deployment choice, so it is fixed here rather than a plugin Config field.
+ */
+export const CHAT_SEARCH_MAX_LINES = 8
+
+/**
+ * The {@link SearchBlock} props this derivation owns. Held as a nested object
+ * (`card`) so a render site spreads exactly the primitive's own surface and can
+ * never leak a neighbouring field into it. `maxLines`/`className` belong to each
+ * render site.
+ */
+export interface SearchCardModel {
+  /**
+   * The props {@link SearchBlock} draws, minus each render site's own
+   * `maxLines`/`className`.
+   */
+  card: SearchBlockModelProps
+  /**
+   * The result view's replacement title, which the presentation contract lets a
+   * search tool set at settle time. Absent when the presenter supplied none; a
+   * row then keeps its args-derived summary.
+   */
+  title: string | undefined
+  /**
+   * The raw `tool/result` text, flattened, surfaced only when the search was
+   * capped. The card renders the retained matches or paths, but the recovery
+   * locator a capped result carries — grep/glob's `Full … stored at: <locator>`
+   * footer, the one way to reach the rows the cap dropped — lives only in the raw
+   * result text, which the card replaces. A UI that shows the card would
+   * otherwise lose it. Absent when the result was not capped (the card holds
+   * every result) or the block carries no text.
+   */
+  recovery: string | undefined
+}
+
+/**
+ * Whether every file group in a matches view is structurally valid: the wire
+ * frame carries `shape` and `card` as strings the host schema checks, but not the
+ * grouped shape, so a version mismatch or loose producer could deliver
+ * `shape: 'matches'` with a missing or malformed `files`. Rendering that would
+ * crash {@link SearchBlock} at `.reduce`/`.map`; an invalid shape falls to the
+ * generic path instead.
+ * @param files - the candidate `files` field off the untrusted result view.
+ * @returns whether `files` is a valid {@link SearchFileGroup} array.
+ */
+function isValidFiles(files: unknown): files is SearchFileGroup[] {
+  return Array.isArray(files) && files.every(file =>
+    typeof file === 'object' && file !== null
+    && typeof (file as { path?: unknown }).path === 'string'
+    && Array.isArray((file as { matches?: unknown }).matches)
+    && (file as { matches: unknown[] }).matches.every(match =>
+      typeof match === 'object' && match !== null
+      && typeof (match as { lineNumber?: unknown }).lineNumber === 'number'
+      && typeof (match as { line?: unknown }).line === 'string'))
+}
+
+/**
+ * Flatten a settled tool result's content blocks to their text, joined by
+ * newlines. The search view carries no result text — a UI without a card falls
+ * back to the raw `tool/result` content — so the truncation recovery footer is
+ * read from the block's own content here. Non-text blocks (a search result
+ * carries none) are skipped.
+ * @param content - the result node's content blocks.
+ * @returns the joined text, or undefined when empty.
+ */
+function flattenContent(content: readonly { type: string; text?: string }[]): string | undefined {
+  const text = content
+    .filter((block): block is { type: 'text'; text: string } => block.type === 'text' && typeof block.text === 'string')
+    .map(block => block.text)
+    .join('\n')
+  return text === '' ? undefined : text
+}
+
+/**
+ * Derive the search-card props for a tool call, or null when this call is not a
+ * search card and belongs on the generic path.
+ *
+ * Only the result side matters: the search card carries no call-time state, so
+ * a still-running call (no result view) is null, as is a settled call whose
+ * result view is not a search card — including a `card` value this UI version
+ * does not know, which arrives over the wire and cannot be trusted to be one of
+ * the compiled variants, a `card: 'search'` view whose `shape` is neither
+ * `matches` nor `paths` (equally untrusted wire data), and a generic result a
+ * `grep`/`glob` failure or nested `run_code` dispatch produces (its text keeps
+ * the generic path).
+ * @param block - RunningToolCall or ToolResultNode off the snapshot caches.
+ * @returns the search-card props, or null for the generic path.
+ */
+export function searchCardModel(block: ToolCallBlock): SearchCardModel | null {
+  // Running: no result view exists yet, and a search card is result-only.
+  if (!('kind' in block)) return null
+  const result = block.resultView?.card === 'search' ? block.resultView : null
+  if (result === null) return null
+  const common = { truncated: result.truncated, total: result.total }
+  // The recovery footer only matters when the tool capped the result: an
+  // uncapped card holds every match/path, so the raw text adds nothing the card
+  // does not already show. When capped, the raw result's `Full … stored at …`
+  // locator is the only path to the dropped rows, so surface it.
+  const recovery = result.truncated ? flattenContent(block.content) : undefined
+  if (result.shape === 'matches') {
+    // `files` rides the untrusted wire frame: the host schema checks `card`/`shape`
+    // strings but not the grouped shape, so validate it before SearchBlock, which
+    // would crash on a missing/malformed `files`. An invalid shape falls to generic.
+    if (!isValidFiles(result.files)) return null
+    return { title: result.title, recovery, card: { kind: 'matches', files: result.files, ...common } }
+  }
+  // `shape` rides the same untrusted wire frame as `card`, so a version mismatch
+  // or a loose protocol producer could deliver a `card: 'search'` subtype this
+  // client does not compile. Guard the paths shape explicitly: an unknown shape
+  // falls to the generic path rather than being rendered as a paths card, which
+  // would leave SearchBlock calling `.length`/`.map` on an absent `paths`.
+  // oxlint-disable-next-line typescript/no-unnecessary-condition -- shape is wire data; the compiled union cannot prove this exhaustive.
+  if (result.shape !== 'paths') return null
+  // `paths` is likewise unchecked by the wire schema; a known shape with a
+  // missing/malformed array would crash the paths card at `.map`.
+  if (!Array.isArray(result.paths) || !result.paths.every((path): path is string => typeof path === 'string')) return null
+  return { title: result.title, recovery, card: { kind: 'paths', paths: result.paths, ...common } }
+}

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

@@ -1,12 +1,13 @@
 /** Conversation slot declarations and their composed component props. */
 import type { ReactNode, RefObject } from 'react'
 import type {
-  InjectFace, MaybeSnapshotSelectorHook, PropsRenderSlots, PropsRuntime, PropsStore, SnapshotSelectorHook,
+  InjectFace, MaybeSnapshotSelectorHook, PropsLocale, PropsRenderSlots, PropsRuntime, PropsStore, SnapshotSelectorHook,
 } from '@deepseek-ai/dsh-client-ui-slots'
 import type { CommandNode, ConversationSnapshot, ObservableSnapshot, PendingInteraction, PendingWait, SessionId, ToolCallBlock, WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
 import type {} from '@deepseek-ai/dsh-client-ui-layout/client'
-import type { ComposerKeyboard, InputActions, InputNotice, InputState } from '../input/contract.ts'
+import type { ComposerKeyboard, EditSelection, InputActions, InputNotice, InputState } from '../input/contract.ts'
 import type { createChatStore } from '../stores.ts'
+import type { ComposerSubmitGesture, InputSubmitMode } from './composer-submission.ts'
 import type { CallId, SelectionTarget, ViewTab } from './views.ts'
 
 declare module '@deepseek-ai/dsh-client-ui-slots' {
@@ -17,6 +18,8 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
      * remounted when the current session id changes.
      */
     'conversation.session': { kind: 'single'; scope: 'session'; owner: ConversationSessionOwnerProps }
+    /** Session-header actions contributed by feature plugins. */
+    'conversation.session.header.actions': { kind: 'list'; scope: 'session'; owner: ConversationHeaderActionOwnerProps }
     /**
      * The conversation view ring: one list entry per view tab (chat here;
      * trajectory/waterfall from ui-trajectory), rendered one-at-a-time by
@@ -67,7 +70,7 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
      * design §6 MIX evidence: entries coexist in fixed order).
      */
     'conversation.input.dock': { kind: 'list'; scope: 'session'; owner: InputZone }
-    /** The composer top-edge band (stats line family). */
+    /** The band under the composer card (stats line family), rendered inside the bar's width column via the `footer` owner prop. */
     'conversation.composer.dock': { kind: 'list'; scope: 'session'; owner: InputZone }
     /** Tool-row left region inside the input card (existing chrome stays in place beside entries). */
     'conversation.input.left': { kind: 'list'; scope: 'session'; owner: InputZone }
@@ -77,11 +80,15 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
      * The default composer body: a single slot rendered as the composer
      * chain's fallback (decision 20 — a real entry, not a chain rider, so a
      * takeover election hides rather than unmounts it and the textarea DOM
-     * survives). InputBar registers here from this package's apply; its
-     * machine state arrives through the standard provide channel (useInput +
-     * inputActions), the keyboard command face through its own inject.
+     * survives). Session-maybe: the bar stays mounted across the
+     * no-session/session transition — the no-workspace hero renders the SAME
+     * textarea DOM disabled instead of a parallel inert tree — with the
+     * machine hooks absent until a session is current. InputBar registers
+     * here from this package's apply; its machine state arrives through the
+     * standard provide channel (useInput + inputActions), the keyboard
+     * command face through its own inject.
      */
-    'conversation.composer.bar': { kind: 'single'; scope: 'session'; owner: ComposerBarOwnerProps }
+    'conversation.composer.bar': { kind: 'single'; scope: 'session-maybe'; owner: ComposerBarOwnerProps }
     /**
      * The Plan-mode status seat in the composer tool row (left group,
      * right of the access-mode control). Declared by the composer-bar
@@ -117,8 +124,23 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
 
 /** Owner share of the strict session content seat. */
 export interface ConversationSessionOwnerProps {
+  /**
+   * Wrap the view ring in the transcript scrollport that also hosts the
+   * sticky composer seat (whole `'conversation.composer'` chain output).
+   * Supplied for every real session (hero/settling/active) so the composer
+   * keeps one tree seat across the blank → active flip; the header stays
+   * outside that wrapper as ordinary column chrome (`flex: none`), while
+   * active CSS sticks the seat to the bottom of the same scrollport so wheel
+   * over the footer scrolls the flow.
+   * @param view - the session view-ring content (null while blank chrome is hidden).
+   * @returns the scrollport containing `view` and the sticky composer seat.
+   */
+  wrapActiveBody?: (view: ReactNode) => ReactNode
 }
 
+/** Header actions derive their state from the standard session/global kit. */
+export interface ConversationHeaderActionOwnerProps {}
+
 /**
  * The input-region slot currency (plan §1.4): dock/left/right entries read
  * the conversation snapshot and the live input state as owner props (both
@@ -131,13 +153,17 @@ export interface InputZone {
 }
 
 /**
- * View-slot owner share: deliberately empty — ConversationRoot supplies
- * nothing at its renderSlot site (sessionId and the snapshot hook arrive as
+ * View-slot owner share: the cross-view inspect handoff (otherwise views need
+ * nothing from the render site — sessionId and the snapshot hook arrive as
  * framework-standard props; tool rows go through each view's own declared
- * toolview hole). Kept as the named owner seat so a future cross-view
- * payload has a home.
+ * toolview hole).
  */
-export interface ConvViewOwnerProps {}
+export interface ConvViewOwnerProps {
+  /** One-shot inspect request from another view (chat's Inspect button); null when idle. */
+  inspect?: { callId: CallId } | null
+  /** Acknowledge the inspect request once applied (clears the store field). */
+  onInspectDone?: () => void
+}
 
 /**
  * Owner share of a per-view toolview slot: the call material the rendering
@@ -160,6 +186,11 @@ export interface ToolRowOwnerProps {
    * The chat view resolves relative paths against the session cwd.
    */
   openFile: (path: string) => void
+  /**
+   * Jump to this call's record in the trajectory view (the expanded row's
+   * hover Inspect affordance). Undefined when no trajectory jump is wired.
+   */
+  inspect?: (() => void) | undefined
 }
 
 /**
@@ -232,6 +263,12 @@ export interface ConversationSessionInjected {
 export interface ComposerBarOwnerProps {
   /** Hero = empty-state centered card; composer = resident bottom bar. */
   variant: 'hero' | 'composer'
+  /**
+   * Inert no-workspace state: the bar renders its normal DOM fully disabled
+   * (textarea, add, send) so the workspace pick transitions in place instead
+   * of swapping component trees.
+   */
+  disabled?: boolean
   placeholder?: string
   /** Optional content rendered above the textarea. */
   accessory?: ReactNode
@@ -241,28 +278,43 @@ export interface ComposerBarOwnerProps {
   leftItems?: ReactNode
   /** input.right slot entries (tool row, before the primary button). */
   rightItems?: ReactNode
-  onAdd?: () => void
-  addLabel?: string
+  /** composer.dock entries (stats line), rendered under the card inside the bar's width column. */
+  footer?: ReactNode
 }
 
 /** Injected share of the composer-bar entry (package-internal faces). */
 export interface ComposerBarInjected {
-  /** The InputBar-exclusive keyboard/DOM command face (decision 20 private plane). */
-  keyboard: ComposerKeyboard
-  /** Cancel the in-flight turn. */
-  stop: () => void
+  /** The InputBar-exclusive keyboard/DOM command face (decision 20 private plane); absent with the session. */
+  keyboard: ComposerKeyboard | undefined
+  /** Resolve one keyboard submission gesture against the current running state and persisted preference. */
+  resolveSubmitMode: (
+    running: boolean,
+    gesture: ComposerSubmitGesture,
+    steeringAvailable: boolean,
+  ) => InputSubmitMode
+  /** Toggle the shared slash menu with only its command source; absent without ui-slash or a session. */
+  toggleCommandMenu: ((selection: EditSelection) => void) | undefined
+  /** Cancel the in-flight turn; absent with the session. */
+  stop: (() => void) | undefined
   /**
    * Submit one slash-command line against this session's agent (the chrome
-   * controls' write path — the permission chip submits `/permission <preset>`).
+   * controls' write path — the permission chip submits `/permission <preset>`);
+   * absent with the session.
    * Resolves admission: false = rejected/unmatched/transport failure.
    */
-  command: (line: string) => Promise<boolean>
-  /** Registrant hooks compartment: the renderer binds these to useNotices/useLexicon. */
+  command: ((line: string) => Promise<boolean>) | undefined
+  /**
+   * Registrant hooks compartment: the renderer binds these to
+   * useNotices/useLexicon (static absent sources without a session — hook
+   * order stays constant).
+   */
   hooks: {
     /** Latest surfaced notice (null after none; seq keys re-render of repeats). */
     notices: ObservableSnapshot<InputNotice | null>
     /** Hot plain-text reference lexicon for the decoration scan (decision 21). */
     lexicon: ObservableSnapshot<ReadonlyMap<'/' | '@', readonly string[]>>
+    /** Source name opened by the programmatic menu launcher, or null. */
+    menuLauncher: ObservableSnapshot<string | null>
   }
 }
 
@@ -275,11 +327,12 @@ export interface InputControlOwnerProps {
   locked: boolean
 }
 
-/** Full composer-bar component props: standard kit & owner share & control-seat render share & injected share (hooks compartment bound). */
+/** Full composer-bar props: standard kit & owner share & control-seat render share & injected share (hooks bound) & locale seat. */
 export type ComposerBarProps =
   PropsRuntime<'conversation.composer.bar'>
   & PropsRenderSlots<'conversation.input.plan' | 'conversation.input.model'>
   & InjectFace<ComposerBarInjected>
+  & PropsLocale<'conversation'>
 
 /**
  * Composer chain currency: what ConversationRoot dispatches at its
@@ -290,11 +343,14 @@ export type ComposerBarProps =
  */
 export interface ComposerChainProps {
   interactions: readonly PendingInteraction[]
+  /** Current conversation facts for feature-owned takeover selectors. */
+  session: ConversationSnapshot | undefined
 }
 
 /**
  * Full conversation-slot component props: runtime & child-render (view ring
- * + composer chain/bar + input-region + hero picker slots) & store & injected shares.
+ * + composer chain/bar + input-region + hero picker slots) & store & injected
+ * shares & the locale seat.
  */
 export type ConversationSlotProps =
   PropsRuntime<'conversation'> & PropsRenderSlots<
@@ -305,13 +361,15 @@ export type ConversationSlotProps =
     | 'conversation.hero.workspace'
   >
   & ConversationInjected
+  & PropsLocale<'conversation'>
 
-/** Full strict-session content props: per-session store, view ring, and callbacks. */
+/** Full strict-session content props: per-session store, view ring, callbacks, and the locale seat. */
 export type ConversationSessionSlotProps =
   PropsRuntime<'conversation.session'>
-  & PropsRenderSlots<'conversation.view'>
+  & PropsRenderSlots<'conversation.view' | 'conversation.session.header.actions'>
   & PropsStore<ChatStore>
   & ConversationSessionInjected
+  & PropsLocale<'conversation'>
 
 /** The pending approval carrier the owner dispatches into the composer chain. */
 export type ApprovalWait = PendingWait<'approval'>
@@ -369,11 +427,23 @@ export class PendingApproval {
 /**
  * Full approval-composer 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 approval carrier. No injected
- * share: the carrier plus the domain face above carry the whole behavior
- * surface; the paired command line derives from useSession in-component.
+ * selector result, already narrowed to the approval carrier — plus the
+ * standard locale seat. No injected share: the carrier plus the domain face
+ * above carry the whole behavior surface; the paired command line derives
+ * from useSession in-component.
  */
-export type ApprovalComposerProps = PropsRuntime<'conversation.composer'> & { matched: ApprovalWait }
+export type ApprovalComposerProps =
+  PropsRuntime<'conversation.composer'> & { matched: ApprovalWait } & PropsLocale<'conversation'>
+
+/** In-memory reader position resilient to transcript width reflow. */
+export interface ChatScrollPosition {
+  /** Stable rendered node/call identity nearest the visible reading edge. */
+  readonly anchorKey: string
+  /** Anchor top relative to the transcript scrollport when saved. */
+  readonly anchorTop: number
+  /** Approximate offset used before the semantic anchor is measured. */
+  readonly scrollTop: number
+}
 
 /**
  * Injected share of the chat view entry: the two callbacks whose targets live
@@ -388,12 +458,27 @@ export interface ChatViewInjected {
    */
   openFile: (path: string) => void
   loadOlder: () => void
+  /** Hand a call off to the trajectory view: write the one-shot inspect target and switch tabs. */
+  inspectCall: (callId: CallId) => void
+  /**
+   * Per-session scroll memory surviving view switches (in-memory, never
+   * persisted): the view saves on every scroll and restores on remount; a
+   * fresh page load starts empty and keeps the open-jump-to-bottom default.
+   */
+  chatScroll: {
+    /** Record a semantic reader position; null clears it when pinned. */
+    save: (position: ChatScrollPosition | null) => void
+    /** Last reader position, or null when pinned or never recorded. */
+    read: () => ChatScrollPosition | null
+  }
+  /** Fork through the completed turn ending at the eligible message `seq`, then open the child. */
+  forkAt: (seq: number) => void
 }
 
-/** Full chat-view component props: runtime share & the declared toolview/commandview holes' render share & store share & injected share. */
+/** Full chat-view component props: runtime & the declared toolview/commandview holes' render share & store & injected & locale seat. */
 export type ChatViewSlotProps =
   PropsRuntime<'conversation.view'> & PropsRenderSlots<'conversation.chat.toolview' | 'conversation.chat.commandview'>
-  & PropsStore<ChatStore> & ChatViewInjected
+  & PropsStore<ChatStore> & ChatViewInjected & PropsLocale<'conversation'>
 
 /**
  * Injected share of the details slot: the panel is otherwise a pure reader of
@@ -404,8 +489,8 @@ export interface DetailsInjected {
   closeDetails: () => void
 }
 
-/** Full details-slot component props: selection arrives through the shared store, call material through useSession. */
-export type DetailsSlotProps = PropsRuntime<'details'> & PropsStore<ChatStore> & DetailsInjected
+/** Full details-slot component props: selection rides the shared store, call material useSession; copy the locale seat. */
+export type DetailsSlotProps = PropsRuntime<'details'> & PropsStore<ChatStore> & DetailsInjected & PropsLocale<'conversation'>
 
 /** Owner share common to the hero / New-Session Workspace pickers. */
 export interface EmptyWorkspaceOwnerProps {

packages/client/ui-conversation/src/client/contract/terminal-card-model.ts

@@ -1,6 +1,6 @@
 /**
  * Pure derivation of the terminal-card props from a frozen call slice: the
- * `card:'terminal'` render intent the bash tool declares arrives on the
+ * `card:'terminal'` render intent the shell tools declare arrives on the
  * snapshot as `callView`/`resultView`, and this is the one place that turns
  * that pair into what {@link TerminalBlock} draws. Both conversation render
  * sites (the chat tool row's expanded body and the details panel's Output
@@ -8,19 +8,34 @@
  * are derived once.
  * @module
  */
-import type { TerminalBlockProps } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { TerminalBlockLabels, TerminalBlockProps } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
 import { resolveToolPath, type ToolCallBlock } from './tool-call-model.ts'
 
 /**
- * Output lines the chat row's expanded terminal body shows before collapsing
- * the middle — half the primitive's own default, which the details panel
- * keeps. A chat row is a summary surface inside the message flow: the flow
- * must stay scannable across many calls, while the details panel is the
- * single-call reading surface. A design constant of this UI's row geometry,
- * not a deployment choice, so it is fixed here rather than a plugin Config
- * field.
+ * Build the TerminalBlock display copy from the conversation locale seat —
+ * the one place the primitive's label surface pairs with this package's
+ * dictionary, shared by every terminal render site (chat row, bash row,
+ * details panel).
+ * @param t - the render site's conversation locale seat.
+ * @returns the full label set for {@link TerminalBlockProps}'s `labels`.
  */
-export const CHAT_TERMINAL_MAX_LINES = 8
+export function terminalBlockLabels(t: TranslateNS<'conversation'>): TerminalBlockLabels {
+  return {
+    signal: signal => t('terminal.signal', { signal }),
+    exitCode: code => t('terminal.exitCode', { code }),
+    running: t('terminal.running'),
+    failed: t('terminal.failed'),
+    done: t('terminal.done'),
+    copy: t('copy'),
+    copied: t('copied'),
+    noOutput: t('terminal.noOutput'),
+    collapseAria: t('terminal.collapseAria'),
+    collapse: t('collapse'),
+    expandAria: hidden => t('terminal.expandAria', { n: hidden }),
+    expand: hidden => t('terminal.expandRest', { n: hidden }),
+  }
+}
 
 /**
  * The {@link TerminalBlock} props this derivation owns. Picked off the
@@ -44,6 +59,20 @@ export interface TerminalCardModel {
   description: string | undefined
 }
 
+/**
+ * True when a settled terminal card reports a failing exit — a non-zero code
+ * or a terminating signal. The bash tool settles a failing command as a
+ * completed call (`isError` stays false: the exit status is result data), so
+ * this is the collapsed row's only failure signal; without it the red exit
+ * pill would be visible only after expanding the card.
+ * @param model - a derived terminal card.
+ * @returns whether the card's exit status is a failure.
+ */
+export function terminalFailed(model: TerminalCardModel): boolean {
+  const { exitCode, signal, running } = model.card
+  return running !== true && ((exitCode !== undefined && exitCode !== 0) || signal !== undefined)
+}
+
 /**
  * Resolve a terminal view's working directory the way the render-intent
  * contract assigns to the UI bridge: an absolute path is used as-is, a relative

packages/client/ui-conversation/src/client/contract/tool-call-model.ts

@@ -1,14 +1,15 @@
 /**
  * Pure row-model derivation for tool summary rows: variant classification,
- * one-line summary and expanded-body text from the frozen call slice. This
- * derivation reads the call ARGUMENTS only; a call whose render intent is a
- * terminal card gets its expanded body from the views instead, through
+ * one-line summary, expanded-body text, and flattened result output from the
+ * frozen call slice. Input material comes from the call ARGUMENTS; output and
+ * error material from the settled result node. A call whose render intent is
+ * a terminal card gets its expanded body from the views instead, through
  * `terminalCardModel` in terminal-card-model.ts.
  */
 // The block union's defining home is runtime (fold-product types); this
 // contract only forwards it (type-definition authority stays with the layer
 // that produces the values).
-import type { ToolCallBlock } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ToolCallBlock, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client'
 
 export type { ToolCallBlock } from '@deepseek-ai/dsh-client-runtime/client'
 
@@ -30,6 +31,9 @@ export const VARIANT_TITLES: Record<ToolRowVariant, string> = {
 /** Known tool name -> variant. */
 const TOOL_VARIANTS: Record<string, ToolRowVariant> = {
   bash: 'bash',
+  // The PowerShell twin is a shell tool: the bash row family (icon, colors)
+  // with its own title from TOOL_TITLES, not the generic `others` row.
+  pwsh: 'bash',
   read: 'read',
   web_fetch: 'read',
   web_search: 'search',
@@ -48,6 +52,7 @@ const TOOL_TITLES: Record<string, string> = {
   cordis_inspect: 'Inspect',
   cordis_mount: 'Mount temporary Plugin',
   cordis_unmount: 'Unmount temporary Plugin',
+  pwsh: 'Pwsh',
 }
 
 /**
@@ -70,11 +75,34 @@ export interface ToolRowModel {
    * relative values against the session cwd before opening.
    */
   filePath: string | undefined
-  /** Expanded-body text (pretty args); null = row not expandable. */
+  /** Expanded-body input text (pretty args); null = no input section. */
   body: string | null
+  /** Flattened result text ({@link resultText}); null while running or when the result carries no text. */
+  output: string | null
+  /** First line of the result text on an error row; null for every other state. */
+  errorSummary: string | null
   state: ToolRowState
 }
 
+/**
+ * Flatten a settled result's content blocks to display text: text blocks
+ * verbatim, other block shapes as pretty JSON. Empty content on a failed call
+ * falls back to the structured error's `name: code` line.
+ * @param node - the settled result node.
+ * @returns the flattened result text (may be empty).
+ */
+export function resultText(node: ToolResultNode): string {
+  const parts: string[] = []
+  for (const block of node.content) {
+    if (block.type === 'text') parts.push(block.text)
+    else parts.push(JSON.stringify(block, null, 2))
+  }
+  if (parts.length === 0 && node.error !== undefined) {
+    parts.push(`${node.error.name}: ${node.error.code}`)
+  }
+  return parts.join('\n')
+}
+
 function parseArgs(argsRaw: string): unknown {
   try {
     return JSON.parse(argsRaw)
@@ -109,8 +137,13 @@ const SUMMARY_KEYS: Record<ToolRowVariant, readonly string[]> = {
   others: [],
 }
 
-/** Strip the workspace root from workspace-rooted absolute paths (display only). */
-function relativizeToCwd(text: string, cwd: string | undefined): string {
+/**
+ * Strip the workspace root from a workspace-rooted absolute path (display only).
+ * @param text - the path to shorten.
+ * @param cwd - session workspace root; absent or empty leaves the path unchanged.
+ * @returns the path relative to the workspace root, or unchanged when it is not rooted there.
+ */
+export function relativizeToCwd(text: string, cwd: string | undefined): string {
   if (cwd === undefined || cwd === '') return text
   const root = cwd.replace(/[/\\]+$/, '')
   if (text.startsWith(`${root}/`) || text.startsWith(`${root}\\`)) return text.slice(root.length + 1)
@@ -192,12 +225,19 @@ export function toolRowModel(toolName: string, block: ToolCallBlock, cwd?: strin
   const summary = variant === 'others' && toolName !== '' && toolTitle === undefined
     ? `${toolName} · ${base}`
     : base
+  // The empty string is "no text" for both derived result fields: a settled
+  // call with blank content has nothing to expand, and a blank first line
+  // would erase the collapsed error row's summary slot.
+  const output = done ? (resultText(block) || null) : null
+  const errorSummary = state === 'error' && output !== null ? firstLine(output) : null
   return {
     variant,
     title: toolTitle ?? VARIANT_TITLES[variant],
     summary,
     filePath: deriveFilePath(variant, argsRaw),
     body: deriveBody(variant, argsRaw),
+    output,
+    errorSummary,
     state,
   }
 }

packages/client/ui-conversation/src/client/contract/views.ts

@@ -23,4 +23,10 @@ export interface ChatStoreState {
   draft: string
   /** Active conversation view id ('conversation.view' entry id); null falls back to the first view. */
   view: string | null
+  /**
+   * One-shot inspect handoff: chat writes the call to reveal, the trajectory
+   * view consumes it and acknowledges by clearing. Read with `?? null` —
+   * persisted snapshots from before this field rehydrate without it.
+   */
+  inspect: { callId: CallId } | null
 }

packages/client/ui-conversation/src/client/contract/web-card-model.ts

@@ -0,0 +1,74 @@
+/**
+ * Pure derivation of the web-card props from a frozen call slice: the
+ * `card:'web'` render intent the `web_search`/`web_fetch` tools declare at
+ * result time arrives on the snapshot as `resultView`, and this is the one
+ * place that turns it into what {@link WebBlock} draws. Both conversation
+ * render sites (the chat tool row's resident/expanded body and the details
+ * panel's Output section) call this, so the sources and fetch summary they
+ * show are derived once.
+ *
+ * The web card is result-only by contract: those tools keep a generic pending
+ * call view, so there is nothing to derive while the call is still running and
+ * a running call always takes the generic path.
+ * @module
+ */
+import type { WebBlockProps } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ToolCallBlock } from './tool-call-model.ts'
+
+/**
+ * Derive the web-card props for a tool call, or null when this call is not a
+ * web card and belongs on the generic path.
+ *
+ * The result side supplies the whole card: the sources and answer for a
+ * `search`, the URL and status for a `fetch`. Cases producing null, all of
+ * them the documented generic-card default:
+ *
+ * - A running call (no `resultView` yet): the web tools keep a generic pending
+ *   card, so nothing web-shaped exists until the call settles.
+ * - A settled call whose result view is not a web card — including a `card`
+ *   value this UI version does not know, which arrives over the wire and so
+ *   cannot be trusted to be one of the compiled variants, and a generic result
+ *   view (a web tool's error path returns the generic card, whose text the
+ *   generic path preserves).
+ * - A web card whose `kind` this UI version does not know (a newer host's
+ *   value): the wire cannot be trusted to be `search` or `fetch`, so it takes
+ *   the generic path rather than rendering as a malformed fetch.
+ * @param block - RunningToolCall or ToolResultNode off the snapshot caches.
+ * @returns the web-card props, or null for the generic path.
+ */
+export function webCardModel(block: ToolCallBlock): WebBlockProps | null {
+  // Running calls have no result view; the web card is result-only.
+  if (!('kind' in block)) return null
+  const result = block.resultView
+  if (result?.card !== 'web') return null
+  if (result.kind === 'search') {
+    return {
+      kind: 'search',
+      answer: result.answer,
+      sources: result.sources.map(source => ({
+        url: source.url,
+        title: source.title,
+        snippet: source.snippet,
+        publishedAt: source.publishedAt,
+      })),
+      truncated: result.truncated,
+    }
+  }
+  // Discriminate `fetch` explicitly rather than treating it as the else of
+  // `search`: a `kind` this UI version does not know arrives over the wire from
+  // a newer host, and reading it as a fetch would draw an empty URL and
+  // `HTTP undefined`. It takes the generic path, the same wire-boundary default
+  // an unknown `card` tag takes above. The static union narrows `kind` to
+  // `'fetch'` here, but the runtime value is off the wire, so the guard and its
+  // null fallthrough are load-bearing despite the type.
+  // oxlint-disable-next-line typescript/no-unnecessary-condition
+  if (result.kind === 'fetch') {
+    return {
+      kind: 'fetch',
+      url: result.url,
+      statusCode: result.statusCode,
+      truncated: result.truncated,
+    }
+  }
+  return null
+}

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

@@ -11,6 +11,7 @@ export type {
   CallId, ChatStoreState, SelectionTarget, ViewTab,
 } from './contract/views.ts'
 export type { ToolCallBlock } from './contract/tool-call-model.ts'
+export type { ConversationKey } from './locales.ts'
 export type {
   ChatStore, ChatViewInjected, ChatViewSlotProps, CommandRowOwnerProps, CommandRowProps, ComposerBarInjected,
   ComposerChainProps, ConversationInjected,

packages/client/ui-conversation/src/client/input/contract.ts

@@ -10,6 +10,8 @@ import type {
   ArbitrateKey, ArbitrateOutcome, CommandClaim, ConsumeTokenRequest, PickOutcome,
   ReferenceInsert, SubmitOutcome, TokenSpan,
 } from '@deepseek-ai/dsh-client-ui-slash/client'
+import type { QueueRow } from '../contract/queue.ts'
+import type { InputSubmitMode } from '../contract/composer-submission.ts'
 
 /**
  * The scoped-event application verbs: the hub's bail listeners call these,
@@ -27,8 +29,11 @@ export interface InputTarget {
 export interface SessionInput extends InputTarget {
   /** Single write path for draft text (all mutation rides machine events). */
   setDraft(text: string): void
-  /** THE complexity sink: enter adjudication, submit transaction, and the default sink live inside. */
-  submit(mode?: 'queue' | 'steer'): void
+  /**
+   * THE complexity sink: enter adjudication, submit transaction, and the default sink live inside.
+   * @param mode - delivery intent retained through asynchronous adjudication and serialization.
+   */
+  submit(mode?: InputSubmitMode): void
   /**
    * Surface a notice outside the machine's own effect stream: detached
    * command results and business notifications render through here.
@@ -59,7 +64,7 @@ export interface InputActions {
   /** Single public draft write path (full next draft; occurrence math via diff scan). */
   setDraft(text: string): void
   /** Enter submission (adjudication / claim transaction / default sink inside). */
-  submit(mode?: 'queue' | 'steer'): void
+  submit(): void
 }
 
 /** One surfaced notice (command results, adjudication failures). seq keys re-render of repeats. */
@@ -81,8 +86,8 @@ export interface ComposerKeyboard {
   readonly snapshot: InputState
   /** Draft write with the DOM-observed edit shape (narrows occurrence math). */
   setDraft(text: string, editRange?: EditRange): void
-  /** Newline at the selection as a machine transaction (Ctrl+Enter path). */
-  newline(selection: EditSelection): void
+  /** Submit with an explicit delivery mode resolved by the keyboard policy. */
+  submit(mode: InputSubmitMode): void
   undo(): void
   redo(): void
   /** Paste over the selection (sync components ride the same transaction). */
@@ -99,12 +104,8 @@ export interface ComposerKeyboard {
   dismissPopup(): void
 }
 
-/** One queued-message row projected from the session/queued frames (T9 supplies the store). */
-export interface QueuedMessage {
-  /** Stable row key: the enqueueing prompt's rpcId. */
-  readonly key: string
-  readonly preview: string
-}
+/** One independently addressable row projected from the transient queue snapshot. */
+export type QueuedMessage = QueueRow
 
 /** Guard union of the scoped consume-token event, checked by the machine. */
 export type ConsumeTokenGuard = ConsumeTokenRequest['guard']
@@ -194,7 +195,7 @@ export interface InputState {
   readonly occurrences: readonly Occurrence[]
   /** Live paste-match attempt (absent when no paste is matchable). */
   readonly paste?: PasteAttemptState
-  /** Read-only queue projection (session/queued frames + connect snapshot). */
+  /** Read-only transient inbox projection (`session/queue`, including pending steering). */
   readonly queue: readonly QueuedMessage[]
 }
 
@@ -209,6 +210,8 @@ export interface SubmitAttempt {
   readonly signal: AbortSignal
   /** Draft at enter time; rollback restores it only while the live draft still equals it. */
   readonly draftSnapshot: string
+  /** Default-message delivery intent retained while slash adjudication is pending. */
+  readonly mode: InputSubmitMode
 }
 
 /**
@@ -220,8 +223,6 @@ export interface SubmitAttempt {
 export type InputEvent =
   /** Full next draft from the textarea; editRange narrows the occurrence math (absent → diff scan). */
   | { readonly type: 'draft-changed'; readonly draft: string; readonly editRange?: EditRange }
-  /** Insert '\n' replacing the selection (F1: the execCommand newline path moved into the machine). */
-  | { readonly type: 'newline'; readonly selection: EditSelection }
   | { readonly type: 'begin-command'; readonly claim: CommandClaim; readonly span: TokenSpan }
   /** Place one U+FFFC at the span and mint the occurrence (scoped insert-reference event payload). */
   | { readonly type: 'insert-ref'; readonly reference: ReferenceInsert; readonly span: TokenSpan }
@@ -242,7 +243,7 @@ export type InputEvent =
   | { readonly type: 'paste-upgrade'; readonly attemptId: number; readonly span: TokenSpan; readonly reference: ReferenceInsert }
   /** Shell-observed attempt killers the machine cannot see itself (caret/selection ops, Slash interaction updates). */
   | { readonly type: 'invalidate-paste' }
-  | { readonly type: 'enter'; readonly mode: 'queue' | 'steer' }
+  | { readonly type: 'enter'; readonly mode: InputSubmitMode }
   | { readonly type: 'adjudicated'; readonly attempt: SubmitAttempt; readonly outcome: PickOutcome }
   | { readonly type: 'adjudication-failed'; readonly attempt: SubmitAttempt; readonly message: string }
   | { readonly type: 'submit-settled'; readonly attempt: SubmitAttempt; readonly ok: boolean; readonly outcome?: SubmitOutcome; readonly message?: string }
@@ -261,5 +262,5 @@ export type InputEvent =
 export type InputEffect =
   | { readonly type: 'adjudicate'; readonly attempt: SubmitAttempt; readonly draft: string }
   | { readonly type: 'begin-submit'; readonly attempt: SubmitAttempt; readonly claim: CommandClaim; readonly args: string }
-  | { readonly type: 'default-sink'; readonly draft: string; readonly mode: 'queue' | 'steer' }
+  | { readonly type: 'default-sink'; readonly draft: string; readonly mode: InputSubmitMode }
   | { readonly type: 'notice'; readonly level: 'info' | 'error'; readonly text: string }

packages/client/ui-conversation/src/client/input/facade.ts

@@ -16,6 +16,7 @@ import type {
   EditRange, EditSelection, InputActions, InputEffect, InputNotice, InputState,
   PasteComponent, QueuedMessage, SessionInput, SubmitAttempt,
 } from './contract.ts'
+import type { InputSubmitMode } from '../contract/composer-submission.ts'
 import { InputMachine } from './machine.ts'
 
 /** Popup face the shell needs (dismissal only; typed structurally to avoid a value import). */
@@ -39,7 +40,7 @@ export interface SessionInputDeps {
   /** Queue read face; overlaid onto InputState.queue (absent = empty). */
   queue?: ObservableSnapshot<readonly QueuedMessage[]> | undefined
   /** The plain-message sink (send choreography / materialize fork — the hub owns it). */
-  defaultSink(text: string, mode: 'queue' | 'steer'): void
+  defaultSink(text: string, mode: InputSubmitMode): void
 }
 
 /** Guard tier from the machine phase. */
@@ -68,7 +69,7 @@ export class SessionInputShell implements SessionInput {
   /** The public provide-channel action face (one stable identity per session — decision 20). */
   readonly actions: InputActions = {
     setDraft: (text) => { this.setDraft(text) },
-    submit: (mode) => { this.submit(mode) },
+    submit: () => { this.submit('queue') },
   }
 
   // Real wall clock: the typing-run merge window must actually expire in
@@ -106,15 +107,6 @@ export class SessionInputShell implements SessionInput {
     this.run(this.core.dispatch({ type: 'send-committed' }))
   }
 
-  /**
-   * Insert a newline at the selection as one machine transaction (the
-   * execCommand path is gone — a second undo history would fork).
-   * @param selection - current DOM selection in draft coordinates.
-   */
-  newline(selection: EditSelection): void {
-    this.run(this.core.dispatch({ type: 'newline', selection }))
-  }
-
   /** Undo the latest transaction (InputBar intercepts the platform chord). */
   undo(): void {
     this.run(this.core.dispatch({ type: 'undo' }))
@@ -151,9 +143,8 @@ export class SessionInputShell implements SessionInput {
    * from the machine; this method only feeds the event. Lock entry
    * (adjudicating/submitting) force-closes the transient layers: the popup
    * dismisses and the menu tracks frozen.
-   * @param mode - default-sink mode (queue appends; steer interrupts).
    */
-  submit(mode: 'queue' | 'steer' = 'queue'): void {
+  submit(mode: InputSubmitMode = 'queue'): void {
     this.run(this.core.dispatch({ type: 'enter', mode }))
     const phase = this.snapshot.phase
     if (phase === 'adjudicating' || phase === 'submitting') {
@@ -354,7 +345,7 @@ export class SessionInputShell implements SessionInput {
    * send — notice + draft and chips retained, never a silent downgrade to
    * the clipboard text. Chip-free drafts skip the async detour.
    */
-  private sinkSerialized(draft: string, mode: 'queue' | 'steer'): void {
+  private sinkSerialized(draft: string, mode: InputSubmitMode): void {
     const occurrences = this.core.state.occurrences
     if (occurrences.length === 0) {
       this.deps.defaultSink(draft.trim(), mode)

packages/client/ui-conversation/src/client/input/hub.ts

@@ -12,6 +12,7 @@ import type { ClientContext, ISessions, SessionBinding, SessionFace, SessionId }
 import type { SlashController } from '@deepseek-ai/dsh-client-ui-slash/client'
 import { queueReadFaceOf } from '../queue/store.ts'
 import type { ComposerKeyboard, InputService, SessionInput } from './contract.ts'
+import type { InputSubmitMode } from '../contract/composer-submission.ts'
 import type { PopupDismissFace } from './facade.ts'
 import { SessionInputShell } from './facade.ts'
 
@@ -106,13 +107,24 @@ export class InputHub implements InputService {
     return this.shell(id)
   }
 
+  /**
+   * Resolve the optional slash controller for composer chrome that launches
+   * the shared candidate menu without typing a trigger.
+   * @param id - session id.
+   * @returns the resident controller, or undefined when ui-slash is absent.
+   */
+  slash(id: SessionId): SlashController | undefined {
+    const actx = this.sessions().scope(id)
+    return actx === undefined ? undefined : this.controller(actx)
+  }
+
   /**
    * Default sink: optimistic clear + prompt. The session is always a real
    * host entity (materialized when its workspace was picked), so there is
    * exactly one path; a failed first prompt is an ordinary prompt failure
    * (error strip via promptError, draft restored only while untouched).
    */
-  private sink(session: SessionFace, text: string, mode: 'queue' | 'steer'): void {
+  private sink(session: SessionFace, text: string, mode: InputSubmitMode): void {
     if (text === '') return
     const shell = this.shells.get(session.sessionId)
     // Commit, not an editable clear: undo must not resurrect sent content.

packages/client/ui-conversation/src/client/input/machine.ts

@@ -14,6 +14,7 @@
  * paste-upgrade all answer their bail events this way).
  */
 import type { CommandClaim, ReferenceInsert, TokenSpan } from '@deepseek-ai/dsh-client-ui-slash/client'
+import type { InputSubmitMode } from '../contract/composer-submission.ts'
 import type {
   ConsumeTokenGuard, EditRange, EditSelection, InputEffect, InputEvent, InputMachineOptions,
   InputState, Occurrence, PasteAttemptState, PasteComponent, SubmitAttempt,
@@ -112,7 +113,6 @@ export class InputMachine {
   private inflight: {
     readonly attempt: SubmitAttempt
     readonly controller: AbortController
-    readonly mode: 'queue' | 'steer'
   } | undefined
   private log: Transaction[] = []
   private redoStack: Transaction[] = []
@@ -150,7 +150,6 @@ export class InputMachine {
   dispatch(ev: InputEvent): readonly InputEffect[] {
     switch (ev.type) {
       case 'draft-changed': return this.onDraftChanged(ev.draft, ev.editRange)
-      case 'newline': return this.onNewline(ev.selection)
       case 'begin-command': return this.onBeginCommand(ev.claim, ev.span)
       case 'insert-ref': return this.onInsertRef(ev.reference, ev.span)
       case 'consume-token': return this.onConsumeToken(ev.guard)
@@ -255,19 +254,6 @@ export class InputMachine {
     return []
   }
 
-  /** F1: caret newline as an ordinary machine transaction (execCommand path removed). */
-  private onNewline(selection: EditSelection): InputEffect[] {
-    const { start, end } = selection
-    if (start < 0 || start > end || end > this.draft.length) return []
-    this.pushTxn(selection)
-    this.typingRun = undefined
-    this.reconcile({ start, end, insertedLength: 1 })
-    this.adopt(this.draft.slice(0, start) + '\n' + this.draft.slice(end))
-    this.watchClaim()
-    this.paste = undefined
-    return []
-  }
-
   /** Span CAS: revision equality (content identity follows) plus bounds sanity. */
   private casOk(span: TokenSpan): boolean {
     return span.draftRev === this.draftRev
@@ -297,14 +283,23 @@ export class InputMachine {
     return []
   }
 
-  /** Shared chip-insertion transaction: replace [span) with one placeholder occurrence (insert-ref and paste-upgrade both land here). */
-  private replaceSpanWithChip(reference: ReferenceInsert, span: TokenSpan): void {
+  /**
+   * Shared chip-insertion transaction: replace [span) with one placeholder
+   * occurrence (insert-ref and paste-upgrade both land here). A separating
+   * space follows the chip unless one is already next.
+   * @returns the inserted length (placeholder plus optional gap).
+   */
+  private replaceSpanWithChip(reference: ReferenceInsert, span: TokenSpan): number {
     this.pushTxn()
     this.typingRun = undefined
-    this.reconcile({ start: span.start, end: span.end, insertedLength: 1 })
+    const tail = this.draft.slice(span.end)
+    const gap = tail.length === 0 || tail[0] !== ' ' ? ' ' : ''
+    const inserted = PLACEHOLDER + gap
+    this.reconcile({ start: span.start, end: span.end, insertedLength: inserted.length })
     this.withMinted([this.mint(reference, span.start)])
-    this.adopt(this.draft.slice(0, span.start) + PLACEHOLDER + this.draft.slice(span.end))
+    this.adopt(this.draft.slice(0, span.start) + inserted + tail)
     this.watchClaim()
+    return inserted.length
   }
 
   /**
@@ -442,10 +437,10 @@ export class InputMachine {
     if (attempt === undefined || attempt.attemptId !== attemptId) return []
     if (this.phase !== 'plain' && this.phase !== 'claimed') return []
     if (!this.casOk(span) || span.start === span.end) return []
-    this.replaceSpanWithChip(reference, span)
+    const insertedLength = this.replaceSpanWithChip(reference, span)
     this.paste = {
       ...attempt,
-      insertedRange: { start: attempt.insertedRange.start, end: attempt.insertedRange.end + 1 - (span.end - span.start) },
+      insertedRange: { start: attempt.insertedRange.start, end: attempt.insertedRange.end + insertedLength - (span.end - span.start) },
     }
     return []
   }
@@ -453,15 +448,15 @@ export class InputMachine {
   // ---- submit plane ----
 
   /** Mint the next SubmitAttempt and take the in-flight slot. */
-  private beginAttempt(mode: 'queue' | 'steer'): SubmitAttempt {
+  private beginAttempt(mode: InputSubmitMode): SubmitAttempt {
     const controller = new AbortController()
     this.seq += 1
-    const attempt: SubmitAttempt = { seq: this.seq, signal: controller.signal, draftSnapshot: this.draft }
-    this.inflight = { attempt, controller, mode }
+    const attempt: SubmitAttempt = { seq: this.seq, signal: controller.signal, draftSnapshot: this.draft, mode }
+    this.inflight = { attempt, controller }
     return attempt
   }
 
-  private onEnter(mode: 'queue' | 'steer'): InputEffect[] {
+  private onEnter(mode: InputSubmitMode): InputEffect[] {
     if (this.phase === 'adjudicating' || this.phase === 'submitting') return []
     if (this.phase === 'claimed' && this.claim !== undefined) {
       const attempt = this.beginAttempt(mode)
@@ -498,7 +493,7 @@ export class InputMachine {
     this.inflight = undefined
     this.phase = 'plain'
     return outcome === undefined
-      ? [{ type: 'default-sink', draft: attempt.draftSnapshot, mode: flight.mode }]
+      ? [{ type: 'default-sink', draft: attempt.draftSnapshot, mode: attempt.mode }]
       : []
   }
 

packages/client/ui-conversation/src/client/input/submission-policy.ts

@@ -0,0 +1,77 @@
+/**
+ * Browser-local Composer submission policy. It owns the persisted busy-Enter
+ * preference and resolves keyboard gestures into queue/steer delivery modes;
+ * Host and Agent keep the actual delivery-window authority.
+ */
+import { createSnapshotStore, type SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import type {
+  BusyEnterBehavior, ComposerSubmitGesture, InputSubmitMode,
+} from '../contract/composer-submission.ts'
+
+/** localStorage key holding the busy-Enter preference. */
+export const BUSY_ENTER_STORAGE_KEY = 'dsh.conversation.busyEnter'
+
+/** Default preserves Enter-as-Queue for running conversations. */
+export const DEFAULT_BUSY_ENTER_BEHAVIOR: BusyEnterBehavior = 'queue'
+
+/**
+ * Persisted policy used by both the composer inject face and its Settings row.
+ * Direct `steer` is intentionally best-effort: AgentLoop turns a closed-window
+ * submission into the next waking Queue item.
+ */
+export class ComposerSubmissionPolicy {
+  /** Reactive preference source for the Settings row. */
+  readonly busyEnter: SnapshotStore<BusyEnterBehavior> = createSnapshotStore(restoreBusyEnter())
+
+  /**
+   * Resolve one keyboard gesture without changing state.
+   * @param running - whether the addressed agent currently reports busy.
+   * @param gesture - plain Enter or the Cmd/Ctrl-accelerated chord.
+   * @param steeringAvailable - whether this session transport supports steering.
+   * @returns Queue outside steer-capable busy state; otherwise the preferred mode or its opposite.
+   */
+  resolve(
+    running: boolean,
+    gesture: ComposerSubmitGesture,
+    steeringAvailable: boolean,
+  ): InputSubmitMode {
+    if (!running || !steeringAvailable) return 'queue'
+    const preferred = this.busyEnter.getSnapshot()
+    if (gesture === 'enter') return preferred
+    return preferred === 'queue' ? 'steer' : 'queue'
+  }
+
+  /**
+   * Change and persist the plain-Enter behavior used during busy state.
+   * @param behavior - Queue or Steer.
+   */
+  setBusyEnter(behavior: BusyEnterBehavior): void {
+    if (this.busyEnter.getSnapshot() === behavior) return
+    this.busyEnter.set(behavior)
+    persistBusyEnter(behavior)
+  }
+}
+
+/** Restore a valid preference; unavailable or corrupt storage uses Queue. */
+function restoreBusyEnter(): BusyEnterBehavior {
+  if (typeof localStorage === 'undefined') return DEFAULT_BUSY_ENTER_BEHAVIOR
+  let stored: string | null
+  try {
+    stored = localStorage.getItem(BUSY_ENTER_STORAGE_KEY)
+  } catch {
+    // Storage access can fail in privacy modes; the default remains usable.
+    return DEFAULT_BUSY_ENTER_BEHAVIOR
+  }
+  if (stored === 'queue' || stored === 'steer') return stored
+  return DEFAULT_BUSY_ENTER_BEHAVIOR
+}
+
+/** Persist a preference when browser storage is available. */
+function persistBusyEnter(behavior: BusyEnterBehavior): void {
+  if (typeof localStorage === 'undefined') return
+  try {
+    localStorage.setItem(BUSY_ENTER_STORAGE_KEY, behavior)
+  } catch {
+    // A storage failure makes the preference session-only; input stays usable.
+  }
+}

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

@@ -0,0 +1,232 @@
+/** `conversation` namespace dictionaries. */
+
+/** Dictionary namespace owned by this plugin. */
+export const NS = 'conversation'
+
+// The claimed /plan hint and the plan-mode textarea placeholder share one
+// string: both describe the same next action.
+const PLAN_NEXT_ACTION_ZH = '描述你的任务以生成计划'
+const PLAN_NEXT_ACTION_EN = 'describe your task to generate plan'
+
+/** Simplified Chinese dictionary (the key-set source of truth). */
+export const zh = {
+  'view.chat': '对话',
+  'hint.plan': PLAN_NEXT_ACTION_ZH,
+  'hint.goal': '输入目标，智能体将持续执行',
+  'hint.goal.active': '当前目标进行中。可输入 edit 修改 / pause 暂停 / resume 继续 / clear 清除',
+  'placeholder.plan': PLAN_NEXT_ACTION_ZH,
+  'placeholder.default': '给智能体发消息',
+  'placeholder.unavailable': '会话不可用',
+  'placeholder.hero': '描述你想要构建的内容',
+  'placeholder.workspace': '选择一个工作区开始',
+  'input.commands': '命令',
+  'input.stop': '停止生成',
+  'input.send': '发送消息',
+  'input.accessMode': '访问模式，当前：{name}',
+  'settings.enter.title': '繁忙时 Enter 键行为',
+  'settings.enter.description': '仅在智能体运行时生效；Cmd/Ctrl+Enter 使用另一行为',
+  'settings.enter.queue': '排队发送',
+  'settings.enter.steer': '插话发送',
+  'access.confirm.title': '确认启用 Full access？',
+  'access.confirm.description': '启用 Full access 后，agent 将减少确认步骤，并且可以直接执行更多操作，包括敏感操作、文件修改或外部命令。仅建议在你信任当前任务时使用。',
+  'access.confirm.acknowledge': '我已了解风险，并愿意继续',
+  'access.confirm.cancel': '取消',
+  'access.confirm.enable': '启用 Full access',
+  'hero.headline': '开始构建吧',
+  'hero.chooseWorkspace': '选择工作区',
+  'session.hierarchy': '会话层级',
+  'details.title': '详情',
+  'details.close': '关闭详情',
+  'details.empty': '点击消息流中的工具行查看详情',
+  'details.notInWindow': '该调用不在当前窗口内',
+  'details.input': '输入',
+  'details.output': '输出',
+  'details.running': '运行中…',
+  'todo.title': '任务',
+  'todo.progress.done': '{done} 已完成',
+  'todo.progress.active': '{active} 进行中',
+  'todo.progress.pending': '{pending} 待处理',
+  'todo.rowTitle': '更新任务清单',
+  'todo.completed': '{done}/{total} 已完成',
+  'chat.loadingHistory': '载入历史…',
+  'chat.loadError': '历史加载失败：{message}（{code}）',
+  'chat.loadOlder': '加载更早',
+  'chat.toBottom': '回到底部',
+  'message.extraBlock': '附加内容块',
+  'message.contextInjection': '上下文注入',
+  'message.compaction': '上下文已压缩',
+  'message.compaction.expand': '点击查看压缩摘要',
+  'message.compaction.unavailable': '压缩摘要不可用',
+  'message.unknownSurface': '未知 surface 事件：{type}',
+  'message.unknownBlock': '未知内容块',
+  'message.stopped': '已停止',
+  'message.branch': '在新对话中分支',
+  'message.branchUnavailable': '仅可从已完成轮次的最后一条消息分支',
+  'message.retry.active': '正在重试模型请求',
+  'message.retry.cancelled': '模型请求重试已取消',
+  'message.retry.started': '已重试模型请求',
+  'message.retry.scheduled': '等待重试模型请求',
+  'message.retry.status': '{label}（{retry}/{maximum}） · {seconds}s',
+  'message.retry.delay': '重试延迟：',
+  'message.retry.failure': '失败原因：',
+  'message.turnError': '本轮运行失败',
+  'message.ranFor': '用时 {duration}',
+  'duration.seconds': '{seconds}秒',
+  'duration.minutes': '{minutes}分{seconds}秒',
+  'command.running': '执行中…',
+  'command.failed': '命令失败',
+  'command.done': '已完成',
+  'command.title': '命令',
+  'approval.waiting': '等待审批',
+  'approval.detail.aria': '审批详情',
+  'approval.escalation': '工具 {toolName} 请求越权执行',
+  'approval.reject': '拒绝',
+  'approval.allowOnce': '允许一次',
+  'ask.rowTitle': '提问',
+  'ask.waiting': '等待回答',
+  'ask.cancelled': '已取消',
+  'ask.interrupted': '已中断',
+  'ask.answered': '{answered}/{total} 已回答',
+  'bash.running': '运行中',
+  'bash.failed': '失败',
+  'bash.stopped': '已停止',
+  'row.running': '运行中',
+  'row.failed': '失败',
+  'row.stopped': '已停止',
+  'queue.count': '{n} 条排队消息',
+  'queue.edit': '编辑排队消息',
+  'queue.edit.unsupported': '包含非文本内容，暂不支持编辑',
+  'queue.save': '保存排队消息',
+  'queue.cancelEdit': '取消编辑',
+  'queue.remove': '删除排队消息',
+  'queue.steer': '插话发送',
+  'queue.steer.unavailable': '仅运行中可插话发送',
+  'queue.editFailed': '编辑失败：这条消息可能已经开始发送。',
+  'queue.removeFailed': '删除失败：这条消息可能已经开始发送。',
+  'queue.steerFailed': '插话发送失败，请重试。',
+  'terminal.signal': '信号 {signal}',
+  'terminal.exitCode': '退出码 {code}',
+  'terminal.running': '运行中',
+  'terminal.failed': '失败',
+  'terminal.done': '已完成',
+  'terminal.noOutput': '无输出',
+  'terminal.collapseAria': '收起输出',
+  'terminal.expandAria': '展开其余 {n} 行输出',
+  'terminal.expandRest': '… 其余 {n} 行',
+  'json.truncated': '… 已截断，共 {total} 字符',
+  'clock.md': '{m}月{d}日',
+  'clock.ymd': '{y}年{m}月{d}日',
+} satisfies Record<string, string>
+
+/** The conversation namespace key union. */
+export type ConversationKey = keyof typeof zh
+
+/** English dictionary, checked complete against the zh key set. */
+export const en = {
+  'view.chat': 'Chat',
+  'hint.plan': PLAN_NEXT_ACTION_EN,
+  'hint.goal': 'describe the objective for a long-running task',
+  'hint.goal.active': 'goal active — edit / pause / resume / clear',
+  'placeholder.plan': PLAN_NEXT_ACTION_EN,
+  'placeholder.default': 'Message the agent',
+  'placeholder.unavailable': 'Session unavailable',
+  'placeholder.hero': 'Describe what you want to build',
+  'placeholder.workspace': 'Choose a workspace to start',
+  'input.commands': 'Commands',
+  'input.stop': 'Stop generating',
+  'input.send': 'Send message',
+  'input.accessMode': 'Access mode, current: {name}',
+  'settings.enter.title': 'Enter behavior while busy',
+  'settings.enter.description': 'Busy only; Cmd/Ctrl+Enter uses the other behavior',
+  'settings.enter.queue': 'Queue',
+  'settings.enter.steer': 'Steer',
+  'access.confirm.title': 'Enable Full access?',
+  'access.confirm.description': 'Full access reduces confirmation steps and lets the agent perform more actions directly, including sensitive operations, file changes, or external commands. Only use it when you trust the current task.',
+  'access.confirm.acknowledge': 'I understand the risks and want to continue',
+  'access.confirm.cancel': 'Cancel',
+  'access.confirm.enable': 'Enable Full access',
+  'hero.headline': 'Let\'s start building',
+  'hero.chooseWorkspace': 'Choose workspace',
+  'session.hierarchy': 'Session hierarchy',
+  'details.title': 'Details',
+  'details.close': 'Close details',
+  'details.empty': 'Click a tool row in the message flow to view its details',
+  'details.notInWindow': 'This call is outside the current window',
+  'details.input': 'Input',
+  'details.output': 'Output',
+  'details.running': 'Running…',
+  'todo.title': 'To-dos',
+  'todo.progress.done': '{done} completed',
+  'todo.progress.active': '{active} in progress',
+  'todo.progress.pending': '{pending} pending',
+  'todo.rowTitle': 'Update to-do list',
+  'todo.completed': '{done}/{total} completed',
+  'chat.loadingHistory': 'Loading history…',
+  'chat.loadError': 'Failed to load history: {message} ({code})',
+  'chat.loadOlder': 'Load earlier',
+  'chat.toBottom': 'Back to bottom',
+  'message.extraBlock': 'Extra content block',
+  'message.contextInjection': 'Context injection',
+  'message.compaction': 'Context compacted',
+  'message.compaction.expand': 'View compaction summary',
+  'message.compaction.unavailable': 'Compaction summary unavailable',
+  'message.unknownSurface': 'Unknown surface event: {type}',
+  'message.unknownBlock': 'Unknown content block',
+  'message.stopped': 'Stopped',
+  'message.branch': 'Branch into a new conversation',
+  'message.branchUnavailable': 'Available only on the last message of a completed turn',
+  'message.retry.active': 'Retrying model request',
+  'message.retry.cancelled': 'Model request retry cancelled',
+  'message.retry.started': 'Retried model request',
+  'message.retry.scheduled': 'Waiting to retry model request',
+  'message.retry.status': '{label} ({retry}/{maximum}) · {seconds}s',
+  'message.retry.delay': 'Retry delay: ',
+  'message.retry.failure': 'Failure reason: ',
+  'message.turnError': 'This turn failed',
+  'message.ranFor': 'Ran for {duration}',
+  'duration.seconds': '{seconds}s',
+  'duration.minutes': '{minutes}m {seconds}s',
+  'command.running': 'Running…',
+  'command.failed': 'Command failed',
+  'command.done': 'Completed',
+  'command.title': 'Command',
+  'approval.waiting': 'Waiting for approval',
+  'approval.detail.aria': 'Approval details',
+  'approval.escalation': 'Tool {toolName} requests privileged execution',
+  'approval.reject': 'Reject',
+  'approval.allowOnce': 'Allow once',
+  'ask.rowTitle': 'Ask question',
+  'ask.waiting': 'waiting',
+  'ask.cancelled': 'cancelled',
+  'ask.interrupted': 'interrupted',
+  'ask.answered': '{answered}/{total} answered',
+  'bash.running': 'Running',
+  'bash.failed': 'Failed',
+  'bash.stopped': 'Stopped',
+  'row.running': 'Running',
+  'row.failed': 'Failed',
+  'row.stopped': 'Stopped',
+  'queue.count': '{n} queued messages',
+  'queue.edit': 'Edit queued message',
+  'queue.edit.unsupported': 'Contains non-text content; editing is not supported yet',
+  'queue.save': 'Save queued message',
+  'queue.cancelEdit': 'Cancel editing',
+  'queue.remove': 'Remove queued message',
+  'queue.steer': 'Steer queued message',
+  'queue.steer.unavailable': 'Steering is available only while the agent is running',
+  'queue.editFailed': 'Edit failed: this message may have already started sending.',
+  'queue.removeFailed': 'Removal failed: this message may have already started sending.',
+  'queue.steerFailed': 'Steering failed. Try again.',
+  'terminal.signal': 'signal {signal}',
+  'terminal.exitCode': 'exit code {code}',
+  'terminal.running': 'Running',
+  'terminal.failed': 'Failed',
+  'terminal.done': 'Done',
+  'terminal.noOutput': 'No output',
+  'terminal.collapseAria': 'Collapse output',
+  'terminal.expandAria': 'Expand the remaining {n} output lines',
+  'terminal.expandRest': '… {n} more lines',
+  'json.truncated': '… truncated, {total} characters total',
+  'clock.md': '{m}/{d}',
+  'clock.ymd': '{y}-{m}-{d}',
+} satisfies Record<ConversationKey, string>

packages/client/ui-conversation/src/client/queue/QueueDock.module.css

@@ -1,30 +1,189 @@
-/* Neutral stacked strip above the input (queue rows are informational, not a warn state). */
+/* Figma .FileContainerText 1:791: the wrapper uses the shared dock inset
+   inside the composer card around the inset panel. */
 
 .dock {
-  margin: 6px 0;
-  padding: 8px 12px;
-  border: 1px solid var(--dsw-alias-separator-primary);
-  border-radius: 10px;
-  background: var(--dsw-alias-bg-base);
+  box-sizing: border-box;
+  flex: none;
+  width: calc(
+    100% -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  max-width: calc(
+    var(--dsh-composer-card-max-width) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  /* Cancel the stack gap after this item and tuck 3px under the input card
+     (square bottom), reading as one attached surface. */
+  margin: 0 auto calc(0px - var(--dsh-composer-stack-gap) - 3px);
+  /* Horizontal padding completes the shared dock inset (this wrapper only
+     subtracts two insets from its width); no vertical padding, so the visual
+     gap above the panel stays the uniform stack gap. */
+  padding: 0 var(--dsh-composer-dock-inset);
 }
 
-.title {
-  font-size: 12px;
+.panel {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding: 2px 0;
+  border-radius: 12px 12px 0 0;
+  background: var(--dsw-specific-tip);
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
+}
+
+.panel::after {
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--dsw-alias-border-l1);
+  /* The input card's own top border closes the shape below. */
+  border-bottom: none;
+  border-radius: inherit;
+  content: '';
+  pointer-events: none;
+}
+
+.header {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  height: 36px;
+  /* Right inset 12px puts the chevron on the same vertical line as the Todo
+     header's chevron (12px body padding there). */
+  padding: 4px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  text-align: left;
+  cursor: pointer;
+}
+
+.header:focus-visible {
+  outline: 2px solid var(--dsw-alias-label-tertiary);
+  outline-offset: -2px;
+}
+
+.header:disabled {
+  cursor: default;
+}
+
+.lead {
+  display: grid;
+  flex: none;
+  place-items: center;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.count {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: Inter, var(--dsw-font-family);
+  font-size: 13px;
   font-weight: 500;
-  color: var(--dsw-alias-label-secondary);
+  line-height: 24px;
+}
+
+.chevron {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+  color: var(--dsw-alias-label-tertiary);
 }
 
 .list {
-  margin: 4px 0 0;
+  max-height: 180px;
+  overflow-y: auto;
+  margin: 0;
   padding: 0;
   list-style: none;
 }
 
 .row {
-  overflow: hidden;
-  font-size: 12px;
-  line-height: 20px;
-  color: var(--dsw-alias-label-primary);
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  height: 36px;
+  padding: 4px 5px 4px 12px;
+  border-radius: 8px;
+}
+
+.row + .row {
+  box-shadow: inset 0 1px 0 var(--dsw-alias-border-l1);
+}
+
+.preview,
+.editor {
+  flex: 1 1 auto;
+  min-width: 0;
+  font: var(--dsw-font-xs-13);
+  font-family: Inter, var(--dsw-font-family);
+}
+
+.preview {
+  overflow: hidden;
+  color: var(--dsw-alias-label-primary-dimmed);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-word;
+}
+
+.editor {
+  box-sizing: border-box;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 6px;
+  outline: none;
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+}
+
+.editor:focus {
+  border-color: var(--dsw-alias-state-business-primary);
+}
+
+.actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 10px;
+}
+
+.action {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+}
+
+.action:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.action:focus-visible {
+  outline: 2px solid var(--dsw-alias-label-tertiary);
+  outline-offset: -2px;
+}
+
+.action:disabled {
+  cursor: default;
+  opacity: 0.45;
 }

packages/client/ui-conversation/src/client/queue/QueueDock.tsx

@@ -1,48 +1,244 @@
-// Read-only queue dock entry (design v4 queue cut 1): renders the session's
-// inbox mirror (session/queued frames + connect baseline) as one stacked
-// strip above the input. No per-row actions — the host inbox has no
-// addressable entries yet (queue cut 2 ledger).
+// Queue dock entry: renders the authoritative transient inbox snapshot and
+// addresses per-row mutations through the session-scoped conversation face.
 //
 // The 'conversation.input.dock' SlotMap declaration lives in
 // ../contract/slots.ts beside the other input-region slots.
 import type { Context } from 'cordis'
-import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
-import type {} from '@deepseek-ai/dsh-client-runtime/client'
+import { useEffect, useId, useMemo, useState } from 'react'
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+import {
+  IconCheckOutline16, IconChevronDownOutline14, IconChevronUpOutline14, IconCloseOutline16,
+  IconEditOutline16, IconQueueOutline14, IconSendOutline14, IconTrashOutline16, Tooltip,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { QueueAction, QueueItemId } from '../contract/queue.ts'
+import { NS } from '../locales.ts'
 import css from './QueueDock.module.css'
 
-/** Full props of a dock entry: InputZone owner share + session standard kit + global seat. */
-export type QueueDockProps = PropsRuntime<'conversation.input.dock'>
+/** Queue operations injected by the session-scoped registration. */
+export interface QueueDockInjected {
+  updateQueue: (itemId: QueueItemId, action: QueueAction) => Promise<void>
+  notify: (level: 'info' | 'error', text: string) => void
+}
+
+/** Full props of a dock entry: InputZone owner share + session standard kit + global seat + the locale seat. */
+export type QueueDockProps = PropsRuntime<'conversation.input.dock'> & QueueDockInjected & PropsLocale<'conversation'>
+
+/**
+ * Queue strip: one item renders directly; multiple items default to a
+ * collapsible count header; an empty queue renders nothing.
+ */
+export function QueueDock({ useSession, updateQueue, notify, t }: QueueDockProps) {
+  const inbox = useSession(s => s.queue)
+  const queue = useMemo(() => inbox.filter(row => row.placement === 'queued'), [inbox])
+  const running = useSession(s => s.running)
+  const queueMutable = useSession(s => s.subagent === null)
+  const [editing, setEditing] = useState<{ id: QueueItemId; text: string } | null>(null)
+  const [busy, setBusy] = useState<QueueItemId | null>(null)
+  const [collapsed, setCollapsed] = useState(true)
+  const listId = useId()
+
+  useEffect(() => {
+    if (queue.length === 0 && !collapsed) setCollapsed(true)
+    if (editing !== null && (!queueMutable || !queue.some(row => row.id === editing.id))) setEditing(null)
+  }, [collapsed, editing, queue, queueMutable])
 
-/** Queue strip: one preview line per queued message; renders null when the queue is empty. */
-export function QueueDock({ useSession }: QueueDockProps) {
-  const queue = useSession(s => s.queue)
   if (queue.length === 0) return null
+
+  const interactionActive = queueMutable && (editing !== null || busy !== null)
+  const expanded = !collapsed || interactionActive
+  const listVisible = queue.length === 1 || expanded
+
+  const applyAction = async (
+    itemId: QueueItemId,
+    action: QueueAction,
+    failure: string,
+  ): Promise<boolean> => {
+    setBusy(itemId)
+    try {
+      await updateQueue(itemId, action)
+      return true
+    } catch {
+      notify('error', failure)
+      return false
+    } finally {
+      setBusy(current => current === itemId ? null : current)
+    }
+  }
+
+  const saveEdit = async (): Promise<void> => {
+    if (editing === null || editing.text.trim() === '') return
+    if (await applyAction(
+      editing.id,
+      { kind: 'edit', content: [{ type: 'text', text: editing.text }] },
+      t('queue.editFailed'),
+    )) setEditing(null)
+  }
+
   return (
-    <div className={css.dock}>
-      <div className={css.title}>已排队 {queue.length} 条</div>
-      <ul className={css.list}>
-        {queue.map(row => (
-          <li key={row.key} className={css.row}>{row.preview}</li>
-        ))}
-      </ul>
+    <div className={css.dock} data-queue-dock="">
+      <div className={css.panel}>
+        {queue.length > 1 && (
+          <button
+            type="button"
+            className={css.header}
+            aria-controls={listId}
+            aria-expanded={expanded}
+            disabled={interactionActive}
+            onClick={() => { setCollapsed(value => !value) }}
+          >
+            <span className={css.lead} aria-hidden><IconQueueOutline14 /></span>
+            <span className={css.count}>{t('queue.count', { n: queue.length })}</span>
+            <span className={css.chevron} aria-hidden>
+              {expanded ? <IconChevronDownOutline14 /> : <IconChevronUpOutline14 />}
+            </span>
+          </button>
+        )}
+        <ul id={listId} className={css.list} hidden={!listVisible}>
+          {listVisible && queue.map(row => (
+            <li key={row.id} className={css.row}>
+              {/* Single-item strip has no count header, so the row itself carries the queue glyph. */}
+              {queue.length === 1 && <span className={css.lead} aria-hidden><IconQueueOutline14 /></span>}
+              {editing?.id === row.id
+                ? (
+                  <input
+                    autoFocus
+                    className={css.editor}
+                    aria-label={t('queue.edit')}
+                    value={editing.text}
+                    onChange={(event) => { setEditing({ id: row.id, text: event.currentTarget.value }) }}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Escape') {
+                        setEditing(null)
+                        return
+                      }
+                      if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
+                        event.preventDefault()
+                        void saveEdit()
+                      }
+                    }}
+                  />
+                )
+                : <span className={css.preview}>{row.preview}</span>}
+              {queueMutable && <div className={css.actions}>
+                {editing?.id === row.id
+                  ? (
+                    <>
+                      <Tooltip label={t('queue.save')} side="bottom" delayMs={500}>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label={t('queue.save')}
+                          disabled={busy !== null || editing.text.trim() === ''}
+                          onClick={() => { void saveEdit() }}
+                        >
+                          <IconCheckOutline16 size={14} />
+                        </button>
+                      </Tooltip>
+                      <Tooltip label={t('queue.cancelEdit')} side="bottom" delayMs={500}>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label={t('queue.cancelEdit')}
+                          disabled={busy !== null}
+                          onClick={() => { setEditing(null) }}
+                        >
+                          <IconCloseOutline16 size={14} />
+                        </button>
+                      </Tooltip>
+                    </>
+                  )
+                  : (
+                    <>
+                      <Tooltip label={t('queue.edit')} side="bottom" delayMs={500} disabled={row.text === null}>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label={t('queue.edit')}
+                          // Disabled buttons fire no hover events, so the
+                          // unsupported hint stays a native title.
+                          title={row.text === null ? t('queue.edit.unsupported') : undefined}
+                          disabled={busy !== null || row.text === null}
+                          onClick={() => {
+                            if (row.text !== null) setEditing({ id: row.id, text: row.text })
+                          }}
+                        >
+                          <IconEditOutline16 size={14} />
+                        </button>
+                      </Tooltip>
+                      <Tooltip label={t('queue.remove')} side="bottom" delayMs={500}>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label={t('queue.remove')}
+                          disabled={busy !== null}
+                          onClick={() => {
+                            void applyAction(
+                              row.id,
+                              { kind: 'remove' },
+                              t('queue.removeFailed'),
+                            )
+                          }}
+                        >
+                          <IconTrashOutline16 size={14} />
+                        </button>
+                      </Tooltip>
+                      <Tooltip label={t('queue.steer')} side="bottom" delayMs={500} disabled={!running}>
+                        <button
+                          type="button"
+                          className={css.action}
+                          aria-label={t('queue.steer')}
+                          title={running ? undefined : t('queue.steer.unavailable')}
+                          disabled={busy !== null || !running}
+                          onClick={() => {
+                            void applyAction(
+                              row.id,
+                              { kind: 'steer' },
+                              t('queue.steerFailed'),
+                            )
+                          }}
+                        >
+                          <IconSendOutline14 />
+                        </button>
+                      </Tooltip>
+                    </>
+                  )}
+              </div>}
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   )
 }
 
 /**
- * The dock entry as a plain registrant plugin (bash posture).
- * `inject: ['conversation']` is the ordering seam: the conversation service
- * mounts after ui-conversation's slot registrations, so the
- * 'conversation.input.dock' declaration is on the ledger by then.
+ * The dock entry as a plain registrant plugin. The conversation service is the
+ * ordering and action seam; session scopes provide the exact queue owner.
  */
 export const queueDockEntry = {
   name: 'conversation-queue-dock',
-  inject: ['slots', 'conversation'],
+  inject: ['slots', 'conversation', 'sessions'],
   /**
-   * Register the queue strip into the input dock (list entry, order 0).
+   * Register the queue strip as the terminal input-dock entry (order 20).
    * @param ctx - registrant context (disposal rides ctx.effect inside slots.register).
    */
   apply(ctx: Context): void {
-    ctx.slots.register({ name: 'conversation.input.dock', id: 'queue', order: 0 }, QueueDock)
+    ctx.slots.register({
+      name: 'conversation.input.dock',
+      id: 'queue',
+      order: 20,
+      locale: NS,
+      inject: (sessionId: SessionId): QueueDockInjected => {
+        const actx = ctx.sessions.scope(sessionId)
+        if (actx === undefined) throw new Error(`queue dock: session "${sessionId}" resolved no scope`)
+        const conversation = actx.get('conversation')
+        if (conversation === undefined) throw new Error('queue dock: conversation service unavailable')
+        return {
+          updateQueue: (itemId, action) => conversation.updateQueue(itemId, action),
+          notify: (level, text) => { conversation.input.for(actx).notify(level, text) },
+        }
+      },
+    }, QueueDock)
   },
 }

packages/client/ui-conversation/src/client/queue/store.ts

@@ -1,7 +1,7 @@
 /**
  * Queue read face for the InputState.queue projection (frozen contract in
  * ../input/contract.ts): a uSES-compatible observable over one session's
- * queue rows. The Session snapshot already keeps the queue array
+ * transient inbox rows. The Session snapshot already keeps the queue array
  * reference-stable across unrelated snapshot swaps, so this is a pure
  * projection — no second store, no copy.
  */
@@ -9,10 +9,10 @@ import type { ObservableSnapshot, SessionFace } from '@deepseek-ai/dsh-client-ru
 import type { QueuedMessage } from '../input/contract.ts'
 
 /**
- * Project a session's queue rows as a bare observable (subscribe/getSnapshot).
+ * Project a session's transient inbox rows as a bare observable (subscribe/getSnapshot).
  * The wiring layer (T5) overlays this onto InputState.queue; the runtime
- * QueuedMessage and the input-contract QueuedMessage are structurally the
- * same frozen shape ({key, preview}).
+ * QueuedMessage and the input-contract QueuedMessage are structurally
+ * identical.
  * @param session - the resident session face.
  * @returns the queue read face (snapshot reference stable while the queue is unchanged).
  */

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

@@ -13,6 +13,7 @@ import type { Context } from 'cordis'
 // error, so scope resolution goes through the sessions service (scopeOf
 // method) instead of the standalone helper.
 import type { ISessions, SessionFace, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+import type { QueueAction, QueueItemId } from './contract/queue.ts'
 import type { InputService } from './input/contract.ts'
 
 /**
@@ -24,14 +25,20 @@ export interface IConversation {
   /** The per-session input machine registry (InputService face). */
   readonly input: InputService
   /**
-   * Send a prompt into the caller scope's session.
+   * Send a prompt into the caller scope's session (queued turn).
    * @param text - prompt text, sent verbatim as one text block.
-   * @param mode - queue after the current turn, or steer into it.
    * @returns completion; business failures reject (and land in promptError).
    */
-  send(text: string, mode: 'queue' | 'steer'): Promise<void>
+  send(text: string): Promise<void>
   /**
-   * Cancel the scoped session's in-flight turn.
+   * Apply one edit, remove, or strict steer operation to a pending queue occurrence.
+   * @param itemId - agent-owned inbox occurrence identity.
+   * @param action - requested queue operation.
+   * @returns completion; converged strict-steer races resolve, while other failures reject.
+   */
+  updateQueue(itemId: QueueItemId, action: QueueAction): Promise<void>
+  /**
+   * Cancel the scoped session's in-flight turn while preserving its pending Queue.
    * @returns completion; failures reject as in send.
    */
   cancel(): Promise<void>
@@ -63,15 +70,27 @@ export class ConversationService extends Service implements IConversation {
    * session snapshot's promptError (object-layer surface); the rejection here
    * exists for caller choreography (the composer restores the draft on it).
    * @param text - prompt text, sent verbatim as one text block.
-   * @param mode - queue after the current turn, or steer into it.
    */
-  async send(text: string, mode: 'queue' | 'steer'): Promise<void> {
+  async send(text: string): Promise<void> {
     const session = this.scopedSession('send')
-    const result = await session.prompt([{ type: 'text', text }], mode)
+    const result = await session.prompt([{ type: 'text', text }], 'queue')
     if (!result.ok) throw new Error(`conversation.send failed: ${result.error.code}: ${result.error.message}`)
   }
 
-  /** Cancel the scoped session's in-flight turn (failures land in promptError and reject, as in send). */
+  /** Apply one operation to a pending queue occurrence. */
+  async updateQueue(itemId: QueueItemId, action: QueueAction): Promise<void> {
+    const session = this.scopedSession('updateQueue')
+    const result = await session.updateQueue(itemId, action)
+    if (!result.ok) {
+      if (
+        action.kind === 'steer'
+        && (result.error.code === 'steer-unavailable' || result.error.code === 'queue-item-not-found')
+      ) return
+      throw new Error(`conversation.updateQueue failed: ${result.error.code}: ${result.error.message}`)
+    }
+  }
+
+  /** Cancel the scoped session's in-flight turn while preserving Queue (failures land in promptError and reject, as in send). */
   async cancel(): Promise<void> {
     const session = this.scopedSession('cancel')
     const result = await session.cancel()

packages/client/ui-conversation/src/client/settings/EnterBehaviorRow.module.css

@@ -0,0 +1,56 @@
+/* Composer Enter preference row: title/description plus selector pill. */
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+}
+
+.rowText {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-right: 48px;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.desc {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.selector {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  height: 36px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 18px;
+  background: var(--dsw-alias-bg-module-platform);
+  font: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+}
+
+.selector:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.chevron {
+  flex: none;
+}

packages/client/ui-conversation/src/client/settings/EnterBehaviorRow.tsx

@@ -0,0 +1,76 @@
+/** General Settings row for the Composer's busy-state Enter preference. */
+import { useState } from 'react'
+import type { SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { IconChevronDownOutline14, Menu } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { BusyEnterBehavior } from '../contract/composer-submission.ts'
+import type { ConversationKey } from '../locales.ts'
+import css from './EnterBehaviorRow.module.css'
+
+/** Registration-side preference face. */
+export interface EnterBehaviorRowInjected {
+  hooks: {
+    /** Persisted busy-state preference bound as useBusyEnter. */
+    busyEnter: SnapshotStore<BusyEnterBehavior>
+  }
+  /** Change the busy-state plain-Enter behavior. */
+  setBusyEnter: (behavior: BusyEnterBehavior) => void
+}
+
+/** Full Settings-row props. */
+export type EnterBehaviorRowProps =
+  PropsRuntime<'settings.general.item'>
+  & PropsLocale<'conversation'>
+  & InjectFace<EnterBehaviorRowInjected>
+
+const OPTIONS: readonly {
+  id: BusyEnterBehavior
+  label: ConversationKey
+}[] = [
+  { id: 'queue', label: 'settings.enter.queue' },
+  { id: 'steer', label: 'settings.enter.steer' },
+]
+
+/**
+ * Render the busy-state Enter behavior selector.
+ * @param props - composed Settings slot props.
+ * @returns the preference row.
+ */
+export function EnterBehaviorRow({ useBusyEnter, setBusyEnter, t }: EnterBehaviorRowProps) {
+  const behavior = useBusyEnter(value => value)
+  const [open, setOpen] = useState(false)
+  const selectedLabel = behavior === 'queue' ? 'settings.enter.queue' : 'settings.enter.steer'
+
+  return (
+    <div className={css.row}>
+      <div className={css.rowText}>
+        <div className={css.title}>{t('settings.enter.title')}</div>
+        <div className={css.desc}>{t('settings.enter.description')}</div>
+      </div>
+      <Menu
+        open={open}
+        onClose={() => { setOpen(false) }}
+        items={OPTIONS.map(option => ({ id: option.id, label: t(option.label) }))}
+        selectedId={behavior}
+        onSelect={(id) => {
+          setOpen(false)
+          setBusyEnter(id as BusyEnterBehavior)
+        }}
+        align="end"
+        portal
+        anchor={(
+          <button
+            type="button"
+            className={css.selector}
+            aria-haspopup="menu"
+            aria-expanded={open}
+            onClick={() => { setOpen(value => !value) }}
+          >
+            {t(selectedLabel)}
+            <IconChevronDownOutline14 className={css.chevron} />
+          </button>
+        )}
+      />
+    </div>
+  )
+}

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

@@ -8,17 +8,26 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 8px 32px 12px;
+  /* Sides = clearance + 16px so the card lands on the shared content width
+     (input card - 32) at every viewport. */
+  padding: 8px calc(var(--dsh-composer-side-clearance) + 16px) 12px;
 }
 
 .card {
   overflow: hidden;
   width: 100%;
-  max-width: 776px;
+  max-width: var(--dsh-chat-content-width);
   border: 1px solid var(--dsw-alias-state-warn-secondary);
   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 +49,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,41 +83,17 @@
   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. Buttons are the shared
+   outline/primary capsules (Button atom, matching QuestionComposer's footer);
+   only the reject's danger hover is local. */
 .actionRow {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
-  margin-top: 8px;
-}
-
-.allow,
-.reject {
-  padding: 6px 16px;
-  border-radius: 10px;
-  font-size: 13px;
-  line-height: 18px;
-  cursor: pointer;
-}
-
-.allow:disabled,
-.reject:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-/* Primary action: filled ink (draft's rightmost emphasis, minus the dropped
-   always-allow button). */
-.allow {
-  border: none;
-  background: var(--dsw-alias-label-primary);
-  color: var(--dsw-alias-label-primary-foreground);
-}
-
-/* Secondary: quiet outline. */
-.reject {
-  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
-  background: transparent;
-  color: var(--dsw-alias-label-secondary);
+  padding: 14px 16px 14px;
 }
 
 .reject:hover:not(:disabled) {

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

@@ -4,12 +4,17 @@
 // 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.
 
 import { useMemo, useState } from 'react'
+import { Button } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { RunningToolCall } from '@deepseek-ai/dsh-client-runtime/client'
 import { PendingApproval, type ApprovalComposerProps } from '../contract/slots.ts'
 import css from './ApprovalPanel.module.css'
@@ -37,10 +42,14 @@ export function ApprovalPanel(props: ApprovalComposerProps) {
   const approval = useMemo(() => new PendingApproval(props.matched), [props.matched])
   const command = props.useSession(s => commandOf(
     approval.callId === undefined ? undefined : s.runningCalls.find(call => call.callId === approval.callId)))
-  return <ApprovalFlow key={approval.key} pending={approval} {...command === undefined ? {} : { command }} />
+  return <ApprovalFlow key={approval.key} pending={approval} t={props.t} {...command === undefined ? {} : { command }} />
 }
 
-function ApprovalFlow({ pending, command }: { pending: PendingApproval; command?: string }) {
+function ApprovalFlow({ pending, command, t }: {
+  pending: PendingApproval
+  command?: string
+  t: ApprovalComposerProps['t']
+}) {
   // Local one-shot latch: the panel leaves only when the resolved frame
   // lands; until then the buttons must not re-fire. An answer failure
   // (rejected receipt / transport) re-arms them for retry.
@@ -52,18 +61,21 @@ function ApprovalFlow({ pending, command }: { pending: PendingApproval; command?
   return (
     <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}>
-          <div className={css.headline}>{pending.reason ?? `工具 ${pending.toolName} 请求越权执行`}</div>
+        <div className={css.strip}><span className={css.dot} />{t('approval.waiting')}</div>
+        {/* 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={t('approval.detail.aria')}>
+          <div className={css.headline}>{pending.reason ?? t('approval.escalation', { toolName: 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 variant="outline" className={css.reject} disabled={answered} onClick={() => { answer('rejected') }}>
+            {t('approval.reject')}
+          </Button>
+          <Button variant="primary" disabled={answered} onClick={() => { answer('allowed-once') }}>
+            {t('approval.allowOnce')}
+          </Button>
         </div>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-/* Conversation column skeleton: header (breadcrumb row + tabs) over the view
+/* Conversation column skeleton: header (breadcrumb row only for subagents not fork + tabs) over the view
    area, composer InputBar at the bottom. Column width/squeeze is layout's;
    this fills its cell. Figma: Header 39:27730 (83px two-row), tabs 13px with
    a 3px active bar. */
@@ -9,6 +9,20 @@
   height: 100%;
   min-width: 0;
   background: var(--dsw-alias-bg-base);
+
+  /* Shared width axis for the whole column: one content width W
+     (--dsh-chat-content-width) for the transcript, the dock cards
+     (todo/goal/queue: card minus four insets, 4 x 8 = 32), and the takeover
+     cards (question/approval/plan review); the input card alone is W + 32px.
+     The relation also holds when a narrow viewport shrinks everything: the
+     chat scroller and the takeover frames pad clearance + 16px per side while
+     the input card clears the bare clearance, so the input card stays exactly
+     content + 32px at every width. Declared on the root because the
+     transcript and the composer seat are sibling subtrees. */
+  --dsh-chat-content-width: 748px;
+  --dsh-composer-card-max-width: calc(var(--dsh-chat-content-width) + 32px);
+  --dsh-composer-side-clearance: 16px;
+  --dsh-composer-dock-inset: 8px;
 }
 
 .header {
@@ -17,13 +31,18 @@
   border-bottom: 1px solid var(--dsw-alias-border-l2);
 }
 
-.crumbRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 32px;
+/* Blank hero/settling: keep the header node mounted (stable Session tree for
+   the wrapActiveBody composer) without taking column space. */
+.headerHidden {
+  display: none;
 }
 
+.titleRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 32px;
+}
 .crumbs {
   display: flex;
   align-items: center;
@@ -72,6 +91,13 @@
   cursor: default;
 }
 
+.headerActions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+}
+
 /* figma Tab_Group 34:11441: 35px strip, gap 36, pad-left 8, tabs bottom-aligned. */
 .tabs {
   display: flex;
@@ -121,10 +147,105 @@
   min-height: 0;
 }
 
-/* Composer stack: dock strips above the input card (design §6 MIX order). */
+/* Composer context stack (Figma 9:937): standalone dock cards share one
+   rhythm above the input card. */
 .composerStack {
+  /* Horizontal geometry (card width, clearance, dock inset) rides the shared
+     .root variables above so takeover siblings match the stack. */
+  --dsh-composer-stack-gap: 6px;
+
   display: flex;
   flex-direction: column;
+  gap: var(--dsh-composer-stack-gap);
+}
+
+/* Common seat for the composer chain (fallback + elected overlay siblings). */
+.composerSeat {
+  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
+   sticky). The scroll body holds the transcript and the sticky composer seat
+   so wheel over the footer moves the flow. */
+.root[data-phase='active'] {
+  overflow: hidden;
+}
+
+.root[data-phase='active'] .header {
+  flex: none;
+}
+
+.scrollBody {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  /* Reserved unconditionally: the composer seat rides this box's content box in
+     Chat and its padding box under a view's composer overlay, so an `auto`
+     gutter moves the input card sideways by the bar's width whenever the two
+     differ ([decision](../../../../../../.agents/notes/implemented/bug-fix/2026-08-04-composer-tab-gutter-reservation.md)). */
+  scrollbar-gutter: stable;
+}
+
+.root[data-phase='active'] .viewArea {
+  flex: 1 0 auto;
+  min-height: auto;
+}
+
+.root[data-phase='active'] .composerSeat {
+  position: sticky;
+  bottom: 0;
+  /* Above markdown CodeBlock sticky banners (z-index 6) so the footer never
+     paints under a sticking code header while scrolling. */
+  z-index: 7;
+  /* Input mask (figma 1205:27463): transcript fades out under a FIXED 36px
+     band at the seat's top (the figma 24% of the resting ~150px composer),
+     solid below — px stops, not %, so a growing draft only widens the solid
+     region and the fade band never stretches. The 0px stop is bg-base at
+     zero alpha (not white, which the figma export hardcodes) so both themes
+     fade from their own base. */
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--dsw-alias-bg-base) 0%, transparent) 0px,
+    var(--dsw-alias-bg-base) 36px
+  );
+}
+
+/* Views may opt into a composer overlay while ConversationRoot retains
+   ownership of the seat geometry and its active-phase precedence. */
+.scrollBody:has([data-conversation-composer-overlay]) {
+  position: relative;
+  /* A clipping box nothing scrolls out of, stated as a scroll container on both
+     axes rather than `overflow: hidden`: WebKit honours the reservation above
+     only in the `overflow-y: auto` form, and a single-axis scroller computes
+     the other axis to `auto`
+     ([decision](../../../../../../.agents/notes/implemented/bug-fix/2026-08-04-composer-tab-gutter-reservation.md)). */
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.scrollBody:has([data-conversation-composer-overlay]) > .viewArea {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.scrollBody:has([data-conversation-composer-overlay]) > .composerSeat {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
 }
 
 /* Hero phase: the composer stack (hero chrome + workspace row + card) is
@@ -138,7 +259,9 @@
   gap: 12px;
   /* Foot inside the centered box floats the stack a bit above true center. */
   padding-bottom: 32px;
-  width: min(776px, calc(100% - 48px));
+  /* Card cap + both clearances: the hero input card lands at exactly the same
+     width as the docked composer at every viewport. */
+  width: min(calc(var(--dsh-composer-card-max-width) + 2 * var(--dsh-composer-side-clearance)), 100%);
   z-index: 1;
 }
 
@@ -162,15 +285,20 @@
   display: flex;
   align-items: center;
   min-width: 0;
-  padding-left: 8px;
+  /* figma drew px 8; nudged +12 so the chip's folder glyph lines up closer to
+     the card's inner controls below. */
+  padding-left: 20px;
 }
 
-.root[data-phase='hero'] {
+/* Hero: the composer sits inside the session scroll body; center there so
+   the tree seat matches active (sticky footer) without a Root remount. */
+.root[data-phase='hero'] .scrollBody {
   justify-content: center;
+  overflow-y: auto;
 }
 
-/* Settling (session replaying, hero/docked unknown): keep the composer
+/* Settling (session replaying, hero/docked unknown): keep the composer seat
    mounted but invisible so no wrong layout flashes before the phase lands. */
-.root[data-phase='settling'] .composerStack {
+.root[data-phase='settling'] .composerSeat {
   visibility: hidden;
 }

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

@@ -1,13 +1,12 @@
-// Resident conversation skeleton. Hero chrome, composer positioning, and the
-// chain stay mounted across no-session/session transitions. Only the inert
-// input body swaps for the strict session InputBar.
+// Resident conversation skeleton. Hero chrome, composer positioning, the
+// chain, AND the composer bar (session-maybe slot) stay mounted across
+// no-session/session transitions — the bar renders inert via owner props.
 
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
 import clsx from 'clsx'
 import type { WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ConversationSlotProps, InputZone } from '../contract/slots.ts'
 import { HeroGlow, HeroShell, WorkspaceChip, workspaceLabel } from './EmptyHero.tsx'
-import { DisabledInputBar } from './DisabledInputBar.tsx'
 import css from './ConversationRoot.module.css'
 
 /** Full props composed from the slot contract. */
@@ -15,7 +14,7 @@ export type ConversationRootProps = ConversationSlotProps
 
 export function ConversationRoot({
   sessionId, useSession, useSessions, useWorkspaces, useInput,
-  renderSlot, renderSlotChain, selectWorkspace,
+  renderSlot, renderSlotChain, selectWorkspace, t,
 }: ConversationRootProps) {
   const openState = useSession(s => s.openState)
   const composerPhase = useSession(s => s.composerPhase)
@@ -23,12 +22,30 @@ export function ConversationRoot({
   const session = useSession(s => s)
   const inputState = useInput(s => s)
   const cwd = useSessions(s => sessionId === undefined ? undefined : s.byId[sessionId]?.cwd)
+  const summaryBlank = useSessions(s => sessionId === undefined ? undefined : s.byId[sessionId]?.blank)
   const workspaces = useWorkspaces(s => s)
 
   const [pickerOpen, setPickerOpen] = useState(false)
   const [pendingWorkspaceId, setPendingWorkspaceId] = useState<WorkspaceId | undefined>()
   const pickerAnchor = useRef<HTMLButtonElement>(null)
 
+  // Publishes the seat's live height as --dsh-composer-height on the scroll
+  // body so floating controls (ChatView back-to-bottom) clear the composer as
+  // it grows. Callback ref, not an effect: the seat remounts when the tree
+  // moves between the no-session and session paths. Stable identity so React
+  // reattaches only on those remounts, not on every render.
+  const seatObserver = useRef<ResizeObserver | null>(null)
+  const seatResizeRef = useCallback((seat: HTMLDivElement | null): void => {
+    seatObserver.current?.disconnect()
+    seatObserver.current = null
+    const scroller = seat?.parentElement ?? null
+    if (seat === null || scroller === null) return
+    seatObserver.current = new ResizeObserver(() => {
+      scroller.style.setProperty('--dsh-composer-height', `${seat.offsetHeight}px`)
+    })
+    seatObserver.current.observe(seat)
+  }, [])
+
   const sessionWorkspace = sessionId === undefined
     ? undefined
     : workspaces.items.find(workspace => workspace.sessionIds.includes(sessionId))
@@ -49,8 +66,16 @@ export function ConversationRoot({
   // While a session is still replaying (loading + blank) the hero/docked
   // choice is unknowable — render the composer hidden instead of flashing
   // the centered hero and snapping to the docked bar (or vice versa).
+  // Exemption: a session the list summary already proves blank can only
+  // land on the hero, so hiding would blank the column for the whole
+  // history round-trip (the startup auto-selection flash) for nothing.
+  // The exemption is deliberately open-state-wide, not loading-only: a
+  // summary-blank session is the hero before its open starts (`cold`) and
+  // after one fails (`error`) for the same reason — there is no history.
   const settling = sessionId !== undefined && composerPhase === 'blank' && openState === 'loading'
-  const hero = sessionId === undefined || (composerPhase === 'blank' && openState === 'open')
+    && summaryBlank !== true
+  const hero = sessionId === undefined
+    || (composerPhase === 'blank' && (openState === 'open' || summaryBlank === true))
   const zone: InputZone | undefined =
     session === undefined || inputState === undefined ? undefined : { session, input: inputState }
 
@@ -78,6 +103,7 @@ export function ConversationRoot({
         label={chipTitle}
         menuOpen={pickerOpen}
         onClick={() => { setPickerOpen(open => !open) }}
+        t={t}
       />
       {renderSlot('conversation.hero.workspace', {
         open: pickerOpen,
@@ -96,41 +122,73 @@ export function ConversationRoot({
   )
 
   // The placeholder chip ("Choose workspace") and the inert input travel
-  // together: a blank session whose workspace vanished (deleted from the
-  // sidebar) reverts to the same disabled bar as the initial no-session state.
-  const inputBar = sessionId === undefined || (hero && chipTitle === undefined)
-    ? <DisabledInputBar />
-    : renderSlot('conversation.composer.bar', {
-      variant: hero ? 'hero' : 'composer',
-      ...(hero ? { placeholder: 'Describe what you want to build' } : {}),
-      overlay: renderSlot('conversation.input.overlay', {}),
-      leftItems: zone === undefined ? null : renderSlot('conversation.input.left', zone),
-      rightItems: zone === undefined ? null : renderSlot('conversation.input.right', zone),
-    })
+  // together: no workspace picked yet (cold start, no session at all), or a
+  // blank session whose workspace vanished (deleted from the sidebar). The
+  // bar is ONE session-maybe slot rendered unconditionally — inert is a prop,
+  // not a different tree, so the textarea DOM survives the transition.
+  const inert = sessionId === undefined || (hero && chipTitle === undefined)
+  const inputBar = renderSlot('conversation.composer.bar', {
+    variant: hero ? 'hero' : 'composer',
+    ...(inert
+      ? { disabled: true, placeholder: t('placeholder.workspace') }
+      : hero ? { placeholder: t('placeholder.hero') } : {}),
+    overlay: renderSlot('conversation.input.overlay', {}),
+    leftItems: zone === undefined ? null : renderSlot('conversation.input.left', zone),
+    rightItems: zone === undefined ? null : renderSlot('conversation.input.right', zone),
+    // Stats band under the card, inside the bar's width column so both
+    // share one constraint (composer.dock = stats-line family).
+    footer: !hero && zone !== undefined ? renderSlot('conversation.composer.dock', zone) : null,
+  })
 
   const composerBar = (
     <div className={clsx(css.composerStack, hero && css.composerHero)}>
       {hero && <HeroGlow className={css.heroGlow} />}
-      {hero && <HeroShell />}
+      {hero && <HeroShell t={t} />}
       {hero && heroWorkspaceRow}
-      {!hero && zone !== undefined && renderSlot('conversation.input.dock', zone)}
-      {!hero && zone !== undefined && renderSlot('conversation.composer.dock', zone)}
+      {zone !== undefined && renderSlot('conversation.input.dock', zone)}
       {inputBar}
     </div>
   )
 
+  const phase = settling ? 'settling' : hero ? 'hero' : 'active'
+  const composer = renderSlotChain(
+    'conversation.composer',
+    { interactions: pending, session },
+    { fallback: composerBar, overlay: true },
+  )
+
+  // Sticky wraps the whole chain output (fallback + elected overlay), not
+  // only `.composerStack`: overlay:true renders those as siblings, and sticky
+  // on the fallback alone would leave Question/Approval panels at the content
+  // end off-screen when the user is not pinned to the floor.
+  const composerSeat = (
+    <div ref={seatResizeRef} className={css.composerSeat} data-composer-seat="">
+      {composer}
+    </div>
+  )
+
+  // Header stays column chrome above this scrollport; the sticky composer
+  // seat lives inside it with the transcript. Always wrap while a session
+  // exists (hero/settling/active) so the composer keeps one tree seat across
+  // the blank → active flip — relocating it only in active remounted the textarea.
+  const wrapActiveBody = (view: ReactNode): ReactNode => (
+    <div className={css.scrollBody} data-conversation-scroll="">
+      {view}
+      {composerSeat}
+    </div>
+  )
+
   return (
-    <div className={css.root} data-phase={settling ? 'settling' : hero ? 'hero' : 'active'}>
+    <div className={css.root} data-phase={phase}>
       {/* Mounted for every real session, hero included: ConversationSession
-          renders no chrome while blank but owns the draft-persistence mirror
-          bind — unmounting it in the hero would lose pre-first-send text on
-          a refresh or scope rebuild. */}
-      {sessionId !== undefined && renderSlot('conversation.session', {})}
-      {renderSlotChain(
-        'conversation.composer',
-        { interactions: pending },
-        { fallback: composerBar, overlay: true },
+          keeps a chrome-hidden shell while blank and owns the draft-
+          persistence mirror bind — unmounting it in the hero would lose
+          pre-first-send text on a refresh or scope rebuild. */}
+      {sessionId !== undefined && renderSlot(
+        'conversation.session',
+        { wrapActiveBody },
       )}
+      {sessionId === undefined ? wrapActiveBody(null) : null}
     </div>
   )
 }

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

@@ -1,8 +1,7 @@
 /** Strict per-session conversation content: header, view ring, and chat store bindings. */
 
-import { useEffect, useSyncExternalStore } from 'react'
+import { useEffect, useSyncExternalStore, type ReactNode } from 'react'
 import clsx from 'clsx'
-import { shallowEqual } from '@deepseek-ai/dsh-client-runtime/client'
 import type { SessionId, SessionListState, SessionSummary } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ConversationSessionSlotProps } from '../contract/slots.ts'
 import css from './ConversationRoot.module.css'
@@ -10,31 +9,50 @@ import css from './ConversationRoot.module.css'
 /** Full props composed from the strict session slot contract. */
 export type ConversationSessionProps = ConversationSessionSlotProps
 
-function deriveAncestry(list: SessionListState, id: SessionId): readonly SessionSummary[] {
-  const chain: SessionSummary[] = []
+interface Breadcrumb {
+  readonly id: SessionId
+  readonly displayTitle: string
+}
+
+function deriveAncestry(list: SessionListState, id: SessionId): readonly Breadcrumb[] {
+  const chain: Breadcrumb[] = []
+  const seen = new Set<SessionId>()
   let cursor: SessionId | undefined = id
   while (cursor !== undefined) {
+    if (seen.has(cursor)) break
+    seen.add(cursor)
     const summary: SessionSummary | undefined = list.byId[cursor]
-    if (summary === undefined || chain.includes(summary)) break
-    chain.unshift(summary)
+    if (summary === undefined) break
+    chain.unshift({ id: summary.id, displayTitle: summary.displayTitle })
+    if (summary.origin !== 'subagent') break
     cursor = summary.parentId
   }
   return chain
 }
 
+function equalBreadcrumbs(left: readonly Breadcrumb[], right: readonly Breadcrumb[]): boolean {
+  return left.length === right.length
+    && left.every((item, index) => {
+      const other = right.at(index)
+      return other !== undefined && item.id === other.id && item.displayTitle === other.displayTitle
+    })
+}
+
 export function ConversationSession({
   sessionId, useSession, useSessions, useInput, inputActions, useStore, actions,
-  renderSlot, views, bindDraftMirror, open,
+  renderSlot, views, bindDraftMirror, open, wrapActiveBody, t,
 }: ConversationSessionProps) {
   useSyncExternalStore(views.subscribe, views.version)
   const tabs = views.list()
   const activeId = useStore(s => s.view) ?? 'chat'
   const active = tabs.find(view => view.id === activeId) ?? tabs[0]
-  const ancestry = useSessions(s => deriveAncestry(s, sessionId), shallowEqual)
+  const ancestry = useSessions(s => deriveAncestry(s, sessionId), equalBreadcrumbs)
   const composerPhase = useSession(s => s.composerPhase)
   const blank = useSession(s => s.blank)
   const inputState = useInput(s => s)
   const storedDraft = useStore(s => s.draft)
+  // `?? null`: persisted snapshots from before the inspect field rehydrate without it.
+  const inspect = useStore(s => s.inspect ?? null)
 
   useEffect(() => {
     if (inputState.draft === '' && storedDraft !== '') inputActions.setDraft(storedDraft)
@@ -44,52 +62,73 @@ export function ConversationSession({
     // the machine mirror, not this seed effect.
   }, [inputActions])
 
-  if (blank && composerPhase === 'blank') return null
+  // Blank hero/settling: keep the same header + body tree shape so a
+  // wrapActiveBody-hosted composer keeps its DOM identity across the first
+  // send (hero → active). Chrome is hidden; the draft-persistence mirror
+  // still runs because this component stays mounted.
+  const hideChrome = blank && composerPhase === 'blank'
+
+  const view: ReactNode = hideChrome ? null : (
+    <div className={css.viewArea}>
+      {active !== undefined && renderSlot('conversation.view', {
+        inspect,
+        onInspectDone: () => { actions.setInspect(null) },
+      }, { only: active.id })}
+    </div>
+  )
 
   return (
     <>
-      <header className={css.header}>
-        <div className={css.crumbRow}>
-          <nav className={css.crumbs} aria-label="Session hierarchy">
-            {ancestry.map((summary, index) => {
-              const last = index === ancestry.length - 1
-              return (
-                <span key={summary.id} className={css.crumbSeg}>
-                  {index > 0 && <span className={css.crumbSep}>/</span>}
+      <header
+        className={clsx(css.header, hideChrome && css.headerHidden)}
+        aria-hidden={hideChrome || undefined}
+      >
+        {!hideChrome && (
+          <>
+            <div className={css.titleRow}>
+              <nav className={css.crumbs} aria-label={t('session.hierarchy')}>
+                {ancestry.map((summary, index) => {
+                  const last = index === ancestry.length - 1
+                  return (
+                    <span key={summary.id} className={css.crumbSeg}>
+                      {index > 0 && <span className={css.crumbSep}>/</span>}
+                      <button
+                        type="button"
+                        className={clsx(css.crumb, last && css.crumbCurrent)}
+                        disabled={last}
+                        onClick={() => { open(summary.id) }}
+                      >
+                        {summary.displayTitle}
+                      </button>
+                    </span>
+                  )
+                })}
+                {ancestry.length === 0 && <span className={css.crumbCurrent}>{sessionId}</span>}
+              </nav>
+              <div className={css.headerActions}>
+                {renderSlot('conversation.session.header.actions', {})}
+              </div>
+            </div>
+            {tabs.length > 1 && (
+              <div className={css.tabs} role="tablist">
+                {tabs.map(viewTab => (
                   <button
+                    key={viewTab.id}
                     type="button"
-                    className={clsx(css.crumb, last && css.crumbCurrent)}
-                    disabled={last}
-                    onClick={() => { open(summary.id) }}
+                    role="tab"
+                    aria-selected={viewTab.id === active?.id}
+                    className={clsx(css.tab, viewTab.id === active?.id && css.tabActive)}
+                    onClick={() => { actions.setView(viewTab.id) }}
                   >
-                    {summary.displayTitle}
+                    {viewTab.label}
                   </button>
-                </span>
-              )
-            })}
-            {ancestry.length === 0 && <span className={css.crumbCurrent}>{sessionId}</span>}
-          </nav>
-        </div>
-        {tabs.length > 1 && (
-          <div className={css.tabs} role="tablist">
-            {tabs.map(view => (
-              <button
-                key={view.id}
-                type="button"
-                role="tab"
-                aria-selected={view.id === active?.id}
-                className={clsx(css.tab, view.id === active?.id && css.tabActive)}
-                onClick={() => { actions.setView(view.id) }}
-              >
-                {view.label}
-              </button>
-            ))}
-          </div>
+                ))}
+              </div>
+            )}
+          </>
         )}
       </header>
-      <div className={css.viewArea}>
-        {active !== undefined && renderSlot('conversation.view', {}, { only: active.id })}
-      </div>
+      {wrapActiveBody !== undefined ? wrapActiveBody(view) : view}
     </>
   )
 }

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

@@ -101,8 +101,27 @@
   font: var(--dsw-font-xs-13);
 }
 
-/* The terminal card sits directly under its section label, so it drops the
-   primitive's standalone vertical margin; the section owns the spacing. */
-.terminal {
+/* A card body (terminal, diff, or search) sits directly under its section
+   label, so it drops the primitive's standalone vertical margin; the section
+   owns the spacing. Card-neutral: no card-kind-specific value. */
+.cardBody {
+  margin: 0;
+}
+
+/* The recovery footer for a capped search: the result text (its `Full … stored
+   at …` locator) below the card in the muted tone, since the card holds only the
+   retained rows. */
+.searchRecovery {
+  margin: 6px 0 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: var(--dsw-alias-label-tertiary);
+  font: var(--dsw-font-xs-13);
+}
+
+/* The read and web cards sit directly under their section label, same as the
+   terminal card: drop the primitive's standalone vertical margin. */
+.read,
+.web {
   margin: 0;
 }

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

@@ -7,12 +7,16 @@
 // share the store seat exists for) and derives the call material from the
 // session snapshot — no data of its own.
 
-import { CodeBlock, TerminalBlock } from '@deepseek-ai/dsh-client-ui-primitives'
+import { CodeBlock, DiffBlock, ReadBlock, SearchBlock, TerminalBlock, WebBlock } from '@deepseek-ai/dsh-client-ui-primitives'
 import { shallowEqual } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ConversationSnapshot, RunningToolCall, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client'
 import type { DetailsSlotProps } from '../contract/slots.ts'
-import { terminalCardModel } from '../contract/terminal-card-model.ts'
-import type { ToolCallBlock } from '../contract/tool-call-model.ts'
+import { readCardModel } from '../contract/read-card-model.ts'
+import { diffCardModel } from '../contract/diff-card-model.ts'
+import { searchCardModel } from '../contract/search-card-model.ts'
+import { terminalBlockLabels, terminalCardModel } from '../contract/terminal-card-model.ts'
+import { webCardModel } from '../contract/web-card-model.ts'
+import { resultText, type ToolCallBlock } from '../contract/tool-call-model.ts'
 import css from './DetailsPanel.module.css'
 
 /** Full props composed by reference from the contract (automatic shares & injected share). */
@@ -68,7 +72,7 @@ function pretty(raw: string): string {
   }
 }
 
-export function DetailsPanel({ useSession, useSessions, sessionId, useStore, closeDetails }: DetailsPanelProps) {
+export function DetailsPanel({ useSession, useSessions, sessionId, useStore, closeDetails, t }: DetailsPanelProps) {
   const selection = useStore(s => s.selection)
   // Session workspace root: an omitted or relative terminal cwd resolves
   // against it, which the pure presenter cannot see.
@@ -84,10 +88,10 @@ export function DetailsPanel({ useSession, useSessions, sessionId, useStore, clo
     <div className={css.root}>
       <div className={css.header}>
         <div className={css.title}>
-          {selection === null ? '详情' : material?.name ?? selection.toolName ?? '详情'}
+          {selection === null ? t('details.title') : material?.name ?? selection.toolName ?? t('details.title')}
         </div>
         <button
-          type="button" className={css.close} aria-label="关闭详情"
+          type="button" className={css.close} aria-label={t('details.close')}
           onClick={() => { closeDetails() }}
         >
           <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden>
@@ -97,24 +101,24 @@ export function DetailsPanel({ useSession, useSessions, sessionId, useStore, clo
       </div>
       <div className={css.body}>
         {selection === null || callId === undefined
-          ? <div className={css.empty}>点击消息流中的工具行查看详情</div>
+          ? <div className={css.empty}>{t('details.empty')}</div>
           : material === null
-            ? <div className={css.empty}>该调用不在当前窗口内</div>
+            ? <div className={css.empty}>{t('details.notInWindow')}</div>
             : (
               <>
                 {material.argsRaw !== null && (
                   <section className={css.section}>
-                    <div className={css.sectionLabel}>Input</div>
-                    <CodeBlock code={pretty(material.argsRaw)} lang="json" />
+                    <div className={css.sectionLabel}>{t('details.input')}</div>
+                    <CodeBlock code={pretty(material.argsRaw)} lang="json" copyLabel={t('copy')} copiedLabel={t('copied')} />
                   </section>
                 )}
                 <section className={css.section}>
-                  <div className={css.sectionLabel}>Output</div>
+                  <div className={css.sectionLabel}>{t('details.output')}</div>
                   {/* Keyed by the selected call: the body owns per-call view
                       state (the terminal card's expand and copy), which React
                       would otherwise carry into the next selection because the
                       panel does not unmount between calls. */}
-                  <OutputBody key={callId} material={material} cwd={sessionCwd} />
+                  <OutputBody key={callId} material={material} cwd={sessionCwd} t={t} />
                 </section>
               </>
             )}
@@ -127,13 +131,22 @@ export function DetailsPanel({ useSession, useSessions, sessionId, useStore, clo
  * The Output section's body for the selected call. A terminal-card call — a
  * shell command's call/result views — renders through the shared TerminalBlock
  * at the primitive's own full height allowance, so column-aligned output keeps
- * its alignment and scrolls sideways instead of folding. Every other call, and
- * a running call with no terminal card yet, keeps the flattened text form.
+ * its alignment and scrolls sideways instead of folding. A read-card call
+ * renders through the shared ReadBlock at that same full height, so the whole
+ * returned window is line-numbered and highlighted. A diff-card call — a
+ * write/edit's applied change — renders through the shared DiffBlock at the same
+ * full height. A search-card call — a `grep`/`glob` result view — renders
+ * through the shared SearchBlock at the same full height allowance, with a
+ * capped search's recovery footer below it. A web-card call — a
+ * `web_search`/`web_fetch` result — renders through WebBlock at its own full
+ * source-list allowance. Every other call, and a running call with no card yet,
+ * keeps the flattened text form.
  * @param props.material - the selected call's material from {@link materialFor}.
  * @param props.cwd - the session workspace root, resolving the terminal view's cwd.
+ * @param props.t - the panel's locale seat, passed down as a plain prop.
  * @returns the Output section's body element.
  */
-function OutputBody({ material, cwd }: { material: CallMaterial; cwd: string | undefined }) {
+function OutputBody({ material, cwd, t }: { material: CallMaterial; cwd: string | undefined; t: DetailsPanelProps['t'] }) {
   const terminal = terminalCardModel(material.block, cwd)
   if (terminal !== null) {
     // The contract renders the presenter's description above the card, and the
@@ -143,30 +156,53 @@ function OutputBody({ material, cwd }: { material: CallMaterial; cwd: string | u
         {terminal.description !== undefined && (
           <div className={css.terminalDescription}>{terminal.description}</div>
         )}
-        <TerminalBlock {...terminal.card} className={css.terminal} />
+        <TerminalBlock {...terminal.card} labels={terminalBlockLabels(t)} className={css.cardBody} />
+      </>
+    )
+  }
+  const read = readCardModel(material.block, cwd)
+  // The panel takes the primitive's own default cap, not the row's tighter one:
+  // it is the single-call reading surface, so the whole window is available.
+  if (read !== null) return <ReadBlock {...read} className={css.read} />
+  const diff = diffCardModel(material.block)
+  if (diff !== null) return <DiffBlock {...diff.card} className={css.cardBody} />
+  const search = searchCardModel(material.block)
+  if (search !== null) {
+    return (
+      <>
+        <SearchBlock {...search.card} className={css.cardBody} />
+        {/* A capped search's recovery locator lives only in the result text;
+            show it below the card so the dropped rows stay reachable. */}
+        {search.recovery !== undefined && (
+          <div className={css.searchRecovery}>{search.recovery}</div>
+        )}
+      </>
+    )
+  }
+  const web = webCardModel(material.block)
+  // The card shows every source the tool returned (the same list the model saw),
+  // scrolling within its own capped height. Below the card the panel also renders
+  // the flattened result content — the model-visible text the card does not carry
+  // verbatim (a web_fetch card shows only the URL and status, so its fetched body
+  // lives only here; a search card's answer and sources are structured, so the
+  // flattened form repeats them as the raw text the model saw).
+  if (web !== null) {
+    const settled = 'kind' in material.block ? material.block : null
+    const body = settled === null ? '' : resultText(settled)
+    return (
+      <>
+        <WebBlock {...web} className={css.web} />
+        {body !== '' && <pre className={css.code}>{body}</pre>}
       </>
     )
   }
   // A settled call always carries the result node the flattened form needs;
   // the running shape has no result to flatten.
-  if (!('kind' in material.block)) return <div className={css.empty}>运行中…</div>
+  if (!('kind' in material.block)) return <div className={css.empty}>{t('details.running')}</div>
   const result = material.block
   return (
     <pre className={css.code} data-error={result.isError || undefined}>
-      {renderResult(result)}
+      {resultText(result)}
     </pre>
   )
 }
-
-/** Flatten result content blocks to display text (text blocks verbatim, others as JSON). */
-function renderResult(node: ToolResultNode): string {
-  const parts: string[] = []
-  for (const block of node.content) {
-    if (block.type === 'text') parts.push(block.text)
-    else parts.push(JSON.stringify(block, null, 2))
-  }
-  if (parts.length === 0 && node.error !== undefined) {
-    parts.push(`${node.error.name}: ${node.error.code}`)
-  }
-  return parts.join('\n')
-}

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

@@ -1,40 +0,0 @@
-/** Inert no-session input body; the resident Hero shell renders around it. */
-
-import clsx from 'clsx'
-import { IconPlusOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
-import css from './InputBar.module.css'
-
-/** Disabled visual twin of the session-bound InputBar. */
-export function DisabledInputBar() {
-  return (
-    <div className={clsx(css.root, css.hero)}>
-      <div className={css.card}>
-        <div className={css.grow}>
-          <textarea
-            className={css.input}
-            value=""
-            disabled
-            placeholder="Choose a workspace to start"
-            rows={2}
-            readOnly
-          />
-          <div aria-hidden className={css.mirror}>{'\n'}</div>
-        </div>
-        <div className={css.row}>
-          <div className={css.tools}>
-            <button type="button" className={css.add} aria-label="Add attachment" disabled>
-              <IconPlusOutline16 size={14} />
-            </button>
-          </div>
-          <div className={css.trailing}>
-            <button type="button" className={css.primary} aria-label="Send message" disabled>
-              <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
-                <path d="M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z" fill="currentColor" />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -10,8 +10,12 @@ import {
   FishLogo, IconChevronDownOutline14, IconFolderClose16, IconFolderOpen16,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import { workspaceTitleOf } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ConversationSlotProps } from '../contract/slots.ts'
 import css from './HeroShell.module.css'
 
+/** The owner's locale seat type, passed to hero chrome as a plain prop. */
+type HeroTranslate = ConversationSlotProps['t']
+
 /**
  * Basename label for the workspace chip (the shared derivation);
  * separator-only paths echo the raw cwd.
@@ -34,18 +38,19 @@ export function workspaceLabel(cwd: string): string {
  * @param props.onClick - menu toggle.
  * @returns the chip button element.
  */
-export function WorkspaceChip({ buttonRef, label, menuOpen = false, onClick }: {
+export function WorkspaceChip({ buttonRef, label, menuOpen = false, onClick, t }: {
   buttonRef?: RefObject<HTMLButtonElement>
   label?: string | undefined
   menuOpen?: boolean
   onClick?: () => void
+  t: HeroTranslate
 }) {
   return (
     <button
       ref={buttonRef}
       type="button"
       className={css.workspace}
-      aria-label="Choose workspace"
+      aria-label={t('hero.chooseWorkspace')}
       aria-haspopup="menu"
       aria-expanded={menuOpen}
       onClick={onClick}
@@ -53,7 +58,7 @@ export function WorkspaceChip({ buttonRef, label, menuOpen = false, onClick }: {
       {label === undefined
         ? <IconFolderClose16 className={css.folder} size={16} />
         : <IconFolderOpen16 className={css.folder} size={16} />}
-      <span className={css.workspaceLabel}>{label ?? 'Choose workspace'}</span>
+      <span className={css.workspaceLabel}>{label ?? t('hero.chooseWorkspace')}</span>
       <IconChevronDownOutline14 className={css.chevron} size={12} />
     </button>
   )
@@ -95,6 +100,8 @@ export function HeroGlow({ className }: { className?: string | undefined }) {
 
 /** Hero chrome props. The workspace row rides the InputBar accessory hole, not here. */
 export interface HeroShellProps {
+  /** The owner's locale seat, passed down as a plain prop. */
+  t: HeroTranslate
   /** Overlay content after the stack (modals). */
   children?: ReactNode
 }
@@ -105,19 +112,19 @@ export interface HeroShellProps {
  * @param props - see {@link HeroShellProps}.
  * @returns the centered hero element tree.
  */
-export function HeroShell({ children }: HeroShellProps) {
+export function HeroShell({ t, children }: HeroShellProps) {
   return (
     <div className={css.root}>
       <div className={css.stack}>
         <div className={css.headline}>
           {/* figma 34:10412: fish 34×25 leading the headline, gap 10. */}
           <FishLogo size={34} className={css.fish} />
-          Let&apos;s start building
+          {t('hero.headline')}
         </div>
         <div className={css.body}>
-          {/* The resident composer (rendered by ConversationRoot at its stable
-              tree position; the workspace row rides its accessory hole) is
-              CSS-positioned into this gap during the hero phase — see
+          {/* The resident composer (ConversationRoot wrapActiveBody seat; the
+              workspace row rides the stack above the card) is CSS-centered in
+              the session scroll body during hero — see
               ConversationRoot.module.css [data-phase='hero']. */}
         </div>
       </div>

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

@@ -11,7 +11,7 @@
   padding: 0 24px;
 }
 
-/* Cap matches InputBar card width (800). Glow may paint past the sides. */
+/* Cap matches the InputBar card. Glow may paint past the sides. */
 .stack {
   display: flex;
   flex-direction: column;
@@ -19,7 +19,7 @@
   /* figma 75:8208: 12 between title block / workspace / card. */
   gap: 12px;
   width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
   overflow: visible;
 }
 

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

@@ -11,29 +11,34 @@
 /* Floating capsule input (figma Input_Bottom 75:8208): card floats above the
    viewport bottom inside the centered message column; textarea on top, action
    row below, one primary circle button bottom-right. Input width rides the
-   column (800 is a cap, not a fixed size — layout rule: the box shrinks with
-   the center column keeping its padding). Hero variant = the same card
-   centered in the empty state; the transition between the two is a position
-   move of one component. */
+   column (--dsh-composer-card-max-width = chat content + 32px, 16px per side,
+   is a cap, not a fixed size — layout rule: the box shrinks with the center
+   column keeping its clearance). Hero variant = the same card centered in the
+   empty state; the transition between the two is a position move of one
+   component. */
 
 .root {
   display: flex;
   flex-direction: column;
   align-items: center;
-  /* figma Input_Bottom: pad L32/R32/B12; the bottom gradient mask is owned by
-     the chat scroller. Top 6 is the gap under the dock todo strip (12px todo
-     margin + 6px here); error/status strips still carry their own margin. */
-  padding: 6px 32px 12px;
+  /* Side pads ride the shared clearance (figma Input_Bottom drew L32/R32/B8;
+     the sides narrow with the shared width axis); the bottom gradient mask
+     is owned by the chat scroller. No top pad: the composer stack's gap owns
+     the space above; error/status strips still carry their own margin. */
+  padding: 0 var(--dsh-composer-side-clearance) 8px;
 }
 
 .hero {
-  padding: 0;
+  /* No bottom pad in the centered hero, but the side clearance must survive:
+     the hero wrapper is full-width on narrow viewports, so this padding is
+     the only thing keeping the card off the edges there. */
+  padding: 0 var(--dsh-composer-side-clearance);
 }
 
 .error,
 .status {
   width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
   margin-bottom: 6px;
   padding: 4px 8px;
   border-radius: 8px;
@@ -48,7 +53,7 @@
 
 .notice {
   width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
   margin-bottom: 6px;
   padding: 4px 8px;
   border-radius: 8px;
@@ -69,6 +74,7 @@
 }
 
 .card {
+  box-sizing: border-box;
   position: relative; /* overlay anchor positioning context */
   display: flex;
   flex-direction: column;
@@ -76,22 +82,22 @@
      top pad on the card before .InputText. */
   gap: 12px;
   width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
   padding-top: 10px;
   /* Input stroke: black/0.10 light, white/0.06 dark (figma darkmode note says
      the input border is one notch weaker than buttons) — exactly the
      l2-darkmode-thin pair. Fill: the input surface token (elevated in dark). */
   border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
-  border-radius: 20px;
+  border-radius: 22px;
   background: var(--dsw-specific-input-major);
   box-shadow: var(--dsw-shadow-lv2);
   font-size: 16px;
   line-height: 24px;
-  /* Elevated surface in dark, same as the menus: the textarea inside scrolls
-     once the composer hits its height 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 textarea that actually scrolls (see
-     ui-theme styles/scrollbar.css for the rebinding contract). */
+  /* Elevated surface in dark, same as the menus: the draft scrollport inside
+     scrolls once the composer hits its height 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 box 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);
 }
@@ -111,8 +117,21 @@
   height: 0;
 }
 
-/* Mirror-div auto-grow wrapper: the hidden mirror is in normal flow and sets the height
-   (min 2 lines / max 14 lines); the textarea rides it absolutely. Mirror and textarea
+/* The draft's scrollport, and the ONLY scrolling box in the composer: the
+   caret is the textarea's and every visible glyph is the backdrop's, so the two
+   layers stay together only by riding one offset the browser applies to both at
+   once. Scrolling one box and assigning the offset to the other cannot hold —
+   a wheel gesture is composited off the main thread, so the assignment lands
+   frames late and the words visibly trail the caret. The 14-line cap lives here
+   because this is the box the cap describes. */
+.scroll {
+  max-height: var(--dsh-composer-text-max-height);
+  overflow-y: auto;
+}
+
+/* Mirror-div auto-grow stack: the hidden mirror is in normal flow and sets the FULL draft
+   height (min 2 lines in hero); backdrop and textarea ride it absolutely, so both layers are
+   as tall as the draft and the scrollport above shows a window onto them. Mirror and textarea
    MUST share font, line-height, padding and wrapping rules or heights diverge. */
 .grow {
   position: relative;
@@ -125,20 +144,18 @@
   position: absolute;
   inset: 0;
   overflow: hidden;
-  color: transparent;
+  color: var(--dsw-alias-label-primary);
   pointer-events: none;
 }
 
 .hlToken {
-  border-radius: 4px;
-  /* GOAL 稿 amber token emphasis (state warn pair; glyphs stay the textarea's). */
-  background: var(--dsw-alias-state-warn-tertiary);
-  color: transparent;
+  background-color: transparent;
+  color: var(--dsw-alias-state-warn-label);
 }
 
 .hlSegment {
   border-radius: 4px;
-  background: var(--dsw-alias-interactive-bg-hover);
+  background-color: transparent;
   color: transparent;
 }
 
@@ -166,11 +183,15 @@
   width: 100%;
   height: 100%;
   resize: none;
-  overflow-y: auto;
+  /* Never a scroller of its own: it is as tall as the draft, so it has no
+     scrollable overflow to hold an offset that could differ from the glyphs'.
+     The browser still reveals the caret — the scroll-into-view walks up to
+     .scroll and moves both layers together. */
+  overflow: hidden;
   border: none;
   outline: none;
   background: transparent;
-  color: var(--dsw-alias-label-primary);
+  color: transparent;
   /* Business blue, not brand-primary: that token resolves to ink in this sheet. */
   caret-color: var(--dsw-alias-state-business-primary);
 }
@@ -190,10 +211,24 @@
      share the stack, so placeholder advances agree by construction. */
   font-family: 'DshChipCell', var(--dsw-font-family);
   font-size: inherit;
+  /* Three consumers, not two: the mirror sizes the stack, the layers must break
+     lines identically, and the caret reveal parses this value to step one line
+     down for a caret that sits after a newline. That parse needs a length, so a
+     theme resolving this to `normal` would make the reveal a silent no-op. */
   line-height: inherit;
   white-space: pre-wrap;
   word-break: break-word;
   overflow-wrap: anywhere;
+  /* These three MUST wrap at one width: the mirror decides the box height
+     the other two are laid out in, and a glyph layer that breaks lines
+     elsewhere than the textarea puts the words under the wrong caret. They do
+     so by construction now that all three sit INSIDE .scroll — a scrollbar
+     that consumes layout space narrows the scrollport, which is their shared
+     containing block, so it costs all three the same width on every engine.
+     Scrolling the textarea itself is what used to break this, and no property
+     fixed it: WebKit reserved gutter space for the overflow-y:auto textarea
+     and not for the overflow:hidden layers beside it, leaving them 8px apart
+     (768 against 776) — worth 2 to 5 wrapped lines on a long draft. */
 }
 
 /* figma 34:10434: #ADB2B8 light / #81858C dark — the caption pair exactly. */
@@ -211,10 +246,12 @@
 .mirror {
   visibility: hidden;
   pointer-events: none;
-  /* figma min-h 52 (= ~2 × 24 line + 4pt); 14-line cap (336px). */
+}
+
+/* Hero (centered empty-state) keeps the 2-line floor (figma min-h 52 = ~2 × 24
+   line + 4pt); the docked composer collapses to the content height. */
+.hero .mirror {
   min-height: 52px;
-  max-height: 336px;
-  overflow: hidden;
 }
 
 /* Toolbar: attach + Plan + Read-only on the left; model + send on the right
@@ -224,8 +261,16 @@
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding: 0 10px 10px 10px;
+  /* 2px moved from the bottom pad to the top: the whole control row sits 2px
+     lower in the card (it read too high against the textarea) while the card
+     height and the controls' own centering stay untouched. */
+  padding: 2px 8px 6px;
   min-width: 0;
+  /* Size container so the chips inside can collapse to icon-only when the
+     card runs out of row width (PermissionSelect @container rule). Anonymous
+     on purpose: CSS modules hash container-name per module, so a name declared
+     here can never match a query in another module's sheet. */
+  container-type: inline-size;
 }
 
 .tools,
@@ -236,13 +281,15 @@
   min-width: 0;
 }
 
-/* figma 75:8208: 16 between + and the mode chips; 4 between Plan / Read-only. */
+/* figma 75:8208 drew 16 between + and the mode chips and 4 between Plan /
+   Read-only; the chip gap widened to 12 so the pill chips read as separate
+   controls. */
 .tools {
   gap: 16px;
 }
 
 .modes {
-  gap: 4px;
+  gap: 12px;
 }
 
 .trailing {
@@ -322,6 +369,10 @@
   color: #fff;
   cursor: pointer;
   transition: background-color 100ms ease;
+  /* Opts out of the row's 2px downward shift (.row top pad): the send circle
+     keeps its original seat while the smaller chips sit lower. Transform, not
+     margin, so flex centering math is untouched. */
+  transform: translateY(-2px);
 }
 
 .primary:hover:not(:disabled) {
@@ -348,25 +399,13 @@
    draft's own glyphs — advance untouched, so the two layers cannot drift.
    Chip family colors; clone keeps rounded ends on soft-wrap fragments. */
 .textRef {
-  color: transparent;
   background-color: transparent;
+  color: var(--dsw-alias-state-business-primary);
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
-  position: relative;
 }
 .textRef:after {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-
-  width: 100%;
-  height: 100%;
-
-  border-radius: 6px;
-  background: rgba(97, 135, 216, 0.22);
-  transform: translate(-2px, -1px);
-  padding: 2px 4px;
+  display: none;
 }
 
 /* Reference chip: rendered in the backdrop at the placeholder offset. Hard

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

@@ -9,15 +9,22 @@
 import { useEffect, useRef } from 'react'
 import type { ChangeEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react'
 import clsx from 'clsx'
-import { IconPlusOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconPlusOutline16, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
 // Type-only: the `plan` projection key merge (the TodoDock posture — the
 // composer reads a host-computed value; the domain owns the key).
 import type {} from '@deepseek-ai/dsh-plan-mode/client'
+// Type-only: the `goal` projection key merge (hint disambiguation).
+import type {} from '@deepseek-ai/dsh-goal/client'
+import type { Translate } from '@deepseek-ai/dsh-client-ui-slots'
 import type { ComposerBarProps } from '../contract/slots.ts'
 import { deriveDecorations } from '../input/decorations.ts'
+import type { DraftDecorations } from '../input/decorations.ts'
 import { PermissionSelect } from './PermissionSelect.tsx'
 import css from './InputBar.module.css'
 
+/** Decoration product of the no-session state (no machine, empty draft). */
+const INERT_DECORATIONS: DraftDecorations = { token: null, chips: [], textRefs: [], hint: null }
+
 /** Prompt failure surface (derived from promptError). */
 export interface InputBarError {
   op: 'send' | 'stop'
@@ -27,27 +34,37 @@ export interface InputBarError {
 export type InputBarProps = ComposerBarProps
 
 export function InputBar({
-  useSession, useInput, inputActions, keyboard, stop, command, renderSlot, useNotices, useLexicon, useProjection,
-  variant, placeholder, accessory, overlay, leftItems, rightItems, onAdd, addLabel = 'Add attachment',
+  useSession, useInput, inputActions, keyboard, resolveSubmitMode, toggleCommandMenu, stop, command, t,
+  renderSlot, useNotices, useLexicon, useMenuLauncher,
+  useProjection, sessionId, variant, disabled: inert = false, placeholder, accessory, overlay, leftItems, rightItems, footer,
 }: InputBarProps) {
   const input = useInput(s => s)
   const notice = useNotices(s => s)
   const lexicon = useLexicon(s => s)
-  const promptError = useSession(s => s.promptError)
-  const running = useSession(s => s.running)
-  const disabled = useSession(s => s.removed)
+  const commandMenuOpen = useMenuLauncher(source => source === 'command')
+  const promptError = useSession(s => s.promptError) ?? null
+  const running = useSession(s => s.running) ?? false
+  const subagent = useSession(s => s.subagent) ?? null
+  const removed = useSession(s => s.removed) ?? false
   // Plan mode swaps the textarea placeholder (the projection is the folded
   // host value; owner-prop placeholders — hero, session-unavailable — win).
   const planActive = useProjection('plan', plan => plan !== undefined && (plan.pending ? !plan.active : plan.active))
+  // Absent (undefined: no frame yet) and cleared (null) both mean no goal.
+  const hasGoal = useProjection('goal', goal => goal != null)
   // Prompt failures are ordinary failures (no create/attach transaction
   // exists anymore): the strip renders promptError, the draft stays in the
   // machine, and the user resubmits.
   const error: InputBarError | null = promptError === null
     ? null
     : { op: promptError.op, message: `${promptError.error.message} (${promptError.error.code})` }
-  const draft = input.draft
+  // Session-maybe: the machine faces are absent together while no session is
+  // current; the bar renders the same DOM inert instead of a parallel tree.
+  const live = input !== undefined && keyboard !== undefined && inputActions !== undefined
+  const draft = input?.draft ?? ''
   const empty = draft.trim() === ''
   const inputRef = useRef<HTMLTextAreaElement | null>(null)
+  const scrollRef = useRef<HTMLDivElement | null>(null)
+  const mirrorRef = useRef<HTMLDivElement | null>(null)
   // IME guard: composition Enter picks a candidate, it must not send. The ref outlives renders;
   // clearing is deferred one tick because Safari delivers the closing keydown AFTER compositionend.
   const composingRef = useRef(false)
@@ -64,23 +81,132 @@ export function InputBar({
   // (undefined = capability absent → the chip renders nothing).
   const permissions = useProjection('permissions')
 
-  // Queue cut 1: running input stays free; locked = session disabled only.
-  // The transient machine locks (adjudicating pending / submitting) render
+  // Queue cut 1: running input stays free; locked = session removed, the
+  // inert no-workspace state, or the machine faces absent (no session). The
+  // transient machine locks (adjudicating pending / submitting) render
   // read-only — the draft stays visible and focused, keystrokes drop.
+  const disabled = removed || inert || !live
   const locked = disabled
-  const machineBusy = input.phase === 'adjudicating' || input.phase === 'submitting'
+  const machineBusy = input?.phase === 'adjudicating' || input?.phase === 'submitting'
 
-  // Unlock (mount / session switch) returns focus to the box.
+  // Scroll the draft scrollport the minimum that brings `caret` into view — the
+  // browser's own behavior for typing, performed for the paths where it does
+  // not act.
+  //
+  // The mirror is the caret's ruler: it renders the same draft at the same
+  // metrics and the same wrap width in the same stack (that is what makes it
+  // the height authority), so a Range collapsed at the caret's index reports
+  // where the caret is without a caret API.
+  const revealCaret = (caret: number): void => {
+    const scrollEl = scrollRef.current
+    const mirrorEl = mirrorRef.current
+    const text = mirrorEl?.firstChild
+    if (scrollEl === null || mirrorEl === null || !(text instanceof Text)) return
+    // A box that cannot scroll has nothing to reveal: the draft fits, so every
+    // caret is already in view and the assignment below would clamp to itself.
+    if (scrollEl.scrollHeight <= scrollEl.clientHeight) return
+    const at = Math.min(caret, text.data.length)
+    // A caret straight after a newline sits on a line with nothing on it to
+    // measure — the shape a trailing-newline draft ends in — and the engines
+    // disagree there: chromium returns NO client rects at all (an all-zero box,
+    // which would scroll the wrong way), firefox reports the line above, WebKit
+    // the right one. Measure the newline itself instead, which is the line the
+    // caret just left, and step one line down; that they all agree on.
+    const afterNewline = at > 0 && text.data[at - 1] === '\n'
+    const range = document.createRange()
+    range.setStart(text, afterNewline ? at - 1 : at)
+    if (afterNewline) range.setEnd(text, at)
+    else range.collapse(true)
+    const line = afterNewline ? Number.parseFloat(getComputedStyle(mirrorEl).lineHeight) : 0
+    const rect = range.getBoundingClientRect()
+    const box = scrollEl.getBoundingClientRect()
+    if (rect.bottom + line > box.bottom) scrollEl.scrollTop += rect.bottom + line - box.bottom
+    else if (rect.top + line < box.top) scrollEl.scrollTop -= box.top - rect.top - line
+  }
+
+  // Reveal the focus end of the current selection. Today's entry paths leave a
+  // collapsed selection, but honoring direction keeps a future range-preserving
+  // path from revealing its anchor instead of its focus.
+  const revealSelectionFocus = (el: HTMLTextAreaElement): void => {
+    // selectionStart/End are number|null in lib.dom; the type-aware lint program narrows them.
+    const caret = el.selectionDirection === 'backward' ? el.selectionStart : el.selectionEnd
+    // oxlint-disable-next-line typescript/no-unnecessary-condition
+    revealCaret(caret ?? el.value.length)
+  }
+
+  // Unlock (mount / session switch) returns focus to the box, and owns the
+  // reveal that comes with it. `preventScroll` because this focus is ours, not
+  // a gesture: the textarea is as tall as the draft, so the browser's reveal
+  // would walk up to the conversation scrollport and move the transcript under
+  // a user who only switched session. That leaves the caret to us — the DOM is
+  // reused across sessions, so switching to a longer draft keeps the previous
+  // offset while the value swap puts the caret at the new draft's end, which is
+  // off screen (measured on all three engines: offset 0 with the caret 940px
+  // down). Suppress the walk, then reveal in our own box.
   useEffect(() => {
-    if (!locked) inputRef.current?.focus()
-  }, [locked])
+    const el = inputRef.current
+    if (locked || el === null) return
+    el.focus({ preventScroll: true })
+    revealSelectionFocus(el)
+  }, [locked, sessionId])
+
+  // A persisted draft arrives AFTER the unlock effect: ConversationSession
+  // adopts it in its own mount effect, and a parent's mount effect runs after
+  // its children's. Reveal when the draft becomes non-empty so a restored long
+  // draft does not stay at its head with the caret at its end. This effect does
+  // not focus: send-clear, failed-send restore, and first-character transitions
+  // must not steal focus from another control the user moved to.
+  useEffect(() => {
+    const el = inputRef.current
+    if (locked || draft === '' || el === null) return
+    revealSelectionFocus(el)
+  }, [draft !== ''])
+
+  // Caret restore after an edit the composer performs itself. The machine owns
+  // the draft and the undo log, so paste and cut suppress the native edit and
+  // write the value through the machine — and a
+  // programmatic selection change reveals nothing: measured in chromium and
+  // WebKit, pasting a long block leaves the view where it was while the caret
+  // sits at the end of the draft. Native typing gets its reveal from the
+  // browser; these two have to ask for it, so they share one restore.
+  const restoreCaret = (el: HTMLTextAreaElement, caret: number): void => {
+    requestAnimationFrame(() => {
+      el.setSelectionRange(caret, caret)
+      revealCaret(caret)
+    })
+  }
+
+  // Wheel chaining on the draft scrollport, one lifetime (it is never
+  // unmounted — the inert state renders the same element disabled). While the
+  // capped box can still move in this direction, keep the native scroll; only
+  // at its own edge forward the delta to the active conversation scrollport, so
+  // a short draft never traps the gesture and a long draft stays scrollable.
+  // Hero mounts have no host and keep native wheel scrolling.
+  useEffect(() => {
+    const el = scrollRef.current
+    if (el === null) return
+    const onWheel = (e: WheelEvent): void => {
+      const host = el.closest('[data-conversation-scroll]')
+      if (!(host instanceof HTMLElement) || e.deltaY === 0) return
+      const atTop = el.scrollTop <= 0
+      const atEnd = el.scrollTop + el.clientHeight >= el.scrollHeight - 1
+      if ((e.deltaY < 0 && !atTop) || (e.deltaY > 0 && !atEnd)) return
+      e.preventDefault()
+      host.scrollTop += e.deltaY
+    }
+    el.addEventListener('wheel', onWheel, { passive: false })
+    return () => { el.removeEventListener('wheel', onWheel) }
+  }, [])
 
   const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
+    // Absent machine (no session): the textarea is disabled so events cannot
+    // fire; the guard narrows the faces for the paths below.
+    if (keyboard === undefined || inputActions === undefined) return
     // Shift+Enter is the native newline UNCONDITIONALLY — decided before the
     // IME guard so a composition-closing Shift+Enter still breaks the line.
     if (e.key === 'Enter' && e.shiftKey) return
     // keyCode 229 is the legacy IME-composition signal engines emit without isComposing.
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     const composing = composingRef.current || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229
     if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
       if (keyboard.arbitrate(e.key === 'ArrowUp' ? 'up' : 'down', composing) === 'consumed') e.preventDefault()
@@ -117,31 +243,23 @@ export function InputBar({
       e.preventDefault()
       return
     }
-    if (e.ctrlKey || e.metaKey) {
-      // Newline as a machine transaction (the machine owns undo history; an
-      // execCommand write would fork a second, browser-owned history).
-      e.preventDefault()
-      if (!machineBusy && !locked) {
-        const el = e.currentTarget
-        const sel = selectionOf(el)
-        keyboard.newline(sel)
-        const caret = sel.start + 1
-        requestAnimationFrame(() => { el.setSelectionRange(caret, caret) })
-      }
-      return
-    }
     e.preventDefault()
     if (e.repeat) return // held-down Enter must not machine-gun sends
     if (locked || machineBusy) return
-    inputActions.submit('queue')
+    keyboard.submit(resolveSubmitMode(
+      running,
+      e.ctrlKey || e.metaKey ? 'accelerated' : 'enter',
+      subagent === null,
+    ))
   }
 
   const onChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {
+    if (keyboard === undefined) return // absent machine: disabled textarea, no events
     if (machineBusy) return // submitting is the read-only span; adjudicating holds the pending lock
     const next = e.target.value
     keyboard.setDraft(next)
-    // selectionStart is number|null in lib.dom; the eslint program narrows it.
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    // selectionStart is number|null in lib.dom; the type-aware lint program narrows it.
+    // oxlint-disable-next-line typescript/no-unnecessary-condition
     keyboard.track(next, e.target.selectionStart ?? next.length)
   }
 
@@ -153,15 +271,16 @@ export function InputBar({
   // too (one char = one step). Mouse selection of a chip is handled in the
   // backdrop click handler below. Undo/redo must NOT reach the browser: the
   // machine owns the transaction log.
-  // selectionStart/End are number|null in lib.dom; the eslint program narrows them.
-  /* eslint-disable @typescript-eslint/no-unnecessary-condition */
+  // selectionStart/End are number|null in lib.dom; the type-aware lint program narrows them.
+  /* oxlint-disable typescript/no-unnecessary-condition */
   const selectionOf = (el: HTMLTextAreaElement) => ({
     start: el.selectionStart ?? 0,
     end: el.selectionEnd ?? el.selectionStart ?? 0,
   })
-  /* eslint-enable @typescript-eslint/no-unnecessary-condition */
+  /* oxlint-enable typescript/no-unnecessary-condition */
 
   const onCopyOrCut = (e: React.ClipboardEvent<HTMLTextAreaElement>, cut: boolean): void => {
+    if (input === undefined || keyboard === undefined) return // absent machine: disabled textarea, no events
     const el = e.currentTarget
     const { start, end } = selectionOf(el)
     if (start === end) return
@@ -180,12 +299,13 @@ export function InputBar({
     e.clipboardData.setData('text/plain', text)
     if (cut && !machineBusy && !locked) {
       keyboard.setDraft(draft.slice(0, start) + draft.slice(end), { start, end, insertedLength: 0 })
-      requestAnimationFrame(() => { el.setSelectionRange(start, start) })
+      restoreCaret(el, start)
     }
     void slice
   }
 
   const onPaste = (e: React.ClipboardEvent<HTMLTextAreaElement>): void => {
+    if (keyboard === undefined) return // absent machine: disabled textarea, no events
     if (machineBusy || locked) return
     const text = e.clipboardData.getData('text/plain')
     if (text === '') return
@@ -198,44 +318,56 @@ export function InputBar({
     // land (paste-upgrade). The DOM layer only starts the transaction.
     keyboard.pasteBegin(text, sel)
     const caret = sel.start + text.length
-    requestAnimationFrame(() => { el.setSelectionRange(caret, caret) })
+    restoreCaret(el, caret)
     keyboard.track(keyboard.snapshot.draft, caret)
   }
 
   const onSelect = (e: React.SyntheticEvent<HTMLTextAreaElement>): void => {
     // Any caret/selection gesture ends a live paste attempt (the machine
     // cannot observe DOM selection). Cheap no-op when none is live.
-    if (keyboard.snapshot.paste !== undefined) keyboard.invalidatePaste()
+    if (keyboard !== undefined && keyboard.snapshot.paste !== undefined) keyboard.invalidatePaste()
     void e
   }
 
-  // Button presses steal focus from the textarea; suppress at mousedown so typing continues seamlessly.
+  // Button presses steal focus from the textarea; suppress at mousedown so
+  // typing continues seamlessly. `preventScroll` for the same reason as the
+  // unlock effect, and with no reveal of its own: the caret has not moved, and
+  // the next keystroke gets the browser's native one.
   const keepFocus = (e: MouseEvent<HTMLButtonElement>): void => {
     e.preventDefault()
-    inputRef.current?.focus()
+    inputRef.current?.focus({ preventScroll: true })
   }
 
-  const primaryLabel = running ? 'Stop generating' : 'Send message'
+  const onToggleCommandMenu = (): void => {
+    const el = inputRef.current
+    if (el !== null) toggleCommandMenu?.(selectionOf(el))
+  }
+
+  const ordinary = subagent === null
+  const stopping = running && ordinary
+  const primaryLabel = stopping ? t('input.stop') : t('input.send')
   const onPrimary = (): void => {
-    if (running) {
-      stop()
+    if (stopping) {
+      stop?.()
       return
     }
+    if (inputActions === undefined) return // absent machine: the button is disabled
     /* v8 ignore next -- defensive: the primary button is disabled while empty||disabled, so a click cannot reach the false arm. */
-    if (!empty && !disabled && !machineBusy) inputActions.submit('queue')
+    if (!empty && !disabled && !machineBusy) inputActions.submit()
   }
 
   // The Access seat: the projection-fed permission chip (renders nothing
-  // while the permissions key is absent — permission-less host or Draft).
-  const accessSelect: ReactNode = (
-    <PermissionSelect value={permissions} locked={locked} command={command} />
-  )
+  // while the permissions key is absent — permission-less host or Draft —
+  // or while the command face is absent with the session).
+  const accessSelect: ReactNode = command === undefined
+    ? null
+    : <PermissionSelect key={sessionId} value={permissions} locked={locked} command={command} t={t} />
 
   // Mirror-layer decorations: a visible backdrop with transparent text. The
   // claim token highlights through behind the textarea glyphs; each U+FFFC
   // placeholder renders as a chip (the textarea's own glyph is invisible, the
   // backdrop chip supplies the visual); the claim hint is ghost text.
-  const deco = deriveDecorations(input, lexicon)
+  const deco = input === undefined ? INERT_DECORATIONS : deriveDecorations(input, lexicon)
   const backdrop: ReactNode[] = []
   {
     // Segment boundaries: the token range end, every chip offset, and every
@@ -296,7 +428,14 @@ export function InputBar({
     }
     pushPlain(draft.length)
     if (deco.hint !== null) {
-      backdrop.push(<span key="hint" className={css.hint} data-decoration="hint">{deco.hint}</span>)
+      // Claim tokens are shaped `/name ` (trailing space); trim to the bare name.
+      const commandName = input?.claim?.token.slice(1).trim() ?? ''
+      const hintKey = `hint.${commandName === 'goal' && hasGoal ? 'goal.active' : commandName}`
+      // Dynamic lookup by claimed command name: unknown commands miss the
+      // dictionary and keep the machine's own hint, so the call is wide.
+      const translated = (t as Translate)(hintKey)
+      const displayHint = translated !== hintKey ? translated : deco.hint
+      backdrop.push(<span key="hint" className={css.hint} data-decoration="hint">{displayHint}</span>)
     }
   }
 
@@ -312,49 +451,58 @@ export function InputBar({
           {notice.text}
         </div>
       )}
-      <div className={css.card}>
+      <div className={css.card} data-composer-card>
         {overlay !== undefined && <div className={css.overlayAnchor}>{overlay}</div>}
         {accessory !== undefined && <div className={css.accessory}>{accessory}</div>}
-        {/* Mirror-div auto-grow: the hidden mirror renders draft+'\n' and stretches the wrapper
-            (min/max capped in CSS); the absolutely-positioned textarea rides its height. Counting
-            rows by '\n' cannot see soft wraps. */}
-        <div className={css.grow}>
-          <div aria-hidden className={css.backdrop} data-input-backdrop>{backdrop}</div>
-          <textarea
-            ref={inputRef}
-            className={css.input}
-            value={draft}
-            disabled={locked}
-            readOnly={machineBusy}
-            data-phase={input.phase}
-            placeholder={placeholder ?? (disabled
-              ? 'Session unavailable'
-              : planActive ? 'describe your task to generate plan' : 'Message the agent')}
-            rows={2}
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            onSelect={onSelect}
-            onCopy={(e) => { onCopyOrCut(e, false) }}
-            onCut={(e) => { onCopyOrCut(e, true) }}
-            onPaste={onPaste}
-            onCompositionStart={onCompositionStart}
-            onCompositionEnd={onCompositionEnd}
-          />
-          <div aria-hidden className={css.mirror}>{`${draft}\n`}</div>
+        {/* One scrollport, two text layers. The hidden mirror renders draft+'\n' and stretches the
+            stack to the draft's FULL height (counting rows by '\n' cannot see soft wraps); the
+            absolutely-positioned backdrop and textarea ride that height, and .scroll — capped at 14
+            lines in CSS — is the only thing that scrolls. The caret belongs to the textarea and the
+            glyphs to the backdrop, so they can only stay together by moving together: one scroll
+            offset the browser applies to both layers at once, never a JS mirror between two boxes,
+            which a compositor-driven gesture outruns and leaves the words trailing the caret. */}
+        <div ref={scrollRef} className={css.scroll} data-input-scroll>
+          <div className={css.grow}>
+            <div aria-hidden className={css.backdrop} data-input-backdrop>{backdrop}</div>
+            <textarea
+              ref={inputRef}
+              className={css.input}
+              value={draft}
+              disabled={locked}
+              readOnly={machineBusy}
+              data-phase={input?.phase ?? 'inert'}
+              placeholder={placeholder ?? (disabled
+                ? t('placeholder.unavailable')
+                : planActive ? t('placeholder.plan') : t('placeholder.default'))}
+              rows={2}
+              onChange={onChange}
+              onKeyDown={onKeyDown}
+              onSelect={onSelect}
+              onCopy={(e) => { onCopyOrCut(e, false) }}
+              onCut={(e) => { onCopyOrCut(e, true) }}
+              onPaste={onPaste}
+              onCompositionStart={onCompositionStart}
+              onCompositionEnd={onCompositionEnd}
+            />
+            <div ref={mirrorRef} aria-hidden className={css.mirror} data-input-mirror>{`${draft}\n`}</div>
+          </div>
         </div>
         <div className={css.row}>
           <div className={css.tools}>
-            <button
-              type="button"
-              className={css.add}
-              aria-label={addLabel}
-              title={addLabel}
-              disabled={locked}
-              onMouseDown={keepFocus}
-              onClick={onAdd}
-            >
-              <IconPlusOutline16 size={14} />
-            </button>
+            <Tooltip label={t('input.commands')} side="top" delayMs={500}>
+              <button
+                type="button"
+                className={css.add}
+                aria-label={t('input.commands')}
+                aria-haspopup="listbox"
+                aria-expanded={commandMenuOpen}
+                disabled={locked || toggleCommandMenu === undefined}
+                onMouseDown={keepFocus}
+                onClick={onToggleCommandMenu}
+              >
+                <IconPlusOutline16 size={14} />
+              </button>
+            </Tooltip>
             <div className={css.modes}>
               {accessSelect}
               {renderSlot('conversation.input.plan', { locked })}
@@ -365,28 +513,30 @@ export function InputBar({
             {rightItems}
             {renderSlot('conversation.input.model', { locked })}
             {/* {machineBusy && <span className={css.pending} data-input-pending aria-label="处理中" />} */}
-            <button
-              type="button"
-              className={css.primary}
-              aria-label={primaryLabel}
-              title={primaryLabel}
-              disabled={!running && (empty || disabled || machineBusy)}
-              onMouseDown={keepFocus}
-              onClick={onPrimary}
-            >
-              {running ? (
-                <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
-                  <rect x="3" y="3" width="10" height="10" rx="3" fill="currentColor" />
-                </svg>
-              ) : (
-                <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
-                  <path d="M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z" fill="currentColor" />
-                </svg>
-              )}
-            </button>
+            <Tooltip label={primaryLabel} side="top" delayMs={500}>
+              <button
+                type="button"
+                className={css.primary}
+                aria-label={primaryLabel}
+                disabled={stopping ? stop === undefined : empty || disabled || machineBusy}
+                onMouseDown={keepFocus}
+                onClick={onPrimary}
+              >
+                {stopping ? (
+                  <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
+                    <rect x="3" y="3" width="10" height="10" rx="3" fill="currentColor" />
+                  </svg>
+                ) : (
+                  <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
+                    <path d="M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z" fill="currentColor" />
+                  </svg>
+                )}
+              </button>
+            </Tooltip>
           </div>
         </div>
       </div>
+      {footer}
     </div>
   )
 }

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

@@ -1,49 +1,73 @@
-/* Composer bottom-row permission chip (draft start.jpeg `Read-only ∨`): a
-   quiet text chip with a chevron; hover paints the standard interactive pill.
-   The native select is stretched invisibly over the chip so the platform
-   dropdown does the menu work — keyboard/AT semantics come free. */
-
-.root {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.chip {
+.trigger {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 6px 8px;
-  border-radius: 8px;
-  color: var(--dsw-alias-label-secondary);
-  font-size: 14px;
-  line-height: 20px;
-  pointer-events: none; /* the overlaid select owns the interaction */
-}
-
-.root:hover .chip {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.chevron {
-  color: var(--dsw-alias-label-caption);
-}
-
-/* Invisible native select stretched over the chip: real menu, zero drawing. */
-.select {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
+  min-width: 0;
+  max-width: 220px;
+  height: 28px;
+  padding: 0 4px 0 8px;
   border: none;
+  /* Rounded chip chrome, matching the sibling model trigger. */
+  border-radius: 24px;
+  outline: none;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
   cursor: pointer;
 }
 
-.select:disabled {
+.trigger:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.trigger:focus-visible {
+  box-shadow: 0 0 0 2px var(--dsw-alias-border-l3);
+}
+
+.trigger:disabled {
+  color: var(--dsw-alias-label-dimmed);
   cursor: default;
 }
 
-.root:has(.select:disabled) .chip {
-  opacity: 0.5;
+.triggerIcon {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+/* The shared 16px glyphs render one step smaller on the exposed trigger;
+   the dropdown rows keep the full 16px. */
+.triggerIcon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.triggerLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  flex: 0 0 auto;
+  color: var(--dsw-alias-label-caption);
+  transition: transform 120ms ease;
+}
+
+/* Narrow composer: the trigger collapses to icon + chevron so the row keeps
+   fitting. Only triggers that actually carry a mode glyph drop their label —
+   a host-configured mode without one keeps its text as the sole identifier.
+   The 460px cut is the point where the row (attach + modes + model + send)
+   starts squeezing labels; the container is the composer row (InputBar .row —
+   anonymous query because CSS modules hash container-names per module). */
+@container (max-width: 460px) {
+  .trigger:has(.triggerIcon) .triggerLabel {
+    display: none;
+  }
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
 }

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

@@ -1,80 +1,172 @@
-// PermissionSelect: the composer bottom-row permission chip (draft
-// start.jpeg's `Read-only ∨` control), the Access seat's wired occupant.
-// Options and the current value read from the host-computed `permissions`
-// projection (baseline block + push frames — no fetch, no mount timing);
-// key absence (a permission-less composition, or a Draft with no host
-// session yet) renders nothing. The visible chip is presentation only — an
-// invisible native select stretched over it owns the menu and interaction.
-// A switch submits the `/permission <preset>` command line (the one write
-// path); the control shows the picked value optimistically and disables
-// until the admission result, then re-follows the projection — the pushed
-// frame confirms the switch, and a failed/unmatched submit falls back to
-// the still-authoritative projection value (`custom` is shown as the
-// current value but never offered as a target — the host omits it from
-// switchable options).
-
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import type { ReactNode } from 'react'
+import clsx from 'clsx'
 import type { PermissionSelect as PermissionSelectValue } from '@deepseek-ai/dsh-permission/client'
+import { IconChevronDownOutline14, Menu, RiskConfirmation } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { MenuEntry } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ComposerBarProps } from '../contract/slots.ts'
 import css from './PermissionSelect.module.css'
 
+const FULL_ACCESS = 'danger-full-access'
+
+/* Shield glyphs (design set 1556): check = read-only, pencil = workspace
+   write, exclamation = full access. currentColor so the trigger and menu
+   rows tint them with their own text color. */
+
+const shieldOutline = 'M8.20554 0.899994L14.7901 3.36857V7.01026C14.7901 12 11.0466 14.2103 8.20554 15.3C5.36446 14.2103 1.62012 12 1.62012 7.01026V3.36857L8.20554 0.899994Z'
+
+const permissionGlyphs = {
+  'read-only': (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d={shieldOutline} stroke="currentColor" strokeWidth="1.31831" strokeLinejoin="round" />
+      <path d="M12.1654 5.7552L8.9447 9.41475C8.73044 9.65816 8.53628 9.8804 8.35774 10.0423C8.1713 10.2114 7.94235 10.3717 7.64016 10.4254C7.48207 10.4535 7.32 10.4552 7.16151 10.4294C6.85843 10.3801 6.62728 10.2223 6.43836 10.0559C6.25752 9.89653 6.06037 9.67732 5.84264 9.43705L4.72925 8.20897L5.63557 7.38707L6.74897 8.61594C6.98603 8.87755 7.12974 9.03533 7.24673 9.13839C7.31033 9.19443 7.34485 9.21476 7.35823 9.22122C7.38068 9.22484 7.40352 9.22515 7.42593 9.22122C7.40522 9.22502 7.42893 9.23294 7.53583 9.136C7.65132 9.03126 7.79316 8.87139 8.02643 8.60638L11.2479 4.94763L12.1654 5.7552Z" fill="currentColor" />
+    </svg>
+  ),
+  'workspace-write': (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d="M8.08887 0.251709C8.20479 0.23085 8.32486 0.241168 8.43652 0.282959L15.0215 2.75171C15.2787 2.84819 15.4492 3.09414 15.4492 3.3689V7.0105C15.4492 7.10986 15.4441 7.2081 15.4414 7.30542C15.0285 7.07175 14.5905 6.87695 14.1309 6.73022V3.82495L8.20508 1.60327L2.2793 3.82495V7.0105C2.27936 9.7171 3.4745 11.5379 5.02734 12.7947C5.01025 12.9942 5 13.1962 5 13.4001C5.00001 13.7617 5.02722 14.1169 5.08008 14.4636C2.91555 13.0393 0.961014 10.752 0.960938 7.0105V3.3689C0.960938 3.09417 1.13146 2.84821 1.38867 2.75171L7.97461 0.282959L8.08887 0.251709Z" fill="currentColor" />
+      <path d="M11.3525 5.64688V6.85688H5V5.64688H11.3525Z" fill="currentColor" />
+      <path d="M9.5824 8.29376V9.50376H5V8.29376H9.5824Z" fill="currentColor" />
+      <path d="M14.6647 15.6852H10.0338C10.3878 15.3751 10.7567 15.0517 11.0772 14.7706C11.2531 14.6164 11.4144 14.4746 11.5511 14.3547H14.6647V15.6852Z" fill="currentColor" />
+      <path d="M8.14852 14.1308L7.33925 15.4976C7.22458 15.6912 7.42245 15.9194 7.63037 15.8333L9.09785 15.2254L15.0399 10.0719L14.0905 8.97733L8.14852 14.1308Z" fill="currentColor" />
+    </svg>
+  ),
+  [FULL_ACCESS]: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d={shieldOutline} stroke="currentColor" strokeWidth="1.31831" strokeLinejoin="round" />
+      <path d="M9.10094 4.5V8.75939H7.59888V4.5H9.10094Z" fill="currentColor" />
+      <path d="M9.10094 9.8114V11.5H7.59888V9.8114H9.10094Z" fill="currentColor" />
+    </svg>
+  ),
+} as Record<string, ReactNode>
+
+/** Glyph for a permission option value; host-configured names outside the design set get none. */
+function permissionGlyph(value: string): ReactNode | undefined {
+  return permissionGlyphs[value]
+}
+
 /**
  * Display transform: kebab-case machine names render as title-case labels
- * (`workspace-write` → `Workspace Write`). Presentation-only — the wire
- * vocabulary and the host's advertised names are untouched; a host-configured
- * name that is not kebab-case (contains spaces or uppercase) passes through.
+ * (`workspace-write` → `Workspace Write`); non-kebab host-configured names
+ * pass through. Full access intentionally overrides the machine-name
+ * transform so both permission surfaces use the product label `Full access`;
+ * the warning body remains locale-aware.
  */
 function displayName(name: string): string {
   if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(name)) return name
   return name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
 }
 
-export interface PermissionSelectProps {
-  /** The host-computed select, or undefined while the capability is absent. */
-  value: PermissionSelectValue | undefined
-  /** Session-removed lock (the bar's chrome disable state). */
-  locked: boolean
-  /** Submit one slash-command line; resolves admission (false = rejected/unmatched). */
-  command: (line: string) => Promise<boolean>
+function optionLabel(option: PermissionSelectValue['options'][number]): string {
+  return option.value === FULL_ACCESS ? 'Full access' : displayName(option.name)
 }
 
-export function PermissionSelect({ value, locked, command }: PermissionSelectProps) {
-  // Optimistic pick, shown while the admission round-trip runs; null follows
-  // the projection (the pushed frame lands the confirmed value there).
+export interface PermissionSelectProps {
+  value: PermissionSelectValue | undefined
+  locked: boolean
+  command: (line: string) => Promise<boolean>
+  /** The owning bar's locale seat, passed down as a plain prop. */
+  t: ComposerBarProps['t']
+}
+
+export function PermissionSelect({ value, locked, command, t }: PermissionSelectProps) {
   const [pick, setPick] = useState<string | null>(null)
+  const [open, setOpen] = useState(false)
+  const [confirmation, setConfirmation] = useState<string | null>(null)
+  const [acknowledged, setAcknowledged] = useState(false)
+
+  useEffect(() => {
+    if (!locked && value !== undefined) return
+    setOpen(false)
+    setAcknowledged(false)
+    setConfirmation(null)
+  }, [locked, value])
+
   if (value === undefined) return null
 
   const currentValue = pick ?? value.currentValue
   const current = value.options.find(option => option.value === currentValue)
+  const busy = pick !== null || confirmation !== null
 
-  const onChange = (next: string): void => {
-    if (next === value.currentValue) return
-    setPick(next)
-    void command(`/permission ${next}`)
+  const items: MenuEntry[] = value.options
+    .filter(o => o.value !== 'custom')
+    .map((option) => {
+      const icon = permissionGlyph(option.value)
+      return { id: option.value, label: optionLabel(option), ...icon === undefined ? {} : { icon } }
+    })
+
+  const submit = (id: string): void => {
+    setPick(id)
+    void command(`/permission ${id}`)
       .catch(() => false)
       .then(() => { setPick(null) })
   }
 
+  const choose = (id: string): void => {
+    setOpen(false)
+    if (id === value.currentValue) return
+    if (id === FULL_ACCESS) {
+      setAcknowledged(false)
+      setConfirmation(id)
+      return
+    }
+    submit(id)
+  }
+
+  const closeConfirmation = (): void => {
+    setAcknowledged(false)
+    setConfirmation(null)
+  }
+
+  const confirmFullAccess = (): void => {
+    if (locked || !acknowledged || confirmation === null) return
+    const id = confirmation
+    closeConfirmation()
+    submit(id)
+  }
+
   return (
-    <label className={css.root} title={current?.description}>
-      <span className={css.chip}>
-        {displayName(current?.name ?? currentValue)}
-        <svg className={css.chevron} viewBox="0 0 12 12" width="12" height="12" aria-hidden>
-          <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
-        </svg>
-      </span>
-      <select
-        className={css.select}
-        aria-label="Access mode"
-        value={currentValue}
-        disabled={locked || pick !== null}
-        onChange={(e) => { onChange(e.target.value) }}
-      >
-        {value.options.map(option => (
-          <option key={option.value} value={option.value} disabled={option.value === 'custom'}>
-            {displayName(option.name)}
-          </option>
-        ))}
-      </select>
-    </label>
+    <>
+      <Menu
+        open={open}
+        items={items}
+        selectedId={currentValue}
+        onSelect={choose}
+        onClose={() => { setOpen(false) }}
+        side="top"
+        anchor={
+          <button
+            type="button"
+            className={css.trigger}
+            aria-label={t('input.accessMode', { name: current === undefined ? displayName(currentValue) : optionLabel(current) })}
+            title={current?.description}
+            disabled={locked || busy}
+            onClick={() => { setOpen(!open) }}
+          >
+            {permissionGlyph(currentValue) !== undefined && (
+              <span className={css.triggerIcon} aria-hidden>{permissionGlyph(currentValue)}</span>
+            )}
+            <span className={css.triggerLabel}>{current === undefined ? displayName(currentValue) : optionLabel(current)}</span>
+            {/* Same glyph + open rotation as the sibling ModelSelect trigger. */}
+            <span className={clsx(css.chevron, open && css.chevronOpen)} aria-hidden>
+              <IconChevronDownOutline14 />
+            </span>
+          </button>
+        }
+      />
+      <RiskConfirmation
+        open={confirmation !== null}
+        title={t('access.confirm.title')}
+        description={t('access.confirm.description')}
+        acknowledgeLabel={t('access.confirm.acknowledge')}
+        cancelLabel={t('access.confirm.cancel')}
+        confirmLabel={t('access.confirm.enable')}
+        acknowledged={acknowledged}
+        disabled={locked}
+        onAcknowledgedChange={setAcknowledged}
+        onCancel={closeConfirmation}
+        onConfirm={confirmFullAccess}
+      />
+    </>
   )
 }

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

@@ -1,15 +1,31 @@
-/* Todo strip above the composer (figma 772:51905 / 772:52972 / 772:53419):
-   tip surface, 14px radius, status icons + secondary item labels. Column is
-   calc(100% - 88px) / max 776, centered; InputBar top pad supplies the gap. */
+/* Todo strip in the composer context stack (Figma 1236:32276): tip surface,
+   status icons + secondary item labels. Its visible card aligns with the
+   GoalBar and the Queue panel inside their shared dock column: 12px radius,
+   36px collapsed row, 12px side padding, 14px tertiary leading glyph. */
 
 .root {
+  box-sizing: border-box;
   flex: none;
   overflow: hidden;
   margin: 0 auto;
-  width: calc(100% - 88px);
-  max-width: 776px;
+  width: calc(
+    100% -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  max-width: calc(
+    var(--dsh-composer-card-max-width) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
   border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 14px;
+  border-radius: 12px;
   background: var(--dsw-specific-tip);
   /* Elevated surface: `--dsw-specific-tip` is the same dark rung as the menu
      surface, and `.list` scrolls inside this card, so the thumb takes the l2
@@ -23,8 +39,8 @@
 .body {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 10px 16px;
+  gap: 8px;
+  padding: 6px 12px;
 }
 
 .header {
@@ -39,9 +55,16 @@
   cursor: pointer;
 }
 
+.lead {
+  display: grid;
+  flex: none;
+  place-items: center;
+  color: var(--dsw-alias-label-tertiary);
+}
+
 .title {
   flex: none;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 24px;
   font-weight: 500;
   color: var(--dsw-alias-label-primary);

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

@@ -7,18 +7,21 @@
 
 import { useId, useState } from 'react'
 import type { Context } from 'cordis'
-import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 // The domain's client-namespace pure-type outlet: one import edge delivers
 // the `todos` projection-key merge (single source, no consumer-side restated
 // declare) and the payload type. Type-only by construction — the outlet is
 // free of host value imports, so no host Context merge enters this program.
 import type { TodoItem } from '@deepseek-ai/dsh-tool-todo/client'
-import { IconChevronDownOutline14, IconChevronUpOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconChecklistOutline14, IconChevronDownOutline14, IconChevronUpOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { NS } from '../locales.ts'
 import css from './TodoPanel.module.css'
 
 export interface TodoPanelProps {
   /** The session's current plan (empty renders nothing) — selected by the dock adapter. */
   todos: readonly TodoItem[]
+  /** The dock entry's locale seat, passed down as a plain prop. */
+  t: TodoDockProps['t']
 }
 
 /** Local exhaustiveness helper — client packages do not depend on `dsh-llm`. */
@@ -75,19 +78,26 @@ function StatusGlyph({ status }: { status: TodoItem['status'] }) {
   }
 }
 
-/** Header summary: "<done>/<total> tasks · <n> in progress". */
-function progressLabel(todos: readonly TodoItem[]): string {
-  const done = todos.filter(t => t.status === 'completed').length
-  const active = todos.filter(t => t.status === 'in_progress').length
-  return `${done}/${todos.length} tasks · ${active} in progress`
+/** Header summary: "·"-joined per-status counts; zero-count segments are omitted as noise (a non-empty list keeps at least one). */
+function progressLabel(todos: readonly TodoItem[], t: TodoPanelProps['t']): string {
+  const done = todos.filter(item => item.status === 'completed').length
+  const active = todos.filter(item => item.status === 'in_progress').length
+  const pending = todos.length - done - active
+  // En spaces (U+2002): HTML collapses runs of ASCII spaces, so widening the
+  // separator breathing room needs a literal wide space.
+  return [
+    ...done > 0 ? [t('todo.progress.done', { done })] : [],
+    ...active > 0 ? [t('todo.progress.active', { active })] : [],
+    ...pending > 0 ? [t('todo.progress.pending', { pending })] : [],
+  ].join('\u2002·\u2002')
 }
 
-export function TodoPanel({ todos }: TodoPanelProps) {
-  const [collapsed, setCollapsed] = useState(false)
+export function TodoPanel({ todos, t }: TodoPanelProps) {
+  const [collapsed, setCollapsed] = useState(true)
   if (todos.length === 0) return null
 
   return (
-    <section className={css.root} data-testid="todo-panel" aria-label="To-dos">
+    <section className={css.root} data-testid="todo-panel" aria-label={t('todo.title')}>
       <div className={css.body}>
         <button
           type="button"
@@ -95,8 +105,9 @@ export function TodoPanel({ todos }: TodoPanelProps) {
           aria-expanded={!collapsed}
           onClick={() => { setCollapsed(v => !v) }}
         >
-          <span className={css.title}>To-dos</span>
-          <span className={css.progress}>{progressLabel(todos)}</span>
+          <span className={css.lead} aria-hidden><IconChecklistOutline14 /></span>
+          <span className={css.title}>{t('todo.title')}</span>
+          <span className={css.progress}>{progressLabel(todos, t)}</span>
           <span className={css.chevron} aria-hidden>
             {collapsed ? <IconChevronUpOutline14 /> : <IconChevronDownOutline14 />}
           </span>
@@ -116,13 +127,13 @@ export function TodoPanel({ todos }: TodoPanelProps) {
   )
 }
 
-/** Full props of a dock entry: InputZone owner share + session standard kit + global seat. */
-export type TodoDockProps = PropsRuntime<'conversation.input.dock'>
+/** Full props of a dock entry: InputZone owner share + session standard kit + global seat + the locale seat. */
+export type TodoDockProps = PropsRuntime<'conversation.input.dock'> & PropsLocale<'conversation'>
 
 /** Dock adapter: reads the host-computed 'todos' projection (whole list; absent or null renders nothing). */
-export function TodoDock({ useProjection }: TodoDockProps) {
+export function TodoDock({ useProjection, t }: TodoDockProps) {
   const todos = useProjection('todos')
-  return <TodoPanel todos={todos ?? []} />
+  return <TodoPanel todos={todos ?? []} t={t} />
 }
 
 /**
@@ -135,10 +146,10 @@ export const todoDockEntry = {
   name: 'conversation-todo-dock',
   inject: ['slots', 'conversation'],
   /**
-   * Register the plan strip into the input dock (list entry, above the queue rows).
+   * Register the plan strip before the goal and queue entries (order 0).
    * @param ctx - registrant context (disposal rides ctx.effect inside slots.register).
    */
   apply(ctx: Context): void {
-    ctx.slots.register({ name: 'conversation.input.dock', id: 'todo', order: -1 }, TodoDock)
+    ctx.slots.register({ name: 'conversation.input.dock', id: 'todo', order: 0, locale: NS }, TodoDock)
   },
 }

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

@@ -3,7 +3,7 @@
  * The plugin creates its handle at apply time so identity follows the fiber.
  */
 import { defineStore, type EngineStoreHandle } from '@deepseek-ai/dsh-client-runtime/client'
-import type { ChatStoreState, SelectionTarget } from './contract/views.ts'
+import type { CallId, ChatStoreState, SelectionTarget } from './contract/views.ts'
 
 /** Declared action shape used to give the exported factory a stable return type. */
 type ChatActions = {
@@ -12,6 +12,7 @@ type ChatActions = {
   clearDraft: (draft: ChatStoreState) => void
   restoreDraft: (draft: ChatStoreState, text: string) => void
   setView: (draft: ChatStoreState, view: string) => void
+  setInspect: (draft: ChatStoreState, target: { callId: CallId } | null) => void
 }
 
 /**
@@ -20,7 +21,7 @@ type ChatActions = {
  */
 export function createChatStore(): EngineStoreHandle<ChatStoreState, ChatActions> {
   return defineStore({
-    init: (): ChatStoreState => ({ selection: null, draft: '', view: null }),
+    init: (): ChatStoreState => ({ selection: null, draft: '', view: null, inspect: null }),
     persist: 'dsh.conversation.chat',
     actions: {
       select: (d, target: SelectionTarget | null) => { d.selection = target },
@@ -30,6 +31,7 @@ export function createChatStore(): EngineStoreHandle<ChatStoreState, ChatActions
       // since the clear (send choreography lives in the inject factory).
       restoreDraft: (d, text: string) => { if (d.draft === '') d.draft = text },
       setView: (d, view: string) => { d.view = view },
+      setInspect: (d, target: { callId: CallId } | null) => { d.inspect = target },
     },
   })
 }

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

@@ -0,0 +1,101 @@
+// 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, whole-row expand) 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 { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
+import type { ToolRowProps } from '../contract/slots.ts'
+import { toolRowModel } from '../contract/tool-call-model.ts'
+import { ToolRow } from '../chat/ToolRow.tsx'
+import { NS } from '../locales.ts'
+
+/** 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-count summary off the result JSON (a skipped question has
+ *  empty `selected` and no `custom`); null on unexpected shape (generic fallback). */
+function answeredSummary(text: string, t: AskQuestionRowProps['t']): 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 t('ask.answered', { answered, total: answers.length })
+}
+
+/** Full row props: the toolview runtime share plus the standard locale seat. */
+type AskQuestionRowProps = ToolRowProps & PropsLocale<'conversation'>
+
+/** One-line question-interaction row (the whole row toggles the call's
+ *  Input/Output sections, ToolRow's unified expand). */
+export function AskQuestionRow({ toolName, block, inspect, t }: AskQuestionRowProps) {
+  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 = t('ask.cancelled')
+  } else if (code === 'ASK_ABORTED') {
+    summary = t('ask.interrupted')
+    state = 'stopped'
+  } else if (model.state === 'running') {
+    summary = t('ask.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, t) ?? model.summary
+  }
+  return (
+    <ToolRow
+      t={t}
+      variant={model.variant}
+      toolName={toolName}
+      icon={<IconQuestionOutline14 />}
+      title={t('ask.rowTitle')}
+      summary={summary}
+      body={model.body}
+      output={model.output}
+      state={state}
+      inspect={inspect}
+    />
+  )
+}
+
+/**
+ * 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', locale: NS }, AskQuestionRow)
+  },
+}

packages/client/ui-conversation/src/client/toolviews/bash-sample.module.css

@@ -1,5 +1,5 @@
 /* Bash toolview: same geometry/tokens as ToolRow (figma Bash · description),
-   plus the terminal card the row stacks under its summary line. */
+   plus the expand-gated terminal card under the summary line. */
 
 /* Summary line over the terminal card; the summary row keeps its own 24px
    height, so the card is a column around it rather than a change to it. */
@@ -8,10 +8,80 @@
   flex-direction: column;
 }
 
-/* Row indentation matches ToolRow's expanded bodies (16px leading + 6px gap),
-   and replaces the primitive's standalone vertical margin with the flow's. */
+/* Expanded terminal card, matching ToolRow's terminalBody: 4px indent, l1
+   hairline, and the max-height scroll on the card's own OUTPUT (banner stays
+   pinned; 224px = the 260px card cap minus the ~36px banner); the margin
+   replaces the primitive's standalone vertical margin with the flow's. */
 .terminal {
-  margin: 4px 0 4px 22px;
+  --dsl-terminal-font: var(--dsw-font-markdown-code-block-small);
+  --dsl-terminal-line-height: 18px;
+  --dsl-terminal-output-max-height: 224px;
+  margin: 4px 0 4px 4px;
+  border: 1px solid var(--dsw-alias-border-l1);
+}
+
+/* A bash execution error can settle without terminal-card material (for
+   example, command cancellation). Preserve ToolRow's bounded IN/OUT fallback
+   so the original command and full error remain available from this keyed row. */
+.ioCard {
+  display: flex;
+  flex-direction: column;
+  margin: 4px 0 4px 4px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 12px;
+  background: var(--dsw-alias-markdown-code-block);
+  font: var(--dsw-font-markdown-code-block-small);
+}
+
+.ioSection {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: 14px;
+  align-items: baseline;
+  padding: 12px 16px;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.ioSection::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  border-radius: 6px;
+}
+
+.ioSection::-webkit-scrollbar-track {
+  margin: 6px 0;
+}
+
+.ioLabel {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  color: var(--dsw-alias-label-caption);
+}
+
+.ioDivider {
+  flex: none;
+  height: 1px;
+  background: var(--dsw-alias-border-l2);
+}
+
+.ioText {
+  min-width: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.ioText[data-error] {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* ToolRow's unified expand interaction, replicated per the registrant
+   posture: pointer on the expandable row (the icon→chevron hover preview is
+   the affordance, no row fill). */
+.root[data-expandable] {
+  cursor: pointer;
 }
 
 .root {
@@ -47,6 +117,7 @@
 }
 
 .leading {
+  position: relative; /* .chevronHover overlay anchor */
   flex: none;
   width: 16px;
   height: 16px;
@@ -57,15 +128,32 @@
   color: var(--dsw-alias-label-tertiary);
 }
 
-.scopeBadge {
-  flex: none;
-  margin-right: 8px;
-  padding: 0 6px;
-  border-radius: 6px;
-  font-size: 11px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-primary-foreground);
-  background: var(--dsw-alias-state-business-primary);
+.chevron {
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* Hover preview on the expandable row: the idle icon crossfades (100ms) into
+   a down chevron before the row is opened — same overlay as ToolRow. */
+.iconIdle {
+  display: inline-flex;
+  opacity: 1;
+  transition: opacity 100ms ease;
+}
+
+.chevronHover {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.root:hover .iconIdle {
+  opacity: 0;
+}
+
+.root:hover .chevronHover {
+  opacity: 1;
 }
 
 .title {
@@ -95,6 +183,52 @@
   color: var(--dsw-alias-label-tertiary);
 }
 
+/* Error row's collapsed summary: the failure's first line in the error color. */
+.errorSummary {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* Hover-revealed Inspect pill under the expanded terminal's bottom-left —
+   ToolRow's .bodyWrap/.inspectButton treatment, replicated per the registrant
+   posture: real flow (it reserves its line), revealed by hovering anywhere on
+   the tool call — title row included — or by keyboard focus. */
+.bodyWrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.inspectButton {
+  display: inline-flex;
+  align-self: flex-start;
+  align-items: center;
+  gap: 4px;
+  margin: 4px 0 2px 4px;
+  padding: 2px 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  /* Base background, not bg-overlay: the overlay token reads too heavy. */
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+  line-height: 16px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.card:hover .inspectButton,
+.inspectButton:focus-visible {
+  opacity: 1;
+}
+
+/* Solid hover fill: the pill floats over terminal output, so a translucent
+   hover token would let the text underneath bleed through. */
+.inspectButton:hover {
+  background: var(--dsw-alias-interactive-bg-hover-solid);
+  color: var(--dsw-alias-label-primary);
+}
+
+
 .visuallyHidden {
   position: absolute;
   width: 1px;

packages/client/ui-conversation/src/client/toolviews/bash-sample.tsx

@@ -1,25 +1,34 @@
 // Bash toolview registrant: third-party posture over the keyed toolview hole
 // (ctx.slots.register + ToolRowProps only — never imports the chat domain).
 // Product chrome matches ToolRow / Think (figma: Bash · {description}).
-// Child sessions keep a scoped badge so session-dimension differentiation stays
-// observable inside the component (no parallel registry).
 //
-// A bash call declares the terminal render intent, so this row also renders
-// the command's own output through TerminalBlock. This row has no expand
-// control and is not a details-panel target either (tool rows stopped being
-// one), so its terminal body is resident rather than expand-gated as in
-// ToolRow, and the card's own copy and expand controls are the row's only
-// interactions. CHAT_TERMINAL_MAX_LINES is passed as `maxLines` — the chat
-// flow's tighter cap over the block's own default of 16 — and the block's
-// internal expander keeps a long output from taking over the message flow.
+// A bash call normally declares the terminal render intent, so this row renders
+// the command's own output through TerminalBlock. Execution failures that
+// settle without terminal material use the bounded generic IN/OUT fallback —
+// both are expand-gated exactly like
+// ToolRow's unified interaction: collapsed by default, the whole summary row
+// is the toggle (click / Enter / Space, icon→chevron hover preview; the
+// summary stays inline while open),
+// and the expanded card max-height-scrolls inside its own surface with the
+// full output (maxLines Infinity — no middle collapse). An error row's
+// collapsed summary is the failure's first line in the error color.
 
+import { useState, type KeyboardEvent } from 'react'
 import type { Context } from 'cordis'
-import { IconApiOutline14, StateDot, TerminalBlock } from '@deepseek-ai/dsh-client-ui-primitives'
+import clsx from 'clsx'
+import {
+  IconApiOutline14, IconChevronDownOutline14, StateDot, TerminalBlock,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
 import type { ToolRowProps } from '../contract/slots.ts'
-import { CHAT_TERMINAL_MAX_LINES, terminalCardModel } from '../contract/terminal-card-model.ts'
+import { terminalBlockLabels, terminalCardModel, terminalFailed } from '../contract/terminal-card-model.ts'
 import { toolRowModel, type ToolRowState } from '../contract/tool-call-model.ts'
+import { NS } from '../locales.ts'
 import css from './bash-sample.module.css'
 
+/** Bash row props: the toolview runtime share plus the standard locale seat. */
+type BashRowProps = ToolRowProps & PropsLocale<'conversation'>
+
 function leadingFor(state: ToolRowState) {
   switch (state) {
     case 'error': return <StateDot state="error" />
@@ -30,48 +39,127 @@ function leadingFor(state: ToolRowState) {
 }
 
 /** Visually hidden status — StateDot is aria-hidden; AT needs a text label. */
-function stateStatus(state: ToolRowState): string | null {
+function stateStatus(state: ToolRowState, t: BashRowProps['t']): string | null {
   switch (state) {
-    case 'running': return '运行中'
-    case 'error': return '失败'
-    case 'stopped': return '已停止'
+    case 'running': return t('bash.running')
+    case 'error': return t('bash.failed')
+    case 'stopped': return t('bash.stopped')
     default: return null
   }
 }
 
 /**
- * Bash row: icon + Bash · {description} in the shared ToolRow chrome, with the
- * command's terminal card resident below it. The summary row is not a
- * details-panel control (tool rows stopped being one), so the card's copy and
- * expand controls are the row's only interactions.
+ * Bash row: icon + Bash · {description} in the shared ToolRow chrome, the
+ * whole row toggling the command's terminal or generic error card (ToolRow's unified
+ * expand interaction, replicated locally per the registrant posture).
  */
-export function BashRow({ toolName, block, sessionId, useSessions }: ToolRowProps) {
+export function BashRow({ toolName, block, sessionId, useSessions, inspect, t }: BashRowProps) {
   const model = toolRowModel(toolName, block)
   // Session workspace root: the terminal view's cwd resolves against it (an
   // omitted workdir IS the workspace), which the pure presenter cannot do.
   const cwd = useSessions(list => list.byId[sessionId]?.cwd)
   const terminal = terminalCardModel(block, cwd)
-  const isChild = useSessions(list => list.byId[sessionId]?.parentId !== undefined)
-  const status = stateStatus(model.state)
+  // A failing exit status is the terminal card's own error signal (the call
+  // itself settles isError:false), surfaced as the row's red state dot.
+  const state = model.state === 'ok' && terminal !== null && terminalFailed(terminal)
+    ? 'error'
+    : model.state
+  const status = stateStatus(state, t)
+  const [expanded, setExpanded] = useState(false)
+  // Execution failures (for example cancellation before the process reports a
+  // terminal result) use the generic presenter. Keep their recorded args and
+  // full error reachable instead of collapsing the row to the first line.
+  const genericError = terminal === null
+    && model.state === 'error'
+    && (model.body !== null || model.output !== null)
+  const expandable = terminal !== null || genericError
+  const open = expanded && expandable
+  const failureLine = model.state === 'error' ? model.errorSummary : null
+  const toggleExpand = () => {
+    setExpanded(v => !v)
+  }
+  const toggleFromKeyboard = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!expandable || (event.key !== 'Enter' && event.key !== ' ')) return
+    event.preventDefault()
+    toggleExpand()
+  }
+  const leading = open
+    ? <IconChevronDownOutline14 className={css.chevron} />
+    : expandable
+      ? (
+        <>
+          <span className={css.iconIdle}>{leadingFor(state)}</span>
+          <IconChevronDownOutline14 className={clsx(css.chevron, css.chevronHover)} />
+        </>
+      )
+      : leadingFor(state)
   return (
     <div className={css.card}>
       <div
         className={css.root}
-        data-sample={isChild ? 'bash-scoped' : 'bash-global'}
+        data-sample="bash"
         data-variant="bash"
-        data-state={model.state}
+        data-state={state}
+        data-expandable={expandable || undefined}
+        role={expandable ? 'button' : undefined}
+        tabIndex={expandable ? 0 : undefined}
+        aria-expanded={expandable ? open : undefined}
+        onClick={expandable ? toggleExpand : undefined}
+        onKeyDown={expandable ? toggleFromKeyboard : undefined}
       >
-        <span className={css.leading}>{leadingFor(model.state)}</span>
+        <span className={css.leading}>{leading}</span>
         {status !== null && <span className={css.visuallyHidden}>{status}</span>}
-        {isChild && <span className={css.scopeBadge}>scoped</span>}
         <span className={css.title}>{model.title}</span>
         <span className={css.sep} aria-hidden />
         {/* The terminal presenter's description is the contractual
-            above-card summary; it outranks the args-derived one. */}
-        <span className={css.summary}>{terminal?.description ?? model.summary}</span>
+            above-card summary; a failure's first line outranks both. */}
+        <span className={clsx(css.summary, failureLine !== null && css.errorSummary)}>
+          {failureLine ?? terminal?.description ?? model.summary}
+        </span>
       </div>
-      {terminal !== null && (
-        <TerminalBlock {...terminal.card} maxLines={CHAT_TERMINAL_MAX_LINES} className={css.terminal} />
+      {open && (
+        /* Same hover-Inspect posture as ToolRow's expanded body, replicated
+           locally per the registrant posture. */
+        <div className={css.bodyWrap}>
+          {terminal !== null
+            ? (
+              <TerminalBlock
+                {...terminal.card}
+                maxLines={Infinity}
+                labels={terminalBlockLabels(t)}
+                className={css.terminal}
+              />
+            )
+            : (
+              <div className={css.ioCard}>
+                {model.body !== null && (
+                  <div className={css.ioSection}>
+                    <span className={css.ioLabel}>IN</span>
+                    <span className={css.ioText}>{model.body}</span>
+                  </div>
+                )}
+                {model.body !== null && model.output !== null && (
+                  <span className={css.ioDivider} aria-hidden />
+                )}
+                {model.output !== null && (
+                  <div className={css.ioSection}>
+                    <span className={css.ioLabel}>OUT</span>
+                    <span className={css.ioText} data-error>
+                      {model.output}
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
+          {inspect !== undefined && (
+            <button type="button" className={css.inspectButton} onClick={inspect}>
+              <svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+                <path d="M16 8L10.8571 12V10.552L14.1383 8L10.8571 5.448V4L16 8ZM5.14286 10.552L1.86171 8L5.14286 5.448V4L0 8L5.14286 12V10.552ZM9.02514 4L5.59657 12H6.84057L10.2691 4H9.02514Z" fill="currentColor" />
+              </svg>
+              Inspect
+            </button>
+          )}
+        </div>
       )}
     </div>
   )
@@ -91,6 +179,6 @@ export const bashToolviewSample = {
    * @param ctx - registrant context (disposal rides ctx.effect inside slots.register).
    */
   apply(ctx: Context): void {
-    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'bash' }, BashRow)
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'bash', locale: NS }, BashRow)
   },
 }

packages/client/ui-conversation/src/client/toolviews/file-mutation-row.tsx

@@ -0,0 +1,73 @@
+// File-mutation toolview registrant: the keyed toolview hole for the `edit`
+// and `write` tools. The row composes the shared ToolRow (chrome, running
+// sweep, whole-row expand) and feeds it the applied diff as ToolRow's `diff`
+// card material, so the change renders through DiffBlock in the collapsed-by-
+// default expanded body — the same unified interaction every other card row
+// has. The summary stays a path link (the file-tool interaction) that opens
+// through the host; an errored mutation (write/edit return no diff on
+// `result.isError`) keeps the model-facing error text on ToolRow's Output
+// section, its first line in the collapsed summary.
+
+import type { Context } from 'cordis'
+import { IconEditOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
+import type { ToolRowProps } from '../contract/slots.ts'
+import { diffCardModel } from '../contract/diff-card-model.ts'
+import { toolRowModel } from '../contract/tool-call-model.ts'
+import { ToolRow } from '../chat/ToolRow.tsx'
+import { NS } from '../locales.ts'
+
+/** Full row props: the toolview runtime share plus the standard locale seat. */
+type FileMutationRowProps = ToolRowProps & PropsLocale<'conversation'>
+
+/**
+ * File-mutation row: icon + {Edit,Write} · {path} in the shared ToolRow chrome,
+ * with the applied diff as the row's collapsed-by-default card body. The
+ * summary is a path link (a file tool's interaction); the host's `openFile`
+ * resolves it against the session cwd, so this passes the tool's own path
+ * verbatim. An errored mutation has no diff card, so ToolRow surfaces the
+ * model-facing error text through its Output section and its first line in the
+ * collapsed summary instead.
+ */
+export function FileMutationRow({ toolName, block, cwd, openFile, inspect, t }: FileMutationRowProps) {
+  const model = toolRowModel(toolName, block, cwd)
+  const diff = diffCardModel(block)
+  return (
+    <ToolRow
+      t={t}
+      variant={model.variant}
+      toolName={toolName}
+      icon={<IconEditOutline16 size={14} />}
+      title={model.title}
+      summary={model.summary}
+      body={null}
+      output={model.output}
+      errorSummary={model.errorSummary}
+      diff={diff}
+      state={model.state}
+      filePath={model.filePath}
+      onOpenFile={openFile}
+      inspect={inspect}
+    />
+  )
+}
+
+/**
+ * The file-mutation rows as a plain registrant plugin. `inject` carries the
+ * load-order seam: requiring the conversation service guarantees the chat entry
+ * (and with it the 'conversation.chat.toolview' declaration) is registered —
+ * ui-conversation's apply mounts the service after the chat entry.
+ */
+export const fileMutationToolview = {
+  name: 'file-mutation-toolview',
+  inject: ['slots', 'conversation'],
+  /**
+   * Register the file-mutation row into the chat view's keyed toolview hole
+   * under both mutation tool names.
+   * @param ctx - registrant context (disposal rides ctx.effect inside slots.register).
+   */
+  apply(ctx: Context): void {
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'edit', locale: NS }, FileMutationRow)
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'write', locale: NS }, FileMutationRow)
+  },
+}

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

@@ -0,0 +1,66 @@
+// Read toolview registrant: the keyed toolview hole for the read tool. The row
+// composes the shared ToolRow (chrome, running sweep, whole-row expand) and
+// feeds it the file's line-numbered, syntax-highlighted content as ToolRow's
+// `read` card material, so it renders through ReadBlock in the collapsed-by-
+// default expanded body — the same unified interaction every other card row
+// has. The summary path is an openable host link. A running read (no result
+// yet) and a non-read result render the summary row alone: the read intent is
+// result-side only, so there is no running-state read card to draw.
+
+import type { Context } from 'cordis'
+import { IconBrowseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
+import type { ToolRowProps } from '../contract/slots.ts'
+import { readCardModel } from '../contract/read-card-model.ts'
+import { toolRowModel } from '../contract/tool-call-model.ts'
+import { ToolRow } from '../chat/ToolRow.tsx'
+import { NS } from '../locales.ts'
+
+/** Full row props: the toolview runtime share plus the standard locale seat. */
+type ReadRowProps = ToolRowProps & PropsLocale<'conversation'>
+
+/**
+ * Read row: icon + Read · {path} in the shared ToolRow chrome, with the file's
+ * read card as the row's collapsed-by-default card body. The summary path is an
+ * openable host link when the row names a single file.
+ */
+export function ReadRow({ toolName, block, cwd, openFile, inspect, t }: ReadRowProps) {
+  const model = toolRowModel(toolName, block, cwd)
+  const read = readCardModel(block, cwd)
+  return (
+    <ToolRow
+      t={t}
+      variant={model.variant}
+      toolName={toolName}
+      icon={<IconBrowseOutline16 size={14} />}
+      title={model.title}
+      summary={model.summary}
+      body={null}
+      output={model.output}
+      errorSummary={model.errorSummary}
+      read={read}
+      state={model.state}
+      filePath={model.filePath}
+      onOpenFile={openFile}
+      inspect={inspect}
+    />
+  )
+}
+
+/**
+ * The read row as a plain registrant plugin. `inject` carries the load-order
+ * seam: requiring the conversation service guarantees the chat entry (and with
+ * it the 'conversation.chat.toolview' declaration) is registered —
+ * ui-conversation's apply mounts the service after the chat entry.
+ */
+export const readToolview = {
+  name: 'read-toolview',
+  inject: ['slots', 'conversation'],
+  /**
+   * Register the read 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: 'read', locale: NS }, ReadRow)
+  },
+}

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

@@ -0,0 +1,82 @@
+// Search toolview registrant: the keyed toolview hole for the `grep` and `glob`
+// tools. One SearchRow component registered under both, since both declare the
+// same `card: 'search'` render intent and render as one visual object; the
+// derived model's `kind` decides the card shape (grouped matches or a path
+// list). The row composes the shared ToolRow (chrome, running sweep, whole-row
+// expand) and feeds it the completed search as ToolRow's `search` card
+// material, so it renders through SearchBlock in the collapsed-by-default
+// expanded body — with a capped search's recovery footer below the card. A
+// search declares its render intent result-time only, so a running row is the
+// summary line alone; a settled call with no search card (an errored search, a
+// nested run_code sub-dispatch, a legacy generic result) surfaces its
+// model-facing text through ToolRow's Output section instead.
+
+import type { Context } from 'cordis'
+import { IconSearchOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
+import type { ToolRowProps } from '../contract/slots.ts'
+import { searchCardModel } from '../contract/search-card-model.ts'
+import { toolRowModel } from '../contract/tool-call-model.ts'
+import { ToolRow } from '../chat/ToolRow.tsx'
+import { NS } from '../locales.ts'
+
+/** Full row props: the toolview runtime share plus the standard locale seat. */
+type SearchRowProps = ToolRowProps & PropsLocale<'conversation'>
+
+/**
+ * Search row: icon + Search · {summary} in the shared ToolRow chrome, with the
+ * completed search's card as the row's collapsed-by-default card body (a capped
+ * search's recovery footer rides below it, inside ToolRow). Registered under
+ * both `grep` and `glob`; the derived model's `kind` decides the card shape. A
+ * settled call with no search card surfaces its model-facing text through
+ * ToolRow's Output section, since the keyed SearchRow owns this render slot.
+ */
+export function SearchRow({ toolName, block, inspect, t }: SearchRowProps) {
+  const model = toolRowModel(toolName, block)
+  const search = searchCardModel(block)
+  return (
+    <ToolRow
+      t={t}
+      variant={model.variant}
+      toolName={toolName}
+      icon={<IconSearchOutline16 size={14} />}
+      title={model.title}
+      // The result view's replacement title outranks the args-derived summary,
+      // matching the terminal card's description precedence.
+      summary={search?.title ?? model.summary}
+      body={null}
+      // A settled call with no search card (errored search, nested run_code
+      // sub-dispatch, legacy generic result) has its text nowhere else to go;
+      // ToolRow's Output section carries it, and errorSummary its first line.
+      // When a card is present ToolRow renders it instead of the output, so
+      // passing model.output unconditionally is safe and keeps the four card
+      // rows symmetric.
+      output={model.output}
+      errorSummary={model.errorSummary}
+      search={search}
+      state={model.state}
+      inspect={inspect}
+    />
+  )
+}
+
+/**
+ * The search toolview as a plain registrant plugin. `inject` carries the
+ * load-order seam: requiring the conversation service guarantees the chat entry
+ * (and with it the 'conversation.chat.toolview' declaration) is registered.
+ * The one component registers under both keys, since `grep` and `glob` are the
+ * same visual object discriminated only by the result view's `kind`.
+ */
+export const searchToolview = {
+  name: 'search-toolview',
+  inject: ['slots', 'conversation'],
+  /**
+   * Register the search row into the chat view's keyed toolview hole under both
+   * the `grep` and `glob` tool names.
+   * @param ctx - registrant context (disposal rides ctx.effect inside slots.register).
+   */
+  apply(ctx: Context): void {
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'grep', locale: NS }, SearchRow)
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'glob', locale: NS }, SearchRow)
+  },
+}

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

@@ -1,68 +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;
-}
-
-.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);
-}
-
-/* Parallel-active count, kept out of .summary's ellipsis so a long task name
-   clips before the count that reports the other running tasks. Repeats
-   .summary's type because it sits beside that text on the same 24px row and
-   the shell leaves body text at the browser default, not 14px. */
-.extra {
-  flex: none;
-  margin-left: 4px;
-  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,18 +1,23 @@
 // 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 items) from the call args, with
-// the parallel-active count in its own non-shrinking span outside the
-// ellipsized text; the durable list itself renders in the TodoPanel above the
-// composer, so the row stays one line. Chrome matches ToolRow (figma 780:53675).
+// composes ToolRow (chrome, running sweep, whole-row expand) and swaps in a
+// summary of the written list (counts + active items) from the call args, with
+// the parallel-active count riding ToolRow's non-shrinking summary suffix so a
+// narrow row never clips it; the durable list itself renders in the TodoPanel
+// above the composer, so the row stays one line until expanded.
 
+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 { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
 import type { ToolRowProps } from '../contract/slots.ts'
-import { toolRowModel, type ToolRowState } from '../contract/tool-call-model.ts'
-import type { PlanItemLike } from './plan-summary.ts'
-import { planSummary } from './plan-summary.ts'
-import css from './todo-row.module.css'
+import { toolRowModel } from '../contract/tool-call-model.ts'
+import { ToolRow } from '../chat/ToolRow.tsx'
+import { NS } from '../locales.ts'
+import { planSummary, type PlanItemLike } from './plan-summary.ts'
+
+/** Todo row props: the toolview runtime share plus the standard locale seat. */
+type TodoRowProps = ToolRowProps & PropsLocale<'conversation'>
 
 function isItem(value: unknown): value is PlanItemLike {
   return typeof value === 'object' && value !== null
@@ -28,7 +33,7 @@ interface RowSummary {
   extra: number
 }
 
-function summarize(argsRaw: string): RowSummary | null {
+function summarize(argsRaw: string, t: TodoRowProps['t']): RowSummary | null {
   let parsed: unknown
   try {
     parsed = JSON.parse(argsRaw)
@@ -42,45 +47,36 @@ function summarize(argsRaw: string): RowSummary | null {
   const todos = (parsed as { todos?: unknown }).todos
   if (!Array.isArray(todos) || !todos.every(isItem)) return null
   const { done, total, activeContent, activeExtra } = planSummary(todos)
-  const head = `${done}/${total} 已完成`
+  const head = t('todo.completed', { done, total })
   return {
     text: activeContent === null ? head : `${head} · ${activeContent}`,
     extra: activeExtra,
   }
 }
 
-/** 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. 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. */
-export function TodoRow({ toolName, block }: ToolRowProps) {
+/** One-line plan update row (the whole row toggles the call's Input/Output
+ *  sections, ToolRow's unified expand). 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, inspect, t }: TodoRowProps) {
   const model = toolRowModel(toolName, block)
   const argsRaw = ('kind' in block ? block.call?.argsRaw : block.argsRaw) ?? ''
-  const summary = summarize(argsRaw) ?? { text: model.summary, extra: 0 }
+  const summary = summarize(argsRaw, t) ?? { text: model.summary, extra: 0 }
   return (
-    <div
-      className={css.row}
-      data-sample="todo-row"
-      data-state={model.state}
-    >
-      <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.text}</span>
-      {summary.extra > 0 && <span className={css.extra}>+{summary.extra}</span>}
-      {model.state === 'error' && <span className={css.err}>failed</span>}
-      {model.state === 'stopped' && <span className={css.err}>已中断</span>}
-    </div>
+    <ToolRow
+      t={t}
+      variant={model.variant}
+      toolName={toolName}
+      icon={<IconChecklistOutline14 />}
+      title={t('todo.rowTitle')}
+      summary={summary.text}
+      summarySuffix={summary.extra > 0 ? `+${summary.extra}` : null}
+      body={model.body}
+      output={model.output}
+      errorSummary={model.errorSummary}
+      state={model.state}
+      inspect={inspect}
+    />
   )
 }
 
@@ -97,6 +93,6 @@ export const todoToolview = {
    * @param ctx - registrant context (disposal rides ctx.effect inside slots.register).
    */
   apply(ctx: Context): void {
-    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'todo_write' }, TodoRow)
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'todo_write', locale: NS }, TodoRow)
   },
 }

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

@@ -0,0 +1,74 @@
+// Web toolview registrant: the keyed toolview hole for the `web_search` and
+// `web_fetch` tools. Registered under BOTH, since both declare the one `web`
+// render intent and render through the one WebBlock family; the row
+// discriminates on the toolName only to pick its icon and title. The row
+// composes the shared ToolRow (chrome, running sweep, whole-row expand) and
+// feeds it the completed retrieval as ToolRow's `web` card material, so it
+// renders through WebBlock in the collapsed-by-default expanded body — the same
+// unified interaction every other card row has. Until the call settles there is
+// no web card (the tools keep a generic pending view), so a running row is the
+// summary line alone.
+
+import type { Context } from 'cordis'
+import { IconBrowseOutline16, IconSearchOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
+import type { ToolRowProps } from '../contract/slots.ts'
+import { webCardModel } from '../contract/web-card-model.ts'
+import { toolRowModel } from '../contract/tool-call-model.ts'
+import { ToolRow } from '../chat/ToolRow.tsx'
+import { NS } from '../locales.ts'
+
+/** Full row props: the toolview runtime share plus the standard locale seat. */
+type WebRowProps = ToolRowProps & PropsLocale<'conversation'>
+
+/** web_fetch reads one URL; web_search queries. Titles are figma literals. */
+const WEB_TITLES: Record<string, string> = {
+  web_search: 'Search',
+  web_fetch: 'Fetch',
+}
+
+/**
+ * Web row: icon + Search/Fetch · {summary} in the shared ToolRow chrome, with
+ * the completed retrieval's web card as the row's collapsed-by-default card
+ * body. The row discriminates on `toolName` only to pick its icon and title.
+ */
+export function WebRow({ toolName, block, inspect, t }: WebRowProps) {
+  const model = toolRowModel(toolName, block)
+  const web = webCardModel(block)
+  const icon = toolName === 'web_fetch' ? <IconBrowseOutline16 size={14} /> : <IconSearchOutline16 size={14} />
+  return (
+    <ToolRow
+      t={t}
+      variant={model.variant}
+      toolName={toolName}
+      icon={icon}
+      title={WEB_TITLES[toolName] ?? model.title}
+      summary={model.summary}
+      body={null}
+      output={model.output}
+      errorSummary={model.errorSummary}
+      web={web}
+      state={model.state}
+      inspect={inspect}
+    />
+  )
+}
+
+/**
+ * The web rows as a plain registrant plugin, riding the same load-order seam as
+ * the bash sample: `inject: ['conversation']` guarantees the chat entry (and
+ * with it the 'conversation.chat.toolview' declaration) is on the ledger. One
+ * WebRow component registers under both web tool names.
+ */
+export const webToolview = {
+  name: 'web-toolview',
+  inject: ['slots', 'conversation'],
+  /**
+   * Register the web row under both web tool names' keyed toolview holes.
+   * @param ctx - registrant context (disposal rides ctx.effect inside slots.register).
+   */
+  apply(ctx: Context): void {
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'web_search', locale: NS }, WebRow)
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'web_fetch', locale: NS }, WebRow)
+  },
+}