From 6c30dff516b6d425bd9d2faf1fac1716897ad5f6 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 10 Jun 2026 11:48:34 +0000 Subject: [PATCH 01/12] docs: add repository audit report and improvement plan https://claude.ai/code/session_01Dn84c88DDz5xSC19Z9c5Mg --- AUDIT_REPORT.md | 327 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 327 insertions(+) create mode 100644 AUDIT_REPORT.md diff --git a/AUDIT_REPORT.md b/AUDIT_REPORT.md new file mode 100644 index 0000000..6da2ec1 --- /dev/null +++ b/AUDIT_REPORT.md @@ -0,0 +1,327 @@ +# Repository Audit & Improvement Plan — Fish Cost Calculator + +**Date:** 2026-06-10 +**Scope:** Full repository at commit `f8b05a6` (branch `main`) +**Method:** Every claim below was verified against actual files (cited as `file:line`), or by running the project's own tooling (`npm test`, `npm run lint`, `npm run build`, `npm audit`). Facts and judgments are labeled where they could be confused. + +--- + +## 1. Executive Summary + +**Health grade: C−** + +The frontend craft is genuinely good for a project at this maturity (accessible tooltips, offline-first IndexedDB store, PWA, dark mode, 1,788 passing data-validation tests). But the audit found that the app's flagship feature — offline-first sync — is **silently broken in at least four independent ways** due to client/server field-name mismatches and a missing endpoint, and that **OAuth users cannot use any authenticated API except the contributor profile** because the data layer only ever reads the password-auth JWT. Neither failure is caught by any test or CI gate, because the only CI is CodeQL and the only tests validate the static fish dataset. + +### Top 3 Risks +1. **The sync engine and the API disagree on field names and routes** — synced calculations lose their yield value, custom-yield sync fails with a 400 on every attempt, pulled yields arrive as `undefined`, and deleted calculations resurrect because the DELETE endpoint doesn't exist (§3.1, Critical). +2. **Real credentials live in git history.** `SECURITY_NOTICE.md` documents the exposure and demands rotation; history was never scrubbed (28 secret-bearing lines still retrievable via `git log -p`). Whether rotation happened cannot be verified from the repo (§3.3, Critical-if-unrotated). +3. **Every saved calculation — including users' cost data — is published to all visitors** via `/api/public-calcs` with no opt-in and no disclosure at save time (§3.4, High). + +### Top 3 Opportunities +1. **A real CI gate (lint + test + build) is one small YAML file away** — and would immediately surface that `npm run lint` currently fails with 22 errors. +2. **Fixing ~6 lines of field-name mismatches** restores the entire sync feature. +3. **A shared `getAuthHeaders()` helper** (the pattern already exists in `ContributorProfile.jsx:23-33`) unlocks the whole authenticated API surface for OAuth users. + +--- + +## 2. Repo Map (Phase 1) + +### Purpose & users +A fish-yield/cost calculator for small-scale fishers and seafood processors (Local Catch Network community). Given a species and a processing conversion (e.g., "Round → Skinless Fillet"), it computes the true cost per pound of finished product. Early-stage, single-maintainer, deployed on Vercel; maturity is "live hobby/community tool," not a commercial product. + +### Stack +- **Frontend** (`app/`): React 19 + Vite 7, Tailwind 3, React Router 7, Stack Auth (`@stackframe/react`), `idb-keyval` for IndexedDB, `vite-plugin-pwa`, Vitest. Builds clean; main chunk exceeds 500 kB (Vite warning), PWA precache ≈ 1.97 MB. +- **Production backend** (`api/`): Vercel serverless functions, Neon PostgreSQL via `@neondatabase/serverless`, JWT (password) + Stack Auth (OAuth) dual auth, shared helpers in `api/_lib/`. +- **Local dev backend** (`server/server.js`): single-file Express 5 + SQLite, intended to mirror `api/` (per `CLAUDE.md`) — it has drifted (§3.6). +- **CI**: CodeQL only (`.github/workflows/codeql.yml`). No lint/test/build workflow. + +### Data & control flow +1. Yield data is **static** in `app/src/data/fish_data_v3.js` (1,398 lines, 89 species — verified by import) and processed at module load in `Calculator.jsx:10-30`. +2. All calculations happen **client-side** (`Calculator.jsx:462-526`). +3. User data (saved calcs, custom yields) is written to IndexedDB first (`app/src/lib/localStore.js`), then pushed/pulled by `app/src/lib/syncEngine.js` against `/api/save-calc`, `/api/saved-calcs`, `/api/user-data`. +4. A **parallel, unused data path** exists: `api/fish-data.js` serves species/yields from Neon tables (populated by `scripts/import-fish-data-to-neon.js`), but the frontend never calls it — `Calculator.jsx:2` imports the static file. + +### Key directories +| Path | Role | +|---|---| +| `app/src/components/` | 11 page/feature components; `Calculator.jsx` (1,396 lines) is the core | +| `app/src/context/` | Auth, Data (sync orchestration), Theme | +| `app/src/lib/` | `localStore.js` (IndexedDB), `syncEngine.js` (push/pull) | +| `api/` + `api/_lib/` | Production serverless endpoints + db/auth/cors helpers | +| `server/` | Express+SQLite local dev backend | +| `scripts/` | Neon schema + one-off migration/import scripts | +| repo root | Docs (extensive), plus one-off Python scripts, a 2.7 MB source PDF, `pdf_content.txt` — all tracked in git | + +### Surprises found during mapping +- `git ls-files` shows `datasets/% Yields NHCS.xlsx` is tracked even though `.gitignore:49` lists `datasets/` (tracked files override ignore rules). +- `server/.env.example` defines `JWT_SECRET` **twice** (lines 1 and 14) with different placeholder values, and documents a `GEMINI_API_KEY` that no code anywhere references (grep confirms only docs/env files mention it). +- Root `package.json:13` depends on `better-sqlite3` (a heavy native module) used only by the one-off `scripts/migrate-sqlite-to-neon.js`, yet `vercel.json:5` runs `npm install` at root on **every deploy**. + +--- + +## 3. Audit Report (Phase 2) + +Severity scale: **Critical** = core feature broken or security exposure; **High** = significant correctness/security/process risk; **Medium** = real but contained; **Low** = polish. + +### 3.1 CRITICAL — Sync engine ↔ API contract is broken (4 distinct bugs) + +These are **facts**, verified by reading both sides of each call: + +**(a) Saved calculations sync with `yield = NULL`.** +`syncEngine.js:42` pushes `yield_value: calc.yield` to `POST /api/save-calc`, but the handler destructures `yield` (`api/save-calc.js:10`) — so `yieldVal` is `undefined` and the row is inserted with NULL yield. It also sends `mode` and `target_weight` (`syncEngine.js:39-41`) which the handler ignores and the schema has no columns for (`scripts/neon-schema.sql:18-28`), so weight-mode calculations sync as malformed cost calculations. + +**(b) Custom-yield push fails 100% of the time.** +`syncEngine.js:96` sends `yield_percentage`, but `api/user-data/index.js:23-27` requires `yield` and returns `400 "Species, product, and yield are required"`. Every sync attempt for custom yields errors; the navbar sync dot (App.jsx:56-71) shows a permanent error state for affected users. + +**(c) Pulled yields arrive as `undefined`.** +`GET /api/user-data` returns a `yield` column (`api/user-data/index.js:11`), but the merge reads `sy.yield_percentage` (`localStore.js:144`) — merged records get `yield: undefined`, which `Calculator.jsx:251` turns into `NaN`. + +**(d) Deleted calculations resurrect.** +`syncEngine.js:65` issues `DELETE /api/saved-calcs/{id}`. No such route exists — `api/saved-calcs.js` is GET-only and there is no `api/saved-calcs/[id].js`; `server/server.js` has no DELETE either. Vercel returns 404, which `syncEngine.js:69` treats as success (`res.ok || res.status === 404`), so the local tombstone is removed while the server row survives — and gets re-pulled (and re-published via public-calcs) on the next sync. + +**Why it matters:** this is the product's core differentiating feature ("offline-first, syncs when you log in"), and it fails silently. No test exercises any of these paths. + +### 3.2 CRITICAL — OAuth users are locked out of the entire data API (except contributor profile) + +**Fact:** the backend supports dual auth (`api/_lib/auth.js:36-59` accepts JWT *or* Stack Auth session), but the frontend data layer only ever sends the password-auth JWT from localStorage: +- `DataContext.jsx:63-64`: `const token = localStorage.getItem('token'); if (!token || !navigator.onLine) return;` — **sync never even starts** for OAuth users. +- `UploadData.jsx:28-33`: upload sends `Bearer ${localStorage.getItem('token')}` → `Bearer null` → 401 for OAuth users, even though the page renders for them. +- `Calculator.jsx:1199-1203`: "Export History" does the same → 401. + +`ContributorProfile.jsx:23-33` shows the correct pattern (falls back to `x-stack-access-token` from `stackUser.getAuthJson()`), so the fix is to extract and reuse it. **Judgment:** since the login page leads with Google/GitHub buttons (`Login.jsx:70-88`), OAuth is likely the *majority* path, meaning most signed-in users get a permanently broken sync/upload/export experience. + +### 3.3 CRITICAL (if unrotated) — Secrets in git history, history never scrubbed + +**Facts:** `SECURITY_NOTICE.md` documents that real Stack Auth keys and the Neon `DATABASE_URL` (owner credentials) were committed and "MUST be rotated immediately." The files were sanitized in later commits, but history retains them: `git log -p -- app/.env.development app/.env.production` still yields 28 lines matching secret patterns across commits `ee0e0be`…`0d36e57`. The repo cannot show whether rotation actually happened. **If the keys were rotated, downgrade to Low** (history scrubbing is then optional hygiene); if not, this is an open door to the production database. + +### 3.4 HIGH — All users' calculations are public, with cost data, no opt-in + +`api/public-calcs.js:17-22` selects `species, product, cost, yield, result, date` from **every user's** saved calculations and serves them unauthenticated; `Calculator.jsx:217-226` displays them to all visitors as "Recent Calculations (Community)". **Judgment:** purchase cost per pound is commercially sensitive for fishers negotiating prices. Nothing in the save flow (`Calculator.jsx:528-547`) tells the user their numbers will be published. Note also bug 3.1(d) means even *deleted* calcs stay in this public feed. + +### 3.5 HIGH — No abuse protection or password policy on auth endpoints + +**Facts:** `api/register.js:10-14` accepts any non-empty username/password (`"a"`/`"a"` works); `api/login.js` and `server/server.js:154-171` have no rate limiting, lockout, or CAPTCHA; Vercel provides none of this by default. bcrypt cost 10 (`api/register.js:18`) is fine. **Why it matters:** unthrottled credential stuffing/brute force against a public login endpoint, and trivially weak passwords protecting data that syncs to a shared public feed. + +### 3.6 HIGH — The dual backend has drifted; local dev exercises different code than prod + +`CLAUDE.md` mandates keeping `server/server.js` and `api/` in sync. **Facts — they are not:** +- `server/server.js` has **no** `/api/public-calcs`, `/api/fish-data`, or `/api/export` routes; it has `/api/export-calcs` and `/api/export-user-data` instead (`server.js:372,400`). So in local dev the community feed fetch (`Calculator.jsx:218`) 404s on every page load, and "Export History" (`Calculator.jsx:1201`, calls `/api/export?type=calcs`) is broken locally. +- Upload validation differs materially: Express validates extension+MIME and parses `"42%"`-style strings (`server.js:196-215, 266-274`); the Vercel version accepts any file type, does naive `if (yieldVal < 1) yieldVal *= 100` with no numeric parsing or range check (`api/upload-data.js:80-84`), inserts row-by-row with no transaction (partial imports on row failure, `api/upload-data.js:74-92`), and leaks raw error messages to the client (`api/upload-data.js:100`). +- SQLite schema (`server.js:78-83`) lacks the `email`/`neon_auth_id`/`auth_provider` columns of the Neon schema (`scripts/neon-schema.sql:5-15`), so OAuth flows can't be exercised locally at all. + +### 3.7 HIGH — CI gates: only CodeQL; lint currently fails; tests never run in CI + +**Facts:** `.github/workflows/codeql.yml` is the only workflow. `npm run lint` fails with **22 errors** (12 `no-unused-vars`, 3 `react-refresh/only-export-components`, plus `react-hooks` immutability errors in `ThemeContext.jsx:32-38` and others) across 9 files. `npm test` passes (1,788 tests) and `npm run build` passes — but nothing enforces either on PRs. **Why it matters:** every bug in §3.1 would have been catchable by one integration test; instead the contract rotted across refactors (the git log shows the API consolidation happened in `0d36e57`/`6fe2dbf`). + +### 3.8 MEDIUM — Test suite has zero coverage of business logic + +**Fact:** all 1,788 tests live in `fish_data.test.js` and validate the static dataset's shape/consistency (a genuine strength — keep them). **Gap:** no tests for `calculate()` (`Calculator.jsx:462-526` — cost math, incoming/outgoing processing-cost application, discounts, labor), `syncAll()`, `localStore` merge/tombstone logic, or any API handler. The calculation logic is also untestable as written because it's embedded in a 1,396-line component (see §3.10). + +### 3.9 MEDIUM — OAuth account linking by unverified email + +`api/_lib/neon-auth.js:96-111` links a Stack Auth login to any existing local user with a matching email, without checking that Stack Auth marks the email verified. **Judgment:** if a provider (GitHub allows unverified emails) returns an attacker-controlled email matching a victim's password account, the attacker inherits that account's data. Local password accounts have no email column populated via `api/register.js` today, which narrows the practical window — but the code path is live. + +### 3.10 MEDIUM — `Calculator.jsx` is a god component + +**Fact:** 1,396 lines mixing pure math, data merging, URL-param parsing, share/export I/O, three modals/sections, and ~25 `useState` hooks. The next-largest components are fine. **Why it matters:** it's the file every feature touches, the logic can't be unit-tested, and it's where the `localStorage`-token bug (§3.2) hides among 1,200 lines of JSX. + +### 3.11 MEDIUM — Dependency findings + +- `npm audit`: app — several moderate advisories in the build/PWA chain (`@babel/plugin-transform-modules-systemjs`, `fast-xml-parser`, `fast-uri`, `brace-expansion`); root — 3 (2 moderate, 1 high: `tmp`/`uuid`); server — 6 (5 moderate, 1 high). All have `npm audit fix` paths; none are in runtime request-handling code paths I could identify. (Fact: counts; judgment: low runtime exposure.) +- Root `better-sqlite3` (native build) installed on every Vercel deploy for a one-off migration script (`package.json:13`, `vercel.json:5`). +- `api/_lib/auth.js:7-9` throws at module import if `JWT_SECRET` is unset, turning a config error into an opaque function crash for *every* authenticated route — while `api/login.js:20-23` handles the same condition gracefully. Inconsistent failure mode. + +### 3.12 MEDIUM — Docs drift (the docs are plentiful but several lie) + +- `README.md:140` says Excel parsing uses `xlsx`; it's ExcelJS everywhere. `README.md:34` says "60+ species"; the dataset has 89. `README.md:114` references a `data/` directory that doesn't exist. The schema section omits `contributors`. +- `docs/API.md` documents register's success response as `{"message": "User created successfully"}`; the API returns `{id, username}` (`api/register.js:27`). Export/public-calcs/fish-data endpoints in `CLAUDE.md:88-91` don't exist on the local server (§3.6). +- `server/.env.example`: duplicate `JWT_SECRET`, unused `GEMINI_API_KEY`, unused `JWT_EXPIRES_IN`/`CORS_ORIGINS` (the code reads `JWT_EXPIRES_IN_SECONDS`/`ALLOWED_ORIGINS`, `server.js:15,26`). + +### 3.13 LOW — Repo hygiene +2.7 MB source PDF, `pdf_content.txt`, seven one-off Python scripts, and a tracked `.xlsx` at/near the root (`git ls-files` confirms all tracked). Harmless but noisy; the Python scripts have no documented runtime or requirements. + +### 3.14 LOW — Performance +Main JS chunk > 500 kB (build output) — fine for a PWA that precaches anyway; consider code-splitting `fish_data_v3.js` and the Stack SDK later. `api/upload-data.js` does per-row INSERTs (N+1) — only matters for large files, capped at 4 MB. No other hot-path concerns found; the calculator is client-side and fast. + +### Strengths (genuinely good, keep doing these) +- **Data quality discipline:** 1,788 tests including compound-yield-chain consistency checks (`fish_data.test.js:127-159`) — rare and valuable for a data product. +- **Security fundamentals mostly right:** parameterized SQL everywhere (no injection found in any handler), bcrypt, CSV formula-injection sanitization in both export paths (`api/export.js:5-10`, `server.js:63-68`), CORS allowlist with HOF pattern, ownership checks on update/delete (`api/user-data/[id].js:13-21`). +- **Offline-first architecture** (`localStore.js` tombstones + sync states) is well-designed *as a design* — it's the wiring that's broken. +- **Accessibility effort:** labeled inputs, `role="status"`/`aria-live`, keyboard-accessible help tooltips (`Calculator.jsx:61-92`). +- **Docs volume and honesty:** `SECURITY_NOTICE.md` openly documents the credential incident; `AUTH_ARCHITECTURE.md`, `DEPLOYMENT.md`, CHANGELOG exist. + +--- + +## 4. Improvement Strategy (Phase 3) + +### Theme 1 — Restore contract integrity between client and API +**Target state:** one documented request/response shape per endpoint, exercised by integration tests that run in CI. +**Principle:** a contract that isn't tested is a rumor. The sync layer and handlers must share field names (`yield`), and every route the client calls must exist. + +### Theme 2 — One auth path for the data layer +**Target state:** a single `getAuthHeaders()` used by DataContext, syncEngine, UploadData, Calculator export — JWT if present, else Stack Auth token (the `ContributorProfile.jsx` pattern). +**Principle:** auth is cross-cutting; it must live in one module, not be re-derived per component. + +### Theme 3 — Make CI the safety net +**Target state:** PRs fail on lint errors, test failures, or build breakage; lint is at zero errors. +**Principle:** the repo already has good tests and lint config — they're just not enforced, so they decay. + +### Theme 4 — Collapse the dual-backend drift +**Target state:** local dev runs the *same* handler code as production. Recommended: make `server/server.js` a thin Express adapter that mounts the `api/*` handlers against a local Postgres (or Neon dev branch), or standardize on `vercel dev` and demote the Express server to legacy. Either way, delete the CLAUDE.md "keep two implementations in sync by hand" rule — it has empirically failed. +**Principle:** duplicated logic with manual sync discipline always drifts; share code instead of intentions. + +### Theme 5 — Privacy & abuse hardening +**Target state:** public feed is opt-in (or anonymized with cost removed); login/register rate-limited; upload validation matched to the stricter Express version; credential rotation confirmed. +**Principle:** default-private for user business data; defense at the public edges. + +### Explicitly NOT fixing (effort vs. payoff) +- **TypeScript migration** — high effort, the contract tests in Theme 1 buy most of the safety for 10% of the cost at this codebase size. +- **Moving yield data into the database** (`api/fish-data.js` path) — the static file is faster, versioned, and already test-covered; decide the parallel path's fate (Open Question #5) but don't build it out now. +- **Bundle-size optimization / code splitting** — a warning, not a problem, for a precached PWA. +- **Full design-system refactor of Calculator's JSX** — only extract the *logic* (Task 2.2); the markup works. + +### Definition of "done" (measurable signals) +1. CI fails on lint errors, test failures, or build failure; `main` is green. +2. An integration test suite covers save-calc push, user-data push/pull, and delete round-trip — and passes against the real handlers. +3. `eslint .` exits 0. +4. An OAuth-only manual test account can: sync a calc, upload a file, export CSV. +5. `calculate()` logic has unit tests covering both modes, incoming/outgoing processing cost, and discount tiers (target: 100% of branches in the extracted module). +6. `/api/public-calcs` returns only rows whose owners opted in, and never returns `cost` unless opted in. +7. Login/register return 429 under burst traffic (verify with a 20-request loop). + +--- + +## 5. Detailed Task Plan (Phase 4) + +Effort: S < 2 h · M = half-day · L = 1–2 days · XL = needs breakdown. + +### Milestone 0 — Safety net (do first; everything else depends on it) + +| # | Task | Files | Acceptance criteria | Effort | Risk | Deps | +|---|---|---|---|---|---|---| +| 0.1 | **Add CI workflow: lint + test + build** on PR & push to main | new `.github/workflows/ci.yml` | PR fails if any of `npm run lint`, `npm test`, `npm run build` fails in `app/` | **S** ⚡ | None | — | +| 0.2 | **Fix the 22 lint errors** so 0.1 can be enforced | 9 files listed by `eslint .` (Calculator, DataManagement, InstallPrompt, Login, SubmitRequest, UploadData, AuthContext, DataContext, ThemeContext) | `eslint .` exits 0; no rule disabled globally to get there | **S** ⚡ | Low — mostly unused vars; the `react-hooks/immutability` ones in ThemeContext need a real (small) fix | — | +| 0.3 | **Write failing integration tests for the sync contract** (they will fail — that's the point; they define Milestone 1) | new `app/src/lib/syncEngine.test.js` (mock fetch against recorded handler behavior) + new `api/__tests__/` harness invoking handlers with stub req/res | Tests encode: push calc preserves yield; push yield succeeds; pull maps `yield`; delete round-trip | **M** | Low | 0.1 | +| 0.4 | **Verify/perform credential rotation** (Stack Auth keys, Neon password) and record the date in SECURITY_NOTICE.md | `SECURITY_NOTICE.md` (+ external dashboards) | Old DATABASE_URL from git history no longer authenticates | **S** ⚡ | None | — | + +### Milestone 1 — Critical fixes (correctness & security) + +| # | Task | Files | Acceptance criteria | Effort | Risk | Deps | +|---|---|---|---|---|---|---| +| 1.1 | **Fix sync field names** (`yield_value`→`yield` on push; `yield_percentage`→`yield` on merge) and decide weight-mode handling (either add `mode`/`target_weight` columns or stop sending them) | `app/src/lib/syncEngine.js:42,96`, `app/src/lib/localStore.js:144`; optionally `scripts/neon-schema.sql`, `api/save-calc.js`, `server/server.js:174-184` | 0.3 tests pass; a calc saved on device A appears with correct yield on device B | **S** ⚡ | Low | 0.3 | +| 1.2 | **Add `DELETE /api/saved-calcs/:id`** (Vercel `api/saved-calcs/[id].js` + Express route), with ownership check; remove the `404 == success` masking or keep it only after the route exists | new `api/saved-calcs/[id].js`, `server/server.js`, `app/src/lib/syncEngine.js:65-79` | Deleting a synced calc removes the server row; it does not reappear after re-sync; it leaves the public feed | **S** ⚡ | Low | 0.3 | +| 1.3 | **Unify auth headers for OAuth + JWT** — extract `getAuthHeaders()` into `app/src/lib/authHeaders.js`; use it in DataContext/syncEngine/UploadData/Calculator export; gate sync on "has any credential," not localStorage token | `app/src/context/DataContext.jsx:62-64`, `app/src/lib/syncEngine.js:21-24`, `app/src/components/UploadData.jsx:27-35`, `app/src/components/Calculator.jsx:1197-1216`, reuse pattern from `ContributorProfile.jsx:23-33` | An OAuth-only account can sync, upload, and export (manual test, signal #4) | **M** | Medium — touches every API call; mitigated by 0.3 tests | 0.3 | +| 1.4 | **Make the public feed opt-in and drop `cost` from it** (or anonymize fully); disclose at save time | `api/public-calcs.js`, `scripts/neon-schema.sql` (add `is_public boolean default false` to calculations), `api/save-calc.js`, `Calculator.jsx` save UI, `server/server.js` | Signal #6; existing rows default to private | **M** | Medium — product decision needed (Open Question #2) | — | +| 1.5 | **Rate-limit login/register + minimum password length** (e.g., Upstash/Vercel KV sliding window or `@upstash/ratelimit`; 8-char minimum) | `api/login.js`, `api/register.js`, `server/server.js:140-171` | Signal #7; register rejects < 8 chars with a clear error | **M** | Low | — | +| 1.6 | **Harden serverless upload to Express parity**: extension+MIME allowlist, `parseYield()` (port from `server.js:266-274`), 0–100 range check, wrap inserts in a transaction, return a generic error instead of `err.message` | `api/upload-data.js:47-54,74-101` | Uploading a `.exe` is rejected; `"42%"` parses; a bad row aborts cleanly with row count message; no internal error text in responses | **M** | Low | — | +| 1.7 | **Require verified email for OAuth account linking** (check Stack Auth's `primary_email_verified`; if unverified, create a new account instead of linking) | `api/_lib/neon-auth.js:95-112` | Unverified-email OAuth login can no longer attach to an existing email-matching account | **S** ⚡ | Low | — | + +### Milestone 2 — High-leverage (makes all future work easier) + +| # | Task | Files | Acceptance criteria | Effort | Risk | Deps | +|---|---|---|---|---|---|---| +| 2.1 | **Collapse the dual backend**: extract handler logic into shared modules consumed by both `api/*.js` and an Express adapter (or retire `server/server.js` in favor of `vercel dev` + Neon dev branch); update CLAUDE.md/docs | `api/`, `server/server.js`, `CLAUDE.md`, `README.md`, `docs/` | Local dev serves `/api/public-calcs`, `/api/export`, identical upload validation; one implementation of each route exists | **XL** → break down: (a) pick approach, (b) shared handlers for user-data + calcs, (c) auth/upload, (d) docs | High if big-bang; do route-by-route | 1.1–1.3 | +| 2.2 | **Extract calculation engine from Calculator.jsx** into a pure module (`calculateCost`, `calculateInputWeight`, discount resolution, labor cost) + unit tests | new `app/src/lib/calcEngine.js` + test; `Calculator.jsx:462-526` | Signal #5; Calculator.jsx shrinks and contains no arithmetic | **M** | Low — pure-function extraction | 0.1 | +| 2.3 | **Split Calculator.jsx** into TimeTracking, EconomyOfScale, ShareMenu, CustomSpeciesModal, PublicHistory components | `app/src/components/Calculator.jsx` → `app/src/components/calculator/` | No file > 400 lines; behavior unchanged (smoke-test) | **L** | Medium — JSX moves; do after 2.2 | 2.2 | +| 2.4 | **Decide and prune the parallel fish-data path**: either delete `api/fish-data.js` + Neon species tables + import script, or wire the frontend to it behind a flag | `api/fish-data.js`, `scripts/import-fish-data-to-neon.js` | One canonical data source documented in CLAUDE.md | **S** ⚡ | Low | Open Q #5 | +| 2.5 | **Dependency hygiene**: `npm audit fix` in all three trees; move `better-sqlite3` to a script-local package.json or devDependencies; remove unused `pg`? (verify) | `package.json`, `server/package.json`, `app/package.json`, lockfiles | `npm audit` ≤ moderate, 0 high; Vercel build no longer compiles better-sqlite3 | **S** ⚡ | Low — lockfile churn only | 0.1 | + +### Milestone 3 — Quality & polish + +| # | Task | Files | Acceptance criteria | Effort | Risk | +|---|---|---|---|---|---| +| 3.1 | Fix doc drift: README (xlsx→ExcelJS, 89 species, schema, structure), docs/API.md responses, CLAUDE.md endpoint table, dedupe `server/.env.example`, remove unused GEMINI/JWT_EXPIRES_IN/CORS_ORIGINS vars | `README.md`, `docs/API.md`, `CLAUDE.md`, `server/.env.example` | Every documented endpoint/response matches code | **S** ⚡ | None | +| 3.2 | Repo hygiene: move PDF + Python scripts + pdf_content.txt to a `research/` dir or a release asset; untrack `datasets/*.xlsx` | root files | Repo root contains only project dirs + docs | **S** | None | +| 3.3 | Consistent module-load behavior for missing `JWT_SECRET` in `api/_lib/auth.js` (return 500 JSON instead of import-crash) | `api/_lib/auth.js:5-9` | Misconfig produces a clear JSON error in logs/responses | **S** | Low | +| 3.4 | Consolidate AuthContext's duplicated token-expiry logic (two effects both parse/clear the JWT) | `app/src/context/AuthContext.jsx:13-131` | One code path for expiry; behavior covered by a unit test | **S** | Low | +| 3.5 | Code-split the main bundle (lazy-load Stack handler routes, About/Roadmap pages) | `app/src/App.jsx` | Main chunk < 500 kB | **M** | Low | + +### ⚡ Quick wins (high impact, S effort) +0.1 CI workflow · 0.2 lint zero · 0.4 rotation check · 1.1 sync field names · 1.2 delete endpoint · 1.7 verified-email linking · 2.4 prune fish-data path · 2.5 audit fix · 3.1 doc drift. + +### Implementation sketches — top 3 tasks + +**Task 1.1 + 1.2 (sync contract):** +```js +// syncEngine.js:42 — was: yield_value: calc.yield +body: JSON.stringify({ + name: calc.name || '', species: calc.species, product: calc.product, + cost: calc.cost, yield: calc.yield, result: calc.result, +}), +// localStore.js:144 — was: yield: sy.yield_percentage +yield: sy.yield, +// syncEngine.js:96 — was: yield_percentage: yld.yield +body: JSON.stringify({ species: yld.species, product: yld.product, + yield: yld.yield, source: yld.source || 'User Input' }), +``` +```js +// new api/saved-calcs/[id].js +import { query } from '../_lib/db.js'; +import { requireAuth } from '../_lib/auth.js'; +import { handleCors } from '../_lib/cors.js'; +async function handler(req, res) { + if (req.method !== 'DELETE') return res.status(405).json({ error: 'Method not allowed' }); + const { id } = req.query; + const result = await query( + 'DELETE FROM calculations WHERE id = $1 AND user_id = $2 RETURNING id', + [id, req.user.id] + ); + if (result.rows.length === 0) return res.status(404).json({ error: 'Not found' }); + return res.status(200).json({ message: 'Deleted' }); +} +export default handleCors(requireAuth(handler)); +``` +Mirror the route in `server/server.js`. Keep `res.status === 404` as success in syncEngine *only after* this ships (it then correctly means "already gone"). + +**Task 1.3 (unified auth headers):** +```js +// new app/src/lib/authHeaders.js +import { stackClientApp } from '../config/neonAuth'; +export async function getAuthHeaders(extra = {}) { + const headers = { 'Content-Type': 'application/json', ...extra }; + const jwt = localStorage.getItem('token'); + if (jwt) { headers.Authorization = `Bearer ${jwt}`; return headers; } + const stackUser = await stackClientApp.getUser(); + const auth = await stackUser?.getAuthJson(); + if (auth?.accessToken) headers['x-stack-access-token'] = auth.accessToken; + return headers; +} +export async function hasCredentials() { + if (localStorage.getItem('token')) return true; + return !!(await stackClientApp.getUser()); +} +``` +Then: `DataContext.triggerSync` gates on `await hasCredentials()`; `syncAll()` takes headers (or calls the helper) instead of a token string; `UploadData` uses it *without* Content-Type (FormData sets its own boundary); Calculator export uses it. + +**Task 0.1 (CI workflow):** +```yaml +# .github/workflows/ci.yml +name: CI +on: + pull_request: + push: { branches: [main] } +jobs: + frontend: + runs-on: ubuntu-latest + defaults: { run: { working-directory: app } } + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: { node-version: 20, cache: npm, cache-dependency-path: app/package-lock.json } + - run: npm ci + - run: npm run lint + - run: npm test + - run: npm run build +``` +(Land 0.2's lint fixes in the same PR or the gate blocks everything.) + +--- + +## 6. Open Questions + +1. **Were the exposed Stack Auth keys and Neon password actually rotated** after `SECURITY_NOTICE.md` was written? Everything in §3.3 hinges on this. If not, rotate today. +2. **Is the public "Community" calculations feed an intentional product feature?** If yes, what fields are acceptable to publish (species/yield probably fine; cost probably not), and should it be opt-in per save or per account? +3. **Which backend is canonical for local development going forward** — keep Express+SQLite (and invest in Task 2.1's shared handlers), or standardize on `vercel dev` + a Neon dev branch and retire `server/`? +4. **Should weight-mode calculations sync?** The schema has no `mode`/`target_weight` columns; either add them (migration) or document that weight-mode results are local-only. +5. **What is the future of the Neon fish-data path** (`api/fish-data.js`, `species`/`fish_yields` tables)? It's currently dead weight; PRD.md implies it's the future. Pick one so contributors stop maintaining two data models. +6. **Is `mailto:` the intended long-term submission flow** for `SubmitRequest.jsx:91`, or should it become an API endpoint/GitHub issue template? From 0cd5d57dee89a28a0a32b8be6dad61e227ffe7ab Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 10 Jun 2026 12:54:51 +0000 Subject: [PATCH 02/12] chore: install Matt Pocock agent skills (engineering + productivity) https://claude.ai/code/session_01Dn84c88DDz5xSC19Z9c5Mg --- .claude/skills/caveman/SKILL.md | 49 +++++ .claude/skills/diagnose/SKILL.md | 117 ++++++++++++ .../diagnose/scripts/hitl-loop.template.sh | 41 +++++ .claude/skills/grill-me/SKILL.md | 10 ++ .claude/skills/grill-with-docs/ADR-FORMAT.md | 47 +++++ .../skills/grill-with-docs/CONTEXT-FORMAT.md | 60 +++++++ .claude/skills/grill-with-docs/SKILL.md | 88 +++++++++ .claude/skills/handoff/SKILL.md | 15 ++ .../DEEPENING.md | 37 ++++ .../HTML-REPORT.md | 123 +++++++++++++ .../INTERFACE-DESIGN.md | 44 +++++ .../improve-codebase-architecture/LANGUAGE.md | 53 ++++++ .../improve-codebase-architecture/SKILL.md | 81 +++++++++ .claude/skills/prototype/LOGIC.md | 79 ++++++++ .claude/skills/prototype/SKILL.md | 30 ++++ .claude/skills/prototype/UI.md | 112 ++++++++++++ .../skills/setup-matt-pocock-skills/SKILL.md | 121 +++++++++++++ .../skills/setup-matt-pocock-skills/domain.md | 51 ++++++ .../issue-tracker-github.md | 22 +++ .../issue-tracker-gitlab.md | 23 +++ .../issue-tracker-local.md | 19 ++ .../setup-matt-pocock-skills/triage-labels.md | 15 ++ .claude/skills/tdd/SKILL.md | 109 ++++++++++++ .claude/skills/tdd/deep-modules.md | 33 ++++ .claude/skills/tdd/interface-design.md | 31 ++++ .claude/skills/tdd/mocking.md | 59 ++++++ .claude/skills/tdd/refactoring.md | 10 ++ .claude/skills/tdd/tests.md | 61 +++++++ .claude/skills/teach/GLOSSARY-FORMAT.md | 35 ++++ .../skills/teach/LEARNING-RECORD-FORMAT.md | 46 +++++ .claude/skills/teach/MISSION-FORMAT.md | 31 ++++ .claude/skills/teach/RESOURCES-FORMAT.md | 32 ++++ .claude/skills/teach/SKILL.md | 113 ++++++++++++ .claude/skills/to-issues/SKILL.md | 83 +++++++++ .claude/skills/to-prd/SKILL.md | 74 ++++++++ .claude/skills/triage/AGENT-BRIEF.md | 168 ++++++++++++++++++ .claude/skills/triage/OUT-OF-SCOPE.md | 101 +++++++++++ .claude/skills/triage/SKILL.md | 103 +++++++++++ .claude/skills/write-a-skill/SKILL.md | 117 ++++++++++++ .claude/skills/zoom-out/SKILL.md | 7 + 40 files changed, 2450 insertions(+) create mode 100644 .claude/skills/caveman/SKILL.md create mode 100644 .claude/skills/diagnose/SKILL.md create mode 100644 .claude/skills/diagnose/scripts/hitl-loop.template.sh create mode 100644 .claude/skills/grill-me/SKILL.md create mode 100644 .claude/skills/grill-with-docs/ADR-FORMAT.md create mode 100644 .claude/skills/grill-with-docs/CONTEXT-FORMAT.md create mode 100644 .claude/skills/grill-with-docs/SKILL.md create mode 100644 .claude/skills/handoff/SKILL.md create mode 100644 .claude/skills/improve-codebase-architecture/DEEPENING.md create mode 100644 .claude/skills/improve-codebase-architecture/HTML-REPORT.md create mode 100644 .claude/skills/improve-codebase-architecture/INTERFACE-DESIGN.md create mode 100644 .claude/skills/improve-codebase-architecture/LANGUAGE.md create mode 100644 .claude/skills/improve-codebase-architecture/SKILL.md create mode 100644 .claude/skills/prototype/LOGIC.md create mode 100644 .claude/skills/prototype/SKILL.md create mode 100644 .claude/skills/prototype/UI.md create mode 100644 .claude/skills/setup-matt-pocock-skills/SKILL.md create mode 100644 .claude/skills/setup-matt-pocock-skills/domain.md create mode 100644 .claude/skills/setup-matt-pocock-skills/issue-tracker-github.md create mode 100644 .claude/skills/setup-matt-pocock-skills/issue-tracker-gitlab.md create mode 100644 .claude/skills/setup-matt-pocock-skills/issue-tracker-local.md create mode 100644 .claude/skills/setup-matt-pocock-skills/triage-labels.md create mode 100644 .claude/skills/tdd/SKILL.md create mode 100644 .claude/skills/tdd/deep-modules.md create mode 100644 .claude/skills/tdd/interface-design.md create mode 100644 .claude/skills/tdd/mocking.md create mode 100644 .claude/skills/tdd/refactoring.md create mode 100644 .claude/skills/tdd/tests.md create mode 100644 .claude/skills/teach/GLOSSARY-FORMAT.md create mode 100644 .claude/skills/teach/LEARNING-RECORD-FORMAT.md create mode 100644 .claude/skills/teach/MISSION-FORMAT.md create mode 100644 .claude/skills/teach/RESOURCES-FORMAT.md create mode 100644 .claude/skills/teach/SKILL.md create mode 100644 .claude/skills/to-issues/SKILL.md create mode 100644 .claude/skills/to-prd/SKILL.md create mode 100644 .claude/skills/triage/AGENT-BRIEF.md create mode 100644 .claude/skills/triage/OUT-OF-SCOPE.md create mode 100644 .claude/skills/triage/SKILL.md create mode 100644 .claude/skills/write-a-skill/SKILL.md create mode 100644 .claude/skills/zoom-out/SKILL.md diff --git a/.claude/skills/caveman/SKILL.md b/.claude/skills/caveman/SKILL.md new file mode 100644 index 0000000..85770a3 --- /dev/null +++ b/.claude/skills/caveman/SKILL.md @@ -0,0 +1,49 @@ +--- +name: caveman +description: > + Ultra-compressed communication mode. Cuts token usage ~75% by dropping + filler, articles, and pleasantries while keeping full technical accuracy. + Use when user says "caveman mode", "talk like caveman", "use caveman", + "less tokens", "be brief", or invokes /caveman. +--- + +Respond terse like smart caveman. All technical substance stay. Only fluff die. + +## Persistence + +ACTIVE EVERY RESPONSE once triggered. No revert after many turns. No filler drift. Still active if unsure. Off only when user says "stop caveman" or "normal mode". + +## Rules + +Drop: articles (a/an/the), filler (just/really/basically/actually/simply), pleasantries (sure/certainly/of course/happy to), hedging. Fragments OK. Short synonyms (big not extensive, fix not "implement a solution for"). Abbreviate common terms (DB/auth/config/req/res/fn/impl). Strip conjunctions. Use arrows for causality (X -> Y). One word when one word enough. + +Technical terms stay exact. Code blocks unchanged. Errors quoted exact. + +Pattern: `[thing] [action] [reason]. [next step].` + +Not: "Sure! I'd be happy to help you with that. The issue you're experiencing is likely caused by..." +Yes: "Bug in auth middleware. Token expiry check use `<` not `<=`. Fix:" + +### Examples + +**"Why React component re-render?"** + +> Inline obj prop -> new ref -> re-render. `useMemo`. + +**"Explain database connection pooling."** + +> Pool = reuse DB conn. Skip handshake -> fast under load. + +## Auto-Clarity Exception + +Drop caveman temporarily for: security warnings, irreversible action confirmations, multi-step sequences where fragment order risks misread, user asks to clarify or repeats question. Resume caveman after clear part done. + +Example -- destructive op: + +> **Warning:** This will permanently delete all rows in the `users` table and cannot be undone. +> +> ```sql +> DROP TABLE users; +> ``` +> +> Caveman resume. Verify backup exist first. diff --git a/.claude/skills/diagnose/SKILL.md b/.claude/skills/diagnose/SKILL.md new file mode 100644 index 0000000..ed55bda --- /dev/null +++ b/.claude/skills/diagnose/SKILL.md @@ -0,0 +1,117 @@ +--- +name: diagnose +description: Disciplined diagnosis loop for hard bugs and performance regressions. Reproduce → minimise → hypothesise → instrument → fix → regression-test. Use when user says "diagnose this" / "debug this", reports a bug, says something is broken/throwing/failing, or describes a performance regression. +--- + +# Diagnose + +A discipline for hard bugs. Skip phases only when explicitly justified. + +When exploring the codebase, use the project's domain glossary to get a clear mental model of the relevant modules, and check ADRs in the area you're touching. + +## Phase 1 — Build a feedback loop + +**This is the skill.** Everything else is mechanical. If you have a fast, deterministic, agent-runnable pass/fail signal for the bug, you will find the cause — bisection, hypothesis-testing, and instrumentation all just consume that signal. If you don't have one, no amount of staring at code will save you. + +Spend disproportionate effort here. **Be aggressive. Be creative. Refuse to give up.** + +### Ways to construct one — try them in roughly this order + +1. **Failing test** at whatever seam reaches the bug — unit, integration, e2e. +2. **Curl / HTTP script** against a running dev server. +3. **CLI invocation** with a fixture input, diffing stdout against a known-good snapshot. +4. **Headless browser script** (Playwright / Puppeteer) — drives the UI, asserts on DOM/console/network. +5. **Replay a captured trace.** Save a real network request / payload / event log to disk; replay it through the code path in isolation. +6. **Throwaway harness.** Spin up a minimal subset of the system (one service, mocked deps) that exercises the bug code path with a single function call. +7. **Property / fuzz loop.** If the bug is "sometimes wrong output", run 1000 random inputs and look for the failure mode. +8. **Bisection harness.** If the bug appeared between two known states (commit, dataset, version), automate "boot at state X, check, repeat" so you can `git bisect run` it. +9. **Differential loop.** Run the same input through old-version vs new-version (or two configs) and diff outputs. +10. **HITL bash script.** Last resort. If a human must click, drive _them_ with `scripts/hitl-loop.template.sh` so the loop is still structured. Captured output feeds back to you. + +Build the right feedback loop, and the bug is 90% fixed. + +### Iterate on the loop itself + +Treat the loop as a product. Once you have _a_ loop, ask: + +- Can I make it faster? (Cache setup, skip unrelated init, narrow the test scope.) +- Can I make the signal sharper? (Assert on the specific symptom, not "didn't crash".) +- Can I make it more deterministic? (Pin time, seed RNG, isolate filesystem, freeze network.) + +A 30-second flaky loop is barely better than no loop. A 2-second deterministic loop is a debugging superpower. + +### Non-deterministic bugs + +The goal is not a clean repro but a **higher reproduction rate**. Loop the trigger 100×, parallelise, add stress, narrow timing windows, inject sleeps. A 50%-flake bug is debuggable; 1% is not — keep raising the rate until it's debuggable. + +### When you genuinely cannot build a loop + +Stop and say so explicitly. List what you tried. Ask the user for: (a) access to whatever environment reproduces it, (b) a captured artifact (HAR file, log dump, core dump, screen recording with timestamps), or (c) permission to add temporary production instrumentation. Do **not** proceed to hypothesise without a loop. + +Do not proceed to Phase 2 until you have a loop you believe in. + +## Phase 2 — Reproduce + +Run the loop. Watch the bug appear. + +Confirm: + +- [ ] The loop produces the failure mode the **user** described — not a different failure that happens to be nearby. Wrong bug = wrong fix. +- [ ] The failure is reproducible across multiple runs (or, for non-deterministic bugs, reproducible at a high enough rate to debug against). +- [ ] You have captured the exact symptom (error message, wrong output, slow timing) so later phases can verify the fix actually addresses it. + +Do not proceed until you reproduce the bug. + +## Phase 3 — Hypothesise + +Generate **3–5 ranked hypotheses** before testing any of them. Single-hypothesis generation anchors on the first plausible idea. + +Each hypothesis must be **falsifiable**: state the prediction it makes. + +> Format: "If is the cause, then will make the bug disappear / will make it worse." + +If you cannot state the prediction, the hypothesis is a vibe — discard or sharpen it. + +**Show the ranked list to the user before testing.** They often have domain knowledge that re-ranks instantly ("we just deployed a change to #3"), or know hypotheses they've already ruled out. Cheap checkpoint, big time saver. Don't block on it — proceed with your ranking if the user is AFK. + +## Phase 4 — Instrument + +Each probe must map to a specific prediction from Phase 3. **Change one variable at a time.** + +Tool preference: + +1. **Debugger / REPL inspection** if the env supports it. One breakpoint beats ten logs. +2. **Targeted logs** at the boundaries that distinguish hypotheses. +3. Never "log everything and grep". + +**Tag every debug log** with a unique prefix, e.g. `[DEBUG-a4f2]`. Cleanup at the end becomes a single grep. Untagged logs survive; tagged logs die. + +**Perf branch.** For performance regressions, logs are usually wrong. Instead: establish a baseline measurement (timing harness, `performance.now()`, profiler, query plan), then bisect. Measure first, fix second. + +## Phase 5 — Fix + regression test + +Write the regression test **before the fix** — but only if there is a **correct seam** for it. + +A correct seam is one where the test exercises the **real bug pattern** as it occurs at the call site. If the only available seam is too shallow (single-caller test when the bug needs multiple callers, unit test that can't replicate the chain that triggered the bug), a regression test there gives false confidence. + +**If no correct seam exists, that itself is the finding.** Note it. The codebase architecture is preventing the bug from being locked down. Flag this for the next phase. + +If a correct seam exists: + +1. Turn the minimised repro into a failing test at that seam. +2. Watch it fail. +3. Apply the fix. +4. Watch it pass. +5. Re-run the Phase 1 feedback loop against the original (un-minimised) scenario. + +## Phase 6 — Cleanup + post-mortem + +Required before declaring done: + +- [ ] Original repro no longer reproduces (re-run the Phase 1 loop) +- [ ] Regression test passes (or absence of seam is documented) +- [ ] All `[DEBUG-...]` instrumentation removed (`grep` the prefix) +- [ ] Throwaway prototypes deleted (or moved to a clearly-marked debug location) +- [ ] The hypothesis that turned out correct is stated in the commit / PR message — so the next debugger learns + +**Then ask: what would have prevented this bug?** If the answer involves architectural change (no good test seam, tangled callers, hidden coupling) hand off to the `/improve-codebase-architecture` skill with the specifics. Make the recommendation **after** the fix is in, not before — you have more information now than when you started. diff --git a/.claude/skills/diagnose/scripts/hitl-loop.template.sh b/.claude/skills/diagnose/scripts/hitl-loop.template.sh new file mode 100644 index 0000000..40afc46 --- /dev/null +++ b/.claude/skills/diagnose/scripts/hitl-loop.template.sh @@ -0,0 +1,41 @@ +#!/usr/bin/env bash +# Human-in-the-loop reproduction loop. +# Copy this file, edit the steps below, and run it. +# The agent runs the script; the user follows prompts in their terminal. +# +# Usage: +# bash hitl-loop.template.sh +# +# Two helpers: +# step "" → show instruction, wait for Enter +# capture VAR "" → show question, read response into VAR +# +# At the end, captured values are printed as KEY=VALUE for the agent to parse. + +set -euo pipefail + +step() { + printf '\n>>> %s\n' "$1" + read -r -p " [Enter when done] " _ +} + +capture() { + local var="$1" question="$2" answer + printf '\n>>> %s\n' "$question" + read -r -p " > " answer + printf -v "$var" '%s' "$answer" +} + +# --- edit below --------------------------------------------------------- + +step "Open the app at http://localhost:3000 and sign in." + +capture ERRORED "Click the 'Export' button. Did it throw an error? (y/n)" + +capture ERROR_MSG "Paste the error message (or 'none'):" + +# --- edit above --------------------------------------------------------- + +printf '\n--- Captured ---\n' +printf 'ERRORED=%s\n' "$ERRORED" +printf 'ERROR_MSG=%s\n' "$ERROR_MSG" diff --git a/.claude/skills/grill-me/SKILL.md b/.claude/skills/grill-me/SKILL.md new file mode 100644 index 0000000..bd04394 --- /dev/null +++ b/.claude/skills/grill-me/SKILL.md @@ -0,0 +1,10 @@ +--- +name: grill-me +description: Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me". +--- + +Interview me relentlessly about every aspect of this plan until we reach a shared understanding. Walk down each branch of the design tree, resolving dependencies between decisions one-by-one. For each question, provide your recommended answer. + +Ask the questions one at a time. + +If a question can be answered by exploring the codebase, explore the codebase instead. diff --git a/.claude/skills/grill-with-docs/ADR-FORMAT.md b/.claude/skills/grill-with-docs/ADR-FORMAT.md new file mode 100644 index 0000000..da7e78e --- /dev/null +++ b/.claude/skills/grill-with-docs/ADR-FORMAT.md @@ -0,0 +1,47 @@ +# ADR Format + +ADRs live in `docs/adr/` and use sequential numbering: `0001-slug.md`, `0002-slug.md`, etc. + +Create the `docs/adr/` directory lazily — only when the first ADR is needed. + +## Template + +```md +# {Short title of the decision} + +{1-3 sentences: what's the context, what did we decide, and why.} +``` + +That's it. An ADR can be a single paragraph. The value is in recording *that* a decision was made and *why* — not in filling out sections. + +## Optional sections + +Only include these when they add genuine value. Most ADRs won't need them. + +- **Status** frontmatter (`proposed | accepted | deprecated | superseded by ADR-NNNN`) — useful when decisions are revisited +- **Considered Options** — only when the rejected alternatives are worth remembering +- **Consequences** — only when non-obvious downstream effects need to be called out + +## Numbering + +Scan `docs/adr/` for the highest existing number and increment by one. + +## When to offer an ADR + +All three of these must be true: + +1. **Hard to reverse** — the cost of changing your mind later is meaningful +2. **Surprising without context** — a future reader will look at the code and wonder "why on earth did they do it this way?" +3. **The result of a real trade-off** — there were genuine alternatives and you picked one for specific reasons + +If a decision is easy to reverse, skip it — you'll just reverse it. If it's not surprising, nobody will wonder why. If there was no real alternative, there's nothing to record beyond "we did the obvious thing." + +### What qualifies + +- **Architectural shape.** "We're using a monorepo." "The write model is event-sourced, the read model is projected into Postgres." +- **Integration patterns between contexts.** "Ordering and Billing communicate via domain events, not synchronous HTTP." +- **Technology choices that carry lock-in.** Database, message bus, auth provider, deployment target. Not every library — just the ones that would take a quarter to swap out. +- **Boundary and scope decisions.** "Customer data is owned by the Customer context; other contexts reference it by ID only." The explicit no-s are as valuable as the yes-s. +- **Deliberate deviations from the obvious path.** "We're using manual SQL instead of an ORM because X." Anything where a reasonable reader would assume the opposite. These stop the next engineer from "fixing" something that was deliberate. +- **Constraints not visible in the code.** "We can't use AWS because of compliance requirements." "Response times must be under 200ms because of the partner API contract." +- **Rejected alternatives when the rejection is non-obvious.** If you considered GraphQL and picked REST for subtle reasons, record it — otherwise someone will suggest GraphQL again in six months. diff --git a/.claude/skills/grill-with-docs/CONTEXT-FORMAT.md b/.claude/skills/grill-with-docs/CONTEXT-FORMAT.md new file mode 100644 index 0000000..eaf2a18 --- /dev/null +++ b/.claude/skills/grill-with-docs/CONTEXT-FORMAT.md @@ -0,0 +1,60 @@ +# CONTEXT.md Format + +## Structure + +```md +# {Context Name} + +{One or two sentence description of what this context is and why it exists.} + +## Language + +**Order**: +{A one or two sentence description of the term} +_Avoid_: Purchase, transaction + +**Invoice**: +A request for payment sent to a customer after delivery. +_Avoid_: Bill, payment request + +**Customer**: +A person or organization that places orders. +_Avoid_: Client, buyer, account +``` + +## Rules + +- **Be opinionated.** When multiple words exist for the same concept, pick the best one and list the others under `_Avoid_`. +- **Keep definitions tight.** One or two sentences max. Define what it IS, not what it does. +- **Only include terms specific to this project's context.** General programming concepts (timeouts, error types, utility patterns) don't belong even if the project uses them extensively. Before adding a term, ask: is this a concept unique to this context, or a general programming concept? Only the former belongs. +- **Group terms under subheadings** when natural clusters emerge. If all terms belong to a single cohesive area, a flat list is fine. + +## Single vs multi-context repos + +**Single context (most repos):** One `CONTEXT.md` at the repo root. + +**Multiple contexts:** A `CONTEXT-MAP.md` at the repo root lists the contexts, where they live, and how they relate to each other: + +```md +# Context Map + +## Contexts + +- [Ordering](./src/ordering/CONTEXT.md) — receives and tracks customer orders +- [Billing](./src/billing/CONTEXT.md) — generates invoices and processes payments +- [Fulfillment](./src/fulfillment/CONTEXT.md) — manages warehouse picking and shipping + +## Relationships + +- **Ordering → Fulfillment**: Ordering emits `OrderPlaced` events; Fulfillment consumes them to start picking +- **Fulfillment → Billing**: Fulfillment emits `ShipmentDispatched` events; Billing consumes them to generate invoices +- **Ordering ↔ Billing**: Shared types for `CustomerId` and `Money` +``` + +The skill infers which structure applies: + +- If `CONTEXT-MAP.md` exists, read it to find contexts +- If only a root `CONTEXT.md` exists, single context +- If neither exists, create a root `CONTEXT.md` lazily when the first term is resolved + +When multiple contexts exist, infer which one the current topic relates to. If unclear, ask. diff --git a/.claude/skills/grill-with-docs/SKILL.md b/.claude/skills/grill-with-docs/SKILL.md new file mode 100644 index 0000000..5ea0aa9 --- /dev/null +++ b/.claude/skills/grill-with-docs/SKILL.md @@ -0,0 +1,88 @@ +--- +name: grill-with-docs +description: Grilling session that challenges your plan against the existing domain model, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise. Use when user wants to stress-test a plan against their project's language and documented decisions. +--- + + + +Interview me relentlessly about every aspect of this plan until we reach a shared understanding. Walk down each branch of the design tree, resolving dependencies between decisions one-by-one. For each question, provide your recommended answer. + +Ask the questions one at a time, waiting for feedback on each question before continuing. + +If a question can be answered by exploring the codebase, explore the codebase instead. + + + + + +## Domain awareness + +During codebase exploration, also look for existing documentation: + +### File structure + +Most repos have a single context: + +``` +/ +├── CONTEXT.md +├── docs/ +│ └── adr/ +│ ├── 0001-event-sourced-orders.md +│ └── 0002-postgres-for-write-model.md +└── src/ +``` + +If a `CONTEXT-MAP.md` exists at the root, the repo has multiple contexts. The map points to where each one lives: + +``` +/ +├── CONTEXT-MAP.md +├── docs/ +│ └── adr/ ← system-wide decisions +├── src/ +│ ├── ordering/ +│ │ ├── CONTEXT.md +│ │ └── docs/adr/ ← context-specific decisions +│ └── billing/ +│ ├── CONTEXT.md +│ └── docs/adr/ +``` + +Create files lazily — only when you have something to write. If no `CONTEXT.md` exists, create one when the first term is resolved. If no `docs/adr/` exists, create it when the first ADR is needed. + +## During the session + +### Challenge against the glossary + +When the user uses a term that conflicts with the existing language in `CONTEXT.md`, call it out immediately. "Your glossary defines 'cancellation' as X, but you seem to mean Y — which is it?" + +### Sharpen fuzzy language + +When the user uses vague or overloaded terms, propose a precise canonical term. "You're saying 'account' — do you mean the Customer or the User? Those are different things." + +### Discuss concrete scenarios + +When domain relationships are being discussed, stress-test them with specific scenarios. Invent scenarios that probe edge cases and force the user to be precise about the boundaries between concepts. + +### Cross-reference with code + +When the user states how something works, check whether the code agrees. If you find a contradiction, surface it: "Your code cancels entire Orders, but you just said partial cancellation is possible — which is right?" + +### Update CONTEXT.md inline + +When a term is resolved, update `CONTEXT.md` right there. Don't batch these up — capture them as they happen. Use the format in [CONTEXT-FORMAT.md](./CONTEXT-FORMAT.md). + +`CONTEXT.md` should be totally devoid of implementation details. Do not treat `CONTEXT.md` as a spec, a scratch pad, or a repository for implementation decisions. It is a glossary and nothing else. + +### Offer ADRs sparingly + +Only offer to create an ADR when all three are true: + +1. **Hard to reverse** — the cost of changing your mind later is meaningful +2. **Surprising without context** — a future reader will wonder "why did they do it this way?" +3. **The result of a real trade-off** — there were genuine alternatives and you picked one for specific reasons + +If any of the three is missing, skip the ADR. Use the format in [ADR-FORMAT.md](./ADR-FORMAT.md). + + diff --git a/.claude/skills/handoff/SKILL.md b/.claude/skills/handoff/SKILL.md new file mode 100644 index 0000000..0aa5b99 --- /dev/null +++ b/.claude/skills/handoff/SKILL.md @@ -0,0 +1,15 @@ +--- +name: handoff +description: Compact the current conversation into a handoff document for another agent to pick up. +argument-hint: "What will the next session be used for?" +--- + +Write a handoff document summarising the current conversation so a fresh agent can continue the work. Save to the temporary directory of the user's OS - not the current workspace. + +Include a "suggested skills" section in the document, which suggests skills that the agent should invoke. + +Do not duplicate content already captured in other artifacts (PRDs, plans, ADRs, issues, commits, diffs). Reference them by path or URL instead. + +Redact any sensitive information, such as API keys, passwords, or personally identifiable information. + +If the user passed arguments, treat them as a description of what the next session will focus on and tailor the doc accordingly. diff --git a/.claude/skills/improve-codebase-architecture/DEEPENING.md b/.claude/skills/improve-codebase-architecture/DEEPENING.md new file mode 100644 index 0000000..ecaf5d7 --- /dev/null +++ b/.claude/skills/improve-codebase-architecture/DEEPENING.md @@ -0,0 +1,37 @@ +# Deepening + +How to deepen a cluster of shallow modules safely, given its dependencies. Assumes the vocabulary in [LANGUAGE.md](LANGUAGE.md) — **module**, **interface**, **seam**, **adapter**. + +## Dependency categories + +When assessing a candidate for deepening, classify its dependencies. The category determines how the deepened module is tested across its seam. + +### 1. In-process + +Pure computation, in-memory state, no I/O. Always deepenable — merge the modules and test through the new interface directly. No adapter needed. + +### 2. Local-substitutable + +Dependencies that have local test stand-ins (PGLite for Postgres, in-memory filesystem). Deepenable if the stand-in exists. The deepened module is tested with the stand-in running in the test suite. The seam is internal; no port at the module's external interface. + +### 3. Remote but owned (Ports & Adapters) + +Your own services across a network boundary (microservices, internal APIs). Define a **port** (interface) at the seam. The deep module owns the logic; the transport is injected as an **adapter**. Tests use an in-memory adapter. Production uses an HTTP/gRPC/queue adapter. + +Recommendation shape: *"Define a port at the seam, implement an HTTP adapter for production and an in-memory adapter for testing, so the logic sits in one deep module even though it's deployed across a network."* + +### 4. True external (Mock) + +Third-party services (Stripe, Twilio, etc.) you don't control. The deepened module takes the external dependency as an injected port; tests provide a mock adapter. + +## Seam discipline + +- **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a port unless at least two adapters are justified (typically production + test). A single-adapter seam is just indirection. +- **Internal seams vs external seams.** A deep module can have internal seams (private to its implementation, used by its own tests) as well as the external seam at its interface. Don't expose internal seams through the interface just because tests use them. + +## Testing strategy: replace, don't layer + +- Old unit tests on shallow modules become waste once tests at the deepened module's interface exist — delete them. +- Write new tests at the deepened module's interface. The **interface is the test surface**. +- Tests assert on observable outcomes through the interface, not internal state. +- Tests should survive internal refactors — they describe behaviour, not implementation. If a test has to change when the implementation changes, it's testing past the interface. diff --git a/.claude/skills/improve-codebase-architecture/HTML-REPORT.md b/.claude/skills/improve-codebase-architecture/HTML-REPORT.md new file mode 100644 index 0000000..8adc368 --- /dev/null +++ b/.claude/skills/improve-codebase-architecture/HTML-REPORT.md @@ -0,0 +1,123 @@ +# HTML Report Format + +The architectural review is rendered as a single self-contained HTML file in the OS temp directory. Tailwind and Mermaid both come from CDNs. Mermaid handles graph-shaped diagrams reliably; hand-built divs and inline SVG handle the more editorial visuals (mass diagrams, cross-sections). Mix the two — don't lean on Mermaid for everything, it'll start to look generic. + +## Scaffold + +```html + + + + + Architecture review — {{repo name}} + + + + + +
+
...
+
...
+
...
+
+ + +``` + +## Header + +Repo name, date, and a compact legend: solid box = module, dashed line = seam, red arrow = leakage, thick dark box = deep module. No introduction paragraph — straight into the candidates. + +## Candidate card + +The diagrams carry the weight. Prose is sparse, plain, and uses the glossary terms ([LANGUAGE.md](LANGUAGE.md)) without ceremony. + +Each candidate is one `
`: + +- **Title** — short, names the deepening (e.g. "Collapse the Order intake pipeline"). +- **Badge row** — recommendation strength (`Strong` = emerald, `Worth exploring` = amber, `Speculative` = slate), plus a tag for the dependency category (`in-process`, `local-substitutable`, `ports & adapters`, `mock`). +- **Files** — monospaced list, `font-mono text-sm`. +- **Before / After diagram** — the centrepiece. Two columns, side by side. See patterns below. +- **Problem** — one sentence. What hurts. +- **Solution** — one sentence. What changes. +- **Wins** — bullets, ≤6 words each. e.g. "Tests hit one interface", "Pricing logic stops leaking", "Delete 4 shallow wrappers". +- **ADR callout** (if applicable) — one line in an amber-tinted box. + +No paragraphs of explanation. If the diagram needs a paragraph to be understood, redraw the diagram. + +## Diagram patterns + +Pick the pattern that fits the candidate. Mix them. Don't make every diagram look the same — variety is part of the point. + +### Mermaid graph (the workhorse for dependencies / call flow) + +Use a Mermaid `flowchart` or `graph` when the point is "X calls Y calls Z, and look at the mess." Wrap it in a Tailwind-styled card so it doesn't feel parachuted in. Style with classDef to colour leakage edges red and the deep module dark. Sequence diagrams work well for "before: 6 round-trips; after: 1." + +```html +
+ 
+    flowchart LR
+      A[OrderHandler] --> B[OrderValidator]
+      B --> C[OrderRepo]
+      C -.leak.-> D[PricingClient]
+      classDef leak stroke:#dc2626,stroke-width:2px;
+      class C,D leak
+
+
+``` + +### Hand-built boxes-and-arrows (when Mermaid's layout fights you) + +Modules as `
`s with borders and labels. Arrows as inline SVG `` or `` elements positioned absolutely over a relative container. Reach for this when you want the "after" diagram to feel like one thick-bordered deep module with greyed-out internals — Mermaid won't render that with the right weight. + +### Cross-section (good for layered shallowness) + +Stack horizontal bands (`h-12 border-l-4`) to show layers a call passes through. Before: 6 thin layers each doing nothing. After: 1 thick band labelled with the consolidated responsibility. + +### Mass diagram (good for "interface as wide as implementation") + +Two rectangles per module — one for interface surface area, one for implementation. Before: interface rectangle is nearly as tall as the implementation rectangle (shallow). After: interface rectangle is short, implementation rectangle is tall (deep). + +### Call-graph collapse + +Before: a tree of function calls rendered as nested boxes. After: the same tree collapsed into one box, with the now-internal calls shown faded inside it. + +## Style guidance + +- Lean editorial, not corporate-dashboard. Generous whitespace. Serif optional for headings (`font-serif` works well with stone/slate). +- Colour sparingly: one accent (emerald or indigo) plus red for leakage and amber for warnings. +- Keep diagrams ~320px tall so before/after sits comfortably side by side without scrolling. +- Use `text-xs uppercase tracking-wider` for module labels inside diagrams — they should read as schematic, not as UI. +- The only scripts are the Tailwind CDN and the Mermaid ESM import. The report is otherwise static — no app code, no interactivity beyond Mermaid's own rendering. + +## Top recommendation section + +One larger card. Candidate name, one sentence on why, anchor link to its card. That's it. + +## Tone + +Plain English, concise — but the architectural nouns and verbs come straight from [LANGUAGE.md](LANGUAGE.md). Concision is not an excuse to drift. + +**Use exactly:** module, interface, implementation, depth, deep, shallow, seam, adapter, leverage, locality. + +**Never substitute:** component, service, unit (for module) · API, signature (for interface) · boundary (for seam) · layer, wrapper (for module, when you mean module). + +**Phrasings that fit the style:** + +- "Order intake module is shallow — interface nearly matches the implementation." +- "Pricing leaks across the seam." +- "Deepen: one interface, one place to test." +- "Two adapters justify the seam: HTTP in prod, in-memory in tests." + +**Wins bullets** name the gain in glossary terms: *"locality: bugs concentrate in one module"*, *"leverage: one interface, N call sites"*, *"interface shrinks; implementation absorbs the wrappers"*. Don't write *"easier to maintain"* or *"cleaner code"* — those terms aren't in the glossary and don't earn their place. + +No hedging, no throat-clearing, no "it's worth noting that…". If a sentence could be a bullet, make it a bullet. If a bullet could be cut, cut it. If a term isn't in [LANGUAGE.md](LANGUAGE.md), reach for one that is before inventing a new one. diff --git a/.claude/skills/improve-codebase-architecture/INTERFACE-DESIGN.md b/.claude/skills/improve-codebase-architecture/INTERFACE-DESIGN.md new file mode 100644 index 0000000..3197723 --- /dev/null +++ b/.claude/skills/improve-codebase-architecture/INTERFACE-DESIGN.md @@ -0,0 +1,44 @@ +# Interface Design + +When the user wants to explore alternative interfaces for a chosen deepening candidate, use this parallel sub-agent pattern. Based on "Design It Twice" (Ousterhout) — your first idea is unlikely to be the best. + +Uses the vocabulary in [LANGUAGE.md](LANGUAGE.md) — **module**, **interface**, **seam**, **adapter**, **leverage**. + +## Process + +### 1. Frame the problem space + +Before spawning sub-agents, write a user-facing explanation of the problem space for the chosen candidate: + +- The constraints any new interface would need to satisfy +- The dependencies it would rely on, and which category they fall into (see [DEEPENING.md](DEEPENING.md)) +- A rough illustrative code sketch to ground the constraints — not a proposal, just a way to make the constraints concrete + +Show this to the user, then immediately proceed to Step 2. The user reads and thinks while the sub-agents work in parallel. + +### 2. Spawn sub-agents + +Spawn 3+ sub-agents in parallel using the Agent tool. Each must produce a **radically different** interface for the deepened module. + +Prompt each sub-agent with a separate technical brief (file paths, coupling details, dependency category from [DEEPENING.md](DEEPENING.md), what sits behind the seam). The brief is independent of the user-facing problem-space explanation in Step 1. Give each agent a different design constraint: + +- Agent 1: "Minimize the interface — aim for 1–3 entry points max. Maximise leverage per entry point." +- Agent 2: "Maximise flexibility — support many use cases and extension." +- Agent 3: "Optimise for the most common caller — make the default case trivial." +- Agent 4 (if applicable): "Design around ports & adapters for cross-seam dependencies." + +Include both [LANGUAGE.md](LANGUAGE.md) vocabulary and CONTEXT.md vocabulary in the brief so each sub-agent names things consistently with the architecture language and the project's domain language. + +Each sub-agent outputs: + +1. Interface (types, methods, params — plus invariants, ordering, error modes) +2. Usage example showing how callers use it +3. What the implementation hides behind the seam +4. Dependency strategy and adapters (see [DEEPENING.md](DEEPENING.md)) +5. Trade-offs — where leverage is high, where it's thin + +### 3. Present and compare + +Present designs sequentially so the user can absorb each one, then compare them in prose. Contrast by **depth** (leverage at the interface), **locality** (where change concentrates), and **seam placement**. + +After comparing, give your own recommendation: which design you think is strongest and why. If elements from different designs would combine well, propose a hybrid. Be opinionated — the user wants a strong read, not a menu. diff --git a/.claude/skills/improve-codebase-architecture/LANGUAGE.md b/.claude/skills/improve-codebase-architecture/LANGUAGE.md new file mode 100644 index 0000000..530c276 --- /dev/null +++ b/.claude/skills/improve-codebase-architecture/LANGUAGE.md @@ -0,0 +1,53 @@ +# Language + +Shared vocabulary for every suggestion this skill makes. Use these terms exactly — don't substitute "component," "service," "API," or "boundary." Consistent language is the whole point. + +## Terms + +**Module** +Anything with an interface and an implementation. Deliberately scale-agnostic — applies equally to a function, class, package, or tier-spanning slice. +_Avoid_: unit, component, service. + +**Interface** +Everything a caller must know to use the module correctly. Includes the type signature, but also invariants, ordering constraints, error modes, required configuration, and performance characteristics. +_Avoid_: API, signature (too narrow — those refer only to the type-level surface). + +**Implementation** +What's inside a module — its body of code. Distinct from **Adapter**: a thing can be a small adapter with a large implementation (a Postgres repo) or a large adapter with a small implementation (an in-memory fake). Reach for "adapter" when the seam is the topic; "implementation" otherwise. + +**Depth** +Leverage at the interface — the amount of behaviour a caller (or test) can exercise per unit of interface they have to learn. A module is **deep** when a large amount of behaviour sits behind a small interface. A module is **shallow** when the interface is nearly as complex as the implementation. + +**Seam** _(from Michael Feathers)_ +A place where you can alter behaviour without editing in that place. The *location* at which a module's interface lives. Choosing where to put the seam is its own design decision, distinct from what goes behind it. +_Avoid_: boundary (overloaded with DDD's bounded context). + +**Adapter** +A concrete thing that satisfies an interface at a seam. Describes *role* (what slot it fills), not substance (what's inside). + +**Leverage** +What callers get from depth. More capability per unit of interface they have to learn. One implementation pays back across N call sites and M tests. + +**Locality** +What maintainers get from depth. Change, bugs, knowledge, and verification concentrate at one place rather than spreading across callers. Fix once, fixed everywhere. + +## Principles + +- **Depth is a property of the interface, not the implementation.** A deep module can be internally composed of small, mockable, swappable parts — they just aren't part of the interface. A module can have **internal seams** (private to its implementation, used by its own tests) as well as the **external seam** at its interface. +- **The deletion test.** Imagine deleting the module. If complexity vanishes, the module wasn't hiding anything (it was a pass-through). If complexity reappears across N callers, the module was earning its keep. +- **The interface is the test surface.** Callers and tests cross the same seam. If you want to test *past* the interface, the module is probably the wrong shape. +- **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a seam unless something actually varies across it. + +## Relationships + +- A **Module** has exactly one **Interface** (the surface it presents to callers and tests). +- **Depth** is a property of a **Module**, measured against its **Interface**. +- A **Seam** is where a **Module**'s **Interface** lives. +- An **Adapter** sits at a **Seam** and satisfies the **Interface**. +- **Depth** produces **Leverage** for callers and **Locality** for maintainers. + +## Rejected framings + +- **Depth as ratio of implementation-lines to interface-lines** (Ousterhout): rewards padding the implementation. We use depth-as-leverage instead. +- **"Interface" as the TypeScript `interface` keyword or a class's public methods**: too narrow — interface here includes every fact a caller must know. +- **"Boundary"**: overloaded with DDD's bounded context. Say **seam** or **interface**. diff --git a/.claude/skills/improve-codebase-architecture/SKILL.md b/.claude/skills/improve-codebase-architecture/SKILL.md new file mode 100644 index 0000000..c12b263 --- /dev/null +++ b/.claude/skills/improve-codebase-architecture/SKILL.md @@ -0,0 +1,81 @@ +--- +name: improve-codebase-architecture +description: Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more testable and AI-navigable. +--- + +# Improve Codebase Architecture + +Surface architectural friction and propose **deepening opportunities** — refactors that turn shallow modules into deep ones. The aim is testability and AI-navigability. + +## Glossary + +Use these terms exactly in every suggestion. Consistent language is the point — don't drift into "component," "service," "API," or "boundary." Full definitions in [LANGUAGE.md](LANGUAGE.md). + +- **Module** — anything with an interface and an implementation (function, class, package, slice). +- **Interface** — everything a caller must know to use the module: types, invariants, error modes, ordering, config. Not just the type signature. +- **Implementation** — the code inside. +- **Depth** — leverage at the interface: a lot of behaviour behind a small interface. **Deep** = high leverage. **Shallow** = interface nearly as complex as the implementation. +- **Seam** — where an interface lives; a place behaviour can be altered without editing in place. (Use this, not "boundary.") +- **Adapter** — a concrete thing satisfying an interface at a seam. +- **Leverage** — what callers get from depth. +- **Locality** — what maintainers get from depth: change, bugs, knowledge concentrated in one place. + +Key principles (see [LANGUAGE.md](LANGUAGE.md) for the full list): + +- **Deletion test**: imagine deleting the module. If complexity vanishes, it was a pass-through. If complexity reappears across N callers, it was earning its keep. +- **The interface is the test surface.** +- **One adapter = hypothetical seam. Two adapters = real seam.** + +This skill is _informed_ by the project's domain model. The domain language gives names to good seams; ADRs record decisions the skill should not re-litigate. + +## Process + +### 1. Explore + +Read the project's domain glossary and any ADRs in the area you're touching first. + +Then use the Agent tool with `subagent_type=Explore` to walk the codebase. Don't follow rigid heuristics — explore organically and note where you experience friction: + +- Where does understanding one concept require bouncing between many small modules? +- Where are modules **shallow** — interface nearly as complex as the implementation? +- Where have pure functions been extracted just for testability, but the real bugs hide in how they're called (no **locality**)? +- Where do tightly-coupled modules leak across their seams? +- Which parts of the codebase are untested, or hard to test through their current interface? + +Apply the **deletion test** to anything you suspect is shallow: would deleting it concentrate complexity, or just move it? A "yes, concentrates" is the signal you want. + +### 2. Present candidates as an HTML report + +Write a self-contained HTML file to the OS temp directory so nothing lands in the repo. Resolve the temp dir from `$TMPDIR`, falling back to `/tmp` (or `%TEMP%` on Windows), and write to `/architecture-review-.html` so each run gets a fresh file. Open it for the user — `xdg-open ` on Linux, `open ` on macOS, `start ` on Windows — and tell them the absolute path. + +The report uses **Tailwind via CDN** for layout and styling, and **Mermaid via CDN** for diagrams where a graph/flow/sequence reliably communicates the structure. Mix Mermaid with hand-crafted CSS/SVG visuals — use Mermaid when relationships are graph-shaped (call graphs, dependencies, sequences), and hand-built divs/SVG when you want something more editorial (mass diagrams, cross-sections, collapse animations). Each candidate gets a **before/after visualisation**. Be visual. + +For each candidate, the same template as before, but rendered as a card: + +- **Files** — which files/modules are involved +- **Problem** — why the current architecture is causing friction +- **Solution** — plain English description of what would change +- **Benefits** — explained in terms of locality and leverage, and how tests would improve +- **Before / After diagram** — side-by-side, custom-drawn, illustrating the shallowness and the deepening +- **Recommendation strength** — one of `Strong`, `Worth exploring`, `Speculative`, rendered as a badge + +End the report with a **Top recommendation** section: which candidate you'd tackle first and why. + +**Use CONTEXT.md vocabulary for the domain, and [LANGUAGE.md](LANGUAGE.md) vocabulary for the architecture.** If `CONTEXT.md` defines "Order," talk about "the Order intake module" — not "the FooBarHandler," and not "the Order service." + +**ADR conflicts**: if a candidate contradicts an existing ADR, only surface it when the friction is real enough to warrant revisiting the ADR. Mark it clearly in the card (e.g. a warning callout: _"contradicts ADR-0007 — but worth reopening because…"_). Don't list every theoretical refactor an ADR forbids. + +See [HTML-REPORT.md](HTML-REPORT.md) for the full HTML scaffold, diagram patterns, and styling guidance. + +Do NOT propose interfaces yet. After the file is written, ask the user: "Which of these would you like to explore?" + +### 3. Grilling loop + +Once the user picks a candidate, drop into a grilling conversation. Walk the design tree with them — constraints, dependencies, the shape of the deepened module, what sits behind the seam, what tests survive. + +Side effects happen inline as decisions crystallize: + +- **Naming a deepened module after a concept not in `CONTEXT.md`?** Add the term to `CONTEXT.md` — same discipline as `/grill-with-docs` (see [CONTEXT-FORMAT.md](../grill-with-docs/CONTEXT-FORMAT.md)). Create the file lazily if it doesn't exist. +- **Sharpening a fuzzy term during the conversation?** Update `CONTEXT.md` right there. +- **User rejects the candidate with a load-bearing reason?** Offer an ADR, framed as: _"Want me to record this as an ADR so future architecture reviews don't re-suggest it?"_ Only offer when the reason would actually be needed by a future explorer to avoid re-suggesting the same thing — skip ephemeral reasons ("not worth it right now") and self-evident ones. See [ADR-FORMAT.md](../grill-with-docs/ADR-FORMAT.md). +- **Want to explore alternative interfaces for the deepened module?** See [INTERFACE-DESIGN.md](INTERFACE-DESIGN.md). diff --git a/.claude/skills/prototype/LOGIC.md b/.claude/skills/prototype/LOGIC.md new file mode 100644 index 0000000..526ecb1 --- /dev/null +++ b/.claude/skills/prototype/LOGIC.md @@ -0,0 +1,79 @@ +# Logic Prototype + +A tiny interactive terminal app that lets the user drive a state model by hand. Use this when the question is about **business logic, state transitions, or data shape** — the kind of thing that looks reasonable on paper but only feels wrong once you push it through real cases. + +## When this is the right shape + +- "I'm not sure if this state machine handles the edge case where X then Y." +- "Does this data model actually let me represent the case where..." +- "I want to feel out what the API should look like before writing it." +- Anything where the user wants to **press buttons and watch state change**. + +If the question is "what should this look like" — wrong branch. Use [UI.md](UI.md). + +## Process + +### 1. State the question + +Before writing code, write down what state model and what question you're prototyping. One paragraph, in the prototype's README or a comment at the top of the file. A logic prototype that answers the wrong question is pure waste — make the question explicit so it can be checked later, whether the user is watching now or returning to it AFK. + +### 2. Pick the language + +Use whatever the host project uses. If the project has no obvious runtime (e.g. a docs repo), ask. + +Match the project's existing conventions for tooling — don't add a new package manager or runtime just for the prototype. + +### 3. Isolate the logic in a portable module + +Put the actual logic — the bit that's answering the question — behind a small, pure interface that could be lifted out and dropped into the real codebase later. The TUI around it is throwaway; the logic module shouldn't be. + +The right shape depends on the question: + +- **A pure reducer** — `(state, action) => state`. Good when actions are discrete events and state is a single value. +- **A state machine** — explicit states and transitions. Good when "which actions are even legal right now" is part of the question. +- **A small set of pure functions** over a plain data type. Good when there's no implicit current state — just transformations. +- **A class or module with a clear method surface** when the logic genuinely owns ongoing internal state. + +Pick whichever shape best fits the question being asked, *not* whichever is easiest to wire to a TUI. Keep it pure: no I/O, no terminal code, no `console.log` for control flow. The TUI imports it and calls into it; nothing flows the other direction. + +This is what makes the prototype useful past its own lifetime. When the question's been answered, the validated reducer / machine / function set can be lifted into the real module — the TUI shell gets deleted. + +### 4. Build the smallest TUI that exposes the state + +Build it as a **lightweight TUI** — on every tick, clear the screen (`console.clear()` / `print("\033[2J\033[H")` / equivalent) and re-render the whole frame. The user should always see one stable view, not an ever-growing scrollback. + +Each frame has two parts, in this order: + +1. **Current state**, pretty-printed and diff-friendly (one field per line, or formatted JSON). Use **bold** for field names or section headers and **dim** for less important context (timestamps, IDs, derived values). Native ANSI escape codes are fine — `\x1b[1m` bold, `\x1b[2m` dim, `\x1b[0m` reset. No need to pull in a styling library unless one is already in the project. +2. **Keyboard shortcuts**, listed at the bottom: `[a] add user [d] delete user [t] tick clock [q] quit`. Bold the key, dim the description, or vice-versa — whatever reads cleanly. + +Behaviour: + +1. **Initialise state** — a single in-memory object/struct. Render the first frame on start. +2. **Read one keystroke (or one line)** at a time, dispatch to a handler that mutates state. +3. **Re-render** the full frame after every action — don't append, replace. +4. **Loop until quit.** + +The whole frame should fit on one screen. + +### 5. Make it runnable in one command + +Add a script to the project's existing task runner (`package.json` scripts, `Makefile`, `justfile`, `pyproject.toml`). The user should run `pnpm run ` or equivalent — never need to remember a path. + +If the host project has no task runner, just put the command at the top of the prototype's README. + +### 6. Hand it over + +Give the user the run command. They'll drive it themselves; the interesting moments are when they say "wait, that shouldn't be possible" or "huh, I assumed X would be different" — those are the bugs in the _idea_, which is the whole point. If they want new actions added, add them. Prototypes evolve. + +### 7. Capture the answer + +When the prototype has done its job, the answer to the question is the only thing worth keeping. If the user is around, ask what it taught them. If not, leave a `NOTES.md` next to the prototype so the answer can be filled in (or filled in by you, if you've watched the session) before the prototype gets deleted. + +## Anti-patterns + +- **Don't add tests.** A prototype that needs tests is no longer a prototype. +- **Don't wire it to the real database.** Use an in-memory store unless the question is specifically about persistence. +- **Don't generalise.** No "what if we wanted to support X later." The prototype answers one question. +- **Don't blur the logic and the TUI together.** If the reducer / state machine references `console.log`, prompts, or terminal escape codes, it's no longer portable. Keep the TUI as a thin shell over a pure module. +- **Don't ship the TUI shell into production.** The shell is optimised for being driven by hand from a terminal. The logic module behind it is the bit worth keeping. diff --git a/.claude/skills/prototype/SKILL.md b/.claude/skills/prototype/SKILL.md new file mode 100644 index 0000000..64f3e61 --- /dev/null +++ b/.claude/skills/prototype/SKILL.md @@ -0,0 +1,30 @@ +--- +name: prototype +description: Build a throwaway prototype to flesh out a design before committing to it. Routes between two branches — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route. Use when the user wants to prototype, sanity-check a data model or state machine, mock up a UI, explore design options, or says "prototype this", "let me play with it", "try a few designs". +--- + +# Prototype + +A prototype is **throwaway code that answers a question**. The question decides the shape. + +## Pick a branch + +Identify which question is being answered — from the user's prompt, the surrounding code, or by asking if the user is around: + +- **"Does this logic / state model feel right?"** → [LOGIC.md](LOGIC.md). Build a tiny interactive terminal app that pushes the state machine through cases that are hard to reason about on paper. +- **"What should this look like?"** → [UI.md](UI.md). Generate several radically different UI variations on a single route, switchable via a URL search param and a floating bottom bar. + +The two branches produce very different artifacts — getting this wrong wastes the whole prototype. If the question is genuinely ambiguous and the user isn't reachable, default to whichever branch better matches the surrounding code (a backend module → logic; a page or component → UI) and state the assumption at the top of the prototype. + +## Rules that apply to both + +1. **Throwaway from day one, and clearly marked as such.** Locate the prototype code close to where it will actually be used (next to the module or page it's prototyping for) so context is obvious — but name it so a casual reader can see it's a prototype, not production. For throwaway UI routes, obey whatever routing convention the project already uses; don't invent a new top-level structure. +2. **One command to run.** Whatever the project's existing task runner supports — `pnpm `, `python `, `bun `, etc. The user must be able to start it without thinking. +3. **No persistence by default.** State lives in memory. Persistence is the thing the prototype is _checking_, not something it should depend on. If the question explicitly involves a database, hit a scratch DB or a local file with a clear "PROTOTYPE — wipe me" name. +4. **Skip the polish.** No tests, no error handling beyond what makes the prototype _runnable_, no abstractions. The point is to learn something fast and then delete it. +5. **Surface the state.** After every action (logic) or on every variant switch (UI), print or render the full relevant state so the user can see what changed. +6. **Delete or absorb when done.** When the prototype has answered its question, either delete it or fold the validated decision into the real code — don't leave it rotting in the repo. + +## When done + +The _answer_ is the only thing worth keeping from a prototype. Capture it somewhere durable (commit message, ADR, issue, or a `NOTES.md` next to the prototype) along with the question it was answering. If the user is around, that capture is a quick conversation; if not, leave the placeholder so they (or you, on the next pass) can fill in the verdict before deleting the prototype. diff --git a/.claude/skills/prototype/UI.md b/.claude/skills/prototype/UI.md new file mode 100644 index 0000000..f3b6e64 --- /dev/null +++ b/.claude/skills/prototype/UI.md @@ -0,0 +1,112 @@ +# UI Prototype + +Generate **several radically different UI variations** on a single route, switchable from a floating bottom bar. The user flips between variants in the browser, picks one (or steals bits from each), then throws the rest away. + +If the question is about logic/state rather than what something looks like — wrong branch. Use [LOGIC.md](LOGIC.md). + +## When this is the right shape + +- "What should this page look like?" +- "I want to see a few options for this dashboard before committing." +- "Try a different layout for the settings screen." +- Any time the user would otherwise spend a day picking between three vague mockups in their head. + +## Two sub-shapes — strongly prefer sub-shape A + +A UI prototype is much easier to judge when it's **butting up against the rest of the app** — real header, real sidebar, real data, real density. A throwaway route on its own is a vacuum: every variant looks fine in isolation. Default to sub-shape A whenever there's a plausible existing page to host the variants. Only reach for sub-shape B if the prototype genuinely has no nearby home. + +### Sub-shape A — adjustment to an existing page (preferred) + +The route already exists. Variants are rendered **on the same route**, gated by a `?variant=` URL search param. The existing data fetching, params, and auth all stay — only the rendering swaps. This is the default; pick it unless there's a specific reason not to. + +If the prototype is for something that doesn't yet have a page but *would naturally live inside one* (a new section of the dashboard, a new card on the settings screen, a new step in an existing flow) — that's still sub-shape A. Mount the variants inside the host page. + +### Sub-shape B — a new page (last resort) + +Only use this when the thing being prototyped genuinely has no existing page to live inside — e.g. an entirely new top-level surface, or a flow that can't be embedded anywhere sensible. + +Create a **throwaway route** following whatever routing convention the project already uses — don't invent a new top-level structure. Name it so it's obviously a prototype (e.g. include the word `prototype` in the path or filename). Same `?variant=` pattern. + +Before committing to sub-shape B, sanity-check: is there really no existing page this could be embedded in? An empty route hides design problems that a populated one would expose. + +In both sub-shapes the floating bottom bar is identical. + +## Process + +### 1. State the question and pick N + +Default to **3 variants**. More than 5 stops being radically different and starts being noise — cap there. + +Write down the plan in one line, in the prototype's location or a top-of-file comment: + +> "Three variants of the settings page, switchable via `?variant=`, on the existing `/settings` route." + +This works whether the user is here to push back or not. + +### 2. Generate radically different variants + +Draft each variant. Hold each one to: + +- The page's purpose and the data it has access to. +- The project's component library / styling system (TailwindCSS, shadcn, MUI, plain CSS, whatever). +- A clear exported component name, e.g. `VariantA`, `VariantB`, `VariantC`. + +Variants must be **structurally different** — different layout, different information hierarchy, different primary affordance, not just different colours. Three slightly-tweaked card grids isn't a UI prototype, it's wallpaper. If two drafts come out too similar, redo one with explicit "do not use a card grid" guidance. + +### 3. Wire them together + +Create a single switcher component on the route: + +```tsx +// pseudo-code — adapt to the project's framework +const variant = searchParams.get('variant') ?? 'A'; +return ( + <> + {variant === 'A' && } + {variant === 'B' && } + {variant === 'C' && } + + +); +``` + +For sub-shape A (existing page): keep all the existing data fetching above the switcher; only the rendered subtree changes per variant. + +For sub-shape B (new page): the throwaway route under `/prototype/` mounts the same switcher. + +### 4. Build the floating switcher + +A small fixed-position bar at the bottom-centre of the screen with three pieces: + +- **Left arrow** — cycles to the previous variant (wraps around). +- **Variant label** — shows the current variant key and, if the variant exports a name, that name too. e.g. `B — Sidebar layout`. +- **Right arrow** — cycles forward (wraps around). + +Behaviour: + +- Clicking an arrow updates the URL search param (use the framework's router — `router.replace` on Next, `navigate` on React Router, etc) so the variant is shareable and reload-stable. +- Keyboard: `←` and `→` arrow keys also cycle. Don't intercept arrow keys when an ``, `