feat(web): render write/edit tool output as a diff card

The write/edit tools already declare card:'diff' with applied hunks on
callView/resultView, but the Web client discarded it: a mutation landed on
GenericToolCard and the details panel flattened the result to a <pre>. Add
DiffBlock (ui-primitives), diff-card-model (the single callView/resultView
derivation), and FileMutationRow (keyed under write and edit), and make the
generic fallback row and the details panel diff-aware. The +/- block form,
per-file path header, same-file gap, and footer mirror the TUI diff card;
the chat row caps at CHAT_DIFF_MAX_LINES against the panel's full height.

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

@@ -19,6 +19,7 @@ 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 { ApprovalPanel } from './skeleton/ApprovalPanel.tsx'
 import { todoToolview } from './toolviews/todo-row.tsx'
 import { todoDockEntry } from './skeleton/TodoPanel.tsx'
@@ -254,6 +255,11 @@ 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 todo_write row rides the same seam (a product registration, not a sample).
   ctx.plugin(todoToolview)
 

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

@@ -10,6 +10,7 @@ import {
   IconThinkOutline14,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ToolRowOwnerProps } from '../contract/slots.ts'
+import { diffCardModel } from '../contract/diff-card-model.ts'
 import { terminalCardModel } from '../contract/terminal-card-model.ts'
 import { toolRowModel, type ToolRowVariant } from '../contract/tool-call-model.ts'
 import { ToolRow } from './ToolRow.tsx'
@@ -29,6 +30,7 @@ const VARIANT_ICONS: Record<ToolRowVariant, ReactNode> = {
 export function GenericToolCard({ toolName, block, cwd, openFile }: ToolRowOwnerProps) {
   const model = toolRowModel(toolName, block, cwd)
   const terminal = terminalCardModel(block, cwd)
+  const diff = diffCardModel(block)
   const singleFile = model.filePath !== undefined
   return (
     <ToolRow
@@ -39,9 +41,12 @@ export function GenericToolCard({ toolName, block, cwd, openFile }: ToolRowOwner
       // A terminal presenter's description is the contract's above-card text, so
       // it outranks the args-derived summary here exactly as it does in BashRow.
       summary={terminal?.description ?? model.summary}
-      // Single-file tools never expose an args body — the path link is the only action.
+      // 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}
       terminal={terminal}
+      diff={diff}
       state={model.state}
       filePath={model.filePath}
       onOpenFile={singleFile ? openFile : undefined}

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

@@ -10,8 +10,9 @@
 
 import { useState, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'
 import clsx from 'clsx'
-import { CodeBlock, StateDot, TerminalBlock } from '@deepseek-ai/dsh-client-ui-primitives'
+import { CodeBlock, DiffBlock, StateDot, TerminalBlock } from '@deepseek-ai/dsh-client-ui-primitives'
 import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { CHAT_DIFF_MAX_LINES, type DiffCardModel } from '../contract/diff-card-model.ts'
 import { CHAT_TERMINAL_MAX_LINES, type TerminalCardModel } from '../contract/terminal-card-model.ts'
 import type { ToolRowState, ToolRowVariant } from '../contract/tool-call-model.ts'
 import css from './ToolRow.module.css'
@@ -33,6 +34,13 @@ export interface ToolRowProps {
    * expandable (its leading slot never toggles).
    */
   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
   /** Makes the row itself the expand control instead of only its leading icon. */
   expandOnRowClick?: boolean | undefined
@@ -64,6 +72,7 @@ export function ToolRow({
   summary,
   body,
   terminal,
+  diff,
   state,
   expandOnRowClick = false,
   filePath,
@@ -71,13 +80,17 @@ export function ToolRow({
 }: ToolRowProps) {
   const [expanded, setExpanded] = useState(false)
   const terminalBody = terminal ?? null
+  const diffBody = diff ?? null
   // A row that names a single file keeps one interaction (open that path);
-  // args expand is off whether or not the open callback is wired yet. Terminal
-  // material still expands: only the file variants carry a path, so a terminal
-  // card and a file link never land on the same row.
+  // args expand is off whether or not the open callback is wired yet. A card
+  // body (terminal or diff) still expands: only the file variants carry a
+  // path. A write/edit row carries both a file path and a diff card, so its
+  // path link and its expandable card coexist — the card expands, the summary
+  // stays a link.
   const singleFile = filePath !== undefined
   const fileLink = singleFile && onOpenFile !== undefined
-  const expandable = (body !== null && !singleFile) || terminalBody !== null
+  const cardBody = terminalBody !== null || diffBody !== null
+  const expandable = (body !== null && !singleFile) || cardBody
   // The text arms take the empty string for a null body: a row expandable
   // only through its terminal material renders the terminal body instead, so
   // this substitution never shows.
@@ -164,9 +177,11 @@ export function ToolRow({
       )}
       {open && (terminalBody !== null
         ? <TerminalBlock {...terminalBody.card} maxLines={CHAT_TERMINAL_MAX_LINES} className={css.terminalBody} />
-        : variant === 'code'
-          ? <CodeBlock code={text} lang="typescript" className={css.codeBody} />
-          : <div className={css.body}>{text}</div>)}
+        : diffBody !== null
+          ? <DiffBlock {...diffBody.card} maxLines={CHAT_DIFF_MAX_LINES} className={css.terminalBody} />
+          : variant === 'code'
+            ? <CodeBlock code={text} lang="typescript" className={css.codeBody} />
+            : <div className={css.body}>{text}</div>)}
     </div>
   )
 }

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

@@ -0,0 +1,66 @@
+/**
+ * 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 } 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'>
+}
+
+/**
+ * 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).
+ * @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
+    return call === null ? null : { card: { diffs: call.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
+  return result === null ? null : { card: { diffs: result.diffs } }
+}

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

@@ -7,10 +7,11 @@
 // 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 } 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 { terminalCardModel } from '../contract/terminal-card-model.ts'
 import type { ToolCallBlock } from '../contract/tool-call-model.ts'
 import css from './DetailsPanel.module.css'
@@ -127,8 +128,10 @@ 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. Every other call, and a running call with neither 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.
  * @returns the Output section's body element.
@@ -147,6 +150,8 @@ function OutputBody({ material, cwd }: { material: CallMaterial; cwd: string | u
       </>
     )
   }
+  const diff = diffCardModel(material.block)
+  if (diff !== null) return <DiffBlock {...diff.card} className={css.terminal} />
   // A settled call always carries the result node the flattened form needs;
   // the running shape has no result to flatten.
   if (!('kind' in material.block)) return <div className={css.empty}>运行中…</div>

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

@@ -0,0 +1,119 @@
+/* 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;
+}

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

@@ -0,0 +1,97 @@
+// 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 { resolveToolPath, 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
+  }
+}
+
+/**
+ * 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) resolved against the session cwd and opened through the
+ * host; 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
+  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(resolveToolPath(cwd, 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} />
+      )}
+    </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)
+  },
+}