MIS Dashboard — Stitch design pass (spec)

Date: 2026-05-31 (Sun) · Session 41 · Claude Code (Opus 4.8, 1M)
Goal: Run the MIS v2 dashboard through Google Stitch to produce two on-brand
screen designs (home + watchlist grid), pull code + screenshots, fold the winner
into the portal in house style. Stitch = exploration; we adapt, it is not the
production code directly.

Decisions locked (Sam, 2026-05-31)

• Screens: BOTH — Dashboard home (cockpit) + Watchlist grid (AI-insights).
• Reference: drive from the recalled written description of the "AI Insights
  Watchlist Grid" (screenshot was never saved to repo). Re-capture later if pixel
  fidelity matters.
• Design system: feed docs/DESIGN_SYSTEM.md into Stitch FIRST
  (upload_design_md → create_design_system_from_design_md) so output is on-brand.

Design system (house language → Stitch DESIGN.md)

• Forced light. Body #f4f6f9 bg / #16202e ink. Never dark-invert; only the
  header band is dark.
• Header band navy gradient #0f2440 → #1c3a5e, gold accent #d4af37 / #b07d18,
  בס״ד top-right.
• Bubbly white cards, 9–11px radius, 1px #e2e8f0 borders, soft shadow.
• Status = 8px DOTS, not sentence pills. ok #10b981 · warn #f59e0b ·
  bad #ef4444 · spec #3b82f6.
• Tabular numerals on all money/%. System font stack. Mobile-first dense:
  12px card padding, 8px gaps, 15px/1.4 body.

Screen 1 — Dashboard home (cockpit)

• Hero: Lifetime +$22,447; sub Unrealized +$3,725 · Realized +$18,722; vs-SPY line.
• 3 tiles: Portfolio value · top winner · top drag.
• By-owner slice: SAM / DAUGHTER / SON / JOINT / SCHWAB.
• Winners ↑ / Drags ↓ (top 5 each); row = SYM ↑+X% @ $price +$Y.
• CTAs: View Positions → · Scope a ticker →.

Screen 2 — Watchlist grid (AI-insights)

• Per-ticker card: ticker + ↑/↓ today's % @ price (per feedback_direction_on_every_signal).
• Signal Health bar, green→yellow→red gradient.
• FinalState badge mapped to FSE vocab: ADD / STARTER / WATCH / BLOCKED / REJECTED
  (NOT generic "Strong Buy" — stays true to the engine).
• One-line AI-insight summary + "vs basis" % (real cost-basis truth).
• Insider sentiment row (90D net). View Details footer. GRID/TABLE toggle top-right.

Real data embedded (Session 39 truth)

ASML +29% (corrected basis $1,271.72) · META · NVDA · AAPL +70% · LLY · GOOG · COST ·
ORCL · KO · UNG +7.41% (corrected $11.06). Lifetime +$22,447.

Acceptance (cash-flow-thesis lens)

In 5 seconds Sam can answer: where do I stand (lifetime/today) · what's working ·
what's dragging · by-account · what needs attention. Advisory tone, never autonomous.
Direction arrow on every ticker.

Pipeline

create_project → upload_design_md → create_design_system_from_design_md
→ generate_screen_from_text ×2 (home, grid) → get_screen / download_assets
→ save screenshots+code under outputs/mockups/2026-05-31_stitch/ → push → portal.

Doctrine guardrails

Advisory not autonomous · verdict depends on intent/horizon · FSE is the single
decision source · ↑/↓ on every signal · broker-snapshot cost basis (not txn-weighted).

ANCHOR DECISION (locked 2026-05-31, Sam deferred to judgment)

These two Stitch screens are the VISUAL ANCHOR, not production code.
- DESIGN_SYSTEM.md = the law · these screens = the law applied to MIS ·
our hand-CSS = the production code we build TOWARD the picture.
- Do NOT copy Stitch's Tailwind into the portal — it would fork our styling
system. The portal is hand-CSS; rebuild toward the anchor in house CSS.
- Stitch output already matches house style because DESIGN_SYSTEM.md was fed in,
so anchor + our code agree by construction. Nothing to fork.
- Screenshots are the durable artifact: 2026-05-31_mis-stitch-home.png +
…-watchlist.png. The .html files are reference only.

Keep-list (design decisions to carry into the real build)

• Watchlist: Signal Health green→yellow→red gradient bar; FSE-vocab badge
  (ADD/STARTER/WATCH/BLOCKED/REJECTED) colored + uppercase next to ticker;
  ↑/↓ % @ price right-aligned; one-line AI-insight from FSE Reason; GRID/TABLE toggle.
• Home: Lifetime hero with Unrealized/Realized split + vs-SPY line; 3 tiles
  (Portfolio / Top Win / Top Drag); Working↑ / Dragging↓ lists; By-account slice;
  two CTAs. Bottom tab nav (Portfolio / Assets / Watch / Reports) — Stitch added it;
  ADOPT only if we want tabbed nav (decide at build time).

⚠ Data-honesty flags (do NOT ship as real until sourced)

• Insider 90D (Net Buy / Net Sell) on the watchlist cards: MIS has no insider
  feed today. This row is aspirational — either wire a source (Finnhub insider
  endpoint?) or drop the row. Don't render fake sentiment.
• vs-SPY per-position and drawdown gauge / MTD-vs-2.5%-target (from
  project_mis_cashflow_thesis) are NOT in these mockups yet — add at build time.
• "UNG = Top Drag" reads odd while green (+7.4%); pick the real worst performer
  for that tile from live data.

The real build (separate, planned session — it's the big one)

Production MIS dashboard = house-CSS pages + live MIS v2 data via a Cloudflare
Worker-rendered layer (the actual fix for the 4–5 min GAS load). Enter via plan
mode (feedback_plan_mode_for_big_builds). This Stitch pass de-risks the look;
the next pass de-risks the speed + live data.