lucasw89/budget2.0
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity
68 Commits 1 Branch 0 Tags
bd5a01e03e2812675778a3226b1c428c27fe5bfb
Commit Graph
5 Commits
Author SHA1 Message Date
Lucas WintherandClaude Opus 5 bd5a01e03e chore(tooling): make the screenshot recipe work with no setup 
Two things this session depended on lived only in a scratchpad, so the next
agent would have had to reinvent them from a prose hint:

- scripts/screenshot-fonts.conf, now applied by screenshot.ts itself. Without
  it this container renders every generic font family as Fira Code and the UI
  looks monospaced in a way no user sees — a trap that nearly produced a "fix"
  for a font bug that does not exist.
- scripts/demo-data.ts, which seeds a visibly synthetic dataset. Without it
  every screenshot shows an app full of zeros, because Chrome starts from a
  fresh profile each run.

CLAUDE.md now carries the two-command recipe verbatim instead of "point
FONTCONFIG_FILE at an override", and says why --reload is mandatory. Verified
from a clean shell with no environment set.

Also flags docs/superpowers/plans/2026-09-01-budget-app.md as a historical
record: its snippets still show CURRENCIES and CURRENCY_DIGITS, which no
longer exist, and an agent reading it as current would be misled.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
 2026-09-02 16:07:09 +02:00
Lucas WintherandClaude Opus 5 e6da85e7f9 fix(sw): the service worker had never installed, and updates raced the reload 
Two defects behind "the new version is ready" not going away.

1. THE WORKER NEVER INSTALLED — in any environment, ever.

   install did `cache.addAll([...PRECACHE, SHELL])`. PRECACHE is derived from
   the build's own outputs, which already contain index.html, and SHELL is
   index.html again. addAll() rejects the ENTIRE install on a duplicate
   request:

     InvalidStateError: Cache.addAll(): duplicate requests (.../index.html)

   So install failed on every load, the worker went redundant, and nothing
   ever activated. Registration itself succeeds and the failure is inside the
   install event, so nothing surfaced it — which is why offline behaviour was
   listed as "never verified" rather than "broken". All 11 precached URLs
   return 200; the list was the only fault. Deduping now lives in
   src/swPrecache.ts, at the point of use, so no future addition to either
   list can reintroduce it.

   Verified in a real browser for the first time: the worker installs,
   activates, claims the page, and caches 11 entries. A rebuild is then
   detected, the prompt appears, clicking Reload applies it, stale caches are
   dropped and the prompt does not return.

2. THE DEV WORKER IGNORED THE LIFECYCLE — my own regression, from 53707b1.

   That commit made the dev server serve an inert sw.js to silence a MIME
   error. Inert included the lifecycle: no skipWaiting, no clients.claim, no
   message handler. A worker like that can sit in `waiting` forever and can
   never be applied, so the prompt returns on every load and the Reload button
   cannot possibly clear it. This is the likeliest cause of the reported
   symptom, since with defect 1 a production build could never have shown that
   prompt at all. The dev worker still caches nothing — that would fight HMR —
   but now honours install, activate and SKIP_WAITING.

3. applyUpdate RACED ITS OWN RELOAD — real, measured, but not reproducible on
   demand, so it is hardening rather than a proven fix.

   It posted SKIP_WAITING and called window.location.reload() on the next
   line. Measured in Chrome: at that instant the new worker was still
   `installed` and the controller had NOT changed — it changed 2 ms later. The
   window is wider in practice because activate deletes every stale cache
   before claiming clients. When the reload wins, the reloaded page still finds
   registration.waiting and shows the prompt again. It now waits for
   controllerchange, with a timeout backstop so a worker that ignores
   SKIP_WAITING cannot leave the button dead. The sequencing is pure and
   tested (src/ui/swUpdate.ts): listener attached before the message, reload
   exactly once, unsubscribed after.

Tooling: scripts/screenshot.ts gains --profile (a fresh Chrome profile has no
registered worker, so nothing stateful across loads could be reproduced at all)
and --eval-after-file (observe a flow that ends in a navigation from the other
side of it).

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
 2026-09-02 15:28:06 +02:00
Lucas WintherandClaude Opus 5 bb3c661ef6 feat(ui): design foundation — two themes, shipped type, one card 
Sub-project 1 of the redesign. The diagnosis that shaped it: a design system
already existed and was never wired up. src/index.css defined --paper, --ink
and a muted teal with a contract document behind them, while the app painted
itself with shadcn's default white and near-black. Those tokens reached the
screen in exactly two places — the carry meter and the +/- number colours.

TOKENS. Two layers: --budget-* is the app's own vocabulary, defined once per
theme, and shadcn's whole variable set points at it, so every primitive
inherits both themes rather than being fought. Light is cool paper with ink
navy; dark is deep slate, never pure black, because a black ground makes the
hairlines and the carry meter float.

The brand teal is --primary, NOT --accent. That is precisely what the old bug
got wrong: shadcn's --accent is a subtle hover BACKGROUND paired with
--accent-foreground, so a saturated colour there turns every hover into a
coloured slab with unreadable text. src/cssPairs.test.ts now makes the rule
mechanical — redefining either half of a shadcn pair without the other fails
the build, in any block.

CONTRAST was computed, not eyeballed: the weakest text pair is 5.50:1 against
a 4.5:1 requirement, and field borders clear the 3:1 non-text requirement on
both of their backgrounds. Verified afterwards by reading the tokens back out
of the live browser in both themes rather than trusting the arithmetic.

TYPE. Inter and JetBrains Mono, self-hosted (SIL OFL, licences committed
alongside), latin + latin-ext only. Not in index.css: Bun's CSS bundler
resolves every url() from disk and inlines woff2 as base64 — relative or
absolute, and a "file" loader override does not stop it — which made the
stylesheet 303 KB of render-blocking bytes and defeated the unicode-range
subsetting entirely. They are injected at boot from one definition instead,
which is the only arrangement identical in dev and in a subpath build.

THEME TOGGLE cycles system / light / dark, remembers the choice in
localStorage (a per-device display preference does not belong in the exported
budget), keeps following the OS while set to "system", and is applied by a
tiny inline script before first paint so a dark-theme user never sees a white
flash. Every storage access is wrapped: localStorage throws outright in some
configurations, and a theme preference must never stop the app booting.

A REGRESSION I CAUSED AND CAUGHT: renaming --rule to --budget-rule silently
killed the carry meter. An undefined custom property inside linear-gradient()
does not warn, does not throw and does not fall back — the declaration is
invalid, so the element paints nothing. It looked like a missing feature. Only
pixel-sampling a screenshot found it. src/ui/cssTokens.test.ts now fails if any
TypeScript file references a token src/index.css does not define.

Also: one Section/Stat card treatment applied across month, year, summary and
settings; quiet uppercase table headers; row hover; the rule-editing and
purchase-row actions revealed on hover instead of six always-on links; a scroll
fade on the year matrix so it reads as "more to come" rather than clipped; and
"September 2026" instead of "2026-09" as the month heading.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
 2026-09-02 15:11:43 +02:00
Lucas WintherandClaude Opus 5 53707b14ca feat(tooling): drive headless Chrome, and see the app for the first time 
CLAUDE.md, AGENTS.md, ARCHITECTURE.md and TODO.md all said no browser exists
in this environment, so appearance had never been verified by anyone. Chrome
is on PATH. Its own --screenshot flag is what fails: it fires on the load
event, before this app's async IndexedDB read resolves, and captures a blank
page — which is presumably how the claim took hold.

scripts/screenshot.ts drives CDP instead: waits past the load event, seeds
IndexedDB via --eval-file and reboots the app with --reload, clicks with
--click, applies shadcn's class-based dark palette with --dark, and reports
console errors and uncaught exceptions. A page that renders blank from a
thrown error looks identical to an empty one, so the console output is half
the value.

Two defects found by simply looking:

- The month table's numeric columns had no horizontal padding, so figures ran
  into each other: "+7,175.00 DKK4,200.00 DKK". Now padded.
- Dev logged "The script has an unsupported MIME type ('text/html')" on every
  boot, because registerServiceWorker asks for sw.js and the "/*" catch-all
  answered with the HTML shell. Dev now serves an inert worker.

Confirmed working, first time seen: the carry meter (including red where a post
is overspent), the Task 5 rule-history editor, the Task 6 "change from here"
control, and baked FX rates showing as "manual - 2026-09-01" in Settings.

Recorded in the docs, with the limits stated: this container's fontconfig maps
every generic family to a monospace face, so screenshots need a FONTCONFIG_FILE
override or you will chase a font bug that does not exist; Chrome starts from
an empty profile each run; and no screenshot can judge how a design feels.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
 2026-09-02 14:46:59 +02:00
Lucas WintherandClaude Opus 5 f50c65bd77 feat: ship the 192 and 512 PNG icons Chrome's install prompt wants 
TODO recorded these as needing a human because binary assets cannot be
generated in the agent environment. That turned out to be wrong: Chrome is on
PATH here and rasterizes the SVG exactly, so scripts/make-icons.ts generates
them and the output is committed. Verified pixel-accurate against src/icon.svg
before trusting it (background #0f172a, bars #38bdf8, underline #e2e8f0,
transparent rounded corners).

The generator uses an explicit Bun.spawn with a timeout rather than a shell
template, because Chrome did not always exit on its own here.

Both sizes now appear in the manifest, get copied into dist, are served by the
dev server, and are listed in the service worker precache — along with
icon.svg and manifest.webmanifest, which were also absent from it because the
list is derived from bundler outputs and these are written separately. Without
that an installed app could not render its own icon offline.

src/icons.test.ts checks the committed files are genuine 8-bit RGBA images of
the right dimensions by inflating IDAT and asserting the exact pixel-data
length, so a truncated or stub file cannot pass. It cannot detect staleness
if src/icon.svg changes — re-run the generator.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
 2026-09-02 14:32:37 +02:00