#17448: ui: make tool cards collapsible with inline expansion

## Summary Reduces visual clutter from tool calls in the Control UI chat while maintaining full access to tool output. ## Changes - **Compact tool cards by default** — Shows only header (tool name + icon) instead of 120px cards - **Inline expansion** — Long outputs collapsed with 'Show output' toggle using native `<details>` element - **Short outputs inline** — Outputs <80 chars shown directly beneath header - **Size indicator** — Shows output length (e.g., '1.2 KB', '340 chars') in collapsed state - **Sidebar preserved** — 'Open' button still available for full-screen view - **Image improvements** — Responsive grid layout for multiple image attachments ## Before/After Before: Tool cards always showed ~120px of content, cluttering the chat when many tools were called. After: Tool cards show just the header by default. Click 'Show output' to expand inline, or 'Open' for sidebar view. ## Files Changed - `ui/src/styles/chat/tool-cards.css` — Redesigned styles for compact/collapsible cards - `ui/src/ui/chat/tool-cards.ts` — New rendering with `<details>` expansion - `ui/src/ui/chat/tool-helpers.ts` — Added `formatOutputLength()` helper - `ui/src/ui/chat/grouped-render.ts` — Use new group rendering ## Testing 1. `pnpm ui:build` 2. Start gateway and open Control UI 3. Send messages that trigger tool calls 4. Verify tool cards are compact and expand correctly <!-- greptile_comment --> <h3>Greptile Summary</h3> Redesigns tool cards in the Control UI chat to be compact and collapsible. Tool results now show just the header by default: short outputs (< 80 chars) render inline, empty results show "Completed", and longer outputs use a native `<details>/<summary>` toggle with a size indicator. A new `renderToolCardsGroup` wrapper provides proper spacing for multiple tool cards. Image attachments get responsive grid layouts using `:has()`. - Clean separation of rendering logic into three distinct paths (short, empty, expandable) - `getTruncatedPreview` and its constants (`PREVIEW_MAX_CHARS`, `PREVIEW_MAX_LINES`) are now unused by production code but remain in `tool-helpers.ts` (still covered by tests) - CSS includes orphaned selectors: `.chat-tool-card__preview` (no longer generated), `.chat-tool-collapse-toggle` and `.chat-tool-group--collapsed` (never referenced in TS — may be intended for future use) - Existing browser test (`chat-markdown.browser.test.ts`) still works since the `.chat-tool-card__inline` class is still emitted for short outputs <h3>Confidence Score: 4/5</h3> - This PR is safe to merge — it's a UI-only change with no backend impact and no regressions in existing tests. - The changes are well-structured and focused on UI rendering. The three rendering paths (short, empty, expandable) are logically correct. The use of native details/summary is a good pattern. Minor concerns are orphaned CSS and dead code (getTruncatedPreview), but nothing that affects runtime behavior. The previously flagged issues (button styling reset, KB/MB labeling) are tracked in existing threads. - No files require special attention. The previously flagged button styling and KB/MB labeling issues are already tracked in prior review threads. _{Last reviewed commit: 213b452} <!-- greptile_other_comments_section --> <!-- /greptile_comment -->