web-ui: tool chips and code blocks

[time-attack]

Summary

Tool rows read as compact chips — a 16 px glyph, the action label, and the
command or path as a mono chip — with running, done, failed and approval
tints; Input and Result payload cards sit on the inset colour. Code blocks get
the reference chrome: a header with the language and a Copy control, a line
number gutter, tinted rows for diff fences (the highlight.js diff grammar is
registered), and the exec output card shows its exit code in green or red.

Demo

Opening a settled trace, expanding a tool row to its Input and Result cards, then the TypeScript block with its Copy control and gutter and the tinted diff block.

Verification

Typecheck, the full plugins/web-ui suite, eslint and prettier pass at this level of the stack (each level is verified on its own, on top of the previous one). Live QA of the finished stack ran in a browser-only dev-instance against a seeded conversation (tool run, markdown table, TypeScript and diff fences, a pending approval, ⌘K, list pages, settings), in light and dark and at phone width.

Stack

Merge in order; each PR is based on the one above it and retargets automatically when its base merges.

#	PR	Change
1	#1053	Beautiful UI foundation — tokens, fonts, styles scaffold
2	#1054	loading state and the live thinking trace
3	#1055	chat rows, session header and empty state
4	#1056	approval card with a pager
5	#1057 (this)	tool chips and code blocks
6	#1058	records tables and filter lists
7	#1059	search palette
8	#1060	settings as inspector cards
9	#1061	selection actions toolbar
10	#1062	recommendation card