feat(tui): Help screen and keyboard shortcut reference overlay#453
feat(tui): Help screen and keyboard shortcut reference overlay#453
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a TUI help/keyboard-shortcuts overlay and replaces per-screen inline shortcut footers with a centralized, dynamic footer-hints system.
Changes:
- Introduces
ui/tui/HelpScreen.js(shortcut groups, help overlay UI, andgetFooterHints()). - Updates Tasks/Agents screens to publish footer hints via
onFooterHintsChangeinstead of rendering their own footer blocks. - Adds help overlay + footer rendering to both UI TUI (
ui/tui/App.js) and CLI TUI (tui/app.mjs), and updates tests/harness accordingly.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/tui/TasksScreen.js | Removes inline shortcut footers; emits contextual footer hints via onFooterHintsChange(getFooterHints(...)). |
| ui/tui/HelpScreen.js | New help overlay UI + shortcut catalog + getFooterHints() helper for dynamic footer content. |
| ui/tui/App.js | Adds help overlay toggling/scroll handling and a shared footer-hints renderer. |
| tui/screens/agents.mjs | Removes inline footer block; emits contextual footer hints via onFooterHintsChange(getFooterHints(...)). |
| tui/app.mjs | Adds help overlay toggling and app-level footer rendering; wires onFooterHintsChange into screens. |
| tests/tui/screens.test.mjs | Adjusts assertions for new footer/help output; adds tests for help overlay and dynamic footer hints. |
| tests/tui/render-ink.mjs | Adds latestText() helper to reduce multi-frame output noise in tests. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| latestText() { | ||
| const cleaned = stripAnsi(buffer).replace(/\r/g, ""); | ||
| const lastIndex = cleaned.lastIndexOf("Agents:"); | ||
| return lastIndex >= 0 ? cleaned.slice(lastIndex) : cleaned; | ||
| }, |
There was a problem hiding this comment.
latestText() is coupled to the literal string "Agents:" (from StatusHeader row1). This makes the test harness brittle to unrelated header text changes. Consider deriving the “latest frame” boundary from Ink’s clear-screen sequences in the raw buffer, or introducing an explicit frame delimiter, instead of hardcoding a header substring.
| if (helpOpen) { | ||
| if (key?.escape) { | ||
| setHelpOpen(false); | ||
| return; | ||
| } | ||
| if (key?.upArrow) { | ||
| setHelpScrollOffset((current) => Math.max(0, current - 1)); | ||
| return; | ||
| } | ||
| if (key?.downArrow) { | ||
| setHelpScrollOffset((current) => current + 1); | ||
| return; | ||
| } |
There was a problem hiding this comment.
Help overlay scrolling isn’t bounded: down-arrow always increments helpScrollOffset, so it can grow beyond the number of help rows and render an empty/blank help list. Compute a max scroll offset (based on the help content + available terminal rows) and clamp both up/down updates to keep the overlay usable.
| @@ -233,7 +263,18 @@ export default function App({ host, port, connectOnly, initialScreen, refreshMs, | |||
| refreshMs=${refreshMs} | |||
| onTasksChange=${setTasks} | |||
| onInputCaptureChange=${setScreenInputLocked} | |||
| onFooterHintsChange=${setFooterHints} | |||
| /> | |||
| ${helpOpen | |||
| ? html` | |||
| <${Box} flexDirection="column" marginTop=${1}> | |||
| <${HelpScreen} scrollOffset=${helpScrollOffset} maxRows=${helpRows} /> | |||
| <//> | |||
| ` | |||
| : null} | |||
| <//> | |||
| <${Box} paddingX=${1}> | |||
| <${Text} dimColor>${footerText}<//> | |||
There was a problem hiding this comment.
When toggling help with '?', the CLI TUI doesn’t reset scroll position or override footer hints with the help-specific hints (unlike ui/tui/App.js). As a result, the footer can continue showing screen hints while the overlay is open, and reopening help may start at a stale scroll offset. Consider resetting helpScrollOffset on open/close and rendering footer hints from getFooterHints(screen, { helpOpen: true }) while help is open.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…t-tui-help-screen-and-keyboard-shortcut-refer
…screen-and-keyboard-shortcut-refer' into task/eb0893c6b815-feat-tui-help-screen-and-keyboard-shortcut-refer
|
Bosun CI signal: Bosun-created PR currently has failing checks.
|
…eyboard-shortcut-refer
…eyboard-shortcut-refer
|
Bosun PR classification: Bosun-created.
|
Co-authored-by: bosun-ve[bot] <262908237+bosun-ve[bot]@users.noreply.github.com>
Co-authored-by: bosun-ve[bot] <262908237+bosun-ve[bot]@users.noreply.github.com>
Task-ID: eb0893c6-b815-4699-b19b-0504e2016917\n\nAutomated PR for task eb0893c6-b815-4699-b19b-0504e2016917\n\n---\n\nBosun-Origin: created