feat(tool-rail): show full tool results in a scrollable box, labels above values

[philmerrell]

What changed

The expanded tool-call detail in the tool rail is restructured:

• Labels above values. Input / Result (or Error for a failed call, Output while generating) now sit above their values instead of in a gutter column beside them, so the payload gets the full width.
• No truncation. Results used to be cut to 200 characters behind a "Show full result" / "Show less" toggle. The whole result now renders inside a bounded box (max-h-80) that scrolls vertically; text wraps (overflow-wrap: anywhere), so long URLs/tokens never cause horizontal scroll. The truncation state and helpers (expandedResultIds, toggleFullResult, isResultExpanded, truncateResult, getResultText) are removed; hasResultBody decides whether there is text/JSON to show (image-only results render just the image).
• Input renders one key: value per line in its own smaller scroll box (max-h-40) instead of a single truncated line — some tools (e.g. artifact creation) take large inputs.
• Accessibility. Each scroll box is focusable (tabindex="0", role="group", labelled) so keyboard users can scroll it, with a focus-visible outline. Label colours moved to steps that clear WCAG AA in both themes (the old input: / result: labels failed at ~2.5:1).

Why the box styles live in component CSS

styles.css has unlayered prose rules on .message-block pre (padding 1rem, 0.875rem font, grey background) and html.dark .message-block pre (specificity 0,2,2). They override Tailwind utilities on any <pre> inside a message, so .detail-scroll is styled in the component stylesheet, with the dark background under :host-context(.dark) to out-rank the dark rule.

Bundled fix: JSON syntax highlight pipe

JsonSyntaxHighlightPipe chained per-token-kind regex replaces, so the number rule re-matched text inside string values: "2026-09-30T09:30:17-06:00" rendered as "…09: 30: 17-06: 00". This was only visible after clicking "Show full result"; with results now shown in full by default it would be on every JSON result. Rewritten as a single-pass tokenizer, with a new spec. The pipe is also used by the tool-use component, which gets the fix too.

Verification

• ng test over src/app/session/components/message-list/components/** — 30 files, 369 tests passing (tool-rail spec updated; new pipe spec).
• Dev server compiled the real template (strict templates) without errors.
• Rendered the real template (not the spec's inline mirror) against the app's compiled styles.css in light and dark: stacked labels, 320px result box scrolls vertically with scrollWidth == clientWidth, global pre styles overridden (12px / 6px 8px padding). axe shows no contrast violations on the new labels.
• Not verified end-to-end against a signed-in session.

For reviewers

axe still flags pre-existing low-contrast text-gray-400 text elsewhere in the rail (header tool count/duration, per-row tool name and duration). Left untouched to keep this change scoped.

🤖 Generated with Claude Code