feat(tui): add fixed-width layout system for cockpit rows#3
Open
TSchonleber wants to merge 1 commit into
Open
Conversation
- Add reusable layout helpers: truncate, pad, formatKV, badge, sectionLine - Replace fragile inline <Text> sequences with nested <Text> spans (no longer depends on Ink flex preserving spaces between adjacent nodes) - Header rows stable at 80 columns; provider/model truncated with ellipsis - Section dividers fill to COLS (78) with box-drawing characters - RunSummaryPane uses compact badges instead of dot-separated flex children - Add 10 new tests: 7 for layout helpers, 3 for cockpit header rendering Co-Authored-By: Terrence Schonleber <TVschonleber@gmail.com>
TSchonleber
added a commit
that referenced
this pull request
Apr 24, 2026
…d device-code scaffolding - Provider registry for anthropic, openai, xai, gemini, openai-compat - CockpitAuthStore (~/.strand/auth.json) with single-writer lock - External credential discovery for Claude Code and gemini-cli - OpenAI oauth_device_code flow with mockable HTTP client - Enforce hard constraints #3 (oauth_external local-only), #4 (billing warning), #5 (no implicit activation) - 39 tests across 4 test files Co-Authored-By: Terrence Schonleber <TVschonleber@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary\n\nBuilds a reusable TUI layout system for fixed-width cockpit rows in
components.tsx.\n\nLayout helpers added (all exported for reuse):\n-truncate(s, n)— clip with ellipsis\n-pad(s, n)— right-pad to fixed width\n-formatKV(label, value, valueWidth)— fixed-width key-value pair\n-badge(count, label, width)— compact inline badge\n-sectionLine(title, width?)— section divider fillingCOLS(78) with box-drawing chars\n-COLSconstant — cockpit content width (80 minus paddingX=1 each side)\n\nHeader stabilized at 80 columns:\n- Provider/model truncated to 28 chars with ellipsis — never breaks the layout\n- Each row is a single parent<Text>with nested colored<Text>spans (inline), not adjacent<Text>nodes inside<Box>(flex). Spacing no longer depends on Ink flex.\n- Separator rule added between header and content\n\nRunSummaryPane refactored:\n- Replaced fragile<Box>+ adjacent<Text>dot-separated stats with compact badges inside nested<Text>\n- Section title usessectionLine()for consistent width\n\nSection titles standardized across TaskGraphsPane, InvocationsPane, RunSummaryPane.\n\n## Review & Testing Checklist for Human\n- [ ] Render the dashboard (pnpm strand tui --dashboard) in a real 80-col terminal — verify header rows don't wrap and provider/model is truncated cleanly\n- [ ] Confirm section dividers span the full width without gaps\n- [ ] Check that RunSummaryPane badges ("42 ticks", "7 runs", etc.) are readable and aligned\n\n### Notes\n- Onlysrc/cli/tui/components.tsxandtests/cli/tui.test.tswere edited — narrow scope as requested\n- All 12 tests pass (2 existing + 10 new: 7 helper unit tests + 3 cockpit rendering tests)\n- Lint + typecheck clean\n- ASCII-safe: uses only characters already present in the file (box-drawing─, ellipsis…, em-dash—)Link to Devin session: https://app.devin.ai/sessions/114cb4b1991c483b83b5dac70c2b383f
Requested by: @TSchonleber