Skip to content

TUI design system: slice B

The gallery files were regenerated from master after P2/P5 for #3917. The slice history below records the original implementation; the images now show the final design.

The TUI uses one rounded, raised dialog frame with two horizontal cells of inset. Pickers, prompts, confirmations, help, and the Config/Accounts, hooks and task forms share it. Titles and actionable hints use ink. Nested text resets restore the dialog background so styled labels do not leave stripes. This applies only to AF-owned dialog content, before framing; agent terminals and RGB values are not rewritten. Assistant and account-login sessions retain their existing full-terminal tmux handoff, with no extra AF overlay around the child.

Confirmations keep a border-coloured frame, dead consequence text, and one accent confirm action. Task deletion names its target and returns to the task list on cancel or confirm; a refresh cannot change the confirmed task ID.

Collapsed, unselected sessions use one row; selected/expanded groups disclose branch and churn detail, while failed restores/archives remain visible. The rail omits an empty branch line, and Agent no longer shares the limit-state diamond. The tab shown by the pane is marked “open” rather than an unexplained asterisk. Pane titles read Session · Tab · Preview or Keyboard; preview origin is available in help. Rail section headings use ink, with underline for focus and no decorative chip. Terminal frames share square geometry; dialogs alone use rounded corners. The footer uses one middle-dot separator and readable ink, retaining its context-sensitive choices, width-based shedding, exit route, and complete help.

Empty task sections already reserved no rows. Zero or one project now reserves no rail block either: the header retains project context, the picker remains available, and its Delete action retains the existing identity-aware confirmation. Two or more projects remain in the rail. Tasks show names and next occurrence first, expand selected metadata beneath, separate groups with one blank row, and keep the selected group in view. Edit is visible; ? actions discloses run/toggle/delete, with no run action offered for a watch.

Light/Dark/System selection and migration remain slice C. No daemon theme operation or token value changes in this slice. The literal guard and all-role foreground/background SGR tolerance tests remain in force.

Capture provenance

These 112 light/dark stills are actual app-model Update/View output from the existing P4 driver fixtures, serialized by its ANSI-to-SVG writer. Each SVG has its source .ansi alongside it. Eight added scene pairs cover account selection, task actions and deletion, one/multiple/degraded projects, dense sessions, and preview-origin help. All app execution runs inside a sandbox created by make playtest-container-detached; no host TUI or app/daemon tests. The A/P4 live scenario remains supplementary evidence; these new captures are deterministic app-model frames, not authenticated-agent recordings.

Reproduce inside the make-created sandbox with /src as cwd:

AF_TUI_DESIGN_CAPTURE=/home/dev/sandbox/p5-b-design \
AF_TUI_RECOVERY_CAPTURE=/home/dev/sandbox/p5-b-recovery \
/usr/local/go/bin/go test ./app -run 'Test(Recovery|DesignDriverScenes)' -count=1

Without capture variables the tests compare with app/testdata/design and app/testdata/recovery. The A gallery retains its previously approved stills.

Verification

The formatting, build, vet, fast lint, file-length, literal guard, SGR tolerance and generated-theme drift checks pass. The UI and design-token packages pass, as do the container driver goldens. All 112 driver goldens and the changed app tests pass inside the sandbox. State mapping enumeration, source branch inventory, and role/contrast audit cover the complete diff.

make perf-container passed at 1,000 sessions: full frame mean 66.873 ms, max 68.649 ms; key-to-render mean 68.232 ms, max 80.148 ms. Every sample meets the stricter P5 480 / 351 ms limits; no budget was relaxed. Raw samples and the complete report preserve the evidence. Strict MkDocs builds include this gallery. SVG and ANSI pairs are self-reviewed before the draft is submitted for Captain's design review.

Stills

Scene Light Dark
account picker account-picker light ANSI account-picker dark ANSI
account register account-register light ANSI account-register dark ANSI
accounts accounts light ANSI accounts dark ANSI
alarm alarm light ANSI alarm dark ANSI
archive failed archive-failed light ANSI archive-failed dark ANSI
archive warning archive-warning light ANSI archive-warning dark ANSI
config edit config-edit light ANSI config-edit dark ANSI
config config light ANSI config dark ANSI
confirmation confirmation light ANSI confirmation dark ANSI
create failed create-failed light ANSI create-failed dark ANSI
failure notice failure-notice light ANSI failure-notice dark ANSI
help help light ANSI help dark ANSI
hooks add hooks-add light ANSI hooks-add dark ANSI
hooks edit hooks-edit light ANSI hooks-edit dark ANSI
hooks hooks light ANSI hooks dark ANSI
keyboard keyboard light ANSI keyboard dark ANSI
kill failed kill-failed light ANSI kill-failed dark ANSI
multiple projects multiple-projects light ANSI multiple-projects dark ANSI
no daemon no-daemon light ANSI no-daemon dark ANSI
no project no-project light ANSI no-project dark ANSI
notice notice light ANSI notice dark ANSI
pane pane light ANSI pane dark ANSI
preview help preview-help light ANSI preview-help dark ANSI
preview preview light ANSI preview dark ANSI
project picker existing project-picker-existing light ANSI project-picker-existing dark ANSI
project picker project-picker light ANSI project-picker dark ANSI
project picker overflow project-picker-overflow light ANSI project-picker-overflow dark ANSI
projects unavailable projects-unavailable light ANSI projects-unavailable dark ANSI
prompt prompt light ANSI prompt dark ANSI
rail project selection rail-project-selection light ANSI rail-project-selection dark ANSI
rail task selection rail-task-selection light ANSI rail-task-selection dark ANSI
search search light ANSI search dark ANSI
search overflow search-overflow light ANSI search-overflow dark ANSI
selection selection light ANSI selection dark ANSI
selection overflow selection-overflow light ANSI selection-overflow dark ANSI
sessions sessions light ANSI sessions dark ANSI
single project single-project light ANSI single-project dark ANSI
task actions task-actions light ANSI task-actions dark ANSI
task create task-create light ANSI task-create dark ANSI
task delete task-delete light ANSI task-delete dark ANSI
task edit save failed task-edit-save-failed light ANSI task-edit-save-failed dark ANSI
task program task-program light ANSI task-program dark ANSI
task save failed task-save-failed light ANSI task-save-failed dark ANSI
task schedule task-schedule light ANSI task-schedule dark ANSI
task schedule type task-schedule-type light ANSI task-schedule-type dark ANSI
task trigger task-trigger light ANSI task-trigger dark ANSI
task weekdays task-weekdays light ANSI task-weekdays dark ANSI
task weekdays unchecked task-weekdays-unchecked light ANSI task-weekdays-unchecked dark ANSI
tasks tasks light ANSI tasks dark ANSI
tasks unavailable tasks-unavailable light ANSI tasks-unavailable dark ANSI
too small too-small light ANSI too-small dark ANSI
zero accounts zero-accounts light ANSI zero-accounts dark ANSI
zero sessions zero-sessions light ANSI zero-sessions dark ANSI
zero tasks zero-tasks light ANSI zero-tasks dark ANSI
sessions dense sessions-dense light ANSI sessions-dense dark ANSI
projects degraded projects-degraded light ANSI projects-degraded dark ANSI