Merge pinned master into status bar token metrics

packages/client/ui-conversation/tests/chat-apply.spec.tsx

@@ -84,12 +84,14 @@ describe('apply wiring', () => {
     await b.runtime.dispose()
   })
 
-  it('mounts the bash sample and the product rows as keyed entries through the load-order seam', async () => {
+  it('mounts the bash sample, the file-mutation rows, the web rows, and the product rows as keyed entries through the load-order seam', async () => {
     const b = await bench()
     // Every registrant plugin's inject: ['slots', 'conversation'] resolved — the
-    // service being present implies the chat entry declared the hole first.
+    // service being present implies the chat entry declared the hole first. The
+    // file-mutation registrant claims both write and edit for the diff card; the
+    // web rows register one component under both web tool names.
     const entries = b.slots.entries('conversation.chat.toolview')
-    expect(entries.map(e => e.options.key)).toEqual(['bash', 'todo_write', 'ask_user_question'])
+    expect(entries.map(e => e.options.key)).toEqual(['bash', 'edit', 'write', 'web_search', 'web_fetch', 'todo_write', 'ask_user_question'])
     // Stats stick with the composer (not inside ChatView).
     expect(b.slots.entries('conversation.composer.dock').map(e => e.options.id)).toEqual(['stats'])
     await b.runtime.dispose()

packages/client/ui-conversation/tests/chat-branch-tails.spec.tsx

@@ -18,7 +18,10 @@ import { AssistantMarkdown } from '../src/client/chat/AssistantMarkdown.tsx'
 import { StatsLine, type StatsLineProps } from '../src/client/chat/StatsLine.tsx'
 import { zh } from '../src/client/locales.ts'
 
-afterEach(cleanup)
+afterEach(() => {
+  cleanup()
+  vi.useRealTimers()
+})
 
 // Mirrors the real lookup chain (conversation namespace, then common).
 const t: MessageItemProps['t'] = makeTranslate(zh, commonZh)
@@ -160,6 +163,157 @@ describe('MessageItem arms', () => {
     )
     expect(unknownView.getByText(/未知 surface 事件：surface\/next/)).toBeTruthy()
   })
+
+  it('collapses retry details behind the durable model retry status', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(10_000)
+    const view = render(
+      <MessageItem
+        t={t}
+        retryActive
+        node={{
+          kind: 'model-retry',
+          seq: 5,
+          time: 10_000,
+          retryState: 'scheduled',
+          turn: 1,
+          step: 0,
+          provider: 'mock',
+          mode: 'normal',
+          policyKey: 'mock-normal',
+          retry: 1,
+          maxRetries: 2,
+          delayMs: 2_500.4,
+          failure: { code: 'TRANSPORT', message: '连接被重置' },
+        }}
+      />,
+    )
+    const details = view.container.querySelector('details')
+    const summary = view.container.querySelector('summary')
+    expect(details?.open).toBe(false)
+    expect(details?.dataset.active).toBe('true')
+    expect(view.getByRole('status').textContent).toBe('正在重试模型请求（1/2） · 3s')
+    expect(view.getByText('重试延迟：').parentElement?.textContent).toBe('重试延迟：2500ms')
+    expect(view.getByText('失败原因：').parentElement?.textContent).toBe('失败原因：连接被重置')
+
+    act(() => { vi.advanceTimersByTime(1_100) })
+    expect(view.getByRole('status').textContent).toBe('正在重试模型请求（1/2） · 2s')
+    act(() => { vi.advanceTimersByTime(1_000) })
+    expect(view.getByRole('status').textContent).toBe('正在重试模型请求（1/2） · 1s')
+
+    view.rerender(
+      <MessageItem
+        t={t}
+        retryActive
+        node={{
+          kind: 'model-retry',
+          seq: 6,
+          time: 12_100,
+          retryState: 'scheduled',
+          turn: 2,
+          step: 0,
+          provider: 'mock',
+          mode: 'normal',
+          policyKey: 'mock-normal',
+          retry: 2,
+          maxRetries: 2,
+          delayMs: 3_500.4,
+          failure: { code: 'TRANSPORT', message: '再次断开' },
+        }}
+      />,
+    )
+    expect(view.getByRole('status').textContent).toBe('正在重试模型请求（2/2） · 4s')
+
+    if (summary === null) throw new Error('retry summary missing')
+    fireEvent.click(summary)
+    expect(details?.open).toBe(true)
+
+    view.rerender(
+      <MessageItem t={t} node={{
+        kind: 'model-retry',
+        seq: 6,
+        time: 12_100,
+        retryState: 'started',
+        turn: 2,
+        step: 0,
+        provider: 'mock',
+        mode: 'normal',
+        policyKey: 'mock-normal',
+        retry: 2,
+        maxRetries: 2,
+        delayMs: 3_500.4,
+        failure: { code: 'TRANSPORT', message: '再次断开' },
+      }}
+      />,
+    )
+    expect(details?.dataset.active).toBeUndefined()
+    expect(view.getByRole('status').textContent).toBe('已重试模型请求（2/2） · 4s')
+
+    view.rerender(
+      <MessageItem t={t} node={{
+        kind: 'model-retry',
+        seq: 7,
+        time: 12_100,
+        retryState: 'started',
+        turn: 3,
+        step: 0,
+        provider: 'mock',
+        mode: 'always',
+        policyKey: 'mock-always',
+        retry: 3,
+        delayMs: 3_500.4,
+        failure: { code: 'TRANSPORT', message: '继续重试' },
+      }}
+      />,
+    )
+    expect(view.getByRole('status').textContent).toBe('已重试模型请求（3/∞） · 4s')
+
+    view.rerender(
+      <MessageItem t={t} node={{
+        kind: 'model-retry',
+        seq: 8,
+        time: 12_100,
+        retryState: 'cancelled',
+        turn: 4,
+        step: 0,
+        provider: 'mock',
+        mode: 'normal',
+        policyKey: 'mock-normal',
+        retry: 1,
+        maxRetries: 2,
+        delayMs: 3_500.4,
+        failure: { code: 'TRANSPORT', message: '用户取消' },
+      }}
+      />,
+    )
+    expect(view.getByRole('status').textContent).toBe('模型请求重试已取消（1/2） · 4s')
+  })
+
+  it('synchronizes the countdown when an inactive retry becomes active at the one-second floor', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(10_000)
+    const node = {
+      kind: 'model-retry',
+      seq: 5,
+      time: 10_000,
+      retryState: 'scheduled',
+      turn: 1,
+      step: 0,
+      provider: 'mock',
+      mode: 'normal',
+      policyKey: 'mock-normal',
+      retry: 1,
+      maxRetries: 2,
+      delayMs: 5_000,
+      failure: { code: 'TRANSPORT', message: '连接被重置' },
+    } as const
+    const view = render(<MessageItem t={t} node={node} />)
+    expect(view.getByRole('status').textContent).toBe('等待重试模型请求（1/2） · 5s')
+
+    act(() => { vi.advanceTimersByTime(4_200) })
+    view.rerender(<MessageItem t={t} node={node} retryActive />)
+    expect(view.getByRole('status').textContent).toBe('正在重试模型请求（1/2） · 1s')
+  })
 })
 
 describe('formatMessageClock', () => {

packages/client/ui-conversation/tests/chat-code-subcalls.spec.tsx

@@ -128,7 +128,7 @@ async function bench(snapshot: ConversationSnapshot) {
   ctx.provide('sessions', sessionsFake)
   const workspaces = {
     list: createSnapshotStore<WorkspaceListState>({
-      items: [], state: 'idle', phase: 'ready', error: null,
+      items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null,
       baselinesReady: true, recentWorkspaceId: undefined,
     }),
     startSession: vi.fn(),

packages/client/ui-conversation/tests/chat-view.spec.tsx

@@ -5,10 +5,11 @@
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Profiler } from 'react'
-import { act, cleanup, fireEvent, render } from '@testing-library/react'
+import { act, cleanup, fireEvent, render, within } from '@testing-library/react'
 import type {
-  AssistantMessageNode, CommandNode, ConversationNode, ConversationSnapshot, RunningToolCall, SessionId,
-  SessionListState, ToolResultNode, UserMessageNode, WorkspaceListState,
+  AssistantMessageNode, CommandNode, ConversationNode, ConversationSnapshot,
+  ModelRetryNode, RunningToolCall, SessionId, SessionListState, ToolResultNode,
+  UserMessageNode, WorkspaceListState,
 } from '@deepseek-ai/dsh-client-runtime/client'
 import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react'
 import { createSnapshotStore, PendingWait } from '@deepseek-ai/dsh-client-runtime/client'
@@ -67,6 +68,13 @@ const user = (seq: number, text: string): UserMessageNode => ({
 const assistant = (seq: number, text: string, turn = 1): AssistantMessageNode => ({
   kind: 'assistant', seq, time: seq * 1_000, turn, step: 1, blocks: [{ kind: 'text', text }],
 })
+const retry = (seq: number): ModelRetryNode => ({
+  kind: 'model-retry', seq, time: seq * 1_000, turn: 1, step: 0,
+  retryState: 'scheduled',
+  provider: 'mock', mode: 'normal', policyKey: 'mock-normal',
+  retry: 1, maxRetries: 2, delayMs: 450,
+  failure: { code: 'TRANSPORT', message: '连接被重置' },
+})
 const toolResult = (seq: number, callId: string, name = 'bash'): ToolResultNode => ({
   kind: 'tool-result', seq, time: seq * 1_000, callId,
   call: { name, argsRaw: `{"command":"cmd-${callId}","description":"run ${callId}"}` },
@@ -86,7 +94,7 @@ function emptySessions() {
 
 function emptyWorkspaces() {
   const store = createSnapshotStore<WorkspaceListState>({
-    items: [], state: 'idle', phase: 'ready', error: null,
+    items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null,
     baselinesReady: true, recentWorkspaceId: undefined,
   })
   return bindSnapshotSelector(store)
@@ -155,6 +163,17 @@ describe('chat-flow derivation', () => {
     expect(flowKeys(deriveChatFlow([...nodes, toolResult(7, 'd')]))).toBe('n1|n2|g3|n5|g6')
   })
 
+  it('reuses one stable row for consecutive retry turns', () => {
+    const first = retry(2)
+    const second = { ...retry(3), turn: 2, retry: 2 }
+    const initial = deriveChatFlow([user(1, 'try'), first])
+    const updated = deriveChatFlow([user(1, 'try'), first, second])
+    expect(flowKeys(initial)).toBe('n1|n2')
+    expect(flowKeys(updated)).toBe('n1|n2')
+    expect(updated).toHaveLength(2)
+    expect(updated[1]?.kind === 'node' && updated[1].node).toBe(second)
+  })
+
   it('skips render-nothing assistant nodes so tool runs stay one group', () => {
     // A tool-call-only step message (and blank text/reasoning) renders nothing:
     // it must not split the run into two groups with an empty line between.
@@ -227,6 +246,48 @@ describe('ChatView', () => {
     expect(view.getByText('run a')).toBeTruthy()
   })
 
+  it('animates only the latest unresolved model retry', () => {
+    const retryNode = retry(2)
+    const nextRetry = { ...retry(3), turn: 2, retry: 2 }
+    const context = {
+      kind: 'context', seq: 4, time: 4_000, content: [], source: null,
+    } as const satisfies ConversationNode
+    const h = makeHarness({ nodes: [user(1, 'try'), retryNode], running: true })
+    const view = render(<h.ChatView {...h.props} />)
+    const disclosure = view.container.querySelector('details') as HTMLDetailsElement
+    expect(disclosure.dataset.active).toBe('true')
+    expect(within(disclosure).getByRole('status').textContent).toBe('正在重试模型请求（1/2） · 1s')
+
+    act(() => {
+      h.set({ nodes: [user(1, 'try'), retryNode, nextRetry] })
+    })
+    expect(within(disclosure).getAllByRole('status')).toHaveLength(1)
+    expect(view.container.querySelector('details')).toBe(disclosure)
+    expect(within(disclosure).getByRole('status').textContent).toBe('正在重试模型请求（2/2） · 1s')
+
+    act(() => {
+      h.set({
+        nodes: [
+          user(1, 'try'),
+          retryNode,
+          { ...nextRetry, retryState: 'started' },
+          context,
+          assistant(5, 'done'),
+        ],
+        running: false,
+      })
+    })
+    expect(disclosure.dataset.active).toBeUndefined()
+    expect(within(disclosure).getByRole('status').textContent).toBe('已重试模型请求（2/2） · 1s')
+
+    act(() => {
+      h.set({ nodes: [user(1, 'try'), { ...retry(6), retryState: 'cancelled' }], running: true })
+    })
+    const cancelledDisclosure = view.container.querySelector('details') as HTMLDetailsElement
+    expect(cancelledDisclosure.dataset.active).toBeUndefined()
+    expect(within(cancelledDisclosure).getByRole('status').textContent).toContain('重试已取消')
+  })
+
   it('the expanded row Inspect pill hands the call id to inspectCall', () => {
     const h = makeHarness({
       nodes: [toolResult(3, 'a')],
@@ -388,6 +449,7 @@ describe('ChatView', () => {
     const view = render(<h.ChatView {...h.props} />)
     expect(view.container.querySelector('[data-state="running"]')).not.toBeNull()
     expect(view.getByText('cmd-r1')).toBeTruthy()
+    expect(view.getByRole('status').textContent).toBe('Deep diving...')
   })
 
   it('dispatches each tool row through the keyed slot with the tool name as entryKey', () => {

packages/client/ui-conversation/tests/diff-card.spec.tsx

@@ -0,0 +1,344 @@
+// @vitest-environment jsdom
+// The diff render intent on the web side: the pure diffCardModel derivation
+// over callView/resultView, and both conversation render sites that consume it
+// — the chat tool row's expanded body (GenericToolCard / FileMutationRow) and
+// the details panel's Output section.
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render } from '@testing-library/react'
+import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react'
+import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import type {
+  ConversationSnapshot, RunningToolCall, SessionId, SessionListState, ToolResultNode, WorkspaceListState,
+} from '@deepseek-ai/dsh-client-runtime/client'
+import type { ToolCallView, ToolResultView } from '@deepseek-ai/dsh-client-connection/client'
+import type { SelectionTarget, ToolRowProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
+import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime'
+import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts'
+import { CHAT_DIFF_MAX_LINES, diffCardModel } from '../src/client/contract/diff-card-model.ts'
+import { createChatStore } from '../src/client/stores.ts'
+import { GenericToolCard, type GenericToolCardProps } from '../src/client/chat/GenericToolCard.tsx'
+import { DetailsPanel } from '../src/client/skeleton/DetailsPanel.tsx'
+import { FileMutationRow, fileMutationToolview } from '../src/client/toolviews/file-mutation-row.tsx'
+import { zh } from '../src/client/locales.ts'
+
+afterEach(cleanup)
+
+const SID = 's1' as SessionId
+
+const t = makeTranslate(zh, commonZh)
+
+const ARGS = '{"file_path":"notes/demo.txt","old_string":"hello","new_string":"hello fixture"}'
+
+/** The edit tool's own call view (a call-time diff derived from the arguments). */
+const callDiff = (over?: Partial<Extract<ToolCallView, { card: 'diff' }>>): ToolCallView => ({
+  card: 'diff', title: 'Edit notes/demo.txt',
+  diffs: [{ path: 'notes/demo.txt', oldText: 'hello', newText: 'hello fixture' }], ...over,
+})
+
+/** The edit tool's own result view (the applied hunk diff). */
+const resultDiff = (over?: Partial<Extract<ToolResultView, { card: 'diff' }>>): ToolResultView => ({
+  card: 'diff', title: 'Edit notes/demo.txt',
+  diffs: [{ path: 'notes/demo.txt', oldText: 'hello', newText: 'hello fixture' }], ...over,
+})
+
+const running = (over?: Partial<RunningToolCall>): RunningToolCall => ({
+  callId: 'c1', name: 'edit', argsRaw: ARGS,
+  turn: 1, step: 1, time: 1_000, callView: callDiff(), ...over,
+})
+
+const settled = (over?: Partial<ToolResultNode>): ToolResultNode => ({
+  kind: 'tool-result', seq: 10, time: 2_000, callId: 'c1',
+  call: { name: 'edit', argsRaw: ARGS },
+  callTime: 1_000,
+  content: [{ type: 'text', text: 'The file notes/demo.txt has been updated successfully.' }], isError: false,
+  callView: callDiff(), resultView: resultDiff(), ...over,
+})
+
+describe('diffCardModel', () => {
+  it('derives a running card from the call view alone', () => {
+    expect(diffCardModel(running())).toEqual({
+      card: { diffs: [{ path: 'notes/demo.txt', oldText: 'hello', newText: 'hello fixture' }] },
+    })
+  })
+
+  it('derives a settled card from the result view, which replaces the call-time diff', () => {
+    // The applied hunks (result) win over the args-derived call diff.
+    expect(diffCardModel(settled({
+      resultView: resultDiff({ diffs: [{ path: 'notes/demo.txt', oldText: 'a', newText: 'b' }] }),
+    }))).toEqual({
+      card: { diffs: [{ path: 'notes/demo.txt', oldText: 'a', newText: 'b' }] },
+    })
+  })
+
+  it('renders a settled diff even when the window dropped the call head', () => {
+    // A truncated call carries only the result view, which holds the whole change.
+    expect(diffCardModel(settled({ call: null, callView: null }))?.card.diffs).toHaveLength(1)
+  })
+
+  it('returns null for every non-diff call: no views, generic views, unknown cards', () => {
+    expect(diffCardModel(running({ callView: null }))).toBeNull()
+    expect(diffCardModel(settled({ callView: null, resultView: null }))).toBeNull()
+    expect(diffCardModel(running({ callView: { card: 'generic', title: 'read x' } }))).toBeNull()
+    // A generic result settles a diff call on the generic path (write/edit's
+    // own execution-error arm).
+    expect(diffCardModel(settled({ resultView: { card: 'generic' } }))).toBeNull()
+    // A card tag this UI version does not know arrives over the wire; the
+    // documented generic-card default takes it, not a crash.
+    const future = { card: 'chart', title: 'plot' } as unknown as ToolCallView
+    expect(diffCardModel(running({ callView: future }))).toBeNull()
+    expect(diffCardModel(settled({
+      callView: future, resultView: { card: 'chart' } as unknown as ToolResultView,
+    }))).toBeNull()
+  })
+
+  it('falls back to null for a malformed diff payload off the wire', () => {
+    // toolEventViewSchema validates only the `card` string, so a version
+    // mismatch can deliver a diff card with an unusable diffs field. Each shape
+    // routes to the generic path instead of throwing inside DiffBlock.
+    const bad = (diffs: unknown): ToolResultView => ({ card: 'diff', diffs } as unknown as ToolResultView)
+    expect(diffCardModel(settled({ resultView: bad(undefined) }))).toBeNull()
+    expect(diffCardModel(settled({ resultView: bad([]) }))).toBeNull()
+    expect(diffCardModel(settled({ resultView: bad('nope') }))).toBeNull()
+    expect(diffCardModel(settled({ resultView: bad([null]) }))).toBeNull()
+    expect(diffCardModel(settled({ resultView: bad([{ path: 1, oldText: null, newText: 'x' }]) }))).toBeNull()
+    expect(diffCardModel(settled({ resultView: bad([{ path: 'a', oldText: 5, newText: 'x' }]) }))).toBeNull()
+    expect(diffCardModel(settled({ resultView: bad([{ path: 'a', oldText: null, newText: 9 }]) }))).toBeNull()
+    // The running side narrows identically.
+    expect(diffCardModel(running({ callView: { card: 'diff', diffs: 'nope' } as unknown as ToolCallView }))).toBeNull()
+  })
+})
+
+describe('chat row diff body', () => {
+  const ownerProps = (block: RunningToolCall | ToolResultNode): GenericToolCardProps => ({
+    callId: 'c1', toolName: 'edit', block, openFile: vi.fn(), t,
+  })
+
+  it('the expanded body is the applied diff, capped tighter than the panel', () => {
+    expect(CHAT_DIFF_MAX_LINES).toBeLessThan(16)
+    const view = render(<GenericToolCard {...ownerProps(settled())} />)
+    // Collapsed: the summary row (path) only, no diff body.
+    expect(view.queryByText('hello fixture')).toBeNull()
+    // The path link is not the expand control; the leading toggle is.
+    fireEvent.click(view.container.querySelector('[data-expandable]')!)
+    expect(view.container.querySelector('[data-diff]')).not.toBeNull()
+    expect(view.getByText('hello fixture')).toBeTruthy()
+  })
+
+  it('a running diff call expands to its intended change', () => {
+    const view = render(<GenericToolCard {...ownerProps(running())} />)
+    fireEvent.click(view.container.querySelector('[data-expandable]')!)
+    expect(view.container.querySelector('[data-diff]')).not.toBeNull()
+  })
+
+  it('a non-diff call keeps the args-JSON text body', () => {
+    // A non-file tool name so the row is not single-file (no path link), and its
+    // args body is the fallback the diff card must not have replaced.
+    const view = render(<GenericToolCard {...{
+      callId: 'c1', toolName: 'some_tool', openFile: vi.fn(), t,
+      block: settled({
+        call: { name: 'some_tool', argsRaw: '{"foo":"bar"}' },
+        callView: null, resultView: null,
+      }),
+    }} />)
+    fireEvent.click(view.container.querySelector('[data-expandable]')!)
+    expect(view.container.querySelector('[data-diff]')).toBeNull()
+    expect(view.getByText(/"foo"/)).toBeTruthy()
+  })
+})
+
+describe('FileMutationRow diff card', () => {
+  const list = () => createSnapshotStore<SessionListState>({
+    ids: [SID],
+    byId: { [SID]: { id: SID, displayTitle: 'r', running: false, blank: false, waitingApproval: false, updatedAt: 0, cwd: '/w/app' } },
+    current: SID,
+    phase: 'ready',
+  })
+
+  const rowProps = (block: RunningToolCall | ToolResultNode, toolName = 'edit'): ToolRowProps => ({
+    callId: 'c1', toolName, block, openFile: vi.fn(), cwd: '/w/app',
+    sessionId: SID, useSessions: bindSnapshotSelector(list()),
+  } as unknown as ToolRowProps)
+
+  it('renders the applied diff under the summary row, without an expand gesture', () => {
+    const view = render(<FileMutationRow {...rowProps(settled())} />)
+    // The diff card is resident (no expand toggle needed).
+    expect(view.container.querySelector('[data-diff]')).not.toBeNull()
+    expect(view.getByText('hello fixture')).toBeTruthy()
+    expect(view.getByText('复制')).toBeTruthy()
+  })
+
+  it('the summary is a path link that opens the tool path through the host', () => {
+    const openFile = vi.fn()
+    const view = render(<FileMutationRow {...{ ...rowProps(settled()), openFile }} />)
+    fireEvent.click(view.getByRole('button', { name: 'notes/demo.txt' }))
+    // The row passes the tool's own path; the injected openFile resolves it
+    // against the session cwd (apply.ts), so the row must not resolve twice.
+    expect(openFile).toHaveBeenCalledWith('notes/demo.txt')
+  })
+
+  it('registers under write too, rendering a create as an added-only diff', () => {
+    const writeArgs = '{"file_path":"notes/new.txt","content":"hello fixture\\n"}'
+    const view = render(<FileMutationRow {...rowProps(settled({
+      call: { name: 'write', argsRaw: writeArgs },
+      callView: { card: 'diff', title: 'Write notes/new.txt', diffs: [{ path: 'notes/new.txt', oldText: null, newText: 'hello fixture' }] },
+      resultView: { card: 'diff', title: 'Write notes/new.txt', diffs: [{ path: 'notes/new.txt', oldText: null, newText: 'hello fixture' }] },
+    }), 'write')} />)
+    expect(view.getByText('└ +1 -0 · 1 file')).toBeTruthy()
+  })
+
+  it('reflects the run state on its leading slot', () => {
+    const runningView = render(<FileMutationRow {...rowProps(running())} />)
+    expect(runningView.container.querySelector('[data-state="running"]')).not.toBeNull()
+    cleanup()
+    const errorView = render(<FileMutationRow {...rowProps(settled({ isError: true, resultView: null, callView: null }))} />)
+    expect(errorView.container.querySelector('[data-state="error"]')).not.toBeNull()
+  })
+
+  it('a mutation call with no diff view renders the summary row alone', () => {
+    const view = render(<FileMutationRow {...rowProps(settled({ callView: null, resultView: null }))} />)
+    expect(view.container.querySelector('[data-diff]')).toBeNull()
+  })
+
+  it('surfaces the result text when an errored mutation has no diff card', () => {
+    // write/edit return undefined from presentResult on isError, so the failure
+    // has no diff — the row shows the model-facing error text instead of a bare
+    // red dot.
+    const view = render(<FileMutationRow {...rowProps(settled({
+      isError: true, callView: null, resultView: null,
+      content: [{ type: 'text', text: 'old_string not found in notes/demo.txt' }],
+    }))} />)
+    expect(view.container.querySelector('[data-diff]')).toBeNull()
+    expect(view.getByText('old_string not found in notes/demo.txt')).toBeTruthy()
+  })
+
+  it('falls back to the error name/code when an errored result has no text block', () => {
+    const view = render(<FileMutationRow {...rowProps(settled({
+      isError: true, callView: null, resultView: null, content: [],
+      error: { name: 'ToolError', code: 'sandbox_denied' },
+    }))} />)
+    expect(view.getByText('ToolError: sandbox_denied')).toBeTruthy()
+  })
+
+  it('shows no failure text for a successful diff or a running call', () => {
+    const ok = render(<FileMutationRow {...rowProps(settled())} />)
+    expect(ok.container.querySelector('[class*="_failure_"]')).toBeNull()
+    cleanup()
+    const run = render(<FileMutationRow {...rowProps(running())} />)
+    expect(run.container.querySelector('[class*="_failure_"]')).toBeNull()
+  })
+
+  it('shows the stopped state when the call was interrupted', () => {
+    const view = render(<FileMutationRow {...rowProps(settled({
+      callView: null, resultView: null, isError: true,
+      error: { name: 'ToolError', code: 'interrupted' },
+    }))} />)
+    expect(view.container.querySelector('[data-state="stopped"]')).not.toBeNull()
+    // The visually-hidden status label carries the stopped semantic for AT.
+    expect(view.getByText('已停止')).toBeTruthy()
+  })
+
+  it('renders a plain summary span when the call carries no file path', () => {
+    // Empty args leave deriveFilePath undefined, so the summary is not a link.
+    const view = render(<FileMutationRow {...rowProps(settled({
+      call: { name: 'edit', argsRaw: '' }, callView: null, resultView: null,
+    }))} />)
+    expect(view.container.querySelector('[class*="_fileLink_"]')).toBeNull()
+    expect(view.container.querySelector('[class*="_summary_"]')).not.toBeNull()
+  })
+})
+
+describe('fileMutationToolview registration', () => {
+  it('registers one component under both edit and write, and each disposes', () => {
+    const registered: { key: string; disposed: boolean }[] = []
+    const disposers: (() => void)[] = []
+    const ctx = {
+      slots: {
+        register: ({ key }: { name: string; key: string }) => {
+          const entry = { key, disposed: false }
+          registered.push(entry)
+          const dispose = () => { entry.disposed = true }
+          disposers.push(dispose)
+          return dispose
+        },
+      },
+    }
+    fileMutationToolview.apply(ctx as never)
+    expect(registered.map(r => r.key).sort()).toEqual(['edit', 'write'])
+    // The registrant's inject seam is the load-order contract the row relies on.
+    expect(fileMutationToolview.inject).toEqual(['slots', 'conversation'])
+    // Disposal removes each contribution (packages/AGENTS.md registry contract).
+    for (const dispose of disposers) dispose()
+    expect(registered.every(r => r.disposed)).toBe(true)
+  })
+})
+
+describe('DetailsPanel diff Output section', () => {
+  function mount(snapshot: ConversationSnapshot, selection: SelectionTarget | null, cwd?: string) {
+    localStorage.clear()
+    const chat = createChatStore().create()
+    if (selection !== null) chat.actions.select(selection)
+    const sessions = createSnapshotStore<SessionListState>(cwd === undefined
+      ? { ids: [], byId: {}, current: undefined, phase: 'ready' }
+      : {
+        ids: [SID],
+        byId: { [SID]: { id: SID, displayTitle: 'r', running: false, blank: false, waitingApproval: false, updatedAt: 0, cwd } },
+        current: SID,
+        phase: 'ready',
+      })
+    const workspaces = createSnapshotStore<WorkspaceListState>({
+      items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null,
+      baselinesReady: true, recentWorkspaceId: undefined,
+    })
+    return render(
+      <DetailsPanel
+        sessionId={SID}
+        useSession={bindSnapshotSelector({ getSnapshot: () => snapshot, subscribe: () => () => {} })}
+        useSessions={bindSnapshotSelector(sessions)}
+        useWorkspaces={bindSnapshotSelector(workspaces)}
+        useInput={(() => { throw new Error('unused') })}
+        inputActions={{ setDraft: () => {}, submit: () => {} }}
+        useProjection={(() => undefined)}
+        useStore={bindSnapshotSelector(chat)}
+        actions={chat.actions}
+        closeDetails={vi.fn()}
+        t={t}
+      />,
+    )
+  }
+
+  function snapshot(over: Partial<ConversationSnapshot> = {}): ConversationSnapshot {
+    return {
+      sessionId: SID, nodes: [], foldDegraded: false, partial: null, runningCalls: [], codeDispatches: new Map(),
+      pending: [], queue: [], running: false, composerPhase: 'active', removed: false,
+      openState: 'open', openError: null, hasMore: false, loadingOlder: false,
+      promptError: null, blank: false, lastAgentError: null, ...over,
+    }
+  }
+
+  const target: SelectionTarget = { turnSeq: 10, callId: 'c1', toolName: 'edit' }
+
+  it('renders the applied diff at full height, keeping the JSON Input section', () => {
+    const view = mount(snapshot({ nodes: [settled()] }), target)
+    expect(view.getByText(/"file_path"/)).toBeTruthy()
+    expect(view.container.querySelector('[data-diff]')).not.toBeNull()
+    expect(view.getByText('hello fixture')).toBeTruthy()
+  })
+
+  it('a running diff call renders its intended change, not the 运行中… placeholder', () => {
+    const view = mount(snapshot({ runningCalls: [running()] }), target)
+    expect(view.container.querySelector('[data-diff]')).not.toBeNull()
+    expect(view.queryByText('运行中…')).toBeNull()
+  })
+
+  it('a non-diff result keeps the flattened pre', () => {
+    const view = mount(snapshot({
+      nodes: [settled({
+        callView: null, resultView: null,
+        content: [{ type: 'text', text: 'permission denied' }],
+      })],
+    }), target)
+    expect(view.container.querySelector('[data-diff]')).toBeNull()
+    expect(view.getByText('输出').closest('section')?.querySelector('pre')?.textContent).toBe('permission denied')
+  })
+})

packages/client/ui-conversation/tests/gate-branch-tails.spec.tsx

@@ -78,7 +78,7 @@ describe('render branch tails', () => {
     const emptyList = createSnapshotStore<SessionListState>(
       { ids: [], byId: {}, current: undefined, phase: 'ready' })
     const emptyWorkspaces = createSnapshotStore<WorkspaceListState>({
-      items: [], state: 'idle', phase: 'ready', error: null,
+      items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null,
       baselinesReady: true, recentWorkspaceId: undefined,
     })
     const view = render(
@@ -115,7 +115,7 @@ describe('render branch tails', () => {
     const emptyList = createSnapshotStore<SessionListState>(
       { ids: [], byId: {}, current: undefined, phase: 'ready' })
     const emptyWorkspaces = createSnapshotStore<WorkspaceListState>({
-      items: [], state: 'idle', phase: 'ready', error: null,
+      items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null,
       baselinesReady: true, recentWorkspaceId: undefined,
     })
     const view = render(

packages/client/ui-conversation/tests/input-bar.spec.tsx

@@ -46,6 +46,7 @@ interface BenchOptions {
   variant?: 'hero' | 'composer'
   placeholder?: string
   t?: InputBarProps['t']
+  command?: (line: string) => Promise<boolean>
   accessory?: React.ReactNode
   overlay?: React.ReactNode
   leftItems?: React.ReactNode
@@ -95,7 +96,7 @@ function bench(over?: BenchOptions) {
       ids: [], byId: {}, current: undefined, phase: 'ready',
     })),
     useWorkspaces: bindSnapshotSelector(createSnapshotStore({
-      items: [], state: 'idle', phase: 'ready', error: null,
+      items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null,
       baselinesReady: true, recentWorkspaceId: undefined,
     })),
     useProjection: ((key: string, selector?: (v: unknown) => unknown) =>
@@ -108,7 +109,7 @@ function bench(over?: BenchOptions) {
     useLexicon: bindSnapshotSelector(shell.lexicon),
     useMenuLauncher: bindSnapshotSelector(menuLauncher),
     stop,
-    command: () => Promise.resolve(true),
+    command: over?.command ?? (() => Promise.resolve(true)),
     // Mirrors the real lookup chain (conversation namespace, then common).
     t: over?.t ?? makeTranslate(zh, commonZh),
     renderSlot,
@@ -288,6 +289,37 @@ describe('running and lock semantics (queue cut 1)', () => {
     }
   })
 
+  it('the decoration backdrop tracks the textarea offset (it paints every visible glyph)', () => {
+    const { view, textarea } = bench({ draft: 'line\n'.repeat(40) })
+    const backdrop = view.container.querySelector<HTMLElement>('[data-input-backdrop]')!
+    Object.defineProperty(backdrop, 'scrollTop', { value: 0, writable: true, configurable: true })
+    Object.defineProperty(textarea, 'scrollTop', { value: 0, writable: true, configurable: true })
+    // A scrolled draft: the textarea moves, the clipped backdrop must follow.
+    textarea.scrollTop = 120
+    fireEvent.scroll(textarea)
+    expect(backdrop.scrollTop).toBe(120)
+    // Every later move tracks too, including back to the top — a one-shot
+    // mirror would leave the glyphs parked at the first offset it saw.
+    textarea.scrollTop = 0
+    fireEvent.scroll(textarea)
+    expect(backdrop.scrollTop).toBe(0)
+  })
+
+  it('the backdrop carries the trailing-line sentinel that keeps its extent equal to the textarea', () => {
+    // jsdom has no layout, so the HEIGHTS this protects cannot be asserted here
+    // (the browser scenario owns that); what is checkable is that the backdrop's
+    // text is the draft plus exactly one newline. A textarea reserves a line box
+    // after a final newline and `pre-wrap` collapses one, so without the
+    // sentinel a draft ending in a newline leaves the backdrop a line short and
+    // the mirrored offset clamps.
+    const withNewline = bench({ draft: 'alpha\nbeta\n' })
+    const backdrop = withNewline.view.container.querySelector<HTMLElement>('[data-input-backdrop]')!
+    expect(backdrop.textContent).toBe('alpha\nbeta\n\n')
+    const withoutNewline = bench({ draft: 'alpha\nbeta' })
+    const plain = withoutNewline.view.container.querySelector<HTMLElement>('[data-input-backdrop]')!
+    expect(plain.textContent).toBe('alpha\nbeta\n')
+  })
+
   it('disabled state shows the unavailable placeholder; custom placeholder wins', () => {
     const { textarea } = bench({ disabled: true })
     expect(textarea.placeholder).toBe('会话不可用')
@@ -467,7 +499,35 @@ describe('command launcher chrome and control seats', () => {
     expect(launcher.getAttribute('aria-expanded')).toBe('true')
   })
 
-  it('the Access chip renders the projection value and submits /permission on pick', async () => {
+  it('the Access chip renders the projection value and submits a non-Full-access pick directly', async () => {
+    const command = vi.fn(() => Promise.resolve(true))
+    const permissions = {
+      options: [
+        { value: 'read-only', name: 'read-only' },
+        { value: 'workspace-write', name: 'workspace-write' },
+        { value: 'danger-full-access', name: 'danger-full-access' },
+      ],
+      currentValue: 'read-only',
+    }
+    const { view } = bench({ permissions, command })
+    const trigger = view.getByLabelText(/^访问模式/) as HTMLButtonElement
+    // Title-case display is presentation only; the menu ids stay machine names.
+    expect(trigger.textContent).toBe('Read Only')
+    fireEvent.click(trigger)
+    const items = view.getAllByRole('menuitem')
+    expect(items.map(o => o.textContent)).toEqual(['Read Only', 'Workspace Write', 'Full access'])
+    fireEvent.click(items[1]!)
+    // Optimistic pick + disable until admission resolves (command stub resolves true).
+    const busy = view.getByLabelText(/^访问模式/) as HTMLButtonElement
+    expect(busy.textContent).toBe('Workspace Write')
+    expect(busy.disabled).toBe(true)
+    expect(command).toHaveBeenCalledWith('/permission workspace-write')
+    await act(async () => {})
+    expect((view.getByLabelText(/^访问模式/) as HTMLButtonElement).disabled).toBe(false)
+  })
+
+  it('requires explicit risk acknowledgement before submitting Full access', async () => {
+    const command = vi.fn(() => Promise.resolve(true))
     const permissions = {
       options: [
         { value: 'workspace-write', name: 'workspace-write' },
@@ -475,20 +535,86 @@ describe('command launcher chrome and control seats', () => {
       ],
       currentValue: 'workspace-write',
     }
-    const { view } = bench({ permissions })
-    const trigger = view.getByLabelText(/^访问模式/) as HTMLButtonElement
-    // Title-case display is presentation only; the menu ids stay machine names.
-    expect(trigger.textContent).toBe('Workspace Write')
-    fireEvent.click(trigger)
-    const items = view.getAllByRole('menuitem')
-    expect(items.map(o => o.textContent)).toEqual(['Workspace Write', 'Danger Full Access'])
-    fireEvent.click(items[1]!)
-    // Optimistic pick + disable until admission resolves (command stub resolves true).
-    const busy = view.getByLabelText(/^访问模式/) as HTMLButtonElement
-    expect(busy.textContent).toBe('Danger Full Access')
-    expect(busy.disabled).toBe(true)
+    const { view } = bench({ permissions, command })
+    fireEvent.click(view.getByLabelText(/^访问模式/))
+    fireEvent.click(view.getByRole('menuitem', { name: 'Full access' }))
+
+    expect(command).not.toHaveBeenCalled()
+    expect(view.getByRole('dialog', { name: '确认启用 Full access？' })).toBeTruthy()
+    const enable = view.getByRole('button', { name: '启用 Full access' }) as HTMLButtonElement
+    expect(enable.disabled).toBe(true)
+
+    fireEvent.click(view.getByRole('checkbox', { name: '我已了解风险，并愿意继续' }))
+    expect(enable.disabled).toBe(false)
+    fireEvent.click(enable)
+
+    expect(command).toHaveBeenCalledOnce()
+    expect(command).toHaveBeenCalledWith('/permission danger-full-access')
+    expect(view.queryByRole('dialog')).toBeNull()
+    expect((view.getByLabelText(/^访问模式/) as HTMLButtonElement).textContent).toBe('Full access')
     await act(async () => {})
-    expect((view.getByLabelText(/^访问模式/) as HTMLButtonElement).disabled).toBe(false)
+  })
+
+  it('cancels a Full access selection without changing permission and resets acknowledgement', () => {
+    const command = vi.fn(() => Promise.resolve(true))
+    const permissions = {
+      options: [
+        { value: 'workspace-write', name: 'workspace-write' },
+        { value: 'danger-full-access', name: 'danger-full-access' },
+      ],
+      currentValue: 'workspace-write',
+    }
+    const { view } = bench({ permissions, command })
+    const openConfirmation = () => {
+      fireEvent.click(view.getByLabelText(/^访问模式/))
+      fireEvent.click(view.getByRole('menuitem', { name: 'Full access' }))
+    }
+
+    openConfirmation()
+    fireEvent.click(view.getByRole('checkbox'))
+    fireEvent.click(view.getByRole('button', { name: '取消' }))
+    expect(command).not.toHaveBeenCalled()
+    expect((view.getByLabelText(/^访问模式/) as HTMLButtonElement).textContent).toBe('Workspace Write')
+
+    openConfirmation()
+    expect((view.getByRole('checkbox') as HTMLInputElement).checked).toBe(false)
+    expect((view.getByRole('button', { name: '启用 Full access' }) as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('revokes an open Full access confirmation when the task locks', () => {
+    const command = vi.fn(() => Promise.resolve(true))
+    const permissions = {
+      options: [
+        { value: 'workspace-write', name: 'workspace-write' },
+        { value: 'danger-full-access', name: 'danger-full-access' },
+      ],
+      currentValue: 'workspace-write',
+    }
+    const { view, session } = bench({ permissions, command })
+    fireEvent.click(view.getByLabelText(/^访问模式/))
+    fireEvent.click(view.getByRole('menuitem', { name: 'Full access' }))
+    fireEvent.click(view.getByRole('checkbox'))
+    act(() => { session.set(snapshotOf({ removed: true })) })
+    expect(view.queryByRole('dialog')).toBeNull()
+    expect(command).not.toHaveBeenCalled()
+  })
+
+  it('resets an open Full access confirmation when switching tasks', () => {
+    const command = vi.fn(() => Promise.resolve(true))
+    const permissions = {
+      options: [
+        { value: 'workspace-write', name: 'workspace-write' },
+        { value: 'danger-full-access', name: 'danger-full-access' },
+      ],
+      currentValue: 'workspace-write',
+    }
+    const { view, props } = bench({ permissions, command })
+    fireEvent.click(view.getByLabelText(/^访问模式/))
+    fireEvent.click(view.getByRole('menuitem', { name: 'Full access' }))
+    fireEvent.click(view.getByRole('checkbox'))
+    view.rerender(<InputBar {...props} sessionId={'s2' as SessionId} />)
+    expect(view.queryByRole('dialog')).toBeNull()
+    expect(command).not.toHaveBeenCalled()
   })
 
   it('a registered entry fills its seat and receives the locked owner prop', () => {

packages/client/ui-conversation/tests/input-matrix.spec.tsx

@@ -39,7 +39,7 @@ function mountBar(shell: SessionInputShell, over?: { running?: boolean; disabled
       ids: [], byId: {}, current: undefined, phase: 'ready',
     })),
     useWorkspaces: bindSnapshotSelector(createSnapshotStore({
-      items: [], state: 'idle', phase: 'ready', error: null,
+      items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null,
       baselinesReady: true, recentWorkspaceId: undefined,
     })),
     useProjection: (() => undefined),

packages/client/ui-conversation/tests/input-scenarios.spec.tsx

@@ -125,7 +125,7 @@ async function scopedBench(register?: (slash: SlashService) => void) {
       ids: [], byId: {}, current: undefined, phase: 'ready',
     })),
     useWorkspaces: bindSnapshotSelector(createSnapshotStore({
-      items: [], state: 'idle', phase: 'ready', error: null,
+      items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null,
       baselinesReady: true, recentWorkspaceId: undefined,
     })),
     useProjection: (() => undefined),

packages/client/ui-conversation/tests/skeleton.spec.tsx

@@ -62,7 +62,7 @@ function workspace(id = 'w1'): WorkspaceView {
 }
 
 const workspaceState = (items: readonly WorkspaceView[]): WorkspaceListState => ({
-  items, state: 'idle', phase: 'ready', error: null,
+  items, archivedSessionIds: [], state: 'idle', phase: 'ready', error: null,
   baselinesReady: true, recentWorkspaceId: undefined,
 })
 

packages/client/ui-conversation/tests/terminal-card.spec.tsx

@@ -429,7 +429,7 @@ describe('DetailsPanel Output section', () => {
         phase: 'ready',
       })
     const workspaces = createSnapshotStore<WorkspaceListState>({
-      items: [], state: 'idle', phase: 'ready', error: null,
+      items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null,
       baselinesReady: true, recentWorkspaceId: undefined,
     })
     return render(
@@ -607,7 +607,7 @@ describe('DetailsPanel Output section', () => {
         useSessions={bindSnapshotSelector(createSnapshotStore<SessionListState>(
           { ids: [], byId: {}, current: undefined, phase: 'ready' }))}
         useWorkspaces={bindSnapshotSelector(createSnapshotStore<WorkspaceListState>({
-          items: [], state: 'idle', phase: 'ready', error: null,
+          items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null,
           baselinesReady: true, recentWorkspaceId: undefined,
         }))}
         useInput={(() => { throw new Error('unused') })}

packages/client/ui-conversation/tests/web-card.spec.tsx

@@ -0,0 +1,270 @@
+// @vitest-environment jsdom
+// The web render intent on the web side: the pure webCardModel derivation over
+// resultView, and the conversation render sites that consume it — the keyed
+// WebRow (registered under both web_search and web_fetch), the GenericToolCard
+// render-site fallback, and the details panel's Output section. Mirrors
+// terminal-card.spec.tsx: model derivation + null arms, both kinds, the chat
+// row's resident card, the panel arm, and the keyed registration.
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render } from '@testing-library/react'
+import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import type {
+  ConversationSnapshot, RunningToolCall, SessionId, SessionListState, ToolResultNode, WorkspaceListState,
+} from '@deepseek-ai/dsh-client-runtime/client'
+import type { ToolResultView } from '@deepseek-ai/dsh-client-connection/client'
+import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react'
+import type { SelectionTarget, ToolRowOwnerProps, ToolRowProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
+import { CHAT_WEB_MAX_SOURCES, webCardModel } from '../src/client/contract/web-card-model.ts'
+import { createChatStore } from '../src/client/stores.ts'
+import { GenericToolCard } from '../src/client/chat/GenericToolCard.tsx'
+import { DetailsPanel } from '../src/client/skeleton/DetailsPanel.tsx'
+import { WebRow, webToolview } from '../src/client/toolviews/web-row.tsx'
+import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime'
+import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts'
+import { zh } from '../src/client/locales.ts'
+
+afterEach(cleanup)
+
+const SID = 's1' as SessionId
+
+/** Locale seat for the card render sites (GenericToolCard, DetailsPanel), as the sibling suites build it. */
+const t = makeTranslate(zh, commonZh)
+
+const SEARCH_ARGS = '{"query":"deepseek harness"}'
+const FETCH_ARGS = '{"url":"https://example.com/page"}'
+
+/** A web_search result view; overrides tune the sources / answer / truncation. */
+const resultSearch = (over?: Partial<Extract<ToolResultView, { card: 'web'; kind: 'search' }>>): ToolResultView => ({
+  card: 'web', kind: 'search', truncated: false,
+  answer: 'A short answer.',
+  sources: [
+    { url: 'https://example.com/a', title: 'Titled', snippet: 'excerpt', publishedAt: '2026-07-01' },
+    { url: 'https://plain.example.org/b' },
+  ],
+  ...over,
+})
+
+/** A web_fetch result view. */
+const resultFetch = (over?: Partial<Extract<ToolResultView, { card: 'web'; kind: 'fetch' }>>): ToolResultView => ({
+  card: 'web', kind: 'fetch', url: 'https://example.com/page', statusCode: 200, truncated: false, ...over,
+})
+
+const runningSearch = (over?: Partial<RunningToolCall>): RunningToolCall => ({
+  callId: 'c1', name: 'web_search', argsRaw: SEARCH_ARGS,
+  turn: 1, step: 1, time: 1_000, callView: { card: 'generic', title: 'Search', kind: 'search' }, ...over,
+})
+
+const settledSearch = (over?: Partial<ToolResultNode>): ToolResultNode => ({
+  kind: 'tool-result', seq: 10, time: 2_000, callId: 'c1',
+  call: { name: 'web_search', argsRaw: SEARCH_ARGS },
+  callTime: 1_000,
+  content: [{ type: 'text', text: 'search text' }], isError: false,
+  callView: { card: 'generic', title: 'Search', kind: 'search' }, resultView: resultSearch(), ...over,
+})
+
+const settledFetch = (over?: Partial<ToolResultNode>): ToolResultNode => ({
+  kind: 'tool-result', seq: 11, time: 2_000, callId: 'c2',
+  call: { name: 'web_fetch', argsRaw: FETCH_ARGS },
+  callTime: 1_000,
+  content: [{ type: 'text', text: 'fetch body' }], isError: false,
+  callView: { card: 'generic', title: 'Fetch', kind: 'fetch' }, resultView: resultFetch(), ...over,
+})
+
+describe('webCardModel', () => {
+  it('derives a search card from the result view, projecting every source field', () => {
+    expect(webCardModel(settledSearch())).toEqual({
+      kind: 'search',
+      answer: 'A short answer.',
+      truncated: false,
+      sources: [
+        { url: 'https://example.com/a', title: 'Titled', snippet: 'excerpt', publishedAt: '2026-07-01' },
+        { url: 'https://plain.example.org/b', title: undefined, snippet: undefined, publishedAt: undefined },
+      ],
+    })
+  })
+
+  it('carries the search truncation flag and an absent answer', () => {
+    const model = webCardModel(settledSearch({ resultView: { card: 'web', kind: 'search', truncated: true, sources: [] } }))
+    expect(model).toEqual({ kind: 'search', answer: undefined, truncated: true, sources: [] })
+  })
+
+  it('derives a fetch card from the result view', () => {
+    expect(webCardModel(settledFetch())).toEqual({
+      kind: 'fetch', url: 'https://example.com/page', statusCode: 200, truncated: false,
+    })
+    expect(webCardModel(settledFetch({ resultView: resultFetch({ statusCode: 404, truncated: true }) })))
+      .toEqual({ kind: 'fetch', url: 'https://example.com/page', statusCode: 404, truncated: true })
+  })
+
+  it('returns null for a running call, since the web card is result-only', () => {
+    expect(webCardModel(runningSearch())).toBeNull()
+    // Even a running call that somehow carried a web call view stays generic:
+    // the derivation reads resultView only.
+    expect(webCardModel(runningSearch({ callView: null }))).toBeNull()
+  })
+
+  it('returns null for a settled call whose result view is not a web card', () => {
+    expect(webCardModel(settledSearch({ resultView: null }))).toBeNull()
+    expect(webCardModel(settledSearch({ resultView: { card: 'generic' } }))).toBeNull()
+    // A card tag this UI version does not know arrives over the wire; the
+    // documented generic-card default takes it, not a crash.
+    const future = { card: 'chart', kind: 'search' } as unknown as ToolResultView
+    expect(webCardModel(settledSearch({ resultView: future }))).toBeNull()
+    // A web card whose kind this UI version does not know (a newer host's
+    // value) also takes the generic path, not a malformed fetch.
+    const futureKind = { card: 'web', kind: 'timeline' } as unknown as ToolResultView
+    expect(webCardModel(settledSearch({ resultView: futureKind }))).toBeNull()
+  })
+})
+
+describe('chat row web body', () => {
+  const ownerProps = (block: RunningToolCall | ToolResultNode, toolName: string): ToolRowOwnerProps => ({
+    callId: block.callId, toolName, block, openFile: vi.fn(),
+  })
+  // WebRow reads only toolName/block off the full runtime share; the standard
+  // kit is unused, so the cast supplies the owner slice alone (as BashRow's
+  // tests do for the terminal card).
+  const rowProps = (block: RunningToolCall | ToolResultNode, toolName: string): ToolRowProps =>
+    ownerProps(block, toolName) as unknown as ToolRowProps
+
+  it('the WebRow renders the search card resident under the summary, capped tighter than the panel', () => {
+    expect(CHAT_WEB_MAX_SOURCES).toBeLessThan(16)
+    const view = render(<WebRow {...rowProps(settledSearch(), 'web_search')} />)
+    // The summary row plus the resident card, without any expand gesture on the row itself.
+    expect(view.getByText('Search')).toBeTruthy()
+    expect(view.getByText('Titled')).toBeTruthy()
+    expect(view.getByText('excerpt')).toBeTruthy()
+    // hostname fallback for the source with no title
+    expect(view.getByText('plain.example.org')).toBeTruthy()
+  })
+
+  it('the WebRow renders the fetch card resident, titled Fetch', () => {
+    const view = render(<WebRow {...rowProps(settledFetch(), 'web_fetch')} />)
+    expect(view.getByText('Fetch')).toBeTruthy()
+    // The url shows in the summary row and as the card's link; scope to the card.
+    const card = view.container.querySelector('[data-web="fetch"]')
+    expect(card?.querySelector('a')?.getAttribute('href')).toBe('https://example.com/page')
+    expect(view.getByText('HTTP 200')).toBeTruthy()
+  })
+
+  it('a running web call is the summary row alone (no card until it settles)', () => {
+    const view = render(<WebRow {...rowProps(runningSearch(), 'web_search')} />)
+    expect(view.getByText('Search')).toBeTruthy()
+    expect(view.queryByText('Titled')).toBeNull()
+    expect(view.container.querySelector('[data-web]')).toBeNull()
+  })
+
+  it('a failed web call keeps the summary row without the card', () => {
+    const view = render(<WebRow {...rowProps(settledSearch({
+      isError: true, resultView: { card: 'generic' },
+    }), 'web_search')} />)
+    expect(view.getByText('Search')).toBeTruthy()
+    expect(view.container.querySelector('[data-web]')).toBeNull()
+    // The row reflects the error state so the summary line still reads as failed.
+    expect(view.container.querySelector('[data-state="error"]')).not.toBeNull()
+  })
+
+  it('the GenericToolCard fallback also renders a resident web card for a web-declaring tool', () => {
+    // A web-declaring tool without its own keyed row lands on the fallback; its
+    // card is resident there too.
+    const view = render(<GenericToolCard {...ownerProps(settledSearch({
+      call: { name: 'fx-web', argsRaw: SEARCH_ARGS },
+    }), 'fx-web')} t={t} />)
+    expect(view.getByText('Titled')).toBeTruthy()
+    expect(view.container.querySelector('[data-web="search"]')).not.toBeNull()
+  })
+
+  it('the GenericToolCard fallback keeps the plain row for a non-web call', () => {
+    const view = render(<GenericToolCard {...ownerProps(settledSearch({
+      call: { name: 'echo', argsRaw: '{}' }, callView: null, resultView: null,
+    }), 'echo')} t={t} />)
+    expect(view.container.querySelector('[data-web]')).toBeNull()
+  })
+})
+
+describe('DetailsPanel web Output section', () => {
+  function mount(snapshot: ConversationSnapshot, selection: SelectionTarget | null) {
+    localStorage.clear()
+    const chat = createChatStore().create()
+    if (selection !== null) chat.actions.select(selection)
+    const sessions = createSnapshotStore<SessionListState>({ ids: [], byId: {}, current: undefined, phase: 'ready' })
+    const workspaces = createSnapshotStore<WorkspaceListState>({
+      items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null,
+      baselinesReady: true, recentWorkspaceId: undefined,
+    })
+    return render(
+      <DetailsPanel
+        sessionId={SID}
+        useSession={bindSnapshotSelector({ getSnapshot: () => snapshot, subscribe: () => () => {} })}
+        useSessions={bindSnapshotSelector(sessions)}
+        useWorkspaces={bindSnapshotSelector(workspaces)}
+        useInput={(() => { throw new Error('unused') })}
+        inputActions={{ setDraft: () => {}, submit: () => {} }}
+        useProjection={(() => undefined)}
+        useStore={bindSnapshotSelector(chat)}
+        actions={chat.actions}
+        closeDetails={vi.fn()}
+        t={t}
+      />,
+    )
+  }
+
+  function snapshot(over: Partial<ConversationSnapshot> = {}): ConversationSnapshot {
+    return {
+      sessionId: SID, nodes: [], foldDegraded: false, partial: null, runningCalls: [], codeDispatches: new Map(),
+      pending: [], queue: [], running: false, composerPhase: 'active', removed: false,
+      openState: 'open', openError: null, hasMore: false, loadingOlder: false,
+      promptError: null, blank: false, lastAgentError: null, ...over,
+    }
+  }
+
+  it('renders the search card at full source allowance', () => {
+    const view = mount(snapshot({ nodes: [settledSearch()] }), { turnSeq: 10, callId: 'c1', toolName: 'web_search' })
+    expect(view.getByText('Titled')).toBeTruthy()
+    expect(view.getByText('excerpt')).toBeTruthy()
+    // The Input JSON section survives beside it.
+    expect(view.getByText(/"query"/)).toBeTruthy()
+  })
+
+  it('renders the fetch card and keeps the fetched body below it', () => {
+    const view = mount(snapshot({ nodes: [settledFetch()] }), { turnSeq: 11, callId: 'c2', toolName: 'web_fetch' })
+    const card = view.container.querySelector('[data-web="fetch"]')
+    expect(card?.querySelector('a')?.getAttribute('href')).toBe('https://example.com/page')
+    expect(view.getByText('HTTP 200')).toBeTruthy()
+    // The card is a summary (URL + status only); the panel is the single-call
+    // reading surface, so the fetched body still renders below the card.
+    const output = view.getByText('输出').closest('section')
+    expect(output?.querySelector('pre')?.textContent).toContain('fetch body')
+  })
+
+  it('a non-web result keeps the flattened pre form', () => {
+    const view = mount(snapshot({
+      nodes: [settledSearch({ callView: null, resultView: null })],
+    }), { turnSeq: 10, callId: 'c1', toolName: 'web_search' })
+    expect(view.container.querySelector('[data-web]')).toBeNull()
+    const output = view.getByText('输出').closest('section')
+    expect(output?.querySelector('pre')?.textContent).toContain('search text')
+  })
+})
+
+describe('web toolview registration', () => {
+  it('registers one WebRow under both web_search and web_fetch', () => {
+    const registered: { key: string; component: unknown }[] = []
+    const ctx = {
+      slots: {
+        register: (options: { name: string; key: string }, component: unknown) => {
+          registered.push({ key: options.key, component })
+          return () => {}
+        },
+      },
+    } as unknown as import('cordis').Context
+    webToolview.apply(ctx)
+    expect(registered.map(r => r.key)).toEqual(['web_search', 'web_fetch'])
+    // One component under both keys, not two thin rows.
+    expect(registered[0]?.component).toBe(WebRow)
+    expect(registered[1]?.component).toBe(WebRow)
+    // The load-order seam the render site depends on.
+    expect(webToolview.inject).toEqual(['slots', 'conversation'])
+  })
+})