feat(dashboard): show thinking blocks fully expanded in LLM Calls tab

[aaight]

Summary

• Remove the <details>/<summary> collapsible wrapper from the ThinkingBlock component in web/src/components/llm-calls/llm-call-detail.tsx — thinking content now renders inline without requiring a click to expand
• Replace with always-visible styled block showing 💭 Thinking (N chars) as a header and the full thinking text below using consistent styling (text-xs, text-muted-foreground, whitespace-pre-wrap)
• Keep max-h-96 on the raw view (separate scroll container for full JSON) and add a clarifying comment explaining the intentional design difference
• Add 11 unit tests in tests/unit/web/llm-call-detail.test.ts covering char count label logic, thinking block parsing, full text preservation, and structural guarantees

What changed

web/src/components/llm-calls/llm-call-detail.tsx

The ThinkingBlock component previously used a <details>/<summary> HTML element requiring a click to expand thinking content. It now renders using a <div> with:

• A styled header row: 💭 Thinking (N chars)
• The full thinking text always visible below, in a <pre> element with whitespace-pre-wrap and text-muted-foreground

The raw view retains its max-h-96 scroll constraint with an explanatory comment.

tests/unit/web/llm-call-detail.test.ts (new file)

11 tests across 4 describe blocks:

• Char count label — verifies toLocaleString() formatting for various text lengths
• parseLlmResponse: thinking blocks — verifies full text preservation, correct block kind, multiple blocks, mixed content
• Structural guarantees — verifies no truncation at parse layer, thinking blocks excluded from toolNames

Test plan

• Unit tests pass (npx vitest run --project unit-core tests/unit/web/llm-call-detail.test.ts)
• Lint passes (npm run lint)
• TypeScript type checking passes (npm run typecheck)
• Manual: navigate to a run with thinking content → LLM Calls tab → Structured view → verify thinking blocks are fully visible without clicking

Notes

• This is a frontend-only change — the full thinking content is already stored in the DB and returned by getLlmCall; no backend changes needed
• Large thinking blocks (extended thinking mode, thousands of chars) will make the detail view taller — this is intentional per the card's request
• The list view preview (200-char truncation in src/api/routers/runs.ts) is unaffected

Card: https://trello.com/c/69c2917a20a5a3219e237bb7

🤖 Generated with Claude Code

🕵️ claude-code · claude-sonnet-4-6 · run details

[nhopeatall]

Summary

LGTM — clean, focused change that replaces a collapsible <details>/<summary> wrapper with an always-visible <div> block for thinking content. The component change is minimal and correct, CI passes, and the parser is well-tested.

Notes

• The buildThinkingLabel tests in the first describe block (tests/unit/web/llm-call-detail.test.ts:22) re-implement the label logic in a local helper rather than testing the actual component. They effectively test String.prototype.length and toLocaleString() — built-in JS behavior. Consider whether these 4 tests add enough signal to justify their maintenance cost.
• Several parseLlmResponse tests (tests/unit/web/llm-call-detail.test.ts:63+) overlap with the existing suite in tests/unit/utils/llmResponseParser.test.ts (which already covers thinking block parsing at line 60). The new tests do add some incremental coverage (multiple thinking blocks in sequence, full text preservation assertions), but the overlap is worth noting for future maintainers since the parser is a mirrored file (web/src/lib/ ↔ src/utils/) and tests exist for both copies.

🕵️ claude-code · claude-opus-4-6 · run details