TODO.md carries the remaining work with the reasoning already settled, so the next agent does not re-derive decisions: tasks 3-6 of the versioned-rules plan, the designed-but-unbuilt baked FX rates, the queued visual redesign, the small residuals, and an explicit list of what only a human with a browser can check. ARCHITECTURE.md explains the layer rules, the single-implementation fold, the mutation pipeline's three deliberate properties, and the gotchas that each cost a real bug — reading a deferred event.target.value, an unset BUN_PUBLIC_* var reaching the browser, and overriding shadcn's --accent. CLAUDE.md gains those gotchas, the dated-rule model that replaced standingRule, the validation this project deliberately omits, and an explicit statement that visual and offline behaviour cannot be verified in the agent environment. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
6.0 KiB
Default to using Bun instead of Node.js.
- Use
bun <file>instead ofnode <file>orts-node <file> - Use
bun testinstead ofjestorvitest - Use
bun build <file.html|file.ts|file.css>instead ofwebpackoresbuild - Use
bun installinstead ofnpm installoryarn installorpnpm install - Use
bun run <script>instead ofnpm run <script>oryarn run <script>orpnpm run <script> - Use
bunx <package> <command>instead ofnpx <package> <command> - Bun automatically loads .env, so don't use dotenv.
APIs
Bun.serve()supports WebSockets, HTTPS, and routes. Don't useexpress.bun:sqlitefor SQLite. Don't usebetter-sqlite3.Bun.redisfor Redis. Don't useioredis.Bun.sqlfor Postgres. Don't usepgorpostgres.js.WebSocketis built-in. Don't usews.- Prefer
Bun.fileovernode:fs's readFile/writeFile - Bun.$
lsinstead of execa.
Testing
Use bun test to run tests.
import { test, expect } from "bun:test";
test("hello world", () => {
expect(1).toBe(1);
});
Frontend
Use HTML imports with Bun.serve(). Don't use vite. HTML imports fully support React, CSS, Tailwind.
Server:
import index from "./index.html"
Bun.serve({
routes: {
"/": index,
"/api/users/:id": {
GET: (req) => {
return new Response(JSON.stringify({ id: req.params.id }));
},
},
},
// optional websocket support
websocket: {
open: (ws) => {
ws.send("Hello, world!");
},
message: (ws, message) => {
ws.send(message);
},
close: (ws) => {
// handle close
}
},
development: {
hmr: true,
console: true,
}
})
HTML files can import .tsx, .jsx or .js files directly and Bun's bundler will transpile & bundle automatically. <link> tags can point to stylesheets and Bun's CSS bundler will bundle.
<html>
<body>
<h1>Hello, world!</h1>
<script type="module" src="./frontend.tsx"></script>
</body>
</html>
With the following frontend.tsx:
import React from "react";
import { createRoot } from "react-dom/client";
// import .css files directly and it works
import './index.css';
const root = createRoot(document.body);
export default function Frontend() {
return <h1>Hello, world!</h1>;
}
root.render(<Frontend />);
Then, run index.ts
bun --hot ./index.ts
For more information, read the Bun API docs in node_modules/bun-types/docs/**.mdx.
Project invariants (Budget 2.0)
src/domain/is pure: no React, no IndexedDB, noDate.now(), nonew Date()without an explicit argument. It must be testable with no DOM.- Money is a float. Always round with
roundMoneyfromsrc/domain/money.tsafter any division, after any FX conversion, and before persisting. - When splitting an amount, never round the last part independently. Compute it
as
total - sum(others)so the parts sum exactly to the whole. MonthIdis the string"YYYY-MM". Stored data never containsDateobjects.- The envelope rollover fold has exactly one implementation, in
src/domain/fold.ts. Year and summary views aggregate over it — they never reimplement the math. - Over-budget is always allowed. Never add validation that blocks it.
- Base path comes from
BUN_PUBLIC_BASE_PATH; never hardcode a subpath, and read it through atry/catchaccessor — see the gotcha below. - A post's allocation is a dated series,
Post.rules: RuleVersion[], resolved byruleAt(post, monthId).Post.standingRuleno longer exists. A post with no applicable version allocates zero; a per-month override still wins outright. - Posts are archived, never deleted, because purchases reference them. Archived posts still fold.
Start here
ARCHITECTURE.md— layers, data flow, and why the non-obvious choices are what they are. Read it before changing anything structural.TODO.md— queued work, each item carrying the reasoning already settled.PRODUCT.md— who this is for and what must never break.docs/superpowers/specs/— design decisions, including alternatives rejected.
Gotchas that cost real bugs
Each of these shipped once. Re-introducing one is a regression, not a style choice.
- Never read
event.target.valueinside amutate()callback.mutatedefers behind the write queue; React resets the input's DOM value first, so you commit the old value. Capture into aconstin the handler.src/ui/eventCapture.test.tsfails the build otherwise. process.env.BUN_PUBLIC_*must be read viatry/catch(seereadBasePathEnv). Bun inlines the literal only when the variable is set; unset, the bare reference reaches the browser and throws before the app boots. Atypeof processguard does not work — it survives inlining and discards the inlined value, silently breaking subpath deploys.- Never define a bare
--accentCSS variable. shadcn owns it; overriding it drops hover contrast below WCAG AA app-wide. Project tokens are--budget-*. - A React error boundary does not catch event-handler throws. Domain functions that throw must be guarded at the call site when called from one.
- Do not "fix" a domain throw by making it return a fallback. Silently wrong numbers are worse than a visible error in a budgeting app.
Deliberately absent validation
Adding a "missing" guard here is a regression:
- going over budget, anywhere;
- allocation percentages summing past 100%;
- splits that do not sum to the total (the remainder-absorbing split reconciles them by design);
- negative amounts — a refund is a normal line.
Verification limits
There is no browser in this environment. Visual appearance, offline behaviour,
install and update prompts, keyboard focus traversal, and opening the generated
.ods in a spreadsheet cannot be verified here. Do not claim you checked
them. Substitute a real check where one exists — structural validation of the
.ods, curl against the dev server, pure-function tests — and state plainly
what still needs a human.