Skip to content

TUI design system: slice C

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 now offers Light, Dark and System, with the same saved light, dark and system values as the browser. The global appearance setting applies on the next TUI launch. System detects the terminal background before Bubble Tea starts, using termenv's OSC 11 / COLORFGBG fallback and dark when unavailable. Forced modes bypass detection. The browser header preference is separate and follows the OS for System.

Legacy auto, absent and unknown values resolve to System; reading does not rewrite the file, and saving a valid choice replaces it. Retired palette rows are hidden even from older daemon manifests. See configuration migration for the full retired-key list and the deliberately separate daemon cleanup in #3936.

Help omits the v prefix when the build has no Version. Released builds still show their version. No other TUI layout or semantic mapping changes in C.

Capture provenance

These 116 light/dark frames were captured inside the existing make-created af-p5-3916-b playtest sandbox, using the P4 app-model driver and ANSI-to-SVG writer. Each SVG has its source ANSI beside it. No host TUI or app/daemon tests. The new appearance scenes show explicit Light/Dark and System with each resolved palette. System's resolved background is fixed by the driver for deterministic stills; separate unit tests exercise detection, environment fallback, dark fallback, and bypass for explicit choices.

Only eight TUI SVGs differ from B: four new appearance captures and four help / preview-help captures that remove the empty version prefix. The other 108 are byte-identical. These are app-model Update/View frames, not authenticated-agent recordings.

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

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

Without capture variables, the driver compares the checked-in app goldens. The shared manifest also adds the TUI setting to web Config, so its affected Config snapshots are refreshed by the perf container. Browser appearance selection is unchanged.

Verification

Role/contrast audit, state mapping enumeration, source branch inventory, and style construction inventory cover the complete C diff and the inherited UI state mappings. Verification record records checks.

The final make perf-container run passed at 1,000 sessions: full frame mean 79.734 ms, max 88.021 ms; key-to-render mean 63.709 ms, max 68.426 ms. Every sample is within the P5 480 ms / 351 ms budgets. No budgets changed. Raw TUI samples and complete metrics retain the evidence.

Stills

Scene Light Dark
appearance appearance light ANSI appearance dark ANSI
appearance system appearance-system light ANSI appearance-system dark ANSI
help help light ANSI help dark ANSI
preview help preview-help light ANSI preview-help dark ANSI
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 config light ANSI config dark ANSI
config edit config-edit light ANSI config-edit 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
hooks hooks light ANSI hooks dark ANSI
hooks add hooks-add light ANSI hooks-add dark ANSI
hooks edit hooks-edit light ANSI hooks-edit 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 preview light ANSI preview dark ANSI
project picker project-picker light ANSI project-picker dark ANSI
project picker existing project-picker-existing light ANSI project-picker-existing dark ANSI
project picker overflow project-picker-overflow light ANSI project-picker-overflow dark ANSI
projects degraded projects-degraded light ANSI projects-degraded 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
sessions dense sessions-dense light ANSI sessions-dense 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