focus-flow/archive/Archived plans/UI Plan 1 - Compact Today Timeline Mockup/mockups

UI Plan 1 Mockup Reference

Status: Planned reference assets

This folder contains the semi-strict visual truth for UI Plan 1.

Clean mockups

• clean/main_screen_compact.png
  • Compact Today timeline without a selected task.
• clean/task_selected_modal.png
  • Compact Today timeline with a selected task modal open.

Use these for visual matching.

Annotated mockups

• annotated/main_screen_compact_notes.png
• annotated/task_selected_modal_notes.png

Use these for implementation notes only. The opaque note blocks are not part of the product UI.

Visual fidelity rules

1. Preserve the dark, calm, information-dense desktop composition.
2. Preserve the sidebar, top bar, required banner, timeline rail, card colors, and modal proportions unless Flutter constraints force minor differences.
3. Do not add a white page/app background.
4. Do not make no-op buttons greyed out.
5. The reward symbol must use solid sparkles/stars.
6. Difficulty must always be five bars, with the number of filled bars derived from task difficulty.
7. Prefer custom painters for the reward/difficulty icons rather than generic icon fonts when generic icons do not match.
8. Runtime date should default to current owner-local day; tests/screenshot fixtures may use the mockup date.

Component truth map

Component	Primary mockup truth	Notes
App frame/sidebar	clean/main_screen_compact.png	Desktop-first. Sidebar controls are no-op.
Top bar/date/toggles	clean/main_screen_compact.png	Compact selected. Normal visible/no-op.
Next required banner	clean/main_screen_compact.png	Derived from backend read model.
Timeline rail/grid	clean/main_screen_compact.png	4:00 PM through 8:45 PM visible.
Task cards	clean/main_screen_compact.png	Colors and density matter more than exact font metrics.
Reward/difficulty icons	Both clean mockups	Solid reward sparkles; five difficulty bars.
Selected-task modal	clean/task_selected_modal.png	Close/outside-click functional; action buttons no-op.