# 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. |