feat(tui): add header/footer/shortcuts toggle and improve prompt info line
Summary
Add System commands to toggle header, footer, and shortcuts visibility for small screen optimization. All preferences persist across restarts.
Commands Added (System category)
| Command | Description |
|---|---|
| Show/Hide header | Toggle session title bar |
| Show/Hide footer | Toggle directory/LSP/MCP status bar |
| Show/Hide shortcuts | Toggle idle shortcut hints |
All commands available globally (home + session pages) via command palette (ctrl+p).
Behavior
When Footer Hidden
- Prompt info line shows: permissions indicator OR compact status (spinner + esc) OR shortcuts
- Bottom section: empty
- Maximizes vertical space for agent responses
When Footer Visible
- Prompt info line: empty
- Bottom section: detailed status with retry info
- Footer: permissions, LSP, MCP status
Fixes #5277
@emamulandalib What about deciding based on size of screen? With commands, we ask the user to do the job of not showing things as soon as the size of the screen is too small. On a big screen, I'm fine with all this extra info (and I might want it!)
@lcswillems I've added commands to toggle the header, footer, and shortcuts (though I'm unsure what the best term for 'shortcuts' is). I was also considering automatic hiding of these elements, but that would require further community discussion. Here are some screenshots
With shortcuts enabled...
and disabled
@emamulandalib It is great that you've worked on this! However, in my case, I don't really want to have to do the job of hiding / showing stuff each time I resize the window. The issue is stating that things should be hidden when the screen is small, so this PR doesn't really address the issue?
The issue is stating that things should be hidden when the screen is small, so this PR doesn't really address the issue?
@lcswillems, I am seeking community feedback regarding which UI elements should be hidden on smaller screens. Currently, only the sidebar logic is implemented to respond to screen size changes. https://github.com/sst/opencode/blob/feb8c4f3c60e1ada28bd24abd09d534375a6bc08/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx#L127-L132
Should we also consider automatic hiding for small screens? For example:
- Hide shortcuts automatically when height < X rows?
- Hide header/footer automatically when height < Y rows?
- Or keep it purely manual (current implementation)?
- Or should we completely hide the headerfooter/shortcuts?
I think we should hide header/footer for the smaller screen.
Personally I'd say that anything non-mandatory to be displayed in order to continue chatting should be hidden when the screen is too small.
Thank you for the feedback. I was working on the implementation, but I encountered several questions. Maybe you can help me here.
Current Thresholds (Independent Checks)
| Dimension | Threshold | Effect |
|---|---|---|
| Width | > 120 cols | Sidebar auto-shows (existing wide logic) |
| Height | < 20 rows | Header/footer/shortcuts auto-hide (new short logic which I've implemented locally) |
Would we prefer:
- Different thresholds? (e.g., height < 25 instead of < 20)
- Combined check? (e.g., hide when height < 20 OR width < 60)
- Progressive hiding? (e.g., hide footer at < 25, hide header at < 20, hide shortcuts at < 15)
Behavior Matrix
| Screen Size | Sidebar | Header/Footer | Shortcuts |
|---|---|---|---|
| 150×30 (wide & tall) | Visible | Hidden (sidebar visible) | Visible |
| 150×15 (wide & short) | Visible | Hidden (both reasons) | Hidden |
| 80×30 (narrow & tall) | Hidden | Visible | Visible |
| 80×15 (narrow & short) | Hidden | Hidden (auto) | Hidden (auto) |
@emamulandalib I don't know (haven't checked the columns and so on). From your tests, what do you think would be the best numbers?