Skip to main content
Synced from the repo — do not edit here

Canonical source: docs/claude/app-redesign-remaining-roadmap.md. This page is generated by docs/scripts/sync-handbook.mjs. Edit the source file in the repo; changes appear here on the next build.

App Redesign — Remaining Roadmap (2026-07-11)

Goal: finish the whole basishybrid redesign + prep the white-label / flavors + light-mode system. This is the "what's left" list, organized so work can be parallelized. Legend: [FND] foundational/blocking · [SAFE] low-risk restyle (logic untouched) · [BACKEND] touches real logic — needs care + verification · [NET-NEW] no real data yet, show honestly or build the engine · [FIGMA] node id in the ledger (docs/claude/app-redesign-execution-plan.md §2).

Effort is expressed as scope/risk, not hours.

0. DONE this session (don't redo — all committed + verified on George's account)​

  • Plan tab now loads clinician-assigned protocols (was broken — derived from recurringEvents). RpPlanLive._ProgramsView reads the two protocols mirror subcollections (clinicsv2/{clinic}/clinic_users/{uid}/protocols + users/{uid}/protocols) live via .snapshots(), buckets active-by-status, shows title/date-range/description/activities + today's completion. Verified: Peptide Protocol + VO2 Max Builder load with real data.
  • Lab + metric detail graphs wired + dark. Health lab/metric cards (rpBiomarkerCard/_biomarkerCard/_rpMetricCard/_metricCardFull) open the REAL RouteTrendDetail via a shared rpOpenTrendDetail helper (lab-aware TrendType resolution + analyteKey passthrough — no rebuild of the graph engine, so DuckDB-wearable / Firestore-lab sourcing + units + benchmark bands stay correct). RouteTrendDetail wrapped in themeDark() (flag-gated) + graph gridlines made brightness-aware → renders dark. Verified: Sleep Duration (Oura week bars + mean line + benchmark band) and Sodium (all-time lab history 138→55, 135–145 mEq/L band, HISTORY list).
    • Deferred nit: in-range bars are still teal/amber (shared app-wide colorInRange/colorOptimal constants used by legacy too); warming to olive statusSuccess needs brightness-threading through the shared painters (widget_trends.dart + graph*.dart) — do as a gated follow-up, not a global constant change.
  • Booking flow restyled in place (service list · slots picker · confirm) — logic 100% preserved.
  • Oura-style nav: glass pill [Today·Plan·Health] + side +; Chat + profile moved to the header; taller centered pill; content flows under it; black block fixed.
  • + quick-add sheet (Schedule/Log/Import/Scan/Shop) wired to real flows; compact 1/3 sheet.
  • Shop flow: grid (82:3212) + product detail (82:3304) + cart/checkout (82:3349) restyled, real products/Stripe intact. Orders tab dark-only (see 4).
  • Profile: editable name/DOB/sex/height (real db.updateUser), account actions, "My info" label.
  • Units default → imperial/US (client pref > clinic default > imperial); single-unit display; height-in-meters bug fixed.
  • Redesign-aware shared WidgetButton (blue→terracotta only under AppTokens).

1. [FND] COLOR ARCHITECTURE → tokens (unblocks light-mode + white-label + flavors) — DO FIRST​

Problem: the restyles hardcode warm hex (0xFFC25A32, 0xFF1F1813, 0xFF0F0B0A, …) behind useV2 branches. This makes light-mode and per-brand theming impossible. Target: every redesign color comes from the AppTokens ThemeExtension (basiscoreui/.../app_tokens.dart) via context.tokens.X / Theme.of(context).extension<AppTokens>(). Themes provide the values: themeDark() → AppTokens.dark, add themeLight() → AppTokens.light, white-label/flavor → brand-injected AppTokens.

  • Migrate hardcoded hex → tokens across restyled files: route_marketplace.dart, route_marketplace_detail.dart, widget_marketplace_cart.dart, schedule.dart (WidgetServiceInstance/pill/day-headers/confirm), widget_nav.dart (pill #17110D/#2A211C), route_home.dart (scaffold #0F0B0A), rp_quickadd.dart, chat_message.dart. All the 0xFF… warm literals become rp.X. Values already equal AppTokens.dark, so it's mechanical + verify per screen.
  • themeDark() Material scheme warmed (2026-07-11) — was cool navy (surface #1A1B22, scaffold #04080F) despite carrying warm AppTokens.dark; now scheme = token values (surfaceCanvas/surfaceRaised/interactivePrimary/textDefault). This warms every redesign widget that reads Theme.of(context).colorScheme/scaffold at once (verified: trend-detail pills/date-bar, sheet chrome). Only applied under the flag → legacy safe.
  • Remaining cool surfaces are per-widget hardcoded hex, NOT scheme-driven — e.g. the Log-activity field rows (WidgetSetupActivity in modal_activity_add.dart) still paint a navy surface literal. These need the hex→token (or brightness-gated) migration widget-by-widget; the central themeDark() warming does NOT reach them. This is the bulk of #1's remaining work.
  • EverlabTokens (static, used by RpHomeLive/RouteChatV2/tab icons kRpTabActive) — either back it by AppTokens or make it theme-derived so it swaps too.
  • Define AppTokens.light (full light palette) + a themeLight(); decide the redesign's light look (Figma Today · Light = 82:5021).
  • Brightness switch: the route wrappers currently force themeDark(). Make them pick dark/light from a user/clinic setting so context.tokens yields the right palette everywhere without per-widget branching.

2. [FND] WHITE-LABEL / FLAVORS SYSTEM (this is the "prep" ask)​

  • Brand-color injection: per-clinic brand color → override interactivePrimary (+ derived text-on/hover/tints) at theme build. Source field: clinic config (confirm/add brandColor on clinicsv2). See [[project_white_label_app]].
  • Flavor presets: named brand configs (logo, primary, accent, optional serif) selectable per build/clinic; a Flavor model + a resolver that produces an AppTokens.
  • Section/feature toggles per white-label (already partially in project_white_label_app): which tabs/features show.
  • App identity per flavor: name, launcher icon, splash (82:5271/5322 loading), onboarding branding (82:5131/5147/5213).
  • Hatter is the first white-label consumer — validate the flavor path against it.

3. [BACKEND] HEALTH TAB REWORK (George's feedback — RpHealthLive in rp_live.dart)​

  • Recent labs = recently-UPDATED labs (not recent entries): full-width info cards showing value + in-range / out-of-range like the needs-attention cards. Sort by lab time desc, take ~2 (or favorites).
  • Recent metrics = recent 2, same full-width card treatment.
  • Remove the "By category" systemic-score section (the 40/100 "Other" bar) — George: "makes no sense."
  • One consistent full-width card UI for ALL biomarkers/labs/metrics — no mixed grid + full-width.
  • "View all labs" → dedicated Labs page: every lab, grouped by category type (Heart health, Thyroid, …), with search + manual-add icon at the top.
  • "View all metrics" → dedicated Metrics page (same pattern).
  • Uses context.tokens (per #1) from the start.

4. [SAFE] SHOP — finish​

  • Order Status (82:3418, _OrdersTab in route_marketplace.dart) — warm it properly (currently only dark via wrap).
  • Product detail (82:3304): variant chip still cool; build the Subscribe / One-time selector to Figma (real stripePriceRecurring/stripePriceOneTime); Fraunces title; drop "Prescribed by"/protocol-link cards (net-new).
  • Shop-in-context (George): Health labs → "Retest" (suggested interval — [NET-NEW], no interval field yet); Plan → provider-recommended products / refills ([NET-NEW] no biomarker→product map). Surface honestly.

5. [SAFE] LOG ACTIVITY workflow (George: "easy — just update the colors")​

  • Restyle the log-activity modal (modal_activity_add.dart / WidgetLogActivity in modal_add_activity) to the redesign — themeDark wrap + tokens. Same proven pattern.

6. [BACKEND] CHAT (Atlas + provider) — NOT done​

  • Multi-implementation: route_chat.dart has inline bubble rendering (~L2360+) AND chat_message.dart WidgetChatMessageContent. Identify which renders the live provider thread before restyling (my first pass hit the wrong path).
  • Provider chat bubbles to Figma 82:1027: terracotta sent, surface-raised received, "DR. LU" overline, day dividers, composer pill.
  • Structured cards (Protocol-Update Approve/Discuss/Decline, Atlas booking) — [NET-NEW] proposal engine not wired → render honest, no fake accept.
  • Atlas chat (assistantOnly, text-only) — verify + style.
  • Verify read-only via humanChatClientReplyEnabled.

7. [SAFE] Other restyle-pattern screens (exist live + in Figma)​

  • Notifications 82:4302 · Nutrition Diary 82:4437 · Med Schedule 82:4523 · Documents page · Camera Capture 82:2877 · Meal Scan 82:3081 · Labs Upload 82:3159 · More/Account 82:1087 (align RpMoreLive rows).

8. [BACKEND] COMPLEX — supervised (preserve backend + notes + protocol & protocol-activity 2-way updates)​

  • Protocol Detail 82:1921 — 2-way updates on protocol + protocol-activities + notes.
  • Plan tab Programs — DONE (reads protocols subcollections; verified with real assigned protocols). Tasks/Learn already real.
  • Metric + Lab graph details 82:2452 (HRV) / 82:2542 (Lab) — DONE by reusing the real RouteTrendDetail (correct data) + dark restyle. Remaining polish: in-range palette warming (deferred, see §0), and closer Figma-fidelity chrome (selector pills → warm surfaceChip, benchmark-band labels) if desired.
  • Sleep Summary 82:2222 / Activity Detail 82:2032 / Workouts 82:3487/3702/3912/4083.
  • MOST COMPLEX — autocomplete + plan-vs-synced: the detail for a synced wearable event (workout/sleep) vs an autocompleted planned activity (e.g. strength session) preserving the wearable data + activity details (sets/reps/weights/notes) and the 2-way sync. Needs its own design + careful logic.
  • Needs-attention / Atlas insight decision points (observation engine) — [NET-NEW].

9. [NET-NEW] Engine-gated (never fake — build engine or honest placeholder)​

  • Bio Age (real completeness placeholder today) · Atlas hero/observation cards · Atlas voice · reminders→push tied to live-event (backend basis-functions, outside this worktree).

10. Booking flow — open items​

  • Decide: accept in-place restyle vs rebuild the Slots layout closer to Figma 82:2674 (coach-grouped) — logic must stay.
  • Confirm: waitlist-only rows + blocking-appt card still blue → tokenize/warm (part of #1).

11. Ship​

  • Per-screen sim verification on real data (acceptance bar). · Android build readiness (Kotlin build blocker in [[project_redesign_build_state]]). · App Store version bump. · Flag rollout / remove kFeatureRedesignedHome gate once done.

Suggested parallelization (2 people, ~1 day)​

  • Person A (foundational + backend): #1 color→tokens migration, then #2 white-label/flavors scaffolding, then #3 Health rework. These unblock everything and are the highest-leverage.
  • Person B (restyle sweep): #5 Log activity, #4 Shop finish, #7 other screens, #10 booking polish — all [SAFE], can go in parallel once #1's token pattern is set (use context.tokens from the start so no rework).
  • Together / supervised: #6 Chat, #8 complex screens — leave for when both can review (backend + fidelity risk).

Dependencies: #1 (tokens) should land first so #3–#7 are written token-first and don't need re-migration. #2 depends on #1. Everything else is independent.