feat(tui): add header/footer/shortcuts toggle and improve prompt info line

[emamulandalib]

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

[lcswillems]

@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!)

[emamulandalib]

@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

[lcswillems]

@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?

[emamulandalib]

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.

opencode/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

Lines 127 to 132 in feb8c4f

	const sidebarVisible = createMemo(() => {
	if (session()?.parentID) return false
	if (sidebar() === "show") return true
	if (sidebar() === "auto" && wide()) return true
	return false
	})

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.

[lcswillems]

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.

[emamulandalib]

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)

[lcswillems]

@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?