Merge pinned master into status bar token metrics

2026-07-31 15:41:52 +08:00
parent 3d6decedba 66f8cc074e
commit 7906c1032f
376 changed files with 12429 additions and 1438 deletions
--- a/packages/client/ui-conversation/src/client/apply.ts
+++ b/packages/client/ui-conversation/src/client/apply.ts
@@ -20,6 +20,8 @@ import { InputBar } from './skeleton/InputBar.tsx'
 import { ChatView } from './chat/ChatView.tsx'
 import { StatsLine } from './chat/StatsLine.tsx'
 import { bashToolviewSample } from './toolviews/bash-sample.tsx'
+import { fileMutationToolview } from './toolviews/file-mutation-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'
@@ -318,6 +320,15 @@ export function apply(ctx: Context): void {
  // (ToolRow-matching Bash · {description} chrome; scoped badge in child sessions).
  ctx.plugin(bashToolviewSample)

+  // 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 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)

--- a/packages/client/ui-conversation/src/client/chat/ChatView.module.css
+++ b/packages/client/ui-conversation/src/client/chat/ChatView.module.css
@@ -66,33 +66,45 @@
  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;
+@keyframes dsh-turn-status-shimmer {
+  to {
+    background-position: 0 0;
+  }
 }

-@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; }
+@media (prefers-reduced-motion: reduce) {
+  .turnStatus {
+    background-position: 0 0;
+    background-size: 100% 100%;
+    animation: none;
+  }
 }

 .hint {
--- a/packages/client/ui-conversation/src/client/chat/ChatView.tsx
+++ b/packages/client/ui-conversation/src/client/chat/ChatView.tsx
@@ -55,6 +55,17 @@ type RenderToolRow = ChatViewSlotProps['renderSlot']
 *  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
+}
+
 /** 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
@@ -193,36 +204,11 @@ const CommandRow = memo(function CommandRow({ renderSlot, node, t }: {
  )
 })

-/** 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() {
  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...
    </div>
  )
 }
@@ -262,6 +248,7 @@ export function ChatView({
  const selectedCallId = useStore(s => s.selection?.callId)

  const items = useMemo(() => deriveChatFlow(nodes), [nodes])
+  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])
@@ -424,7 +411,15 @@ export function ChatView({
    }
    /* 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} onFork={forkAt} t={t} />
+    return (
+      <MessageItem
+        key={item.key}
+        node={node}
+        retryActive={node.kind === 'model-retry' && node.seq === activeRetry}
+        onFork={forkAt}
+        t={t}
+      />
+    )
  }

  return (
@@ -471,7 +466,7 @@ export function ChatView({
              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 />}
        </div>
        {!atBottom && (
          <div className={css.toBottomSlot}>
--- a/packages/client/ui-conversation/src/client/chat/GenericToolCard.module.css
+++ b/packages/client/ui-conversation/src/client/chat/GenericToolCard.module.css
@@ -0,0 +1,15 @@
+/* The generic card grows a resident web card under its summary row when the
+   tool declares the `web` render intent but has no keyed row of its own (the
+   web_search/web_fetch rows register their own WebRow). A column around the
+   ToolRow keeps the row's own 24px height. */
+
+.card {
+  display: flex;
+  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. */
+.web {
+  margin: 4px 0 4px 22px;
+}
--- a/packages/client/ui-conversation/src/client/chat/GenericToolCard.tsx
+++ b/packages/client/ui-conversation/src/client/chat/GenericToolCard.tsx
@@ -7,12 +7,15 @@
 import type { ReactNode } from 'react'
 import {
  IconApiOutline14, IconBrowseOutline16, IconCodeOutline16, IconEditOutline16, IconSearchOutline16, IconSparkle16,
-  IconThinkOutline14,
+  IconThinkOutline14, WebBlock,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ChatViewSlotProps, ToolRowOwnerProps } from '../contract/slots.ts'
+import { diffCardModel } from '../contract/diff-card-model.ts'
 import { terminalCardModel, terminalFailed } from '../contract/terminal-card-model.ts'
+import { CHAT_WEB_MAX_SOURCES, webCardModel } from '../contract/web-card-model.ts'
 import { toolRowModel, type ToolRowVariant } from '../contract/tool-call-model.ts'
 import { ToolRow } from './ToolRow.tsx'
+import css from './GenericToolCard.module.css'

 /** Variant leading icons (figma table); all glyphs render at 14 inside the 16px leading box. */
 const VARIANT_ICONS: Record<ToolRowVariant, ReactNode> = {
@@ -34,13 +37,15 @@ export interface GenericToolCardProps extends ToolRowOwnerProps {
 export function GenericToolCard({ toolName, block, cwd, openFile, inspect, t }: GenericToolCardProps) {
  const model = toolRowModel(toolName, block, cwd)
  const terminal = terminalCardModel(block, cwd)
+  const diff = diffCardModel(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 (
+  const row = (
    <ToolRow
      t={t}
      variant={model.variant}
@@ -50,14 +55,27 @@ export function GenericToolCard({ toolName, block, cwd, openFile, inspect, t }:
      // 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}
-      body={model.body}
+      // Single-file tools never expose an args body — the path link is the only
+      // args interaction. A diff card is not an args body: a write/edit row is
+      // single-file AND carries a diff, so the card expands under the path link.
+      body={singleFile ? null : model.body}
      output={model.output}
      errorSummary={model.errorSummary}
      terminal={terminal}
+      diff={diff}
      state={state}
      filePath={model.filePath}
      onOpenFile={singleFile ? openFile : undefined}
      inspect={inspect}
    />
  )
+  // A web-declaring tool without its own keyed row lands here; its card is
+  // resident under the summary, mirroring WebRow (and BashRow's terminal card).
+  if (web === null) return row
+  return (
+    <div className={css.card}>
+      {row}
+      <WebBlock {...web} maxSources={CHAT_WEB_MAX_SOURCES} className={css.web} />
+    </div>
+  )
 }
--- a/packages/client/ui-conversation/src/client/chat/MessageItem.module.css
+++ b/packages/client/ui-conversation/src/client/chat/MessageItem.module.css
@@ -34,6 +34,106 @@
  padding: 2px 0;
 }

+.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);
+}
+
+@keyframes retry-shimmer {
+  from {
+    background-position: 100% 50%;
+  }
+
+  to {
+    background-position: 0 50%;
+  }
+}
+
+@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
   spans render as chips; free geometry — no textarea pairing here). */
 .refChip {
--- a/packages/client/ui-conversation/src/client/chat/MessageItem.tsx
+++ b/packages/client/ui-conversation/src/client/chat/MessageItem.tsx
@@ -1,13 +1,11 @@
-// MessageItem: the four simple node kinds — user bubble (right-aligned, with
+// MessageItem: simple chat nodes — 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.
+// injection, 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,
+  ContextMessageNode, ModelRetryNode, SteeringMessageNode, UnknownSurfaceNode, UserMessageNode,
 } from '@deepseek-ai/dsh-client-runtime/client'
 import { JsonBlock, MessageText } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ChatViewSlotProps } from '../contract/slots.ts'
@@ -16,7 +14,8 @@ import { MessageIconActions } from './MessageIconActions.tsx'
 import css from './MessageItem.module.css'

 export interface MessageItemProps {
-  node: UserMessageNode | SteeringMessageNode | ContextMessageNode | UnknownSurfaceNode
+  node: UserMessageNode | SteeringMessageNode | ContextMessageNode | ModelRetryNode | UnknownSurfaceNode
+  retryActive?: boolean
  /** Fork the session through the turn containing this message (user-bubble branch action). */
  onFork?: (seq: number) => void
  /** The owning view's locale seat, passed down as a plain prop. */
@@ -34,6 +33,80 @@ 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>
+  )
+}
 /**
 * Display projection of reference forms in a user bubble (free geometry — no
 * textarea alignment constraint here); everything else stays plain text. The
@@ -66,7 +139,9 @@ function projectUserText(text: string): ReactNode {
  return <>{parts}</>
 }

-export const MessageItem = memo(function MessageItem({ node, onFork, t }: MessageItemProps) {
+export const MessageItem = memo(function MessageItem({
+  node, retryActive = false, onFork, t,
+}: MessageItemProps) {
  const truncated = (total: number): string => t('json.truncated', { total })
  switch (node.kind) {
    case 'user': {
@@ -105,6 +180,8 @@ export const MessageItem = memo(function MessageItem({ node, onFork, t }: Messag
      return (
        <ContextInjectionRow content={node.content} source={node.source} t={t} />
      )
+    case 'model-retry':
+      return <ModelRetryItem node={node} active={retryActive} t={t} />
    default:
      return (
        <div className={css.contextRow}>
--- a/packages/client/ui-conversation/src/client/chat/ToolRow.module.css
+++ b/packages/client/ui-conversation/src/client/chat/ToolRow.module.css
@@ -257,6 +257,12 @@
  margin: 4px 0 4px 4px;
 }

+/* A write/edit diff renders through DiffBlock; like the terminal card it draws
+   its own surface, so only the row indentation is this file's concern. */
+.diffBody {
+  margin: 4px 0 4px 4px;
+}
+
 /* 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 {
--- a/packages/client/ui-conversation/src/client/chat/ToolRow.tsx
+++ b/packages/client/ui-conversation/src/client/chat/ToolRow.tsx
@@ -18,8 +18,9 @@

 import { useState, type MouseEvent, type ReactNode } from 'react'
 import clsx from 'clsx'
-import { CodeBlock, StateDot, TerminalBlock } from '@deepseek-ai/dsh-client-ui-primitives'
+import { CodeBlock, DiffBlock, StateDot, TerminalBlock } 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 { terminalBlockLabels, type TerminalCardModel } from '../contract/terminal-card-model.ts'
 import type { ToolRowState, ToolRowVariant } from '../contract/tool-call-model.ts'
 import { DisclosureRow } from './DisclosureRow.tsx'
@@ -48,6 +49,13 @@ export interface ToolRowProps {
   * expandable.
   */
  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. A call carries at most one card intent, so the two are
+   * never both set.
+   */
+  diff?: DiffCardModel | null | undefined
  state: ToolRowState
  /**
   * Filesystem path from tool args; when set with onOpenFile, the summary
@@ -95,6 +103,7 @@ export function ToolRow({
  output,
  errorSummary,
  terminal,
+  diff,
  state,
  filePath,
  onOpenFile,
@@ -102,8 +111,9 @@ export function ToolRow({
 }: ToolRowProps) {
  const [expanded, setExpanded] = useState(false)
  const terminalBody = terminal ?? null
+  const diffBody = diff ?? null
  const outputText = output ?? null
-  const expandable = body !== null || outputText !== null || terminalBody !== null
+  const expandable = body !== null || outputText !== null || terminalBody !== null || diffBody !== null
  const open = expanded && expandable
  // 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.
@@ -175,38 +185,40 @@ export function ToolRow({
                className={css.terminalBody}
              />
            )
-            : 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>
-                  )}
-                </>
-              )}
+            : diffBody !== null
+              ? <DiffBlock {...diffBody.card} maxLines={CHAT_DIFF_MAX_LINES} className={css.diffBody} />
+              : 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"
--- a/packages/client/ui-conversation/src/client/chat/chat-flow.ts
+++ b/packages/client/ui-conversation/src/client/chat/chat-flow.ts
@@ -1,7 +1,8 @@
 /**
 * 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. IconActions ownership
 * (last content assistant per turn) is derived here too so ChatView and the
@@ -49,7 +50,7 @@ export function assistantActionsSeqs(nodes: readonly ConversationNode[]): Readon
 /**
 * Group finalized nodes into the step-summary flow.
 * @param nodes - snapshot nodes (surface order).
- * @returns flow items; consecutive tool-results merged into one group keyed by the first seq.
+ * @returns flow items; consecutive tool results and retry notices reuse their first key.
 */
 export function deriveChatFlow(nodes: readonly ConversationNode[]): ChatFlowItem[] {
  const items: ChatFlowItem[] = []
@@ -63,6 +64,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 })
--- a/packages/client/ui-conversation/src/client/contract/diff-card-model.ts
+++ b/packages/client/ui-conversation/src/client/contract/diff-card-model.ts
@@ -0,0 +1,100 @@
+/**
+ * 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) and that outranks the view's `title`, matching the TUI diff
+ * branch, which likewise draws no view title. A tool that names its own diff
+ * header therefore does not surface that text on the Web row — an accepted
+ * product choice, recorded here as the one asymmetry with the terminal card,
+ * whose derivation does consume the view's title.
+ * @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 } }
+}
--- a/packages/client/ui-conversation/src/client/contract/web-card-model.ts
+++ b/packages/client/ui-conversation/src/client/contract/web-card-model.ts
@@ -0,0 +1,84 @@
+/**
+ * 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'
+
+/**
+ * Sources the chat row's web 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_WEB_MAX_SOURCES = 8
+
+/**
+ * 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
+}
--- a/packages/client/ui-conversation/src/client/locales.ts
+++ b/packages/client/ui-conversation/src/client/locales.ts
@@ -23,6 +23,11 @@ export const zh = {
  'input.stop': '停止生成',
  'input.send': '发送消息',
  'input.accessMode': '访问模式，当前：{name}',
+  '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': '会话层级',
@@ -48,6 +53,13 @@ export const zh = {
  'message.unknownBlock': '未知内容块',
  'message.stopped': '已停止',
  'message.branch': '在新对话中分支',
+  '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': '失败原因：',
  'command.running': '执行中…',
  'command.failed': '命令失败',
  'command.done': '已完成',
@@ -105,6 +117,11 @@ export const en = {
  'input.stop': 'Stop generating',
  'input.send': 'Send message',
  'input.accessMode': 'Access mode, current: {name}',
+  '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',
@@ -130,6 +147,13 @@ export const en = {
  'message.unknownBlock': 'Unknown content block',
  'message.stopped': 'Stopped',
  'message.branch': 'Branch into a new conversation',
+  '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: ',
  'command.running': 'Running…',
  'command.failed': 'Command failed',
  'command.done': 'Completed',
--- a/packages/client/ui-conversation/src/client/queue/QueueDock.module.css
+++ b/packages/client/ui-conversation/src/client/queue/QueueDock.module.css
@@ -1,10 +1,21 @@
-/* Figma .FileContainerText 1:791: 776px wrapper around the inset 752px panel. */
+/* Figma .FileContainerText 1:791: the wrapper uses the shared dock inset
+   inside the composer card around the inset panel. */

 .dock {
  box-sizing: border-box;
  flex: none;
-  width: 100%;
-  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)
+  );
+  max-width: calc(
+    var(--dsh-composer-card-max-width) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
  /* Flex gap still applies after this item; subtract it together with the
     design's overlap so the later composer paints over the queue edge. */
  margin: 0 auto calc(
@@ -96,6 +107,10 @@
  border-radius: 8px;
 }

+.row + .row {
+  box-shadow: inset 0 1px 0 var(--dsw-alias-border-l1);
+}
+
 .preview,
 .editor {
  flex: 1 1 auto;
--- a/packages/client/ui-conversation/src/client/queue/QueueDock.tsx
+++ b/packages/client/ui-conversation/src/client/queue/QueueDock.tsx
@@ -73,7 +73,7 @@ export function QueueDock({ useSession, updateQueue, notify, t }: QueueDockProps
  }

  return (
-    <div className={css.dock}>
+    <div className={css.dock} data-queue-dock="">
      <div className={css.panel}>
        {queue.length > 1 && (
          <button
--- a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
@@ -133,6 +133,12 @@
  --dsh-composer-stack-gap: 6px;
  --dsh-queue-composer-overlap: 5px;

+  /* InputBar and dock registrants derive their horizontal geometry from the
+     same card width, outer clearance, and dock inset. */
+  --dsh-composer-card-max-width: 800px;
+  --dsh-composer-side-clearance: 32px;
+  --dsh-composer-dock-inset: 12px;
+
  display: flex;
  flex-direction: column;
  gap: var(--dsh-composer-stack-gap);
--- a/packages/client/ui-conversation/src/client/skeleton/DetailsPanel.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/DetailsPanel.module.css
@@ -101,8 +101,15 @@
  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 or diff) sits directly under its section label, so it
+   drops the primitive's standalone vertical margin; the section owns the
+   spacing. Card-neutral: no terminal- or diff-specific value. */
+.cardBody {
+  margin: 0;
+}
+
+/* Same rule for the web card: it sits under the section label, so the section
+   owns the spacing rather than the primitive's own vertical margin. */
+.web {
  margin: 0;
 }
--- a/packages/client/ui-conversation/src/client/skeleton/DetailsPanel.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/DetailsPanel.tsx
@@ -7,11 +7,13 @@
 // 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, 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 { diffCardModel } from '../contract/diff-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'

@@ -127,8 +129,11 @@ 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 diff-card call — a
+ * write/edit's applied change — renders through the shared DiffBlock at the same
+ * full height. 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.
@@ -144,7 +149,27 @@ function OutputBody({ material, cwd, t }: { material: CallMaterial; cwd: string
        {terminal.description !== undefined && (
          <div className={css.terminalDescription}>{terminal.description}</div>
        )}
-        <TerminalBlock {...terminal.card} labels={terminalBlockLabels(t)} className={css.terminal} />
+        <TerminalBlock {...terminal.card} labels={terminalBlockLabels(t)} className={css.cardBody} />
+      </>
+    )
+  }
+  const diff = diffCardModel(material.block)
+  if (diff !== null) return <DiffBlock {...diff.card} className={css.cardBody} />
+  const web = webCardModel(material.block)
+  // Full source-list allowance here (the panel is the single-call reading
+  // surface); the chat rows cap it at CHAT_WEB_MAX_SOURCES. 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/packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css
+++ b/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;
 }

--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
@@ -23,7 +23,7 @@
  /* figma Input_Bottom: pad L32/R32/B8; 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 32px 8px;
+  padding: 0 var(--dsh-composer-side-clearance) 8px;
 }

 .hero {
@@ -33,7 +33,7 @@
 .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 +48,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 +69,7 @@
 }

 .card {
+  box-sizing: border-box;
  position: relative; /* overlay anchor positioning context */
  display: flex;
  flex-direction: column;
@@ -76,7 +77,7 @@
     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
@@ -192,6 +193,18 @@
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
+  /* These three MUST wrap at one width, because InputBar mirrors a single
+     scroll offset between .input and .backdrop and a layer that wraps onto
+     more lines is taller, has a larger scroll maximum, and clamps the mirrored
+     offset below the caret. Only .input scrolls, so only .input can lose
+     content width to a scrollbar that consumes layout space.
+     `scrollbar-gutter: stable` here does NOT buy that guarantee and was
+     removed after measuring: WebKit applies it to overflow-y:auto but not to
+     the overflow:hidden layers, so it left .input at 768 against 776 — the
+     same gap it was meant to close — while costing chromium 8px of text width
+     unconditionally. The gap it would have closed is measured and recorded in
+     the Agent Note (2026-07-31-composer-glyph-layer-tracks-the-textarea);
+     closing it needs one geometry every engine agrees on, not this property. */
 }

 /* figma 34:10434: #ADB2B8 light / #81858C dark — the caption pair exactly. */
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
@@ -62,6 +62,7 @@ export function InputBar({
  const draft = input?.draft ?? ''
  const empty = draft.trim() === ''
  const inputRef = useRef<HTMLTextAreaElement | null>(null)
+  const backdropRef = 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)
@@ -91,11 +92,22 @@ export function InputBar({
    if (!locked) inputRef.current?.focus()
  }, [locked, sessionId])

-  // Active conversation scrollport: chain the wheel. While the textarea (capped
-  // at 14 lines with overflow-y:auto) can still move in this direction, keep
-  // the native scroll; only at its own edge forward delta to the host so a
-  // short draft never traps the gesture and a long draft stays scrollable.
-  // Hero mounts have no host and keep native wheel scrolling.
+  // Two DOM listeners on the textarea, one lifetime (it is never unmounted —
+  // the inert state renders the same element disabled).
+  //
+  // wheel — active conversation scrollport: chain the gesture. While the
+  // textarea (capped at 14 lines with overflow-y:auto) can still move in this
+  // direction, keep the native scroll; only at its own edge forward delta to
+  // the host so a short draft never traps the gesture and a long draft stays
+  // scrollable. Hero mounts have no host and keep native wheel scrolling.
+  //
+  // scroll — the backdrop paints every visible glyph (the textarea's own text
+  // is transparent) but is clipped, not scrolled, so it does not follow the
+  // textarea on its own: without this mirror a draft past the cap moves the
+  // caret while the words stay frozen in place. Every way the box moves ends
+  // in a `scroll` event, edits included (the caret is scrolled into view), and
+  // the layers share an extent, so a draft that shrinks past the offset clamps
+  // both to the same maximum — one listener covers the coupling.
  useEffect(() => {
    const el = inputRef.current
    if (el === null) return
@@ -108,8 +120,16 @@ export function InputBar({
      e.preventDefault()
      host.scrollTop += e.deltaY
    }
+    const onScroll = (): void => {
+      const backdropEl = backdropRef.current
+      if (backdropEl !== null) backdropEl.scrollTop = el.scrollTop
+    }
    el.addEventListener('wheel', onWheel, { passive: false })
-    return () => { el.removeEventListener('wheel', onWheel) }
+    el.addEventListener('scroll', onScroll, { passive: true })
+    return () => {
+      el.removeEventListener('wheel', onWheel)
+      el.removeEventListener('scroll', onScroll)
+    }
  }, [])

  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
@@ -279,7 +299,7 @@ export function InputBar({
  // or while the command face is absent with the session).
  const accessSelect: ReactNode = command === undefined
    ? null
-    : <PermissionSelect value={permissions} locked={locked} command={command} t={t} />
+    : <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
@@ -355,6 +375,22 @@ export function InputBar({
      const displayHint = translated !== hintKey ? translated : deco.hint
      backdrop.push(<span key="hint" className={css.hint} data-decoration="hint">{displayHint}</span>)
    }
+    // Trailing-line sentinel, the same one the mirror div carries and for the
+    // same reason: a textarea reserves a line box for the caret after a final
+    // newline, while `white-space: pre-wrap` collapses a text node's trailing
+    // newline and generates none. Without it a draft ending in a newline makes
+    // the backdrop exactly one line SHORTER than the textarea, so mirroring the
+    // offset at the very bottom clamps and the glyphs sit a line behind the
+    // caret. The extra newline is absorbed by that same collapse when the draft
+    // does not end in one, so it costs no height in the ordinary case.
+    //
+    // The mirror only fails one way — a backdrop SHORTER than the textarea
+    // clamps the assignment, while a taller one takes every offset exactly and
+    // hides the surplus below the clip. That is why the ghost hint needs no
+    // handling of its own: it can only add content after the draft and before
+    // this sentinel, never remove a line box, so it moves the pair to equal or
+    // to the safe side.
+    backdrop.push('\n')
  }

  return (
@@ -376,7 +412,7 @@ export function InputBar({
            (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>
+          <div ref={backdropRef} aria-hidden className={css.backdrop} data-input-backdrop>{backdrop}</div>
          <textarea
            ref={inputRef}
            className={css.input}
--- a/packages/client/ui-conversation/src/client/skeleton/PermissionSelect.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/PermissionSelect.tsx
@@ -1,21 +1,28 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import type { PermissionSelect as PermissionSelectValue } from '@deepseek-ai/dsh-permission/client'
-import { Menu } from '@deepseek-ai/dsh-client-ui-primitives'
+import { 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'
+
 /**
 * Display transform: kebab-case machine names render as title-case labels
 * (`workspace-write` → `Workspace Write`); non-kebab host-configured names
- * pass through. Twin of the /permission popup's (client ui-permission) — the
- * two permission surfaces must show the same text.
+ * 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(' ')
 }

+function optionLabel(option: PermissionSelectValue['options'][number]): string {
+  return option.value === FULL_ACCESS ? 'Full access' : displayName(option.name)
+}
+
 export interface PermissionSelectProps {
  value: PermissionSelectValue | undefined
  locked: boolean
@@ -27,49 +34,94 @@ export interface PermissionSelectProps {
 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
+  const busy = pick !== null || confirmation !== null

  const items: MenuEntry[] = value.options
    .filter(o => o.value !== 'custom')
-    .map(option => ({ id: option.value, label: displayName(option.name) }))
+    .map(option => ({ id: option.value, label: optionLabel(option) }))

-  const choose = (id: string): void => {
-    setOpen(false)
-    if (id === value.currentValue) return
+  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 (
-    <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: displayName(current?.name ?? currentValue) })}
-          title={current?.description}
-          disabled={locked || busy}
-          onClick={() => { setOpen(!open) }}
-        >
-          <span className={css.triggerLabel}>{displayName(current?.name ?? currentValue)}</span>
-          <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>
-        </button>
-      }
-    />
+    <>
+      <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) }}
+          >
+            <span className={css.triggerLabel}>{current === undefined ? displayName(currentValue) : optionLabel(current)}</span>
+            <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>
+          </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}
+      />
+    </>
  )
 }
--- a/packages/client/ui-conversation/src/client/skeleton/TodoPanel.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/TodoPanel.module.css
@@ -1,13 +1,24 @@
 /* Todo strip in the composer context stack (Figma 9:959): tip surface,
-   14px radius, status icons + secondary item labels. */
+   14px radius, status icons + secondary item labels. It shares the composer
+   card geometry and adds the dock inset on both sides. */

 .root {
  box-sizing: border-box;
  flex: none;
  overflow: hidden;
  margin: 0 auto;
-  width: calc(100% - 88px);
-  max-width: 752px;
+  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)
+  );
  border: 1px solid var(--dsw-alias-border-l1);
  border-radius: 14px;
  background: var(--dsw-specific-tip);
--- a/packages/client/ui-conversation/src/client/toolviews/file-mutation-row.module.css
+++ b/packages/client/ui-conversation/src/client/toolviews/file-mutation-row.module.css
@@ -0,0 +1,130 @@
+/* File-mutation toolview: same geometry/tokens as ToolRow (figma
+   {Edit,Write} · path), plus the diff card the row stacks under its summary
+   line. Mirrors bash-sample.module.css, whose terminal card this replaces with
+   a diff card. */
+
+/* Summary line over the diff card; the summary row keeps its own 24px height,
+   so the card is a column around it rather than a change to it. */
+.card {
+  display: flex;
+  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. */
+.diff {
+  margin: 4px 0 4px 22px;
+}
+
+.root {
+  position: relative; /* sweep-glare overlay anchor */
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  min-width: 0;
+}
+
+/* Running sweep glare — same deepsuite ShimmerText pattern as ToolRow. */
+.root[data-state='running']::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 300px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--dsw-alias-bg-base) 60%, transparent) 55%,
+    transparent 100%
+  );
+  animation: dsh-file-mutation-row-sweep 2.6s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes dsh-file-mutation-row-sweep {
+  0% { left: -300px; }
+  90%, 100% { left: 100%; }
+}
+
+.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;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.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);
+}
+
+/* File-tool path: same geometry as .summary; hover underline + pointer. */
+.fileLink {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  text-align: left;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+}
+
+.fileLink:hover {
+  text-decoration: underline;
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* The result text for an errored mutation, indented to the card's own column
+   (the diff card's inset) and in the error tone, since it stands in for the diff
+   card the failure path does not produce. */
+.failure {
+  margin: 4px 0 4px 22px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font: var(--dsw-font-xs-13);
+  color: var(--dsw-alias-state-error-primary);
+}
--- a/packages/client/ui-conversation/src/client/toolviews/file-mutation-row.tsx
+++ b/packages/client/ui-conversation/src/client/toolviews/file-mutation-row.tsx
@@ -0,0 +1,123 @@
+// File-mutation toolview registrant: third-party posture over the keyed
+// toolview hole (ctx.slots.register + ToolRowProps only — never imports the
+// chat domain), registered under both `edit` and `write`. Product chrome
+// matches ToolRow (figma: {Edit,Write} · {path}).
+//
+// A write/edit call declares the diff render intent, so this row renders the
+// applied change through DiffBlock resident below its summary line — the same
+// posture BashRow gives a terminal card. The row has no expand control and is
+// not a details-panel target (tool rows stopped being one), so the diff body
+// is resident rather than expand-gated, and the card's own copy and expand
+// controls are the row's only interactions. CHAT_DIFF_MAX_LINES caps the body
+// against the message flow; the details panel keeps the block's full default.
+// The summary stays a path link (the file-tool interaction) that opens through
+// the host.
+
+import type { Context } from 'cordis'
+import { DiffBlock, IconEditOutline16, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ToolRowProps } from '../contract/slots.ts'
+import { CHAT_DIFF_MAX_LINES, diffCardModel } from '../contract/diff-card-model.ts'
+import { toolRowModel, type ToolRowState } from '../contract/tool-call-model.ts'
+import css from './file-mutation-row.module.css'
+
+function leadingFor(state: ToolRowState) {
+  switch (state) {
+    case 'error': return <StateDot state="error" />
+    case 'stopped': return <StateDot state="warning" />
+    // Running keeps the icon — the row sweep carries the in-flight signal.
+    default: return <IconEditOutline16 size={14} />
+  }
+}
+
+/** Visually hidden status — StateDot is aria-hidden; AT needs a text label. */
+function stateStatus(state: ToolRowState): string | null {
+  switch (state) {
+    case 'running': return '运行中'
+    case 'error': return '失败'
+    case 'stopped': return '已停止'
+    default: return null
+  }
+}
+
+/**
+ * A settled result's text, flattened from its content blocks, for the arm that
+ * shows a failure the diff card cannot: write/edit return `undefined` from
+ * `presentResult` on `result.isError`, so an errored mutation has no diff card,
+ * and the keyed row is not a details-panel target. Without this the failure —
+ * an `old_string` that did not match, a permission denial — would read as a bare
+ * red dot with the model-facing error text nowhere on screen.
+ * @param block - the frozen call slice.
+ * @returns the result text, or null for a running call or an empty result.
+ */
+function errorText(block: ToolRowProps['block']): string | null {
+  if (!('kind' in block)) return null
+  const parts: string[] = []
+  for (const item of block.content) {
+    if (item.type === 'text') parts.push(item.text)
+  }
+  if (parts.length === 0 && block.error !== undefined) parts.push(`${block.error.name}: ${block.error.code}`)
+  const text = parts.join('\n')
+  return text === '' ? null : text
+}
+
+/**
+ * File-mutation row: icon + {Edit,Write} · {path} in the shared ToolRow chrome,
+ * with the applied diff resident below it. 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. The card's copy and expand
+ * controls are the row's only other actions.
+ */
+export function FileMutationRow({ toolName, block, cwd, openFile }: ToolRowProps) {
+  const model = toolRowModel(toolName, block, cwd)
+  const diff = diffCardModel(block)
+  const status = stateStatus(model.state)
+  const filePath = model.filePath
+  // An errored mutation has no diff card (presentResult returns undefined on
+  // isError); surface its result text so the failure is more than a red dot.
+  const failure = diff === null && model.state === 'error' ? errorText(block) : null
+  return (
+    <div className={css.card}>
+      <div className={css.root} data-variant={model.variant} data-state={model.state}>
+        <span className={css.leading}>{leadingFor(model.state)}</span>
+        {status !== null && <span className={css.visuallyHidden}>{status}</span>}
+        <span className={css.title}>{model.title}</span>
+        <span className={css.sep} aria-hidden />
+        {filePath !== undefined ? (
+          <button
+            type="button"
+            className={css.fileLink}
+            onClick={() => { openFile(filePath) }}
+          >
+            {model.summary}
+          </button>
+        ) : (
+          <span className={css.summary}>{model.summary}</span>
+        )}
+      </div>
+      {diff !== null && (
+        <DiffBlock {...diff.card} maxLines={CHAT_DIFF_MAX_LINES} className={css.diff} />
+      )}
+      {failure !== null && <div className={css.failure}>{failure}</div>}
+    </div>
+  )
+}
+
+/**
+ * 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' }, FileMutationRow)
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'write' }, FileMutationRow)
+  },
+}
--- a/packages/client/ui-conversation/src/client/toolviews/web-row.module.css
+++ b/packages/client/ui-conversation/src/client/toolviews/web-row.module.css
@@ -0,0 +1,95 @@
+/* Web toolview: same geometry/tokens as ToolRow (figma icon · summary), plus
+   the web card the row stacks under its summary line, mirroring the bash row's
+   resident terminal card. */
+
+/* Summary line over the web card; the summary row keeps its own 24px height,
+   so the card is a column around it rather than a change to it. */
+.card {
+  display: flex;
+  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. */
+.web {
+  margin: 4px 0 4px 22px;
+}
+
+.root {
+  position: relative; /* sweep-glare overlay anchor */
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  min-width: 0;
+}
+
+/* Running sweep glare — same deepsuite ShimmerText pattern as ToolRow. */
+.root[data-state='running']::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 300px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--dsw-alias-bg-base) 60%, transparent) 55%,
+    transparent 100%
+  );
+  animation: dsh-web-row-sweep 2.6s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes dsh-web-row-sweep {
+  0% { left: -300px; }
+  90%, 100% { left: 100%; }
+}
+
+.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;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.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);
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
--- a/packages/client/ui-conversation/src/client/toolviews/web-row.tsx
+++ b/packages/client/ui-conversation/src/client/toolviews/web-row.tsx
@@ -0,0 +1,92 @@
+// Web toolview registrant: third-party posture over the keyed toolview hole
+// (ctx.slots.register + ToolRowProps only — never imports the chat domain).
+// Registered under BOTH web_search and web_fetch, 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.
+//
+// A web tool declares the `web` render intent at result time, so this row
+// renders the completed retrieval through WebBlock resident below its summary,
+// the same posture BashRow uses for the terminal card: no expand control on the
+// row itself, not a details-panel target, and the block's own expander keeps a
+// long source list from taking over the message flow (CHAT_WEB_MAX_SOURCES is
+// passed as maxSources — the chat flow's tighter cap over the block's default
+// of 16). 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, StateDot, WebBlock } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ToolRowProps } from '../contract/slots.ts'
+import { CHAT_WEB_MAX_SOURCES, webCardModel } from '../contract/web-card-model.ts'
+import { toolRowModel, type ToolRowState } from '../contract/tool-call-model.ts'
+import css from './web-row.module.css'
+
+/** web_fetch reads one URL; web_search queries. Titles are figma literals. */
+const WEB_TITLES: Record<string, string> = {
+  web_search: 'Search',
+  web_fetch: 'Fetch',
+}
+
+/** Leading icon per tool, yielding to the state semantic while failed/stopped. */
+function leadingFor(toolName: string, state: ToolRowState) {
+  switch (state) {
+    case 'error': return <StateDot state="error" />
+    case 'stopped': return <StateDot state="warning" />
+    // Running keeps the icon — the row sweep carries the in-flight signal.
+    default: return toolName === 'web_fetch' ? <IconBrowseOutline16 size={14} /> : <IconSearchOutline16 size={14} />
+  }
+}
+
+/** Visually hidden status — StateDot is aria-hidden; AT needs a text label. */
+function stateStatus(state: ToolRowState): string | null {
+  switch (state) {
+    case 'running': return '运行中'
+    case 'error': return '失败'
+    case 'stopped': return '已停止'
+    default: return null
+  }
+}
+
+/**
+ * Web row: icon + Search/Fetch · {summary} in the shared ToolRow chrome, with
+ * the completed retrieval's web card resident below it. The summary row is not
+ * a details-panel control (tool rows stopped being one), so the card's own
+ * links and expander are the row's only interactions.
+ */
+export function WebRow({ toolName, block }: ToolRowProps) {
+  const model = toolRowModel(toolName, block)
+  const web = webCardModel(block)
+  const status = stateStatus(model.state)
+  return (
+    <div className={css.card}>
+      <div className={css.root} data-variant="web" data-tool={toolName} data-state={model.state}>
+        <span className={css.leading}>{leadingFor(toolName, model.state)}</span>
+        {status !== null && <span className={css.visuallyHidden}>{status}</span>}
+        <span className={css.title}>{WEB_TITLES[toolName] ?? model.title}</span>
+        <span className={css.sep} aria-hidden />
+        <span className={css.summary}>{model.summary}</span>
+      </div>
+      {web !== null && (
+        <WebBlock {...web} maxSources={CHAT_WEB_MAX_SOURCES} className={css.web} />
+      )}
+    </div>
+  )
+}
+
+/**
+ * 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' }, WebRow)
+    ctx.slots.register({ name: 'conversation.chat.toolview', key: 'web_fetch' }, WebRow)
+  },
+}