Skip to content

fix(tui): show keyboard focus in export options - #57154

Merged
jlongster merged 1 commit into
devfrom
export-options-focus
Oct 19, 2026
Merged

jlongster merged 1 commit into
devfrom
export-options-focus

Conversation

@jlongster

@jlongster jlongster commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

In Export options (/export), keyboard focus was invisible in places:

  • After tabbing to Copy, the screen was identical to the opening state.
  • Checked options were drawn in the same colour as the focused one, so you couldn't tell what space or enter would act on.

Fields now use the same styling as the question form (routes/session/form.tsx):

  • Label: text.formfield.focused on the focused row, otherwise text.formfield.base, whether or not it's checked.
  • Mark (◉ / ○, [x] / [ ]): formfield.focused when focused, formfield.selected when checked, otherwise muted. Only the mark shows what's checked.
  • No row backgrounds.

Other changes

  • Copy gets the same focus styling as Export (action.primary.focused / .base). Before, it always used a borrowed raised.high background.
  • shift+tab moves focus backwards (wrapping), sharing one small helper with tab.

Tests: new test/component/dialog-export-options.test.tsx checks that only the focused label is highlighted (checked ones stay base), that tab ×4 reaches Copy with the focused background, and that shift+tab moves back. test/component and test/ui pass.

Screenshots

Before and after, from the opencode-drive screenshot harness (120×36).

New designs off (opencode theme)

Before After
Opening state: only the focused Markdown label is orange; checked [x] marks keep their colour
Focus on JSON
Focus on Copy (before: identical to the opening state)
shift+tab from Copy goes back to Include tools

New designs on (new-designs experiment, opencode2 theme)

Here copy and save to file are footer actions with their own keys (c / enter), not tab stops, so tab cycles the options and checkboxes only.

Before After
Opening state
Focus on JSON
shift+tab moves focus backwards (to Include tools)

@opencode-agent opencode-agent Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. I ran /export in the TUI with opencode-drive on the base and on this branch. On the base, focus on Copy is invisible. Here Copy gets the focused fill, and shift+tab moves focus back to "Include tools". The new test passes and packages/tui type-checks.

Using action.primary.focused for the focused row matches how DialogSelect and DialogConfirm already show focus, and the test is small and frame-driven.

The public API is unchanged: this only changes TUI dialog styling and adds a dialog-local keybind.

Related: #36302

Before

After

@jlongster
jlongster force-pushed the export-options-focus branch from 09565f2 to 4588b31 Compare October 19, 2026 18:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant