# Design sweep — Phase 0 brief Synthesis of the 12 group dossiers here. 35 screens scored. Feeds the Phase 1 mockups and the grill round; nothing below is decided — section 3 is what the operator rules on. Headline: the app is **much cleaner on tokens than expected** — 18 of 26 live screens carry zero markers. The debt sits in two pockets: the dormant Campaigns/Templates modules (357 markers, 9 files) and four stragglers still on the dead navy/gold palette. Everything else that reads as "wrong" is **information architecture and copy**, which a token pass would not have fixed. ## 1. Verdict table — live daily-use first, dormant last | Screen | Verdict | Markers | Why, in one line | |---|---|---|---| | Home | keep | 0 | Already the target picture; only a missing `aria-live` on the loading text. | | Inbox | polish | 22 | Sound three-pane IA; two navy `rgba()` literals, one jargon string, no dialog focus trap. | | Contacts | **redesign** | 30 | 7 flat filters + 2 tabs + 3 header actions + a floating bulk bar is IA overload on the busiest list. | | Contact detail | polish | 23 | Right shape; comma-separated tag input and raw attribute keys are the real fixes. | | Agent Activity | polish | 0 | Density is a deliberate ruling, not drift; needs grouping and discoverable shortcuts. Two sub-parts already owned by agent-scope-15. | | Agent Behaviour | keep | 0 | Rebuilt to spec and on-token; only the channel-append rule is unexplained in the UI. | | Knowledge rows | polish | 0 | Edit panel shows an empty box for structured documents that visibly have content — reads as data loss. | | Analytics (landing) | **redesign** | 0 (+9 css) | Five different chart idioms on one scroll is the mechanical cause of "confusing". | | Analytics drill | polish | 1 | The model to imitate; one off-scale headline and colour-only bar segments. | | analytics-shared | keep | 3 | Helpers, well factored; the 3 markers are brand-colour dots. | | Settings | **redesign** | 0 | Clean score is borrowed from `global.css` bare-tag rules; 2974 lines, 10 domains, zero `htmlFor`. | | Agent Overview | **redesign** | 0 | Three screens' content parked as stacked sections; the channel concept is rendered twice. | | Posts | polish | 0 | Cohesive; `role="tab"` without the ARIA tab contract. | | Flows home | polish | 0 | Right-sized concept, missing the row and folder ergonomics a mature list has. | | Flow runs | keep | 0 | Small, honest, functional. | | Flow canvas | **redesign** | 0 | Interaction layer only: no zoom UI, and card drag desyncs from the cursor at any non-1x zoom (real bug). | | Playground | polish | 0 | Two inputs have a placeholder and no label. | | Models | polish | 0 | `models.css` uses three tokens that do not exist — colour and dark mode silently drop. | | Channels tab | keep | 0 | Best copy in the app; inline `styles.ts` is consistency debt only. | | Triggers | polish | 0 | Clean CRUD; the caveat is a hover-only `title` tooltip. | | Threshold editor | keep | 0 | Well executed; duplicates the Button primitive, hardcodes 0.8. | | Login | **redesign** | 29 | UX is already good; the whole file ships the dead navy/gold + DM Sans system. | | Not found | polish | 8 | Token swap, nothing structural. | | API docs | polish | 35 | Heaviest live debt incl. raw hex; two tables have no overflow wrapper. | | Agent knowledge doc | **redesign** | 24 | Orphaned — no in-app link reaches it — and uses two tokens ruled dead by name. | | `automation.css` | polish | 0 | 244 dead lines from the deleted four-tab shell; only `.au-wrap` is still used. | | Campaign detail | redesign | 90 | Largest navy/gold concentration in the codebase; 844 lines, 6+ concerns. | | Campaigns list | redesign | 82 | Dead palette throughout; QR is a structurally different screen wedged into the tab row. | | CSV broadcast | redesign | 24 | Dead palette + the densest raw-control surface; two divergent audience UIs in one file. | | Campaign builder | redesign | 19 | Off-token structural styles; unsearchable pickers; invisible blocking reasons. | | QR campaigns | polish | 12 | One hex bubble colour, one raw checkbox. | | Campaign new | polish | 3 | Thin shell; inherits its children's debt. | | Templates list | polish | 68 | Worst single marker count outside campaigns, but the IA is already hand-tuned and sound. | | Template detail | polish | 33 | Token pass plus a `heroGrid` collapse under 600px. | | Template editor | polish | 26 | Sweep with `TemplateEditorForm.tsx` (57 more markers), not alone. | Totals: **keep 6 · polish 18 · redesign 11.** Live redesigns: 7. Dormant redesigns: 4. ## 2. Redesign shortlist — what "redesign" means, per screen Ranked by how much a daily user touches it. 1. **Contacts** — keep the table; five of seven filters go into one popover, the floating bulk bar becomes an inline toolbar, cross-page selection stops being silent. 2. **Analytics landing** — stop teaching five chart idioms on one scroll; the landing becomes summary and navigation, each block gets the drill page Outcomes already has. 3. **Settings** — decomposition, not repaint: one file per section, one field primitive, a real label on every control, plain names for the ops jargon. 4. **Flow canvas** — interaction layer only, data model and copy untouched: zoom HUD, drag-at-zoom fix, inline rename, multi-select, keyboard delete, context menus. 5. **Agent Overview** — decide where the two parked blocks live and merge the duplicated per-channel cards into one card per channel. 6. **Login** — same layout, rebuilt on `--cm-*`; the UX carries over as-is. 7. **Agent knowledge doc** — rebuild on tokens, make it responsive, and give it a door in from the Knowledge row menu for non-article kinds. 8. **Campaigns list · detail · builder · CSV broadcast** — full rebuild with a shared list toolbar and real form controls, when the module wakes up. ## 3. THE FORK LIST Ordered so a grill round walks it top-down: rulings that cascade, then where things live, then copy, then loose ends. Each carries a recommended answer. ### A. Rulings that decide many screens at once **A1. Form controls — how much waits for the headless spike?** 32 raw inputs in Settings, 4 in Inbox, 9 in Contacts, 5 in Templates, plus the campaign builders. *Recommend: split it. Plain inputs, textareas, checkboxes and label association move onto house components now (mechanical; Alerts is already the template). Selects, comboboxes, menus, dialogs and tooltips wait.* **A2. Does "no engineering vocabulary" apply to developer-facing pages?** API docs is curl, JSON and HTTP codes for external integrators; Campaign detail renders a raw curl + `X-Api-Key` panel in product UI. *Recommend: an explicit exception for integrator-facing pages, and move the campaign API panel behind that same framing instead of leaving it inline.* **A3. Two token-sheet gaps.** (a) 44px hero, 22px KPI and 34px drill headline sit off the type scale and disagree with each other. (b) Three brand hexes for Instagram/Facebook/WhatsApp are reused bare across files. *Recommend: add `--cm-fs-hero`, `--cm-fs-kpi` and a documented `--cm-brand-*` trio.* **A4. Is the flow canvas desktop-only by decision?** No media query exists and none may be wanted. *Recommend: rule it desktop/tablet-only in `docs/DECISIONS.md` so it stops reading as an oversight in future sweeps.* **A5. Do the dormant modules get their visual pass now?** Campaigns (230 markers) and Templates (127) are the whole legacy pocket and nobody uses either. *Recommend: defer to reactivation.* **A6. ARIA tabs — build the pattern or drop the role?** Posts, Settings and Templates all use `role="tab"` without arrow keys or `tabpanel`. *Recommend: one house answer — plain toggle buttons, same visual, no half-built contract.* ### B. Where things live (IA) - **B1. Analytics — five blocks on one page, or a drill page each?** *Recommend: a drill page each; the landing becomes summary and navigation.* - **B2. Contacts filters — collapse into a popover?** *Recommend: yes; search and channel stay inline, the other five go behind Filters.* - **B3. Contacts bulk bar — floating or inline?** *Recommend: inline toolbar; it removes the screen's only real narrow-width risk.* - **B4. Settings decomposition unit.** *Recommend: one file per section under `routes/settings/`; nav and the unsaved-changes guard stay in `Settings.tsx`.* - **B5. Overview — merge the duplicated per-channel cards?** *Recommend: merge into one card per channel.* - **B6. Overview — does the threshold editor move now, and where to?** Parked "until Moderation re-homes it". *Recommend: move it off now — Overview answers "is the bot okay?", not "tune the bot".* - **B7. Is the structured knowledge base still wanted?** Area guides, fee tables, step lists and FAQ pairs are unreachable and the light editor cannot touch them. *Recommend: yes — rebuild, with a door in from the row menu.* - **B8. Templates — merge folders and tags?** *Recommend: keep separate; folders are Meta-synced structure, tags are local metadata.* - **B9. Login — standalone card or app shell chrome?** *Recommend: standalone card, re-tokened.* - **B10. Segments as a tab inside Contacts — open for revisit?** *Recommend: held settled; a ledgered ruling, not a fresh call.* ### C. Copy - **C1.** Inbox "Window open / Window closed" is Meta's API term verbatim. *Recommend: "Can reply now" / "Reply window closed".* - **C2.** Settings "Red tier", "Silence detector", "Evaluation mode". *Recommend: rename to plain outcomes.* - **C3.** Behaviour's channel-append rule lives only in code comments. *Recommend: one hint line under the control; do not change the model.* - **C4.** Contact attributes show raw keys. *Recommend: format the key, leave the value untouched.* ### D. Loose ends worth a yes or no - **D1.** Comma-separated tag input. *Recommend: chip input matching display.* - **D2.** Activity's six `reviewKind` branches. *Recommend: keep the branching, fold to one shared primary/secondary button shape.* - **D3.** Activity's five-family bulk bar. *Recommend: keep merged, add dividers.* - **D4.** Activity shortcuts are near-invisible. *Recommend: `?` cheat sheet.* - **D5.** Models free-text field vs picker. *Recommend: keep free text.* - **D6.** Behaviour's all-or-nothing tab save. *Recommend: keep.* - **D7.** Threshold editor's hardcoded 0.8 reset. *Recommend: read from the API.* - **D8.** Canvas ergonomics scope. *Recommend: its own scope — primitive work.* - **D9.** Zoom controls placement. *Recommend: floating bottom-right HUD.* - **D10.** Channel cards' inline `styles.ts`. *Recommend: defer.* ## 4. Sequencing notes **Must wait for the headless-primitives spike.** Every select, dropdown menu, combobox, dialog and tooltip: Inbox's channel select, Settings' 6 selects, the Contacts filter popover, the Flows "+ New flow" menu, Templates' folder selects, Activity's 4 selects, the campaign template and segment pickers. Building any of these twice is the waste this ordering avoids. **Does not wait.** Token swaps, copy fixes, label association, responsive wrappers, dead-CSS deletion, the Models dead-token fix, the Inbox focus trap, the canvas drag-at-zoom bug. Cheap, isolated, independent of the library choice. Models deserves its own note: the conformance scanner catches legacy names and raw hex but **not an undefined `--cm-*` name**, so that whole class of defect ships silently — worth a scanner rule. **Collides with agent-scope-15 (Activity).** Two Activity sub-surfaces are already ordered with their own mockup gates: the **filter bar** (ORD-019, deliberately sequenced after the A1 filter-correctness fix) and the **review detail panel** (ORD-018). This sweep must not re-mock either. Scope-15 Phase A also owns the Activity table's 320px wrapper (A6) and swaps the Triggers post `