[coderconnoisseur]

Phase 5b, the redesigned Spending page. Stacked on #97. Merge order: #95 → #96 → #97 → this. I'll retarget each to refactor once the one before it is in.

Spec §4.2: docs/superpowers/specs/2026-10-22-ui-revamp-phase5-design.md. Mockup: docs/superpowers/specs/2026-10-22-phase5/spending.html. The plan's Phase 5b section is now detailed.

What changes

• One page, one heading. The old stacked Analytics and AI Insights pages are gone, along with their components and the 10 API calls only they used (about 1,900 lines).
• Period control: This month / Last month / 3M / YTD / Custom. Custom uses two native date inputs. A "Compare with " switch hides the previous line and the change columns.
• Hero: the total, the change vs the previous period, and the shared running-total chart. Home's chart moved into components/page/cumulative-chart.tsx, so both heroes use one implementation. 3M and YTD show month bars instead, at the same height. Beside it, the last six months as bars with the average.
• By category: each category shows its amount, share and change. A click filters the table and is kept in ?category=. "N transactions still need a category → Sort them now" appears only when that's true.
• Lumen noticed: the same findings and actions as Home. Spending spikes now link to /spending?category=<name>, which needed a small backend change with tests.
• Transactions:
  • Filters: search by merchant, and a source filter (statement or receipt). The list API now returns source.
  • Category edit: the category pill is edited in place via PUT /transactions/<id>, and the row doesn't move.
  • Export: CSV of exactly the rows shown.
• Top merchants: the top 7 with how many payments.
• Calculations: all pure, in lib/spending-math.ts, with their own unit tests.

Tests

• Backend: 981 passed (2 new). Evals pass.
• Frontend e2e: 152 passed.
  • New: 13 Spending checks and 5 maths tests. They cover the hero keeping its box across periods, layout shift under 0.01 while loading, filter/search/source, in-place edits, CSV contents, and the chips staying on one line at 375px.
  • Flaky: shell.spec timed out once on its first, cold-compile run. It then passed 23/23 three times.
• The e2e fixture now copies its data for each test (a PUT had leaked between tests).
• Lint and the production build are clean.
• A screenshot compared against the mockup caught the period chips wrapping on phones, and a test now pins it.

Manual check

1. Open /spending on your seeded account. Switch the periods and turn Compare off and on.
2. Click a category. The table filters, and Clear restores it. Try "Sort them now".
3. Change a transaction's category from the pill. It sticks after a reload.
4. Export CSV with a filter on. The file has just those rows.
5. On Home, a spending spike's "See in Spending" opens Spending filtered to that category.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
lumen	Ready	Preview	Oct 22, 2026 9:39am UTC