fix(ui): rebuild the tool detail panel — one surface, one type scale, real diff colours

[Astro-Han]

Summary

Three problems in the panel a tool row reveals when expanded, each found by the one before it.

1. A command had three shapes

Expanding a Bash row drew the same command differently depending on which branch it landed in:

Phase	Rendering	Result
Streaming	ToolCodeBlock(command) + a bare <pre>	command in its own bordered card, output loose beside it
Foreground settled (terminal)	command passed as CodeBlock's title	comment-coloured mono with no rule, tucked against the body — reads as a commented-out first line, not a header
Background settled (shell_run)	.maka-tool-output-panel	command and output in one bordered panel

So a command changed shape at the moment it finished, and in none of the three could it be copied on its own — Astryx's CodeBlock copy button reaches the code, not the title.

One ToolOutputSurface now owns all of them: heading on top in foreground mono, a hairline, then the body, plus an icon-only action that copies the heading. The settled shell body drops its nested CodeBlock — a second border inside the panel — for the same <pre> well the live stream already used, so live and settled render identically. No tokenization is lost: shell output was already passed with no language.

2. Two type scales in one panel

That move exposed a second problem: a detail then rendered the command surface at 14px/20px beside a diff or JSON block at 12px/17px, with that block's title at 12px on a 20px line box.

One pin caused it. ToolCodeBlock asked for Astryx size="sm", the supporting tier; Astryx's md is --text-code-size, which already resolves to the same 0.875rem the product's --maka-text-code does. Dropping the pin lines them up. The block title hard-codes the supporting size and leading, so those two role tokens are rebound on the detail scope — the move chat-message.css already makes on the tool and reasoning rows. Size and leading only: medium on a header is Astryx's intent.

3. The diff was not coloured at all

FileDiffPreview passed language="diff" to CodeBlock, which has no such language — buildLanguagePatterns has no diff case and returns null, so every line fell through to --color-syntax-variable and the hunk painted one colour. Astryx ships no diff component either.

The product already had the answer: previewVariants has always declared diff-body and diff-line, and styles.css has always carried the add/del/hunk/meta/ctx tints — green additions, red deletions, a tinted hunk header. Only the call site had gone missing; FileDiffPreview's own doc comment still described the scheme it had stopped rendering. It is wired back up inside the same surface, with the changed paths as its heading. +++/--- are classified as file markers before the single-character cases, so a diff no longer opens with a meaningless green line and a red one.

Ligatures are also disabled on CodeBlock inside a tool detail: Geist Mono ligates -- and !== into glyphs that sit outside the cell they started in, which made a --- line look like it had escaped the block's left edge. Measured, its box starts on the same x as every other line — the overflow was the ligature, not layout.

Verification

• Computed styles in the live Storybook: command, output, block title and block code all report 14px / 20.0004px / Geist Mono Variable. Before, the four were 14/14/12/12px with three different leadings.
• @maka/ui tests: 343 passing. Two new: gives a command and its output one surface in every phase pins one [data-slot="tool-output"] per phase with the command in the header and the shell path off CodeBlock; tints a diff by line kind instead of painting it one colour pins the full classification sequence, above all that ---/+++ are meta rather than del/add.
• @maka/ui + @maka/desktop typecheck, npm run format, npm run lint, check-dead-css, check-story-annotations — all clean.
• E2E disclosure-output.spec.ts passing: the on-demand mount and tail-follow contract for a collapsed live tool is unchanged.
• New story Product/Tool Activity → ShellCommandSurface puts live, foreground, background and failed side by side. The background shell_run state had no story before this. Diff colours checked in DenseMixedResults in both light and dark.

Live-app before/after for the streaming case, captured from the disclosure-output E2E window on main and on this branch and composed with ImageMagick, is attached in a comment below.

Review focus

The file-diff rendering reworked here is currently unreachable in the product: no runtime tool produces a file_diff result, so only the e2e and Storybook fixtures exercise it. Tracked in #2232 — this PR fixes the rendering that issue would make visible.

Diff and JSON results keep Astryx's CodeBlock title rather than the command surface — those are file paths and headlines, not commands. They now share the type scale, so the two headers read as one system, but whether the product should own block headers outright is a separate question this PR does not settle.