diff --git a/src/hqt/tui/styles.tcss b/src/hqt/tui/styles.tcss index 359a427..b71a6cd 100644 --- a/src/hqt/tui/styles.tcss +++ b/src/hqt/tui/styles.tcss @@ -90,3 +90,15 @@ ProjectFormScreen, NewSessionScreen, SchedulePromptScreen { background: $surface-lighten-1; color: $foreground; } + +/* Unify the focus highlight across the New Session dialog. The buttons get a + Peach $accent focus highlight (above), but Switch/Checkbox/Select/Input + otherwise fall back to Textual's default Lavender $border focus border, which + reads as off-palette next to the buttons. Match `tall` so only the color + changes, not the control height. */ +#new-session-dialog Switch:focus, +#new-session-dialog Checkbox:focus, +#new-session-dialog Select:focus, +#new-session-dialog Input:focus { + border: tall $accent; +} diff --git a/tests/test_tui.py b/tests/test_tui.py index f3582fb..ae6dce0 100644 --- a/tests/test_tui.py +++ b/tests/test_tui.py @@ -1895,3 +1895,21 @@ async def test_sandbox_options_hidden_until_switch_on(): switch.value = False await pilot.pause() assert options.display is False + + +def test_dialog_focus_highlight_uses_accent(): + """Every focusable control in the New Session dialog shares the Peach accent + focus border (consistent with the dialog buttons), not Textual's default + Lavender. Guards against the scoped :focus rule being dropped.""" + from pathlib import Path + import hqt.tui + + css = (Path(hqt.tui.__file__).parent / "styles.tcss").read_text() + for selector in ( + "#new-session-dialog Switch:focus", + "#new-session-dialog Checkbox:focus", + "#new-session-dialog Select:focus", + "#new-session-dialog Input:focus", + ): + assert selector in css, f"missing focus rule: {selector}" + assert "border: tall $accent;" in css