kvitt/PLAN-W1.md

PLAN-W1: Web home and accounts

1. Goal

Build the web client's Home (W-2), account detail (W-3) and account editor (W-4) in web/src/features/home/ and web/src/features/accounts/, on W0's foundation, mirroring S-4, S-3, S-5 and S-6 in content, rules and states (SPEC §15.6), with tests.

2. Read first

1. SPEC §15 (all), FR-21, FR-6 (accounts), FR-10 (balances), §9.2 (effect line), §9.3 (balances), §9.6 (limits), §9.8, AC-8.10, AC-11.7, §13.3 rows S-3, S-4, S-5, S-6, D-052, D-068, D-080.
2. docs/ux/design-spec.md §3.2 to §3.6 and the S-3, S-4, S-5, S-6 sections; docs/ux/strings.csv keys home_*, account_* and the shared ones they use.
3. web/README.md and W0's report (in the start prompt's notes): the module map.
4. Files: web/src/app/** (router, shell; read only), web/src/api/** (snapshot selectors, write helpers; read only), web/src/lib/** (computeBalances, formatters; read only), web/src/components/** (balance header, ledger rows, month header; read only), web/src/features/home/**, web/src/features/accounts/** (W0's placeholders).
5. CLAUDE.md (Anti-patterns, Execution protocols).

3. Already established

• W0 owns everything shared; this plan edits only its two feature folders. A shared piece that is missing or wrong (a component, a selector, a formatter) is a request to the orchestrator, not an edit in W0's paths; work around it inside the feature only when the report names it.
• Balances, effect lines and month totals are computed in the browser from the snapshot with W0's computeBalances and formatters (§15.5), never re-implemented.
• Home (W-2): the balance header with the §9.3 wording and amount, Settle up when non-zero (to /app/settle), active accounts with balance wording, amount and this month's expense count, a collapsed "Archived (n)" section, the empty state "Create your first account"; while the household has no partner, the S-3 content instead (explanation; Invite partner for the admin to /app/settings/invites). No sync pill, no update banner, no pull to refresh (§15.6).
• Account detail (W-3): name, default split with names (common_ratio "60/40"), balance header, expenses and settlements interleaved by date, grouped by month with month totals (household spend), rows per AC-8.10 and AC-11.7 (opening /app/expenses/:id or /app/settlements/:id), archived badge; actions New expense (not on an archived account; to /app/expenses/new with the account), Settle this account (/app/settle with the account), Edit, Archive / Unarchive (archive shows the S-5 snackbar with undo, D-071), Delete only when allowed (AC-6.5); list order by created_at (AC-6.6); unique names (AC-6.2: name_taken shown on the name field).
• Account editor (W-4): name, the default split as two percent fields that always sum to 100 with two decimals and a slider or stepper, the "Of 100,00 kr" preview, Save and Cancel; the discard dialog has a title and no body (D-080). Create (E-18), rename and ratio (E-19), archive and unarchive (E-20, E-21), delete (E-22), each applying the returned row (§15.5); a failure shows "Kunde inte nå servern" or the error code's text and keeps the form.
• Desktop layout is this plan's within W0's shell and tokens: for example Home's accounts as a grid or list beside the balance header, account detail with a wider ledger. Under 720 px it reads as the app's screens.
• Strings from docs/ux/strings.csv where they exist, web_ keys otherwise, in the feature's i18n/{sv,en}.json.

4. Owned paths

From SPEC §14.7: web/src/features/home/**, web/src/features/accounts/**. web/package.json only to add a dependency line (the second plan to land resolves package-lock.json with npm install on rebase). Nothing else.

5. Deliverables

• The three pages with every state of §15.6 (loaded, empty, loading, error, long content: long Swedish names, 7-digit amounts) and the S-3 variant of Home.
• Tests (Vitest, Testing Library) over a snapshot fixture: balance wording per direction and settled, archived section, month grouping and totals, delete allowed or not, ratio fields summing to 100, discard dialog, each write's success and failure path.

6. Steps

1. Worktree: from /Users/jhag/projects/kvitt, git worktree add .claude/worktrees/agent-w1 -b agent-w1 main; in it git reset --hard main, tools/install-git-hooks.sh, cd web && npm ci.
2. Read §2. Confirm W0 has landed (web/package.json and the placeholders in this plan's folders exist on main); if not, stop and report.
3. npm outdated in web/; record it. No new library is expected.
4. Build W-2, then W-3, then W-4, with tests.
5. Manual check (optional): a throwaway server as web/README.md describes, npm run dev, create accounts and expenses through the pages that exist. Never the owner's development stack or the Pi.
6. Gate (§7). Commit on agent-w1, git rebase main (other web plans land in parallel; only package-lock.json may conflict), rerun the gate. Never merge, push or remove the worktree.

7. Gate

The web gate, from web/: npm run check (SPEC §15.3). Green: every step passed in this session; the report quotes the Vitest summary.

8. HUMAN steps

From SPEC §11.2: look at Home and an account in a browser against the development stack (yes/no), relayed by the orchestrator after landing and a dev-stack rebuild.

9. Out of scope

• Expense editor and detail, search (W2); settle up and settlement detail (W3); analytics (W4); settings (W5).
• Any edit in W0's paths (web/src/{app,api,i18n,design,components,lib}/**) or another feature folder.

10. Report

• Branch agent-w1, head commit after rebasing on main; gate lines and Vitest counts.
• Pages × states covered; screenshots are not committed (none in the web gate).
• web_ keys added with en and sv; strings missing from strings.csv; design-spec mismatches.
• Requests for W0's modules, workarounds kept inside the feature, proposed decision entries (numbered from the brief), open questions with SPEC section numbers.

11. Numbering

Assigned in the start prompt; use TODO(spec) if none was given.