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-primitives/src/DiffBlock.module.css

@@ -0,0 +1,103 @@
+/* Geometry mirrors CodeBlock/TerminalBlock (12px radius, code-block surface +
+   banner row, markdown code-block font) so a diff card reads as one family with
+   a fenced block and a terminal card. The deliberate divergence, shared with
+   TerminalBlock: the body keeps `white-space: pre` and scrolls horizontally,
+   because folding a source line destroys the indentation a diff is read by. */
+
+.block {
+  --dsl-diff-radius: 12px;
+  --dsl-diff-line-height: 22px;
+
+  position: relative;
+  margin: 16px 0;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-markdown-code-block);
+  border-radius: var(--dsl-diff-radius);
+}
+
+/* The copy control floats in the top-right corner over the body, so the card
+   has no empty banner row above its first diff line (the TUI diff card has no
+   banner either — only the footer). The block is position: relative, so this
+   anchors to the card. */
+.copyButton {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  z-index: 1;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  font: var(--dsw-font-xs-13);
+}
+
+.body {
+  padding: 12px 14px;
+  font: var(--dsw-font-markdown-code-block);
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+/* No wrapping, no word-break: a diff is read by its indentation. */
+.line {
+  min-height: var(--dsl-diff-line-height);
+  white-space: pre;
+}
+
+/* A file header: the path in the primary tone, set apart by weight. */
+.path {
+  color: var(--dsw-alias-label-primary);
+  font-weight: 600;
+}
+
+/* A same-file second hunk's separator (a scattered edit), in the dim tone. */
+.gap {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* The diff's own meaning-carrying colors: removed on the error token, added on
+   the success token. A `- `/`+ ` prefix is drawn here so a copied line and the
+   shown line agree, and so the sign reads without relying on color alone. */
+.del::before {
+  content: '- ';
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.del {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.add::before {
+  content: '+ ';
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.add {
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.expand {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.expand:hover {
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* The change summary, dim under the body: `└ +A -R · N file(s)`, the same
+   footer the TUI transcript's diff card draws. */
+.footer {
+  padding: 0 14px 12px;
+  font: var(--dsw-font-markdown-code-block);
+  color: var(--dsw-alias-label-tertiary);
+}