Migrate the TUI to the design guide #14

New issue

Closed

opened 2026-09-04 14:38:48 +00:00 by phg · 0 comments

phg commented

2026-09-04 14:38:48 +00:00

Owner

Context

docs/design-guide.md defines the target design contract for the TUI. The current application established the visual baseline, but inspection of the implementation and rendered interface at 120x40, 100x30, and 80x24 found several gaps between the current UI and that contract.

This issue coordinates convergence without treating current deviations as permanent exceptions. Accessibility audit issue #10 remains the source for the broader accessibility investigation; findings from that issue should be incorporated here rather than duplicated.

Implementation groups

Responsive layout

Preserve the full 60/40 master-detail workspace at 120x40.
Keep all essential content and actions usable at 100x30 through compact details and contextual footer labels.
Replace the workspace with an explicit minimum-size presentation below 100 columns or 30 rows.
Replace the docked help panel with a dedicated overlay or screen that does not squeeze the workspace.

Component semantics

Render read-only Entry Details as compact label-value rows instead of disabled inputs.
Show DNS detail fields only for DNS Entries and provide deliberate empty/no-results states.
Keep top-level Search and advanced filtering synchronized and expose active non-text filters.
Bring forms and modals into the guide-defined labeling, validation, action-order, focus, and border patterns.

Safety and status presentation

Replace Edit and Toggle edit mode labels for application privilege with the canonical Privileged Mode terminology.
Add a persistent, restrained PRIVILEGED indicator without recoloring the whole interface.
Give Default Entries an explicit protected marker and explanatory detail text.
Add a reserved message rail; let routine successes expire while errors and unresolved safety conditions persist.
Make the footer contextual while retaining durable entry count, filter, and mode state.

Palette and symbols

Define an application-owned hosts-dark semantic theme based on the guide palette.
Replace hard-coded Rich colors with semantic theme tokens.
Replace emoji used as structural status indicators with predictable one-cell symbols plus textual meaning.
Keep selection, focus, Active/Inactive state, protection, work-in-progress, and failure visually independent.

Acceptance criteria

The reachable TUI conforms to docs/design-guide.md across the main workspace and every modal.
Textual tests cover keyboard paths, focus restoration, state wording, conditional details, and essential visibility at 120x40 and 100x30.
Significant visual changes are inspected with agent-tui at both supported sizes.
All essential states remain understandable without color and without emoji rendering.
Privileged writes, backup gates, mutation rollback, and Default Entry protection retain their existing safety behavior.
User-facing documentation is updated only as changed behavior becomes reachable.

Context `docs/design-guide.md` defines the target design contract for the TUI. The current application established the visual baseline, but inspection of the implementation and rendered interface at 120x40, 100x30, and 80x24 found several gaps between the current UI and that contract. This issue coordinates convergence without treating current deviations as permanent exceptions. Accessibility audit issue #10 remains the source for the broader accessibility investigation; findings from that issue should be incorporated here rather than duplicated. Implementation groups ### Responsive layout - Preserve the full 60/40 master-detail workspace at 120x40. - Keep all essential content and actions usable at 100x30 through compact details and contextual footer labels. - Replace the workspace with an explicit minimum-size presentation below 100 columns or 30 rows. - Replace the docked help panel with a dedicated overlay or screen that does not squeeze the workspace. ### Component semantics - Render read-only Entry Details as compact label-value rows instead of disabled inputs. - Show DNS detail fields only for DNS Entries and provide deliberate empty/no-results states. - Keep top-level Search and advanced filtering synchronized and expose active non-text filters. - Bring forms and modals into the guide-defined labeling, validation, action-order, focus, and border patterns. ### Safety and status presentation - Replace `Edit` and `Toggle edit mode` labels for application privilege with the canonical Privileged Mode terminology. - Add a persistent, restrained `PRIVILEGED` indicator without recoloring the whole interface. - Give Default Entries an explicit protected marker and explanatory detail text. - Add a reserved message rail; let routine successes expire while errors and unresolved safety conditions persist. - Make the footer contextual while retaining durable entry count, filter, and mode state. ### Palette and symbols - Define an application-owned `hosts-dark` semantic theme based on the guide palette. - Replace hard-coded Rich colors with semantic theme tokens. - Replace emoji used as structural status indicators with predictable one-cell symbols plus textual meaning. - Keep selection, focus, Active/Inactive state, protection, work-in-progress, and failure visually independent. Acceptance criteria - The reachable TUI conforms to `docs/design-guide.md` across the main workspace and every modal. - Textual tests cover keyboard paths, focus restoration, state wording, conditional details, and essential visibility at 120x40 and 100x30. - Significant visual changes are inspected with `agent-tui` at both supported sizes. - All essential states remain understandable without color and without emoji rendering. - Privileged writes, backup gates, mutation rollback, and Default Entry protection retain their existing safety behavior. - User-facing documentation is updated only as changed behavior becomes reachable.