# Plan: Mobile-friendly SPA (a439)

**Goal**: Make the Mavis HQ SPA actually work on iPhone 13. Per a438 amendment, this is split out of a438 v2 so the link-shape design can be decided in parallel without blocking the mobile fix.

**Why split**: a438 v2 (reports + agenda + checklist) is a logic change. a439 (mobile media queries) is a CSS/layout change. They can ship independently. The `relations` block on a438 will say `parallel: a439`.

**Constraint from G (2026-08-03 09:55 BST)**: "split but needs more thinking how do we link related plans" — handled in the `relations` sub-shape on a438 (and this plan mirrors the same shape).

---

## Step 1: Apply Q1/Q3/Q4 decisions to a438 v2 (already in plan, just amend meta)

- Q1: 2 new tabs (Reports + Agenda)
- Q3: yes backfill 9 existing prompts
- Q4: split — a438 keeps reports/agenda/checklist, a439 owns mobile

## Step 2: Add `relations` sub-shape to a438 + this plan

Locked shape:

"relations": [
  {"kind": "parallel", "target": "a439", "note": "ships at the same time as mobile media queries"}
]



5 kinds: `follows`, `blocks`, `parallel`, `supersedes`, `extracted`.

## Step 3: Mobile CSS changes (the work this plan owns)

3.1 Plan detail page: 1.4fr 1fr → 1fr at ≤768px, with section dividers
3.2 Targeting card: 1fr 1fr → 1fr at ≤768px
3.3 Back link: 12px text → 44px tap-target button
3.4 Long step labels: `flex-wrap: wrap` on the step row
3.5 17-step lists: collapse/expand toggle, default collapsed on mobile
3.6 Sticky back button on plan detail
3.7 State banner on plan detail (currently missing)
3.8 Tabs: taller tap targets, active pill, scroll-x on overflow
3.9 Topbar: stats hidden on mobile with compact replacement
3.10 Card padding 16px 12px on mobile (was 20px 24px)

## Step 4: Playwright iPhone 13 verification

390x844 viewport, take screenshot of:
- /mavis/plans
- /mavis/plans/438 (with checklist expanded)
- /mavis/timeline
- /mavis/repos
- /mavis/artifacts
- /mavis/inbox

Verify:
- 44px min tap targets
- No horizontal overflow
- State banner visible
- Sticky back button works
- All buttons reachable

## Step 5: Push + verify on VPS

Commit, push to avidtech6/fva-control-panel main, restart operator-panel, verify live URL.

---

## Open question for G (the "more thinking" part)

**The `relations` shape** — am I right that the 5 kinds above are enough, or do you see link kinds I'm missing? Specifically:
- **`blocks`** — strict gate (a439 blocks a440 until a439 ships). Right?
- **`parallel`** — ships together, no gate. Right?
- **`follows`** — sequential but not gated (a440 follows a439 but doesn't block). Right?
- **`supersedes`** — version chain (a438 v2 supersedes a438 v1). Right?
- **`extracted`** — split out of (a439 extracted from a438 v2). Right?

Or do you want simpler — just a `linked_plans: ["a437", "a439"]` array with no kind, and the relationship is just "see also"?

**My lean**: typed edges (5 kinds). Reasons:
1. The state machine needs to know about `blocks` to auto-pause a plan
2. The auto-bulletin on plan-finished can include the right "this follows from aNNN" or "this unblocks aNNN" line
3. "See also" loses information — every link becomes equivalent, and the SPA can't show "this plan is waiting on aNNN to finish" differently from "this plan is a v2 of aNNN"

But I'm open to simpler. Your call.