# 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.