docs: add re-anchored Phase 8 visual-conformance spec + record Grant's design calls

design/phase8-conformance.md — per-surface anatomy + deltas + line refs built
against the .dc.html defaults (not the screenshots), as the 8a–8i build reference.
Corrects the screenshot read (drop disposition badges + contact footer; 4-stage
funnel + swipe dirs already correct). Records two Grant decisions (2026-06-19):
Pipeline existing-LP uses the earmark (unify with Grid, overriding the dc star);
Contacts drops the investor/prospect type tabs (prospect type unused) but keeps a
Priority-flag sort. Refresh AGENTS.md Current state; ROADMAP Phase 8 points at the spec.
This commit is contained in:
Keysat
2026-06-19 20:12:11 -05:00
parent e3f5ef8dc8
commit 60d67f6b7d
3 changed files with 135 additions and 4 deletions
+3 -3
View File
@@ -111,8 +111,8 @@ _**Box live at v0.1.0:94**; `main` ahead by mobile Phases 07 + P3b + drag-reo
- **Mobile redesign — all 4 core surfaces built + committed (Grid · Contacts · Pipeline · Reminders).** Each is a rules-of-hooks-safe `useIsMobile()` wrapper → `Mobile*`/`Desktop*` pair (**desktop untouched**), re-authored against the real API on shared primitives `<BottomSheet>`/`useIsMobile()`/`StageChip`/`MobileDetailRow`. Foundation: bottom-tab bar + `:root` mobile vars (P1); 4-stage enum + read-only derived grid signals (`existing_investor`/`last_activity_at`/`staleness`/`opportunity_id`) injected on GET, **stripped on write at both points** (P0/P3a `_computed_row_values` + `stripComputedRows`). **Mobile writes use one-row endpoints only — never whole-grid PUT** (BRIEF §3a): log-communication, pipeline link/stage, reminders, and now **`POST /api/fundraising/update-row`** (P3b name/pill edit). Per-phase detail in `ROADMAP.md`.
- **This session — Phase 7 theme-conformance (committed + pushed `490cab9`).** Routed ~50 hardcoded colors through **28 new themed `:root` vars** so every surface flips under `[data-theme="light"]`; **retired the legacy Material `.badge-*` family (12 classes)** onto brand StageChip/`--chip-*`/`--badge-priority`/`--badge-danger-bg` slots; bottom-center mobile toast (`slideInUp`). Verified CSSOM render-smoke + `var()`-resolution + reviewer (APPROVE-WITH-NITS, toast-rise fixed). **No real-phone check.** (`.badge-*` remap may be largely cosmetic — several classes have no live JSX caller; legacy-usage sweep in ROADMAP.)
- **This session — design + functional conformance audit (2 agents) → Phase 8 scoped.** **Functional-parity report = VALID** (built from `store.js` + `.dc.html` wiring). **Visual-conformance report = screenshot-anchored → partly INVALID.** **Key correction (durable, see Design convention above): the design source of truth is each `*.dc.html` at its DEFAULT `data-props` (compact/dark/plex/**earmark**), NOT the `screenshots/` PNGs** (option-history — disposition badges, 6-stage funnel, star flag were rejected). Authoritative final card spec + the 9-phase **8a8i** plan are in `ROADMAP.md`; the general learning was promoted to `standards/guides/design.md` (pushed). Reminder↔investor "grid-only" was a mislabel — `reminders.investor_id` already exists + `POST /api/reminders` accepts it; the picker is a simple client fix.
- **This session — design + functional conformance audit (2 agents) → Phase 8 scoped + spec'd.** **Functional-parity report = VALID** (built from `store.js` + `.dc.html` wiring). The screenshot-anchored visual pass was **re-anchored to the `.dc.html` defaults → durable per-surface build spec: `design/phase8-conformance.md`** (anatomy + deltas + line refs, the 8a8i reference). **Key correction (durable, see Design convention above): the design source of truth is each `*.dc.html` at its DEFAULT `data-props` (compact/dark/plex/**earmark**), NOT the `screenshots/` PNGs** (option-history — disposition badges, 6-stage funnel, star flag were rejected). 9-phase **8a8i** plan in `ROADMAP.md`; general learning promoted to `standards/guides/design.md` (pushed). **Grant design calls (2026-06-19):** Pipeline existing-LP uses the **earmark** (unify w/ Grid, override the dc star — build it as a reusable component); Contacts drops the investor/prospect type tabs (prospect unused) but keeps a **Priority-flag sort**. Reminder↔investor "grid-only" was a mislabel — `reminders.investor_id` already exists + `POST /api/reminders` accepts it; the picker is a simple client fix.
- **Live (deployed):** W2 NL query (v94; remaining: in-room smoke + web "Ask" box); W1 reminders (v93); grid Pipeline (v88); Matrix intake + Gmail capture (DWD) + daily digest; Thesis/Architect (dual-approval); outreach — all draft-only.
- **Tests:** **37/37 backend green** (`python3 backend/run_tests.py`; +`test_fundraising_update_row.py`), `py_compile` clean, render-smoke green, fresh-DB migrate clean.
- **Next — Phase 8 (next session), in order (full spec in `ROADMAP.md`):** **first re-anchor the visual-conformance findings to the `.dc.html` defaults**, then **8a** card re-author (Grid+Contacts → earmark + right-side PRIORITY badge + 4-stage chip; **reconcile `DESIGN.md` §8**) → **8b** detail-surface log actions (Contacts/Pipeline) → **8c** quick-log pencil → **8d** sort controls**8e** reminders (read/edit/clear + snooze sheet + investor picker) → **8f** pipeline card/dots → **8g** add-investor stage+priority → **8h** loose ends → **8i** shell SVG icons + wordmark. **Skip Pipeline accordion** (Grant: not wanted). **Then (Grant, after feature-complete):** deploy P0P8 + P3b in one s9pk (**authorize + version-bump first**) and device-test light/dark on a real phone. Later backlog: **PWA** (manifest+SW+icons+`server.py` routes — feasible, app has MOCK_MODE + local vendored libs; install verifies only post-deploy); legacy-usage sweep + delete; W2 web Ask box; W3 bot grid-mutations.
- **Open / risks:** all mobile work + light theme + P3b **built but never deployed or device-tested** (smoke/jsdom only — verify both themes on a phone); **the visual-conformance report must be re-anchored to the `.dc.html` defaults before its fixes are trusted** (it chased the rejected screenshot card); W2 happy-path only; **Claude/Architect path unverified live on the box**; v2.0 reserve-asset spine **not canonical** (needs dual sign-off); doc drift — `crm-overview.md`/`EVALUATION.md` still call `lp_profiles` live.
- **Next — Phase 8 (next session), in order — build to `design/phase8-conformance.md`:** **8a** card re-author (Grid+Contacts → **earmark as a reusable component** + right-side PRIORITY pill + 4-stage chip; **reconcile `DESIGN.md` §8**) → **8b** detail-surface bottom-sheets w/ log actions (Contacts/Pipeline) → **8c** quick-log pencil → **8d** sort (Grid+Pipeline sort sheet; Contacts = drop type tabs, add Priority sort)**8e** reminders (read/edit/clear + snooze sheet + investor picker + due-chip) → **8f** pipeline card (earmark/Priority/recency) + dots → **8g** add-investor stage+priority → **8h** loose ends → **8i** shell SVG icons + `·Ten31·` wordmark. **Skip Pipeline accordion** (Grant: not wanted). **Then (Grant, after feature-complete):** deploy P0P8 + P3b in one s9pk (**authorize + version-bump first**) and device-test light/dark on a real phone. Later backlog: **PWA** (manifest+SW+icons+`server.py` routes — feasible, app has MOCK_MODE + local vendored libs; install verifies only post-deploy); legacy-usage sweep + delete; W2 web Ask box; W3 bot grid-mutations.
- **Open / risks:** all mobile work + light theme + P3b **built but never deployed or device-tested** (smoke/jsdom only — verify both themes on a phone); Phase 8 build spec is `design/phase8-conformance.md` (re-anchored — don't rebuild from the screenshots); W2 happy-path only; **Claude/Architect path unverified live on the box**; v2.0 reserve-asset spine **not canonical** (needs dual sign-off); doc drift — `crm-overview.md`/`EVALUATION.md` still call `lp_profiles` live.
+1 -1
View File
@@ -284,7 +284,7 @@ surface is re-authored in the app's React idiom and wired to the **real API**.*
*Phases 07 built the mobile surfaces + light theme. Phase 8 closes the gap to the **final** design + functional parity. Two independent agent passes ran 2026-06-19 (functional-parity + visual-conformance); their findings + the source-of-truth correction below drive this plan.*
**⚠️ Anchor on the `.dc.html` prototypes at their DEFAULT props — NOT the screenshots.** The Claude Design export (`design/_imports/2026-06-19_zip-file/Venture-CRM mobile redesign/`) ships parameterized `*.dc.html` prototypes whose `data-props` **defaults are the landed decisions** (`variant:compact`, `theme:dark`, `font:plex`, **`lpFlag:earmark`** — see `GridApp.dc.html:320`). The PNG `screenshots/` are **option-history** (rejected/stale prop combos: INVESTOR/PROSPECT disposition badges, a 6-stage MEETING/FUNDED funnel, the star flag). **The visual-conformance agent report from this session is screenshot-anchored and therefore partly invalid** — re-run it (or hand-correct it) against the `.dc.html` defaults before trusting its "fix to match" items. **The functional-parity agent report stands** (built from `store.js` + `.dc.html` wiring, not screenshots). *(General learning promoted to `standards/guides/design.md` Phase C.)*
**⚠️ Anchor on the `.dc.html` prototypes at their DEFAULT props — NOT the screenshots.** The Claude Design export (`design/_imports/2026-06-19_zip-file/Venture-CRM mobile redesign/`) ships parameterized `*.dc.html` prototypes whose `data-props` **defaults are the landed decisions** (`variant:compact`, `theme:dark`, `font:plex`, **`lpFlag:earmark`** — see `GridApp.dc.html:320`). The PNG `screenshots/` are **option-history** (rejected/stale prop combos: INVESTOR/PROSPECT disposition badges, a 6-stage MEETING/FUNDED funnel, the star flag). **The per-surface build reference is `design/phase8-conformance.md`** a re-anchored visual-conformance spec (anatomy + deltas + line refs, built against the `.dc.html` defaults); it supersedes the original screenshot-anchored pass. **The functional-parity agent report stands** (built from `store.js` + `.dc.html` wiring, not screenshots). *(General learning promoted to `standards/guides/design.md` Phase C.)* **Per-surface existing-LP signal: Grid + Pipeline = earmark corner-triangle** (Grant override 2026-06-19 — the dc used ★ for Pipeline; unify on the earmark) **· Contacts = avatar ring.** **Contacts (decided):** drop the investor/prospect type tabs (prospect type unused), but **keep a Priority-flag sort** as an enhancement beyond the dc.
**Authoritative final investor card** (from `GridApp.dc.html:84105`, the `<sc-for>` card; supersedes the screenshot "3-zone" card): card = `--panel` bg, 1px `--border`, radius 10, padding 12×14, `--shadow-card`, gap 8. **Existing-LP = an earmark corner-triangle** top-left (18px `--accent` dog-ear via the border trick), *not* a star, *not* a left-border. Row 1: investor **name** (16px/600, left) · **PRIORITY** badge right (mono 10px pill, **only if flagged — no INVESTOR/PROSPECT disposition badge**). Row 2: committed **`$amount`** (mono 15px, left) · **4-stage pipeline-stage chip** (mono 11px pill, `lead/engaged/diligence/commitment`). Row 3: **recency** "2d ago" (mono 12px). **No contact-name footer band** (that was an older screenshot variant). The current app card is close — 8a is mostly: swap the existing-LP signal to the earmark corner-triangle, move priority to the right-side PRIORITY badge, confirm `$` placement.
+131
View File
@@ -0,0 +1,131 @@
# Phase 8 — mobile visual-conformance build reference
**Status:** scoped 2026-06-19, not started. Working reference for ROADMAP Phase 8 (8a8i). Delete/archive once Phase 8 lands.
**Anchor (read first):** the source of truth is each `*.dc.html` in `design/_imports/2026-06-19_zip-file/Venture-CRM mobile redesign/` **rendered at its DEFAULT `data-props`** — NOT the `screenshots/` PNGs (those are option-history: rejected disposition badges, a 6-stage MEETING/FUNDED funnel, the star-everywhere flag, a contact-footer band). Defaults: all surfaces `theme=dark`; Grid `variant=compact, font=plex, lpFlag=earmark`; Pipeline `mode=swipe`. Spacing/type tokens (card radius 10, gap 10, title 16, body 15, detail title 22) **already match** — the gaps below are **anatomy/structure**, not spacing/theme.
> **Per-surface existing-LP signal:** **Grid = earmark corner-triangle · Pipeline = earmark corner-triangle** (Grant override 2026-06-19 — unify with Grid; the dc default was a ★ star, we don't follow it) **· Contacts = avatar ring**.
> **Contacts sort/tabs (decided, Grant 2026-06-19):** **remove the investor/prospect type tabs** — the `prospect` type isn't used anywhere useful (C2). **Keep a sort — by the Priority flag** — as a deliberate enhancement beyond the dc (which is search-only, no sort).
`*.dc.html:NN` = prototype line; `index.html:NN` = current app line.
---
## Surface 1 — GRID (`GridApp.dc.html`, app `MobileFundraisingGrid`)
**Authoritative card** (`GridApp:84108`): `--panel` bg, 1px `--border`, radius 10, padding 12×14, `--shadow-card`, gap 8.
- **Existing-LP = earmark corner-triangle, top-left** (`:8991`): `border-top:18px solid var(--accent); border-right:18px solid transparent`. At `lpFlag=earmark`, `lpEarmark` true / `lpStar`/`lpBanner` false (`:492494`).
- Row 1 (`:92102`): name 16px/600 left; **Priority** mono-10px pill right, *only if* `c.priority` (radius 4, amber `priBg/priText`). No investor/prospect badge.
- Row 2 (`:103106`): `$amount` mono 15/600 (`amtColor` green if >0 else muted) · **4-stage chip** (mono 11, radius-999 pill; lead/engaged/diligence/commitment colors `:405409`).
- Row 3 (`:107`): recency mono 12 ("2d ago"/"30d stale"; amber ≥10d, red ≥30d, `:421426`).
**List header** (`:6581`): tappable view-name 21/600 + ▾; row 2 = mono count (left) + **SORT pill** (right, mono 11 uppercase, sort-icon + label, `:7275`); then search (44px) + gradient `+`. Sort sheet (`:633`): Name / Pipeline stage / Committed / Last contact / Priority.
**Investor detail** = full-screen (`:177293`): title 22 + Edit; chip row = Priority + **"Existing LP" pill** (`:192194`) + "Last contact …"; **Pipeline stage** card (tappable chip + "Change "); **Contacts** pills + "+ Add"; **Commitments** (read-only + Total); **Reminder** card; **Notes timeline** (dot-and-line, type tag + date + summary, "+ Log").
**Deltas:**
| # | Delta | app | spec | sev |
|---|-------|-----|------|-----|
| G1 | Existing-LP wrong: app uses `border-left:3px` + `★` in detail title → **earmark corner-triangle** on card + **"Existing LP" pill** in detail | `2321`,`9659`,`9754` | `8991`,`192194` | **HIGH** |
| G2 | Priority is a `★` glyph → make it a **"PRIORITY" text pill** (collides with existing-LP star today) | `9662`,`2323` | `99101` | **HIGH** |
| G3 | **No sort control** (only a count) → add SORT pill + sort sheet (5 opts) | `96879689` | `7275`,`633` | **HIGH** |
| G4 | Detail pipeline: "Stage" row + button → single tappable **stage card** (chip inline + "Change ") | `97629773` | `198207` | MED |
| G5 | No dedicated **Reminder card** (reminder is a row in Activity) → dedicated card (note + due / "No reminder", ) | `98029804` | `249262` | MED |
| G6 | Notes = single text blob → **timeline** (dot+line rail, per-entry tag+date+summary) | `9805` | `270289` | MED |
| G7 | Subtitle "$X committed · {lead}" → committed lives in Commitments card; subtitle = priority/LP/last-contact chips | `9757` | `188196` | LOW |
| G8 | Card amount color: verify zero-commit dims to muted (`.zero` token parity) | `9665`,`2330` | `495` | LOW |
**Corrections to prior read:** DROP the left-accent-border (never the default — replace with earmark); the `★` is the rejected `lpFlag=star` option (remove); Priority is a pill not a star; the 4-stage chip is **correct, keep**.
---
## Surface 2 — CONTACTS (`ContactsApp.dc.html`, app `MobileContactsPage`/`MobileContactDetail`)
**Header** (`:5965`): "Contacts" 21/600 + mono count; **search only — no segmented tabs, no sort**. List **always AZ** (sticky mono headers, `:337343`), hard-coded `name.localeCompare` (`:322`).
**Card** (`:7283`): row, panel/border/radius-10, padding 11×13.
- **Avatar** (`:74`): 40px, `--elev`, **two-letter initials** mono 13 accentlight; **existing-LP = ring** `border:1.5px solid var(--accent)` else 1px `--border` (`:329`).
- Name 15/600 (`:76`); below: **org** 13 `--t3` **+ 4-stage pill** mono 9 (`:79`).
- Right: **recency** mono 11 (`:82`, `:272278`).
**Detail = bottom sheet** (`:119179`, *not* full-screen): 52px avatar+initials+ring, name 19 + org; **email-copy pill** ("EMAIL" + mono accent address + copy, `:134140`); **two action buttons** — "Log communication" (gradient, flex 2) + "Email" (flex 1, `:143146`); **Organization card** = earmark + org + stage pill + **Committed / Last-contact** stat pair + last-note tag + **"Open investor in Grid "** (`:149175`).
**Deltas:**
| # | Delta | app | spec | sev |
|---|-------|-----|------|-----|
| C1 | Card has **disposition (investor/prospect) badge** → remove; right-side signal is **4-stage pill (under name) + recency** | `5220`,`52195222` | `79`,`82` | **HIGH** |
| C2 | **Remove the All/Investors/Prospects type tabs** (prospect type unused); **keep a sort — by Priority flag** (enhancement; dc is search-only) — Grant 2026-06-19 | `52405250` | `5965` | **HIGH** |
| C3 | Avatar = one initial, no ring → **two-letter initials + existing-LP ring** (`amt>0`) | `5214`,`22222227`,`5068` | `74`,`329`,`285289` | **HIGH** |
| C4 | Card meta shows raw **date** (`formatDate`) → **recency text** ("2d ago") | `5221` | `82` | MED |
| C5 | Detail = full-screen field-dump → **bottom sheet** (email-copy pill, Log/Email pair, Org card w/ "Open in Grid") | `50755137` | `119175` | **HIGH** |
| C6 | Card sub = org only → org **+ stage pill** same line | `5217` | `7780` | MED |
**Corrections:** DROP the disposition badge (classifying signal is stage-pill + ring); the segmented tabs are an app-only addition, not in the design.
---
## Surface 3 — PIPELINE (`PipelineApp.dc.html`, app `MobilePipeline`)
**Header** (`:5968`): "Pipeline" 21 + mono total + **SORT pill** (Name/Amount/Staleness/Priority, `:6467`,`:422`). **4 stages** lead/engaged/diligence/commitment (`:369370`).
**Swipe mode** (`:71132`): horizontally-scrollable **segmented stage pills** (height 36, radius 999) with mono uppercase label **+ count badge** (`:7679`); full-width **scroll-snap stage columns** (header = stage chip + count + sum; card list); **page dots** (active = 22px bar, `:125132`).
**Card** (`:97117`): panel/radius-10; tappable region + **divider + two move buttons** ( / , disabled at ends, `:112115`).
- Row 1: **existing-LP = earmark corner-triangle** (Grant override 2026-06-19 — dc default was `★` at `:101`; **use the Grid earmark instead** for consistency) + name 16/600; **Priority pill** right (`:104`).
- Row 2: `$amount` mono 15/600 · 3px dot · recency mono 12 (`:106110`).
**Detail = bottom sheet** (`:204272`): name 19 + Priority/Existing-LP pills + last-contact; **Committed / Contacts stat tiles** (`:222231`); **"Move stage" inline radio list** w/ checkmarks (`:233241`); **Notes timeline + "+ Log"** (`:243266`); separate **Log sheet** over it (`:274302`).
**Deltas:**
| # | Delta | app | spec | sev |
|---|-------|-----|------|-----|
| P1 | Segmented control = vertical count-over-label boxes → **horizontal-scroll pills + count badge** | `59455958`,`24002414` | `7382` | MED |
| P2 | Cards lack **existing-LP flag, Priority pill, recency** (app = name + contact·org sub + amount) → **earmark** (Grant override, not ★) + name / Priority pill / amount·dot·recency | `59165933` | `99110` | **HIGH** |
| P3 | **No SORT control** on header | `59355977` | `6467` | MED |
| P4 | Detail = full-screen field-dump → **bottom sheet** (stat tiles + inline move-stage radio list + notes timeline + inline Log) | `59806036` | `204272` | **HIGH** |
| P5 | Stage change = button → sub-sheet → make move-stage list **inline in the sheet** | `60056007`,`60236035` | `233241` | MED |
| P6 | Page total "N deals · $X" → stage-column header = **chip + count + sum** | `59635966` | `8894` | LOW |
**Corrections:** the app's **4-stage funnel is CORRECT** (dc `stages()` resolves to lead/engaged/diligence/commitment; the 6-stage MEETING/FUNDED/OUTREACH in screenshots is stale seed). Don't add a type/disposition badge. **Pipeline existing-LP = earmark corner-triangle** (Grant override 2026-06-19; the dc default was `★`, we don't follow it — reuse the Grid earmark component).
---
## Surface 4 — REMINDERS (`RemindersApp.dc.html`, app `MobileReminders`/`ReminderRow`)
**Header** (`:5662`): "Reminders" 21 + a **mono summary** ("2 overdue · 1 today · 7 open", red when overdue, `:313315`) + gradient `+`. **No Active/Done/All filter** — only a collapsible **Completed** section at list end (`:109130`).
**Buckets** (`:317332`): **4** — Overdue / Today / This week / Later, each header = **colored dot** (red/amber/blue/grey) + mono label + count.
**Row** (`:7594`): swipe wrapper; **right=Snooze** (`:7780`), **left=Complete** (`:8285`), threshold 70 (`:257`). Card (`:8793`): note 15/500; below = org 13 + **due-chip pill** (mono 10, radius 999, urgency bg/text/border, "3d overdue"/"Today"/"in 4d"/"Jun 24", `:91`,`:228240`).
**Completed** (`:109130`): collapsible; done row = filled check circle + strikethrough note + org.
**Deltas:**
| # | Delta | app | spec | sev |
|---|-------|-----|------|-----|
| R1 | Due = plain colored mono text → **urgency-colored chip pill** | `4620`,`2480` | `91` | **HIGH** |
| R2 | Buckets: Overdue/Due-soon/Later → **Overdue / Today / This week / Later** ("Today" its own bucket) | `45574563` | `318`,`235239` | MED |
| R3 | Header = Active/Done/All filter + "+ New" → title + **summary line** + `+` | `47444755`,`4766` | `5662` | **HIGH** |
| R4 | Group headers lack the **colored dot** (7px, red/amber/blue/grey) | `4766`,`24552461` | `6872`,`317` | MED |
| R5 | Completed via filter tabs → **collapsible "Completed" section** at list end (active list is default) | `47484751`,`4764` | `109130` | MED |
| R6 | Swipe left=Done / right=Snooze **matches** — keep (labels cosmetic) | `46074608` | `77,82` | LOW |
| R7 | Edit = bottom sheet — **correct**, keep | `4782` | `159173` | — |
**Corrections:** left=Done/right=Snooze is correct (don't flip); edit-via-sheet is correct.
---
## Phase 8 punch-list (visual/structural only — DB-wiring parity is the separate functional report)
- **8a Grid card (HIGH):** G1 earmark corner-triangle (replace left-border); G2 PRIORITY text pill (replace ★); G8 zero-commit dim token parity.
- **8f Pipeline card (HIGH):** P2 add ★ + Priority pill + recency line; P1 horizontal-scroll pills + count badge; P6 stage-column header chip+count+sum.
- **8b Detail actions/structure (HIGH):** C5+P4 convert Contacts & Pipeline detail full-screen → **bottom sheets** with the dc anatomy; G4/G5/G6 Grid detail → tappable stage card + dedicated Reminder card + notes **timeline**; P5 inline move-stage list.
- **8c Quick-log (MED):** Grid/Pipeline notes post into a **timeline** (tag+date); dc Grid has a **top-bar quick-log pencil** (`GridApp:5355`) the shell lacks → 8i.
- **8d Sort (HIGH/MED):** add SORT pill → sort sheet to Grid (`9687`) + Pipeline (`5935`). **Contacts (Grant decided): remove the investor/prospect type tabs** (`52405250`); **keep a Priority-flag sort** as an enhancement (dc had none).
- **8e Reminders (HIGH):** R1 due-chip pill; R3 header summary line (reconsider Active/Done/All vs dc collapsible Completed, R5); R2/R4 re-bucket Overdue/Today/This-week/Later with colored dots.
- **8i Shell (MED):** Contacts avatars → two-letter initials + existing-LP ring (C3); drop disposition badges (C1) + Contacts tabs (C2); dc top-bar = quick-log pencil + theme + account cluster (every dc `:5058`).
**Severity order (whole phase):** G1, G2, C1, C2, C3, C5, P2, P4, R1, R3 (HIGH) → G3, P3, sort/bucket/dot/chip (MED) → G7, G8, P6, R6 (LOW).
**Theme-var note (DESIGN convention):** every new color (earmark, priority pill, ring, due-chip, segment count-badge) MUST use `:root` theme vars, not literals. Authoritative dark/light pairs: `GridApp.dc.html` `stageColors`/`priColors`/`recency` (`:400442`), `RemindersApp.dc.html` `urgency` (`:228240`).