fix(rendering): adapt terminal output to narrow widths (swamp-club#377)

[stack72]

Summary

• Flatten all 14 SearchPicker preview callbacks from nested <Box> structures to flat <Text> arrays — nested Boxes cause Ink/Yoga layout garbling at narrow terminal widths
• Add overflow="hidden" to ResultsList and SearchPicker's inline/minimal tier containers
• Create getTerminalColumns() utility wrapping Deno.consoleSize() with 80-col fallback for log-mode renderers
• Update 6 log-mode renderers (audit timeline, extension list, data list, summarise, method-run reports, report get) to use terminal-width-aware separators, truncation, and markdown maxWidth
• Document terminal width conventions in design/rendering.md

Test Plan

• Verified TUI rendering at 76, 80, and 254 columns — model type search, model search, data search, extension search, workflow search, data query
• Confirmed bordered-split layout at wide widths shows no regression
• Confirmed stacked/inline layouts at narrow widths render cleanly with truncation
• 5987 tests pass, 0 failures

🤖 Generated with Claude Code

[github-actions]

CLI UX Review

Blocking

None.

Suggestions

1. audit_timeline.ts — truncation sentinel inconsistency (pre-existing, not introduced here): The audit timeline still uses "..." (3-char ASCII) with a -3 offset, while the new truncations in data_list.ts and extension_list.ts use "…" (single Unicode ellipsis) with a -1 offset. This pre-dated the PR, but since several renderers were touched it would be a natural place to align them. Non-blocking.

2. report_search.tsx — renderMarkdownToTerminal in detail preview has no maxWidth: The full-detail path calls renderMarkdownToTerminal(detail.markdown) without maxWidth before wrapping the result in <Text wrap="truncate-end">. Log-mode renderers (report_get.ts, model_method_run.ts) do pass maxWidth. In TUI mode Ink's wrap="truncate-end" will clip each line, so this is functional — but markdown tables and code blocks may render wider than the pane before being clipped rather than reflowed. Passing innerWidth here would make it consistent with the log-mode approach.

Verdict

PASS — rendering-only change that improves narrow-terminal experience across all interactive search pickers and six log-mode renderers. No UX regressions, no missing JSON fields, no broken help text. Both truncation strategies (log-mode getTerminalColumns() + Ink overflow="hidden" / wrap="truncate-end") are applied consistently across the renderer surface area.

[github-actions]

Code Review

Blocking Issues

None.

Suggestions

1. Missing truncation in summarise.ts before padEnd() — In extension_list.ts, names are properly truncated before padding when they exceed the clamped max:

   const name = ext.name.length > maxName
     ? ext.name.substring(0, maxName - 1) + "…"
     : ext.name;
   const paddedName = name.padEnd(maxName);

   But in summarise.ts, both method.method (line 82) and group.workflowName (line 153) are passed directly to .padEnd() without truncation. When a name exceeds Math.floor(cols * 0.4), padEnd is a no-op and the full name is printed, defeating the column clamping. Consider adding the same truncation pattern used in extension_list.ts.

2. report_get.ts captures terminal width at construction time — LogReportGetRenderer calls getTerminalColumns() in its constructor rather than in the completed handler. If a resize happens between construction and rendering, the old width is used. The other log-mode renderers all call it at render time. This is unlikely to matter in practice (these are short-lived command invocations), but it's a minor inconsistency.

Overall

Well-scoped fix. All changes are confined to the presentation layer — no domain logic touched. The getTerminalColumns() utility is placed correctly in presentation/output/, has a unit test, and the Ink changes (adding overflow="hidden", width constraints, wrap="truncate-end") consistently follow the same pattern. The flattening from nested <Box> to flat <Text> arrays is the right approach to avoid Ink/Yoga layout issues. Design doc update is a nice addition.