Review — end-to-end ✅ (clean approve)

What this ships

Two-issue fix for #1170 — tool card output truncated and unscrollable:

1. JS truncation 220 → 800 chars (static/ui.js:2617-2620) — most realistic tool outputs (stack traces, file paths, JSON) now render in full without "Show more".
2. CSS overflow:auto on open card (static/style.css:1236) — the inner <pre> had overflow-y:auto but the parent .tool-card-detail had overflow:hidden (required for the closed-state max-height collapse animation). Adding overflow:auto only on the open state fixes the scroll without breaking the animation.
3. Heights bumped — outer card cap 520→600px, inner pre 180→360px (≈20 lines).

Traced against upstream hermes-agent

Pure WebUI presentation change. Tool snippets come from the agent's stream (text), and buildToolCard renders them; the truncation cap is purely visual. No upstream coupling.

End-to-end trace

CSS state-machine integrity

Closed state (style.css:1235):

.tool-card-detail{display:block;max-height:0;opacity:0;overflow:hidden;...}

Open state (style.css:1236):

.tool-card.open .tool-card-detail{max-height:600px;opacity:1;padding:8px 12px;...;overflow:auto;}

Critical: the closed overflow:hidden is required for the max-height collapse animation — without it, content would jump out during the transition. The fix correctly preserves it for the closed state and only adds overflow:auto to the open state. The CSS cascade applies the open-state overflow:auto only when .tool-card.open is set, so the animation still works on collapse.

Inner pre scroll path

static/style.css:1241:

.tool-card-result pre{...max-height:360px;overflow-y:auto;...}

Now functional because the parent's overflow:auto no longer clips the inner scroll bar. Long content (>360px) will get an inner scrollbar within the pre.

Truncation logic

static/ui.js:2614-2622:

if(s.length<=800){displaySnippet=s;}
else{
  const cutoff=s.slice(0,800);
  const lastBreak=Math.max(cutoff.lastIndexOf('. '),cutoff.lastIndexOf('\n'),cutoff.lastIndexOf('; '));
  displaySnippet=lastBreak>80?s.slice(0,lastBreak+1):cutoff;
}

Same algorithm, just larger threshold. The lastBreak>80 heuristic still avoids cutting awkwardly close to the start. ✅

Edge-case trace

Tests

• PR's targeted test (test_tool_card_detail_uses_transitionable_collapsed_state): updated to assert max-height: 600px AND overflow: auto on open state. Passes.
• All 5 test_ui_card_animation tests: pass.
• Local full suite: 2586 passed, 47 skipped, 1 PR-unrelated pre-existing failure (macOS-only).
• CI on PR: ✅ test (3.11), ✅ test (3.12), ✅ test (3.13).

Minor observations (non-blocking)

• The 800-char threshold is based on intuition ("most realistic outputs"). If users still hit "Show more" frequently, easy to bump again — no architectural decision baked in.
• The two max-height constants (600px outer, 360px inner) leave 240px for header chrome and padding. If chrome shrinks, the inner pre could be the bottleneck before the outer card. Acceptable for the typical case.

Recommendation

Approved. Surgical 4-line behavioural fix. The CSS state-machine reasoning is correct (preserve overflow:hidden on closed, add overflow:auto only on open), the truncation bump is empirical but reasonable, the test was correctly updated to lock both new invariants. Parked at approval — ready for the release agent's merge/tag pipeline.