docs: re-anchor mobile design on .dc.html defaults; scope Phase 8; refresh Current state
This session audited the mobile surfaces vs the Claude Design export (functional-parity + visual-conformance) and corrected the design source of truth: the *.dc.html prototypes at their default data-props (compact/dark/plex/earmark) are canonical, not the screenshots (option-history). Adds the 9-phase Phase 8 conformance plan to ROADMAP, a durable gotcha to the Design convention, and prunes Current state to the live state.
This commit is contained in:
@@ -75,7 +75,7 @@ Subsystem rules live in `docs/guides/` and lazy-load in Claude Code via `.claude
|
||||
- **Env:** secrets in `.env` (gitignored); names in `.env.example`. Verified names: `ANTHROPIC_API_KEY`, `SPARK_CONTROL_URL`, `SPARK_CONTROL_VERIFY_TLS`, `QDRANT_URL`, `X_API_KEY`, `CRM_DB_PATH`, `CRM_DEV_DB_PATH`. Also used: `CRM_SECRET_KEY` (beta/prod), `CRM_HOST`/`CRM_PORT`, `CRM_DATA_DIR`; digest mailer: `CRM_DIGEST_SENDER` (DWD impersonation sender) + `SMTP_HOST`/`SMTP_PORT`/`SMTP_SECURITY`/`SMTP_FROM`/`SMTP_USERNAME`/`SMTP_PASSWORD` (SMTP fallback); daily digest (Phase B): `CRM_DIGEST_ENABLED` + `CRM_DIGEST_SEND_HOUR` **only seed the first-boot default** — the live control is the DB policy (`app_settings.digest_policy`, set in Settings → Admin).
|
||||
- **Config placement:** operational/feature toggles live in the **admin panel**, DB-backed via `app_settings` (read-merge through a `load_*_policy(conn)` helper shared by the API + any scheduler; precedence DB-row → env-seed → default), so they're discoverable and take effect live. Reserve StartOS actions / env for **secrets and deploy-time config** (SMTP creds, API keys, DWD sender). Precedent: `digest_policy` (`GET/PATCH /api/admin/digest/policy`), `fundraising_backup_policy`.
|
||||
- **Agent/bot API access — three roles now (`admin`/`member`/`bot`).** `require_admin` is the only hard gate; everything else is "authenticated" (member, admin, *and* bot all pass). The **`bot` role** (added v0.1.0:89) is authenticated-but-never-admin: `require_bot_or_admin` gates agent-facing endpoints (e.g. `/api/intake/email-proposals*`) so a bot credential reaches *only* what it needs, never user-management/settings/security. Provision it via Settings → Admin edit-user dropdown (kept out of the teammate-invite form). **Two axes to keep separate as more agent capability lands:** the role controls *reach* (which endpoints); the per-feature human draft→approve gate controls *autonomy* (acting unattended). Money/merge/delete mutations stay behind the approval gate regardless of role. Don't build a finer capability/scope system until real NL-mutation endpoints exist to scope against.
|
||||
- **Design:** before building or changing any user-facing UI, read `design/DESIGN.md` and `design/tokens.tokens.json` and conform to them. The **mobile-first redesign landed** (Claude Design round-trip distilled into the contract 2026-06-19): the authority for mobile/responsive work is **`DESIGN.md` §8** + the tokens `mobile` and `color.light` groups; `design/BRIEF.md` is the input brief and `design/_imports/2026-06-19/` the provenance + per-surface interaction reference (the comps are Claude Design runtime prototypes — re-author each surface in the app's React idiom + real API, not drop-in). A **light theme is built (P6)**: it lives in `:root[data-theme="light"]` (set by a pre-paint boot script from `localStorage.venture_crm_theme`; dark is the default), with an app-wide toggle in the desktop sidebar footer + the mobile top bar. **Colors are theme vars now — any new UI color MUST use a `:root` var (grow the set if needed), never a literal, or it won't flip in light** (chips/badges flip via `.stage-chip--{stage}` + the `--chip-*`/`--note-*`/`--badge-priority-*`/`--rem-*`/`--money`/`--recency-*`/`--due-soon` slots; authoritative dark+light pairs are in the Claude Design export `design/_imports/2026-06-19_zip-file/` `store.js` + `*App.dc.html`). Mobile light is complete; desktop has known unthemed shades (Phase 7). (Note: inline `style={{}}` objects can't respond to media queries; responsive layout belongs in the CSS `<style>` block. The **mobile foundation primitives are built** — CSS: `.bottom-tab-bar`, the `.bottom-sheet` primitive, `.mobile-only`/`.desktop-only`, `:root` mobile vars; React (Phase 2): **`<BottomSheet>`** (scrim/Escape/drag-to-dismiss) + **`useIsMobile()`** (768px) + the **`MobileDetailRow`**/`.fs-detail` full-screen-detail + `.contact-card`/`.az-header` list patterns — **build new mobile surfaces on these** (P3 Grid reuses them directly; swap surfaces via a rules-of-hooks-safe `useIsMobile()` wrapper that mounts a `Mobile*`/`Desktop*` pair, never a per-component hook toggle). The inline-style→CSS migration is **scoped, per-surface** (~114 styles across 4 surfaces+shell, not ~1,300), folded into each surface's build; see `ROADMAP.md`.)
|
||||
- **Design:** before building or changing any user-facing UI, read `design/DESIGN.md` and `design/tokens.tokens.json` and conform to them. The **mobile-first redesign landed** (Claude Design round-trip distilled into the contract 2026-06-19): the authority for mobile/responsive work is **`DESIGN.md` §8** + the tokens `mobile` and `color.light` groups; `design/BRIEF.md` is the input brief and `design/_imports/2026-06-19/` the provenance + per-surface interaction reference (the comps are Claude Design runtime prototypes — re-author each surface in the app's React idiom + real API, not drop-in; **the design source of truth is each `*.dc.html` at its DEFAULT `data-props` (compact/dark/plex/earmark — see `GridApp.dc.html` `data-props`), NOT the `screenshots/` PNGs, which are option-history (rejected/stale combos: INVESTOR/PROSPECT disposition badges, 6-stage MEETING/FUNDED funnel, star flag). Don't anchor on the screenshots** (cost a re-scope 2026-06-19; general learning in `standards/guides/design.md` Phase C)). A **light theme is built (P6)**: it lives in `:root[data-theme="light"]` (set by a pre-paint boot script from `localStorage.venture_crm_theme`; dark is the default), with an app-wide toggle in the desktop sidebar footer + the mobile top bar. **Colors are theme vars now — any new UI color MUST use a `:root` var (grow the set if needed), never a literal, or it won't flip in light** (chips/badges flip via `.stage-chip--{stage}` + the `--chip-*`/`--note-*`/`--badge-priority-*`/`--rem-*`/`--money`/`--recency-*`/`--due-soon` slots; authoritative dark+light pairs are in the Claude Design export `design/_imports/2026-06-19_zip-file/` `store.js` + `*App.dc.html`). Mobile light is complete; desktop has known unthemed shades (Phase 7). (Note: inline `style={{}}` objects can't respond to media queries; responsive layout belongs in the CSS `<style>` block. The **mobile foundation primitives are built** — CSS: `.bottom-tab-bar`, the `.bottom-sheet` primitive, `.mobile-only`/`.desktop-only`, `:root` mobile vars; React (Phase 2): **`<BottomSheet>`** (scrim/Escape/drag-to-dismiss) + **`useIsMobile()`** (768px) + the **`MobileDetailRow`**/`.fs-detail` full-screen-detail + `.contact-card`/`.az-header` list patterns — **build new mobile surfaces on these** (P3 Grid reuses them directly; swap surfaces via a rules-of-hooks-safe `useIsMobile()` wrapper that mounts a `Mobile*`/`Desktop*` pair, never a per-component hook toggle). The inline-style→CSS migration is **scoped, per-surface** (~114 styles across 4 surfaces+shell, not ~1,300), folded into each surface's build; see `ROADMAP.md`.)
|
||||
- **Commit style:** imperative subject, concise body explaining the *why*; put the package version in the subject (`… (v0.1.0:NN)`) for shippable changes. **No AI co-author / attribution trailers** — commits are authored by the user.
|
||||
|
||||
## Always
|
||||
@@ -107,13 +107,12 @@ Subsystem rules live in `docs/guides/` and lazy-load in Claude Code via `.claude
|
||||
|
||||
## Current state
|
||||
|
||||
_**Box live at v0.1.0:94**; `main` ahead by mobile Phases 0–7 + P3b name/pill edit + drag-reorder views — **all deploy-pending** (no s9pk built yet). **The fundraising grid + email capture is the canonical system of record.** Active thread: **mobile-first redesign** — **all 4 surfaces + light theme + P3b + Phase 7 theme-conformance done**. **Plan (Grant, 2026-06-19): finish features first — Phase 7 done → next is design/functional conformance-vs-export checks + PWA wiring, then Grant does device testing + deploy** (NOT before; everything is unverified on a real phone). Per-phase detail + backlog: `ROADMAP.md` / `EVALUATION.md`; history: git log + `start9/0.4/startos/versions/`._
|
||||
_**Box live at v0.1.0:94**; `main` ahead by mobile Phases 0–7 + P3b + drag-reorder views — **all deploy-pending** (no s9pk built). **The fundraising grid + email capture is the canonical system of record.** Active thread: **mobile-first redesign → Phase 8 (conform to the FINAL Claude Design mockups + functional parity)** — scoped this session, full plan in `ROADMAP.md`. **Plan (Grant, 2026-06-19): finish features first → then Grant device-tests + deploys** (NOT before; nothing is verified on a real phone). History: git log + `start9/0.4/startos/versions/`._
|
||||
|
||||
- **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 pass (frontend-only, `frontend/index.html`).** Routed ~50 remaining hardcoded color literals through themed `:root` vars so every surface flips under `[data-theme="light"]`, finishing the P6 migration. **28 new themed vars** (theme-stable ones — accent glows, selection indicators, the solid danger button — intentionally dark-only; dark appearance preserved). Covered: mobile bottom-tab-bar (`--nav-bg`, wiring the previously-dead token) + bottom-center mobile toast (new `slideInUp` keyframe); 3 money-green literals → `--money`; the **legacy Material `.badge-*` family (12 classes) retired** onto the brand StageChip/`--chip-*`/`--badge-priority`/new `--badge-danger-bg` slots (drops the 2nd color system per DESIGN §2/§7); and the desktop-light rough edges (logout/danger buttons, table hover/stripe/footer, sidebar+header gradients, scrollbars, toast error/success, context-menu danger, thesis banner/accents, grid selection & drag/resize indicators, skeleton loaders). Verified: **design-checker** inventory → scoped plan; **CSSOM render-smoke** (both theme rules parse, all flips distinct), full `var()`-resolution + brace balance; **reviewer** APPROVE-WITH-NITS (the one P2 — mobile toast slid in from the right vs its new bottom-center rest — **fixed** via `slideInUp`). **No real-phone check.** **NB: the `.badge-*` remap may be largely cosmetic — several legacy badge classes have no live JSX caller; a legacy-usage sweep (ROADMAP) will confirm what to delete.**
|
||||
- **Prior session — P3b investor name + contact-pill edit (committed `3f93daf`, frontend + backend).** New **version-safe `POST /api/fundraising/update-row`** (`handle_update_fundraising_row`) — the one-row read-fresh-modify-write twin of `handle_log_fundraising_communication`: reads the canonical grid blob server-side, mutates ONLY the target row's `investor_name`/`contacts`, writes back with a version bump + `sync_fundraising_relational`. Never a whole-grid payload → can't clobber concurrent edits to other rows (BRIEF §3a). Server-side `_sanitize_fundraising_contacts` (9-field whitelist; drops name+email-empty pills) is the trust boundary. Frontend: `MobileFundraisingGrid` detail gains an **Edit** bottom-sheet (investor-name input + pill add/edit/remove of name·email·title, preserving each pill's location/LinkedIn fields, **client-side dedup** by email→name) → saves through update-row → reloads; money stays desktop-only. Pill removal is **soft** on the classic `contacts` directory (only the grid pill + `fundraising_contacts` row drop). New CSS is theme-var-only (`.pill-edit*`/`.sheet-addbtn`/`.fs-detail-edit`). Verified: **`backend/test_fundraising_update_row.py`** (24 assertions over real HTTP — rename/add/edit/remove, other-row-untouched, relational + classic-contacts sync, soft-remove, name-only-pill kept, 5 guards); full suite **37/37**; render-smoke green; throwaway jsdom-375px harness drove the real edit flow (14/14: open→edit→rename→remove→add→save, asserted `POST update-row` + **no whole-grid PUT** + preserved fields). Reviewer-passed (nits were deliberate sibling-pattern parity). **No real-phone check.**
|
||||
- **Prior session (`e6a8945`) — P6 light theme (frontend-only).** App-wide light theme behind `:root[data-theme="light"]` (dark default; pre-paint boot script reads `localStorage.venture_crm_theme`); toggle in desktop sidebar footer + mobile top bar off one `App` `theme` state. 44 themed `:root` slots (dark == originals byte-for-byte), 319 hex→`var()` migrated, `StageChip` className-based. **Mobile light complete; desktop-light rough edges** (bespoke `<style>` shades: login glow/scrollbar/table-hover/KPI green, legacy off-palette `.badge-*`, dark shadows) → **resolved in Phase 7 (this session)**. Verified render-smoke + jsdom toggle harness (7/7). **No real-phone check.** Earlier (`ee9db64`): **P4 Pipeline** + **P5 Reminders** (swipe-done/snooze) — 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 **8a–8i** 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.
|
||||
- **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 (finish features):** 1) **mobile visual-conformance check** — compare the 4 mobile screens (Grid/Pipeline/Reminders/Contacts) against the Claude Design export comps (`design/_imports/2026-06-19_zip-file/`); 2) **mobile functional-parity check** — verify wired behaviour (taps/swipes/pills, the DB actions, not visuals) matches the export's `store.js`/`*App.dc.html`; 3) **PWA wiring** (manifest + service worker + icons; mind StartOS serving + the no-build single-file setup). **Then (Grant, after feature-complete):** deploy P0–P7 + P3b + view-reorder in one s9pk (**authorize + version-bump first**) and device-test light/dark on a real phone. Later backlog: legacy-`.badge-*`/legacy-functionality usage sweep + delete; W2 web Ask box + smoke; W3 bot grid-mutations; W1b nurture-gap.
|
||||
- **Open / risks:** all mobile work + **light theme (mobile + desktop, Phase 7) + P3b edit** **built but never deployed or tested on a real phone/browser** (render-smoke + jsdom/CSSOM only — verify on a device, both themes); 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 (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 P0–P8 + 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.
|
||||
|
||||
Reference in New Issue
Block a user