From c93ff9908cff37f4282af2a0f6a5ea89809a7de0 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 19:01:57 +0200
Subject: [PATCH 01/27] fix(rules): review and harden rule-history editing

---
 docs/TODO.md                           |  24 +-----
 src/export/json.test.ts                |  13 ++++
 src/export/json.ts                     |  23 ++++--
 src/ui/components/RuleEditors.test.tsx | 101 +++++++++++++++++++++++++
 src/ui/components/RuleHistory.tsx      |  16 ++--
 src/ui/routes/MonthRoute.tsx           |  18 +++--
 6 files changed, 154 insertions(+), 41 deletions(-)
 create mode 100644 src/ui/components/RuleEditors.test.tsx

diff --git a/docs/TODO.md b/docs/TODO.md
index 77c81db..69afe54 100755
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -8,7 +8,7 @@ decisions behind it are in `docs/specs/` — one spec per sub-project,
 each recording the alternatives that were rejected. Rules that outlived their
 task moved to `AGENTS.md`.
 
-**Current state:** merged to `main`. 583 tests passing,
+**Current state:** merged to `main`. 661 tests passing,
 `bunx tsc --noEmit` clean, `bun run build` succeeds on both the live-fetch and
 offline paths.
 
@@ -93,27 +93,7 @@ reason.
   Fine for one "$" currency; if the owner adds two, typing the code
   disambiguates and nothing warns them. Tested, documented, not solved.
 
-## 4. Nobody has independently reviewed the rule-history editing surfaces
-
-Tasks 3-6 of the versioned-allocation-rules work — `setRuleFrom` /
-`removeRuleFrom`, the JSON import validation, the Settings rule-history editor,
-and the month view's "change from here" — were executed by hand rather than
-dispatched, and no second pair of eyes has been over the diff.
-
-Worth reading first: the four commit messages, `de128e3`, `1cb91d3`, `e3023d0`
-and `f94e458`. They record why each surface works the way it does, including
-three of the four places the original briefs were wrong — a number field that
-could not be cleared, a component that kept the previous post's rule because it
-was not keyed, and missing validation that let a NaN allocation into the fold.
-
-(The fuller task log lived in a tool-managed ledger under `.superpowers/`, which
-ignores its own contents and was never part of the repository. This file used to
-send readers there, which worked only on the machine that wrote it.)
-
-Both surfaces have since been seen working in a browser. What is missing is
-review, not verification.
-
-## 5. Still needs a human
+## 4. Still needs a human
 
 `scripts/screenshot.ts` drives headless Chrome, so this list is much shorter
 than it was. Already seen and confirmed working: the carry meter (including red
diff --git a/src/export/json.test.ts b/src/export/json.test.ts
index cd8b2ef..7a75f19 100644
--- a/src/export/json.test.ts
+++ b/src/export/json.test.ts
@@ -230,6 +230,19 @@ describe("rule versions on import", () => {
     data.posts[0].rules = [{ from: "2026-01", rule: { kind: "everySecondTuesday" } }];
     expect(() => parseDatasetJson(JSON.stringify(data))).toThrow(/everySecondTuesday/);
   });
+
+  test.each([
+    ["missing percent", { kind: "percentOfIncome" }],
+    ["string percent", { kind: "percentOfIncome", percent: "10" }],
+    ["null percent", { kind: "percentOfIncome", percent: null }],
+    ["missing fixed amount", { kind: "fixed", amount: { currency: "DKK" } }],
+    ["string fixed amount", { kind: "fixed", amount: { amount: "500", currency: "DKK" } }],
+    ["null fixed amount", { kind: "fixed", amount: { amount: null, currency: "DKK" } }],
+  ])("rejects a %s before it can corrupt the fold", (_label, rule) => {
+    const data = populated() as any;
+    data.posts[0].rules = [{ from: "2026-01", rule }];
+    expect(() => parseDatasetJson(JSON.stringify(data))).toThrow(ImportValidationError);
+  });
 });
 
 describe("the decimal-places setting on import", () => {
diff --git a/src/export/json.ts b/src/export/json.ts
index 7ae743d..4829bdc 100644
--- a/src/export/json.ts
+++ b/src/export/json.ts
@@ -301,18 +301,27 @@ export function parseDatasetJson(text: string): Dataset {
       }
       seenFrom.add(from);
 
-      // The rule's VALUE is deliberately unvalidated — a percentage above 100
-      // and a negative amount are both legal. Its SHAPE is not: an unknown
-      // kind falls through resolveRule's percentage branch and turns every
-      // figure after it into NaN, and an unsupported currency throws
-      // MissingRateError deep inside the fold rather than here.
+      // Rule values may be negative or over 100, but must be finite numbers.
+      // A missing or non-numeric value can silently turn the fold into NaN.
       const rule = (version.rule ?? {}) as {
         kind?: unknown;
-        amount?: { currency?: unknown };
+        amount?: { amount?: unknown; currency?: unknown };
+        percent?: unknown;
       };
       if (rule.kind === "fixed") {
         requireCurrency(rule.amount?.currency, `post "${post.name}" rule from ${from}`, defined);
-      } else if (rule.kind !== "percentOfIncome") {
+        if (typeof rule.amount?.amount !== "number" || !Number.isFinite(rule.amount.amount)) {
+          throw new ImportValidationError(
+            `Post "${post.name}" has a fixed rule from "${from}" with an amount that is not a finite number`,
+          );
+        }
+      } else if (rule.kind === "percentOfIncome") {
+        if (typeof rule.percent !== "number" || !Number.isFinite(rule.percent)) {
+          throw new ImportValidationError(
+            `Post "${post.name}" has a percentage rule from "${from}" that is not a finite number`,
+          );
+        }
+      } else {
         throw new ImportValidationError(
           `Post "${post.name}" has a rule from "${from}" of unknown kind "${String(rule.kind)}"`,
         );
diff --git a/src/ui/components/RuleEditors.test.tsx b/src/ui/components/RuleEditors.test.tsx
new file mode 100644
index 0000000..786b240
--- /dev/null
+++ b/src/ui/components/RuleEditors.test.tsx
@@ -0,0 +1,101 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+import { afterEach, expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { createSeedDataset } from "../../domain/seed.ts";
+import { store } from "../../store/index.ts";
+import { RuleHistory } from "./RuleHistory.tsx";
+import { RuleFromMonth } from "../routes/MonthRoute.tsx";
+
+const originalMutate = store.mutate;
+let root: Root | null = null;
+let container: HTMLDivElement | null = null;
+
+function mount(child: React.ReactNode): HTMLDivElement {
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+  act(() => root!.render(child));
+  return container;
+}
+
+afterEach(() => {
+  store.mutate = originalMutate;
+  if (root) act(() => root!.unmount());
+  root = null;
+  container?.remove();
+  container = null;
+});
+
+test("change from here preserves the currency of a prefilled fixed rule", async () => {
+  const data = createSeedDataset("2026-01");
+  const post = data.posts[0]!;
+  const initial = { kind: "fixed" as const, amount: { amount: 100, currency: "USD" } };
+  let saved = false;
+  store.mutate = async (change) => {
+    change(data);
+    saved = true;
+  };
+  const el = mount(
+    <RuleFromMonth post={post} monthId="2026-01" initial={initial} onDone={() => {}} />,
+  );
+  expect(el.querySelector('input[aria-label="Amount in USD"]')).not.toBeNull();
+
+  await act(async () => {
+    (Array.from(el.querySelectorAll("button")).find((button) => button.textContent === "Apply")!).click();
+  });
+  expect(saved).toBe(true);
+  expect(post.rules[0]!.rule).toEqual(initial);
+});
+
+test("change from here keeps the editor open and explains a failed write", async () => {
+  const data = createSeedDataset("2026-01");
+  let closed = false;
+  store.mutate = async () => {
+    throw new Error("Disk full");
+  };
+  const el = mount(
+    <RuleFromMonth
+      post={data.posts[0]!}
+      monthId="2026-01"
+      initial={{ kind: "percentOfIncome", percent: 10 }}
+      onDone={() => { closed = true; }}
+    />,
+  );
+
+  await act(async () => {
+    (Array.from(el.querySelectorAll("button")).find((button) => button.textContent === "Apply")!).click();
+  });
+  expect(closed).toBe(false);
+  expect(el.querySelector('[role="alert"]')?.textContent).toContain("Disk full");
+});
+
+test("rule history explains a failed write", async () => {
+  const data = createSeedDataset("2026-01");
+  const post = data.posts[0]!;
+  post.rules = [{ from: "2026-01", rule: { kind: "percentOfIncome", percent: 10 } }];
+  store.mutate = async () => {
+    throw new Error("Disk full");
+  };
+  const el = mount(<RuleHistory post={post} />);
+
+  await act(async () => {
+    (Array.from(el.querySelectorAll("button")).find((button) => button.textContent === "remove")!).click();
+  });
+  expect(el.querySelector('[role="alert"]')?.textContent).toContain("Disk full");
+});
+
+test("rule history shows imported versions in chronological order", () => {
+  const data = createSeedDataset("2026-01");
+  const post = data.posts[0]!;
+  post.rules = [
+    { from: "2026-07", rule: { kind: "percentOfIncome", percent: 15 } },
+    { from: "2026-01", rule: { kind: "percentOfIncome", percent: 10 } },
+  ];
+  const el = mount(<RuleHistory post={post} />);
+  const months = Array.from(el.querySelectorAll("tbody tr td:first-child"), (cell) => cell.textContent);
+  expect(months).toEqual(["2026-01", "2026-07"]);
+});
diff --git a/src/ui/components/RuleHistory.tsx b/src/ui/components/RuleHistory.tsx
index 285e002..9d5feaf 100755
--- a/src/ui/components/RuleHistory.tsx
+++ b/src/ui/components/RuleHistory.tsx
@@ -27,12 +27,13 @@ const MONTH_ID = /^\d{4}-(0[1-9]|1[0-2])$/;
  * so rather than letting it look like an append.
  */
 export function RuleHistory({ post }: Props) {
-  const { mutate } = useMutate();
+  const { mutate, error, clearError } = useMutate();
   const [from, setFrom] = useState<string>(currentMonth);
   const [kind, setKind] = useState<Rule["kind"]>("percentOfIncome");
   // Held as text, not a number, so the field can be cleared and can hold a
   // half-typed "12." mid-entry. Parsed once, on submit.
   const [value, setValue] = useState<string>("");
+  const versions = [...post.rules].sort((a, b) => a.from.localeCompare(b.from));
 
   const replaces = post.rules.some((v) => v.from === from);
   const monthOk = MONTH_ID.test(from);
@@ -44,7 +45,8 @@ export function RuleHistory({ post }: Props) {
       kind === "fixed"
         ? { kind: "fixed", amount: { amount, currency: post.currency } }
         : { kind: "percentOfIncome", percent: amount };
-    mutate((draft) => setRuleFrom(draft, post.id, from, rule));
+    clearError();
+    void mutate((draft) => setRuleFrom(draft, post.id, from, rule));
   }
 
   return (
@@ -64,7 +66,7 @@ export function RuleHistory({ post }: Props) {
             </tr>
           </thead>
           <tbody>
-            {post.rules.map((version) => (
+            {versions.map((version) => (
               <tr key={version.from} className="border-t">
                 <td className="py-1 font-money">{version.from}</td>
                 <td className="py-1">
@@ -76,9 +78,10 @@ export function RuleHistory({ post }: Props) {
                   <Button
                     size="sm"
                     variant="ghost"
-                    onClick={() =>
-                      mutate((draft) => removeRuleFrom(draft, post.id, version.from))
-                    }
+                    onClick={() => {
+                      clearError();
+                      void mutate((draft) => removeRuleFrom(draft, post.id, version.from));
+                    }}
                   >
                     remove
                   </Button>
@@ -137,6 +140,7 @@ export function RuleHistory({ post }: Props) {
           </span>
         )}
       </div>
+      {error && <p role="alert" className="text-sm text-destructive">Could not save: {error}</p>}
     </div>
   );
 }
diff --git a/src/ui/routes/MonthRoute.tsx b/src/ui/routes/MonthRoute.tsx
index d62d41b..16a7e4d 100644
--- a/src/ui/routes/MonthRoute.tsx
+++ b/src/ui/routes/MonthRoute.tsx
@@ -300,7 +300,7 @@ function MonthStep({ to, label, back = false }: { to: string; label: string; bac
  * same `setRuleFrom` action the Settings history editor uses, so the two
  * surfaces cannot drift apart.
  */
-function RuleFromMonth({
+export function RuleFromMonth({
   post,
   monthId,
   initial,
@@ -311,7 +311,7 @@ function RuleFromMonth({
   initial: Rule | undefined;
   onDone: () => void;
 }) {
-  const { mutate } = useMutate();
+  const { mutate, error, clearError } = useMutate();
   // Pre-filled with what is currently in effect, so nudging 10% to 15% is an
   // edit rather than re-entry. Empty when the post has no rule yet. Held as
   // text so the field can be cleared mid-edit; parsed once, on apply.
@@ -321,6 +321,9 @@ function RuleFromMonth({
       ? ""
       : String(initial.kind === "fixed" ? initial.amount.amount : initial.percent),
   );
+  const [currency] = useState(() =>
+    initial?.kind === "fixed" ? initial.amount.currency : post.currency,
+  );
 
   const amount = Number(value);
   const valueOk = value.trim() !== "" && Number.isFinite(amount);
@@ -328,10 +331,12 @@ function RuleFromMonth({
   function apply() {
     const rule: Rule =
       kind === "fixed"
-        ? { kind: "fixed", amount: { amount, currency: post.currency } }
+        ? { kind: "fixed", amount: { amount, currency } }
         : { kind: "percentOfIncome", percent: amount };
-    mutate((draft) => setRuleFrom(draft, post.id, monthId, rule));
-    onDone();
+    clearError();
+    void mutate((draft) => setRuleFrom(draft, post.id, monthId, rule)).then((saved) => {
+      if (saved) onDone();
+    });
   }
 
   return (
@@ -355,7 +360,7 @@ function RuleFromMonth({
         className="font-money h-8 w-24"
         type="number"
         step="0.01"
-        aria-label={kind === "fixed" ? `Amount in ${post.currency}` : "Percent of income"}
+        aria-label={kind === "fixed" ? `Amount in ${currency}` : "Percent of income"}
         value={value}
         onChange={(event) => {
           const next = event.target.value;
@@ -368,6 +373,7 @@ function RuleFromMonth({
       <Button size="sm" variant="ghost" onClick={onDone}>
         Cancel
       </Button>
+      {error && <p role="alert" className="w-full text-sm text-destructive">Could not save: {error}</p>}
     </div>
   );
 }

From aed2313167598068755d20e5172c8399bb1532f4 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 19:41:58 +0200
Subject: [PATCH 02/27] fix(ui): harden summary and settings workflows

---
 src/domain/views.test.ts                     |  9 +++
 src/domain/views.ts                          | 21 ++++---
 src/ui/components/ExpectedBand.tsx           |  8 ++-
 src/ui/hooks/useMutate.ts                    |  5 +-
 src/ui/routes/SummaryRoute.test.ts           | 10 +++
 src/ui/routes/SummaryRoute.tsx               | 40 ++++++++----
 src/ui/routes/settings/CurrencySection.tsx   | 14 ++++-
 src/ui/routes/settings/PostsSection.test.tsx | 65 ++++++++++++++++++++
 src/ui/routes/settings/PostsSection.tsx      | 13 ++--
 src/ui/routes/settings/RecurringSection.tsx  | 10 +--
 10 files changed, 159 insertions(+), 36 deletions(-)
 create mode 100644 src/ui/routes/SummaryRoute.test.ts
 create mode 100644 src/ui/routes/settings/PostsSection.test.tsx

diff --git a/src/domain/views.test.ts b/src/domain/views.test.ts
index b6ac8da..f5e855e 100644
--- a/src/domain/views.test.ts
+++ b/src/domain/views.test.ts
@@ -181,6 +181,15 @@ describe("yearView", () => {
 });
 
 describe("summaryView", () => {
+  test("difference follows the dataset's decimal setting", () => {
+    const precise: Dataset = {
+      ...data,
+      settings: { ...data.settings, digits: 3 },
+      months: [{ id: "2026-01", income: { amount: 1.234, currency: "DKK" }, ruleOverrides: {} }],
+      purchases: [spend("small", "food", 0.111, "2026-01-10")],
+    };
+    expect(summaryView(precise, "2026-01", "2026-01").difference).toBe(1.123);
+  });
   test("totals charges by post and by month across a range", () => {
     const view = summaryView(data, "2026-01", "2026-02");
     expect(view.totalCharges).toBe(800);
diff --git a/src/domain/views.ts b/src/domain/views.ts
index d5f3c21..01145d8 100644
--- a/src/domain/views.ts
+++ b/src/domain/views.ts
@@ -149,6 +149,7 @@ export interface SummaryViewModel {
   byMonth: { monthId: MonthId; charges: number }[];
   totalCharges: number;
   totalIncome: number;
+  difference: number;
 }
 
 export function summaryView(
@@ -181,19 +182,23 @@ export function summaryView(
     ),
   }));
 
+  const totalCharges = roundMoney(
+    byMonth.reduce((sum, m) => sum + m.charges, 0),
+    baseDigits,
+  );
+  const totalIncome = roundMoney(
+    months.reduce((sum, m) => sum + incomeFor(dataset, m), 0),
+    baseDigits,
+  );
+
   return {
     from,
     to,
     byPost,
     byMonth,
-    totalCharges: roundMoney(
-      byMonth.reduce((sum, m) => sum + m.charges, 0),
-      baseDigits,
-    ),
-    totalIncome: roundMoney(
-      months.reduce((sum, m) => sum + incomeFor(dataset, m), 0),
-      baseDigits,
-    ),
+    totalCharges,
+    totalIncome,
+    difference: roundMoney(totalIncome - totalCharges, baseDigits),
   };
 }
 
diff --git a/src/ui/components/ExpectedBand.tsx b/src/ui/components/ExpectedBand.tsx
index ee7ba8f..47824cb 100644
--- a/src/ui/components/ExpectedBand.tsx
+++ b/src/ui/components/ExpectedBand.tsx
@@ -174,7 +174,7 @@ export function expectedGroups(
  */
 export function ExpectedBand({ monthId }: { monthId: MonthId }) {
   const dataset = useDataset();
-  const { mutate } = useMutate();
+  const { mutate, error } = useMutate();
   const [amounts, setAmounts] = useState<Record<string, string>>({});
 
   const { pending, overdue, comingUp } = useMemo(
@@ -239,7 +239,7 @@ export function ExpectedBand({ monthId }: { monthId: MonthId }) {
             size="sm"
             variant="outline"
             disabled={invalid}
-            onClick={() => {
+            onClick={async () => {
               // Captured before mutate, per AGENTS.md: mutate defers behind
               // the write queue and React resets the input first, so reading
               // in the callback commits stale text. `invalid` already guards
@@ -247,12 +247,13 @@ export function ExpectedBand({ monthId }: { monthId: MonthId }) {
               // `parsed` is either a real amount or the field was never
               // touched.
               if (invalid) return;
-              mutate((draft) =>
+              const saved = await mutate((draft) =>
                 confirmOccurrence(draft, occurrence.recurringId, occurrence.date, {
                   date: recordedDate ?? undefined,
                   amount: parsed ?? undefined,
                 }),
               );
+              if (!saved) return;
               setAmounts((current) => {
                 const next = { ...current };
                 delete next[key];
@@ -272,6 +273,7 @@ export function ExpectedBand({ monthId }: { monthId: MonthId }) {
       title="Expected"
       hint="Committed but not yet spent. These do not touch a post's balance until you confirm one, which records it as an ordinary purchase you can edit or delete afterwards."
     >
+      {error && <p role="alert" className="mb-3 text-sm text-destructive">Could not confirm: {error}</p>}
       {pending.length > 0 && (
         <ul className="divide-y divide-budget-rule">
           {pending.map((occurrence) => row(occurrence, recordedDateFor("pending", today)))}
diff --git a/src/ui/hooks/useMutate.ts b/src/ui/hooks/useMutate.ts
index c076f04..0e0a90b 100644
--- a/src/ui/hooks/useMutate.ts
+++ b/src/ui/hooks/useMutate.ts
@@ -18,7 +18,10 @@ export function useMutate() {
 
   const mutate = useCallback((fn: (draft: Dataset) => void): Promise<boolean> => {
     return store.mutate(fn).then(
-      () => true,
+      () => {
+        setError(null);
+        return true;
+      },
       (cause: unknown) => {
         setError(cause instanceof Error ? cause.message : String(cause));
         return false;
diff --git a/src/ui/routes/SummaryRoute.test.ts b/src/ui/routes/SummaryRoute.test.ts
new file mode 100644
index 0000000..0fe0368
--- /dev/null
+++ b/src/ui/routes/SummaryRoute.test.ts
@@ -0,0 +1,10 @@
+import { expect, test } from "bun:test";
+import { isMonthId } from "./SummaryRoute.tsx";
+
+test("Summary range accepts real months and rejects partial or impossible input", () => {
+  expect(isMonthId("2026-09")).toBe(true);
+  expect(isMonthId("")).toBe(false);
+  expect(isMonthId("2026-0")).toBe(false);
+  expect(isMonthId("2026-13")).toBe(false);
+  expect(isMonthId("2026-09-01")).toBe(false);
+});
diff --git a/src/ui/routes/SummaryRoute.tsx b/src/ui/routes/SummaryRoute.tsx
index bec49e6..3e819ac 100644
--- a/src/ui/routes/SummaryRoute.tsx
+++ b/src/ui/routes/SummaryRoute.tsx
@@ -5,10 +5,19 @@ import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { useDataset } from "../hooks/useDataset.ts";
 import { datasetMonthSpan, summaryView } from "../../domain/views.ts";
+import { monthOf } from "../../domain/months.ts";
 import { useMoneyFormat } from "../hooks/useMoneyFormat.ts";
 import { Section, Stat } from "../components/Section.tsx";
 import { Segmented } from "../components/Segmented.tsx";
 
+export function isMonthId(value: string): boolean {
+  try {
+    return monthOf(value) === value;
+  } catch {
+    return false;
+  }
+}
+
 export function SummaryRoute() {
   const fmt = useMoneyFormat();
   const dataset = useDataset();
@@ -17,9 +26,10 @@ export function SummaryRoute() {
   const [to, setTo] = useState(span.to);
   const [groupBy, setGroupBy] = useState<"post" | "month">("post");
 
-  const view = summaryView(dataset, from, to);
+  const validFrom = isMonthId(from);
+  const validTo = isMonthId(to);
+  const view = validFrom && validTo ? summaryView(dataset, from, to) : null;
   const base = dataset.settings.baseCurrency;
-  const difference = Number((view.totalIncome - view.totalCharges).toFixed(2));
 
   return (
     <div className="space-y-5">
@@ -29,11 +39,11 @@ export function SummaryRoute() {
         <div className="flex flex-wrap items-end gap-4">
           <div className="space-y-1">
             <Label htmlFor="from">From</Label>
-            <Input id="from" className="w-32" value={from} onChange={(e) => setFrom(e.target.value)} />
+            <Input id="from" className="w-32" value={from} aria-invalid={!validFrom} onChange={(e) => setFrom(e.target.value)} />
           </div>
           <div className="space-y-1">
             <Label htmlFor="to">To</Label>
-            <Input id="to" className="w-32" value={to} onChange={(e) => setTo(e.target.value)} />
+            <Input id="to" className="w-32" value={to} aria-invalid={!validTo} onChange={(e) => setTo(e.target.value)} />
           </div>
           <Button
             variant="outline"
@@ -46,16 +56,20 @@ export function SummaryRoute() {
           </Button>
         </div>
 
-        <dl className="mt-5 flex flex-wrap gap-x-10 gap-y-4 border-t border-budget-rule pt-5">
-        <Stat label="Income">{fmt.money(view.totalIncome, base)}</Stat>
-        <Stat label="Spent">{fmt.money(view.totalCharges, base)}</Stat>
-          <Stat label="Difference" tone={difference < 0 ? "overspend" : "default"}>
-            {fmt.money(difference, base)}
-          </Stat>
-        </dl>
+        {view ? (
+          <dl className="mt-5 flex flex-wrap gap-x-10 gap-y-4 border-t border-budget-rule pt-5">
+            <Stat label="Income">{fmt.money(view.totalIncome, base)}</Stat>
+            <Stat label="Spent">{fmt.money(view.totalCharges, base)}</Stat>
+            <Stat label="Difference" tone={view.difference < 0 ? "overspend" : "default"}>
+              {fmt.money(view.difference, base)}
+            </Stat>
+          </dl>
+        ) : (
+          <p role="alert" className="mt-4 text-sm text-destructive">Enter a month as YYYY-MM in each field.</p>
+        )}
       </Section>
 
-      <Section
+      {view && <Section
         title={groupBy === "post" ? "By post" : "By month"}
         action={
           <Segmented
@@ -107,7 +121,7 @@ export function SummaryRoute() {
                 ))}
           </tbody>
         </table>
-      </Section>
+      </Section>}
     </div>
   );
 }
diff --git a/src/ui/routes/settings/CurrencySection.tsx b/src/ui/routes/settings/CurrencySection.tsx
index 3a6ca09..5ac13ab 100644
--- a/src/ui/routes/settings/CurrencySection.tsx
+++ b/src/ui/routes/settings/CurrencySection.tsx
@@ -21,7 +21,7 @@ import type { Currency } from "../../../domain/types.ts";
 
 export function CurrencySection() {
   const dataset = useDataset();
-  const { mutate } = useMutate();
+  const { mutate, error: writeError } = useMutate();
   const base = dataset.settings.baseCurrency;
   const apiUrl = dataset.settings.fxApiUrl ?? DEFAULT_FX_API_URL;
   const [status, setStatus] = useState<string | null>(null);
@@ -32,9 +32,13 @@ export function CurrencySection() {
     setStatus("Fetching…");
     try {
       const rates = await fetchFxRates(apiUrl, base, targets);
-      mutate((draft) => {
+      const saved = await mutate((draft) => {
         for (const rate of rates) setFxRate(draft, rate);
       });
+      if (!saved) {
+        setStatus(null);
+        return;
+      }
       const missing = targets.filter((t) => !rates.some((r) => r.currency === t));
       setStatus(
         `Updated ${rates.length} rate(s).` +
@@ -67,7 +71,11 @@ export function CurrencySection() {
       title="Currencies"
       hint="Add any currency you spend in. The code is how it is identified, so it cannot be changed later — and everything is converted to the base currency for totals."
     >
-      {error && <p className="mb-3 text-sm text-destructive">{error}</p>}
+      {(error || writeError) && (
+        <p role="alert" className="mb-3 text-sm text-destructive">
+          {error ?? `Could not save: ${writeError}`}
+        </p>
+      )}
 
       <div className="mb-5 flex flex-wrap items-end gap-x-8 gap-y-4">
         <div className="space-y-1.5">
diff --git a/src/ui/routes/settings/PostsSection.test.tsx b/src/ui/routes/settings/PostsSection.test.tsx
new file mode 100644
index 0000000..c1c01ac
--- /dev/null
+++ b/src/ui/routes/settings/PostsSection.test.tsx
@@ -0,0 +1,65 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+import { afterEach, expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { createSeedDataset } from "../../../domain/seed.ts";
+import { store } from "../../../store/index.ts";
+import { PostsSection } from "./PostsSection.tsx";
+
+const originalGet = store.get;
+const originalMutate = store.mutate;
+let root: Root | null = null;
+let container: HTMLDivElement | null = null;
+
+afterEach(() => {
+  store.get = originalGet;
+  store.mutate = originalMutate;
+  if (root) act(() => root!.unmount());
+  root = null;
+  container?.remove();
+  container = null;
+});
+
+test("a failed post archive explains why the post stayed active", async () => {
+  const dataset = createSeedDataset("2026-01");
+  store.get = () => dataset;
+  store.mutate = async () => { throw new Error("Disk full"); };
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+  act(() => root!.render(<PostsSection />));
+
+  await act(async () => {
+    Array.from(container!.querySelectorAll("button"))
+      .find((button) => button.textContent === "archive")!.click();
+  });
+
+  expect(container.querySelector('[role="alert"]')?.textContent).toContain("Disk full");
+  expect(dataset.posts[0]!.archived).toBe(false);
+});
+
+test("a successful retry clears the previous save error", async () => {
+  const dataset = createSeedDataset("2026-01");
+  store.get = () => dataset;
+  let fail = true;
+  store.mutate = async (change) => {
+    if (fail) throw new Error("Disk full");
+    change(dataset);
+  };
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+  act(() => root!.render(<PostsSection />));
+  const archive = Array.from(container.querySelectorAll("button"))
+    .find((button) => button.textContent === "archive")!;
+
+  await act(async () => { archive.click(); });
+  expect(container.querySelector('[role="alert"]')).not.toBeNull();
+  fail = false;
+  await act(async () => { archive.click(); });
+
+  expect(container.querySelector('[role="alert"]')).toBeNull();
+});
diff --git a/src/ui/routes/settings/PostsSection.tsx b/src/ui/routes/settings/PostsSection.tsx
index 9d06856..4b94af3 100644
--- a/src/ui/routes/settings/PostsSection.tsx
+++ b/src/ui/routes/settings/PostsSection.tsx
@@ -13,7 +13,7 @@ import { Section } from "../../components/Section.tsx";
 
 export function PostsSection() {
   const dataset = useDataset();
-  const { mutate } = useMutate();
+  const { mutate, error } = useMutate();
   const [newName, setNewName] = useState("");
   const [openHistory, setOpenHistory] = useState<string | null>(null);
   const ordered = [...dataset.posts].sort((a, b) => a.order - b.order);
@@ -40,7 +40,9 @@ export function PostsSection() {
       title="Posts"
       hint="A post's allocation is a dated series: each rule applies from its own month onward until the next one takes over, so changing it never rewrites what earlier months got. Click a rule to see and edit that history. A single month can still override its own allocation from the month view, and percentages may total more than 100%."
     >
-      <table className="w-full text-sm">
+      {error && <p role="alert" className="mb-3 text-sm text-destructive">Could not save: {error}</p>}
+      <div className="overflow-x-auto">
+      <table className="w-full min-w-[36rem] text-sm">
         <thead className="text-left">
           <tr className="border-b border-budget-rule text-[0.6875rem] uppercase tracking-wider text-budget-ink-muted">
             <th className="py-2 font-medium">Name</th>
@@ -130,6 +132,7 @@ export function PostsSection() {
           ))}
         </tbody>
       </table>
+      </div>
       <p className="mt-3 max-w-[70ch] text-xs leading-relaxed text-budget-ink-muted">
         Archiving hides a post from new purchases while keeping its history. Posts
         are never deleted, because purchases reference them.
@@ -146,8 +149,10 @@ export function PostsSection() {
           variant="outline"
           disabled={newName.trim() === ""}
           onClick={() => {
-            mutate((draft) => addPost(draft, newName.trim(), base));
-            setNewName("");
+            const name = newName.trim();
+            void mutate((draft) => addPost(draft, name, base)).then((saved) => {
+              if (saved) setNewName("");
+            });
           }}
         >
           Add post
diff --git a/src/ui/routes/settings/RecurringSection.tsx b/src/ui/routes/settings/RecurringSection.tsx
index 1b2fb0d..13dbe6a 100644
--- a/src/ui/routes/settings/RecurringSection.tsx
+++ b/src/ui/routes/settings/RecurringSection.tsx
@@ -95,7 +95,7 @@ export function normalizedStartDateFor(kind: Recurrence["kind"], startDate: IsoD
 
 export function RecurringSection() {
   const dataset = useDataset();
-  const { mutate } = useMutate();
+  const { mutate, error } = useMutate();
   const [newName, setNewName] = useState("");
   const ordered = [...dataset.recurring].sort((a, b) => a.order - b.order);
   const base = dataset.settings.baseCurrency;
@@ -202,6 +202,7 @@ export function RecurringSection() {
       title="Recurring costs"
       hint="Bills that repeat. Each one projects forward as EXPECTED spending and is confirmed from the month view when the money actually moves — expected never touches a post's real balance. Anchoring decides where the next charge is measured from: the calendar, or the date the last one actually charged. Use the second for a bill that can charge early, like a phone plan that recharges when its data runs out."
     >
+      {error && <p role="alert" className="mb-3 text-sm text-destructive">Could not save: {error}</p>}
       {ordered.length === 0 ? (
         <p className="text-sm text-budget-ink-muted">
           No recurring costs yet. Add rent, a subscription, or a phone bill below.
@@ -369,7 +370,7 @@ export function RecurringSection() {
           disabled={newName.trim() === "" || !firstPost}
           onClick={() => {
             const name = newName.trim();
-            mutate((draft) =>
+            void mutate((draft) =>
               addRecurringCost(draft, {
                 name,
                 archived: false,
@@ -380,8 +381,9 @@ export function RecurringSection() {
                 splitMode: "percent",
                 splits: [{ postId: firstPost!.id, value: 100, absorbsRemainder: true }],
               }),
-            );
-            setNewName("");
+            ).then((saved) => {
+              if (saved) setNewName("");
+            });
           }}
         >
           Add recurring cost

From ef5dfc1e6bc1322bb87b1b2c7ea8952ef261d875 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 19:52:39 +0200
Subject: [PATCH 03/27] ci: publish Docker image to Gitea registry

---
 .github/workflows/ci.yml | 67 +++++++++++++++++++++++++++++++++-------
 README.md                | 20 ++++++++++++
 2 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9261a06..3afc472 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,31 +1,77 @@
-name: CI
+name: Continuous Integration
 
 on:
   push:
     branches: [main]
+    tags: ['v*']
   pull_request:
+    branches: [main]
+
+env:
+  REGISTRY: gitea.lucaswinther.info
 
 jobs:
-  test:
+  lint-and-test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest
-      - run: bun install --frozen-lockfile
-      - run: bun test
-      - run: bunx tsc --noEmit
-      - run: bun run build
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+      - name: Typecheck
+        run: bunx tsc --noEmit
+      - name: Run test suite
+        run: bun test
+      - name: Build app
+        run: bun run build
 
-  docker:
+  docker-build-and-push:
     runs-on: ubuntu-latest
+    needs: [lint-and-test]
     steps:
       - uses: actions/checkout@v4
-      - run: docker build -t budget2 .
-      - name: Serve the image and check it responds
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # Gitea's job token cannot publish packages; use a package-write PAT.
+      - name: Log in to Gitea Container Registry
+        if: gitea.event_name != 'pull_request'
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ gitea.repository }}
+          tags: |
+            type=raw,value=latest,enable={{is_default_branch}}
+            type=ref,event=branch
+            type=semver,pattern={{version}}
+            type=sha,prefix=sha-
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: ${{ gitea.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: Pull and smoke-test published image
+        if: gitea.event_name != 'pull_request'
+        env:
+          PUBLISHED_TAGS: ${{ steps.meta.outputs.tags }}
         run: |
-          docker run -d --rm -p 3000:3000 --name budget2 budget2
+          image="$(printf '%s\n' "$PUBLISHED_TAGS" | head -n 1)"
+          docker pull "$image"
+          docker run -d --rm -p 3000:3000 --name budget2-ci "$image"
+          trap 'docker stop budget2-ci' EXIT
           for i in $(seq 1 30); do
             if curl -fsS http://localhost:3000/ > /dev/null; then break; fi
             sleep 1
@@ -33,4 +79,3 @@ jobs:
           curl -fsS http://localhost:3000/ | grep -q "Budget"
           curl -fsS http://localhost:3000/sw.js > /dev/null
           curl -fsS http://localhost:3000/manifest.webmanifest > /dev/null
-          docker stop budget2
diff --git a/README.md b/README.md
index 380805c..56252dd 100755
--- a/README.md
+++ b/README.md
@@ -15,6 +15,26 @@ bun run build             # production build into dist/
 
 ## Self-hosting with Docker
 
+Gitea Actions builds the image on pull requests and publishes it to the Gitea
+container registry after the checks pass on `main` and `v*` tags. Published
+images are available as `gitea.lucaswinther.info/lucasw89/budget2.0:latest`,
+`:main`, `:sha-<commit>`, and `:<version>` for version tags.
+
+Add a repository Actions secret named `REGISTRY_TOKEN` containing a personal
+access token with package write permission. The token must belong to the user
+who pushes the commit or tag, since the workflow logs in as the triggering
+actor. The Gitea runner must have access to a Docker daemon.
+
+```bash
+docker pull gitea.lucaswinther.info/lucasw89/budget2.0:latest
+docker run --rm -p 3000:3000 gitea.lucaswinther.info/lucasw89/budget2.0:latest
+```
+
+For a private package, run `docker login gitea.lucaswinther.info` first with a
+Gitea account or token that has package read permission.
+
+To build locally instead:
+
 ```bash
 docker build -t budget2 .
 docker run --rm -p 3000:3000 budget2

From eea868c42207ecb79d916c0bad79e307f12d1622 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 19:56:29 +0200
Subject: [PATCH 04/27] ci: separate Gitea publishing from GitHub workflows

---
 .gitea/workflows/ci.yml  | 81 ++++++++++++++++++++++++++++++++++++++++
 .github/workflows/ci.yml | 67 ++++++---------------------------
 2 files changed, 92 insertions(+), 56 deletions(-)
 create mode 100644 .gitea/workflows/ci.yml

diff --git a/.gitea/workflows/ci.yml b/.gitea/workflows/ci.yml
new file mode 100644
index 0000000..3afc472
--- /dev/null
+++ b/.gitea/workflows/ci.yml
@@ -0,0 +1,81 @@
+name: Continuous Integration
+
+on:
+  push:
+    branches: [main]
+    tags: ['v*']
+  pull_request:
+    branches: [main]
+
+env:
+  REGISTRY: gitea.lucaswinther.info
+
+jobs:
+  lint-and-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+      - name: Typecheck
+        run: bunx tsc --noEmit
+      - name: Run test suite
+        run: bun test
+      - name: Build app
+        run: bun run build
+
+  docker-build-and-push:
+    runs-on: ubuntu-latest
+    needs: [lint-and-test]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # Gitea's job token cannot publish packages; use a package-write PAT.
+      - name: Log in to Gitea Container Registry
+        if: gitea.event_name != 'pull_request'
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ gitea.repository }}
+          tags: |
+            type=raw,value=latest,enable={{is_default_branch}}
+            type=ref,event=branch
+            type=semver,pattern={{version}}
+            type=sha,prefix=sha-
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: ${{ gitea.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: Pull and smoke-test published image
+        if: gitea.event_name != 'pull_request'
+        env:
+          PUBLISHED_TAGS: ${{ steps.meta.outputs.tags }}
+        run: |
+          image="$(printf '%s\n' "$PUBLISHED_TAGS" | head -n 1)"
+          docker pull "$image"
+          docker run -d --rm -p 3000:3000 --name budget2-ci "$image"
+          trap 'docker stop budget2-ci' EXIT
+          for i in $(seq 1 30); do
+            if curl -fsS http://localhost:3000/ > /dev/null; then break; fi
+            sleep 1
+          done
+          curl -fsS http://localhost:3000/ | grep -q "Budget"
+          curl -fsS http://localhost:3000/sw.js > /dev/null
+          curl -fsS http://localhost:3000/manifest.webmanifest > /dev/null
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 3afc472..9261a06 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,77 +1,31 @@
-name: Continuous Integration
+name: CI
 
 on:
   push:
     branches: [main]
-    tags: ['v*']
   pull_request:
-    branches: [main]
-
-env:
-  REGISTRY: gitea.lucaswinther.info
 
 jobs:
-  lint-and-test:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest
-      - name: Install dependencies
-        run: bun install --frozen-lockfile
-      - name: Typecheck
-        run: bunx tsc --noEmit
-      - name: Run test suite
-        run: bun test
-      - name: Build app
-        run: bun run build
+      - run: bun install --frozen-lockfile
+      - run: bun test
+      - run: bunx tsc --noEmit
+      - run: bun run build
 
-  docker-build-and-push:
+  docker:
     runs-on: ubuntu-latest
-    needs: [lint-and-test]
     steps:
       - uses: actions/checkout@v4
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      # Gitea's job token cannot publish packages; use a package-write PAT.
-      - name: Log in to Gitea Container Registry
-        if: gitea.event_name != 'pull_request'
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ gitea.actor }}
-          password: ${{ secrets.REGISTRY_TOKEN }}
-
-      - name: Extract Docker metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.REGISTRY }}/${{ gitea.repository }}
-          tags: |
-            type=raw,value=latest,enable={{is_default_branch}}
-            type=ref,event=branch
-            type=semver,pattern={{version}}
-            type=sha,prefix=sha-
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: ${{ gitea.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-
-      - name: Pull and smoke-test published image
-        if: gitea.event_name != 'pull_request'
-        env:
-          PUBLISHED_TAGS: ${{ steps.meta.outputs.tags }}
+      - run: docker build -t budget2 .
+      - name: Serve the image and check it responds
         run: |
-          image="$(printf '%s\n' "$PUBLISHED_TAGS" | head -n 1)"
-          docker pull "$image"
-          docker run -d --rm -p 3000:3000 --name budget2-ci "$image"
-          trap 'docker stop budget2-ci' EXIT
+          docker run -d --rm -p 3000:3000 --name budget2 budget2
           for i in $(seq 1 30); do
             if curl -fsS http://localhost:3000/ > /dev/null; then break; fi
             sleep 1
@@ -79,3 +33,4 @@ jobs:
           curl -fsS http://localhost:3000/ | grep -q "Budget"
           curl -fsS http://localhost:3000/sw.js > /dev/null
           curl -fsS http://localhost:3000/manifest.webmanifest > /dev/null
+          docker stop budget2

From 490598629203362fe244b5131abeaf46d0a0133a Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 19:59:20 +0200
Subject: [PATCH 05/27] ci: smoke-test image without binding a host port

---
 .gitea/workflows/ci.yml | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/.gitea/workflows/ci.yml b/.gitea/workflows/ci.yml
index 3afc472..73b22a6 100644
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@@ -70,12 +70,24 @@ jobs:
         run: |
           image="$(printf '%s\n' "$PUBLISHED_TAGS" | head -n 1)"
           docker pull "$image"
-          docker run -d --rm -p 3000:3000 --name budget2-ci "$image"
+          docker run -d --rm --name budget2-ci "$image"
           trap 'docker stop budget2-ci' EXIT
-          for i in $(seq 1 30); do
-            if curl -fsS http://localhost:3000/ > /dev/null; then break; fi
-            sleep 1
-          done
-          curl -fsS http://localhost:3000/ | grep -q "Budget"
-          curl -fsS http://localhost:3000/sw.js > /dev/null
-          curl -fsS http://localhost:3000/manifest.webmanifest > /dev/null
+          docker exec budget2-ci bun -e '
+            const base = "http://127.0.0.1:3000";
+            let ready = false;
+            for (let attempt = 0; attempt < 30; attempt++) {
+              try {
+                const response = await fetch(base + "/");
+                if (response.ok && (await response.text()).includes("Budget")) {
+                  ready = true;
+                  break;
+                }
+              } catch {}
+              await Bun.sleep(1000);
+            }
+            if (!ready) throw new Error("App did not serve its HTML");
+            for (const path of ["/sw.js", "/manifest.webmanifest"]) {
+              const response = await fetch(base + path);
+              if (!response.ok) throw new Error(`${path} returned ${response.status}`);
+            }
+          '

From f1e42d9d77b14693d85d4cfe63e1fd86e2e1e0b3 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 20:13:45 +0200
Subject: [PATCH 06/27] docs: design budget folders and recurring cost
 placement

---
 ...ers-and-recurring-cost-placement-design.md | 123 ++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 docs/specs/2026-09-29-budget-folders-and-recurring-cost-placement-design.md

diff --git a/docs/specs/2026-09-29-budget-folders-and-recurring-cost-placement-design.md b/docs/specs/2026-09-29-budget-folders-and-recurring-cost-placement-design.md
new file mode 100644
index 0000000..e772147
--- /dev/null
+++ b/docs/specs/2026-09-29-budget-folders-and-recurring-cost-placement-design.md
@@ -0,0 +1,123 @@
+# Budget folders and recurring cost placement
+
+## Intent
+
+The owner wants to organize a budget in folders and subfolders without making
+every recurring bill an envelope. Rent may have its own post, while phone and
+internet may share one post; the recurring rules remain individually editable.
+The month page should show everyday posts such as Video Games, Events, and
+Social cleanly alongside larger commitments. A bill's place in the folder tree
+is independent of the post or posts its money uses.
+
+Success means the owner can choose or create a destination post when adding a
+bill, change that destination later, organize posts and bills together in nested
+folders, and read the scheduled bill total of a folder for a selected month.
+The post fold, two-stage bill confirmation, and purchase ledger remain the
+sources of financial truth.
+
+## Model
+
+Add `Dataset.folders: BudgetFolder[]`, with each folder carrying `id`, `name`,
+`parentId: FolderId | null`, and `order`. Add
+`folderId: FolderId | null` to both `Post` and `RecurringCost`. `null` means
+Unfiled, a visible virtual root group rather than a stored folder. Existing
+records migrate with `folderId: null`; the v7 -> v8 migration adds an empty
+folder array and assigns one deterministic sibling order to the existing posts
+and bills. A new dataset starts with an empty folder array too.
+
+Folders may nest to any depth. Sibling folders, posts, and bills share a
+display order within their parent. The mutation layer assigns that order when
+adding or moving an item and prevents a folder from becoming its own ancestor.
+An item has one folder location; a recurring bill can still have splits into
+several posts, including posts in other folders. Moving an item changes its
+current organization across views, including past months, but never changes a
+stored purchase, allocation rule, or computed post figure.
+
+A folder is never an envelope: it has no currency, allocation rule, rollover,
+or purchase split target. Only posts have those behaviors. Bill splits retain
+their current `Split[]` format and remainder handling. No occurrence is stored
+to support folders.
+
+## Folder totals
+
+On the month page, each folder heading shows **Bills due** in the dataset's
+base currency. The figure is the sum of the prices of recurring occurrences
+whose scheduled slot falls in the displayed month and whose bill is placed in
+that folder or a descendant folder. A bill in a different folder contributes
+there, even when it charges a post in this folder. Each occurrence contributes
+once, so a 28-day bill can contribute twice in a month. An ended bill contributes
+only before its end date. An empty folder shows zero; a folder containing only
+posts also shows zero bills due.
+
+For an unconfirmed occurrence, use its current expected amount. For a confirmed
+occurrence, use the confirming purchase's actual total, because that is the
+historical price paid. The slot month determines where the price appears;
+`Purchase.date` continues to determine where the actual charge folds. Convert
+each price to base using the same FX and `settings.digits` rules as the existing
+money calculations, then round the sum at the boundary. A missing FX rate must
+surface as an error, never a fallback. Negative prices remain allowed.
+
+This heading is a schedule total, not a balance. It does not add post
+allocations, remaining balances, or purchase charges to bill prices. Thus a
+folder holding both a Rent post and its 8,000 rent bill shows 8,000 in **Bills
+due**, not 16,000. Post balances remain visible on the post row. Parent folder
+totals include each descendant bill exactly once.
+
+## Month page and editing
+
+Replace the flat post section with a tree of collapsible folders. Within an
+open folder, posts keep their existing balance figures, meter, post links, and
+allocation editing. Recurring bills appear as distinct rows showing their
+price, cadence, assigned posts, and next scheduled occurrence (or Ended); an
+Edit action opens the bill editor. The folder heading shows its Bills due total for this
+month. The Unfiled group holds existing items and any newly created item not
+placed in a folder. Collapsed folders still show their total so the first page
+stays scannable. Keyboard users can expand and collapse folders, and the mobile
+view uses a list rather than squeezing the desktop financial table.
+
+Keep the due/overdue area as the fast reconciliation queue. It continues to
+confirm occurrences into purchases using the existing rules, including
+off-schedule payment dates. Bill rows in folders supply context and an editor,
+not a second confirmation path or a second balance.
+
+In the add-bill flow, select an existing destination post, create a dedicated
+post (for example Rent), or expand a split editor to assign several posts.
+Saving is disabled until the split has a destination. Creating a post and bill
+is one store mutation so a failed write leaves neither behind. A newly created
+dedicated post starts in the bill's selected folder, but either item can be
+moved independently afterward. Editing an existing bill exposes the same split
+controls. The bill amount remains a text field using `parseMoneyInput`.
+
+Settings shows the same hierarchy for creating, renaming, reordering, moving,
+and nesting folders and items. It also retains direct bill-rule editing and
+post allocation history. Archived posts keep their fold history; ended bills
+keep confirmations. The placement controls do not present folders as purchase
+or allocation targets.
+
+## Boundaries and verification
+
+The domain provides a pure selector for the folder tree and scheduled totals,
+using `occurrencesByMonth` rather than a second recurrence walk. It accepts the
+displayed month from the caller and reads no clock. It never reimplements the
+rollover fold. Store actions validate parent references, moves, cycles, and
+split destinations. JSON import validates unique folder IDs, valid parent and
+item references, and acyclic ancestry after migration. JSON export includes
+the complete hierarchy; whole-dataset import keeps its existing backup gate.
+
+Tests cover migration from v7, nested totals without double counting, multiple
+occurrences in one month, confirmed actual prices and off-schedule dates, bills
+assigned to posts in another folder, moves and cycle rejection, and import
+validation. UI checks cover choosing or creating a post, editing a bill split,
+Unfiled, collapse controls, and desktop/mobile month layouts. Browser captures
+check layout and console errors; they do not establish whether the design feels
+good in use.
+
+## Alternatives considered
+
+- **Labels on a flat list:** simpler storage but no folder/subfolder hierarchy
+  or useful collapse behavior for the first page.
+- **Nested posts as folders:** would make parent items look budgetable and mix
+  bill prices with envelope balances, obscuring where money is actually counted.
+- **One tree containing folders, posts, and bill rules:** selected. It makes
+  placement explicit while keeping bill assignment and envelope accounting
+  separate.

From 67c77eb2470e1f7a379179035a260a656853a099 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 20:18:25 +0200
Subject: [PATCH 07/27] docs: plan budget folders and recurring cost placement

---
 ...et-folders-and-recurring-cost-placement.md | 143 ++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 docs/plans/2026-09-29-budget-folders-and-recurring-cost-placement.md

diff --git a/docs/plans/2026-09-29-budget-folders-and-recurring-cost-placement.md b/docs/plans/2026-09-29-budget-folders-and-recurring-cost-placement.md
new file mode 100644
index 0000000..8472ede
--- /dev/null
+++ b/docs/plans/2026-09-29-budget-folders-and-recurring-cost-placement.md
@@ -0,0 +1,143 @@
+# Budget Folders and Recurring Cost Placement Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Let the owner place posts and editable recurring bills in nested folders, assign each bill to chosen posts, and see each folder's scheduled bill total on the month page.
+
+**Architecture:** Schema v8 adds folders and a location for each post and bill. Pure selectors assemble the mixed tree and calculate scheduled prices from the existing occurrence projector. Store actions own placement and cycle safety; the UI consumes those actions without changing the envelope fold or confirmation ledger.
+
+**Tech Stack:** Bun, TypeScript, React 19, React Router, IndexedDB snapshot store, Tailwind/shadcn components.
+
+**Spec:** `docs/specs/2026-09-29-budget-folders-and-recurring-cost-placement-design.md`
+
+## Global Constraints
+
+- Bun only: `bun test`, `bunx tsc --noEmit`, `bun run build`.
+- `src/domain/` stays pure and clock-free; scheduled occurrences remain computed, never stored.
+- `settings.digits` controls all rounding; use `toBase` and `roundMoney` at money boundaries. Never use a missing FX fallback.
+- A folder has no allocation rule, rollover, or purchase split identity. Posts alone hold balances.
+- A folder's **Bills due** is scheduled occurrence prices in the selected month, including descendants; confirmed slots use the confirming purchase's actual total, even when `Purchase.date` is in another month.
+- Keep purchase confirmation, `source.occurrenceDate`, post splits, and the single fold implementation intact.
+- Imported datasets retain the pre-replacement backup gate. Store writes in UI use `useMutate`; event values are captured before its deferred callback.
+- Spec and plan locations are `docs/specs/` and `docs/plans/`.
+
+## File Map
+
+- `src/domain/types.ts`, `seed.ts`: v8 folder types and fresh dataset shape.
+- `src/store/migrations.ts`, `src/export/json.ts`: migration and import validation.
+- `src/store/actions.ts`: folder creation, rename, and mixed sibling placement.
+- `src/domain/budgetTree.ts`: pure mixed tree, bill slot totals, and month display data; `occurrences.ts` supplies a reusable next-slot query.
+- `src/ui/routes/settings/BudgetFoldersSection.tsx`: folder and item placement controls.
+- `src/ui/routes/settings/RecurringSection.tsx`, `src/ui/components/RecurringSplitEditor.tsx`: bill destinations and create-dedicated-post flow; a bill's month-page Edit link focuses its row in Settings.
+- `src/ui/components/BudgetTree.tsx`, `src/ui/routes/MonthRoute.tsx`: grouped month presentation; reuse the post-row rendering from `PostTable` and `ExpectedBand` for confirmation.
+
+## Review Focus
+
+1. A bill assigned to a post in another folder must count in its own folder's Bills due and in that post's projected balance, once in each distinct measure. Pin in Task 3.
+2. A confirmed slot paid in a different month must use its slot month for the folder total and its payment month for the post fold. Pin in Task 3.
+3. A day/week bill can occur twice in one month, and an interval longer than 12 months can still have a correct next-slot label. Pin in Task 3.
+4. A folder move to itself or a descendant must be rejected without changing the dataset; an imported orphan or cycle must also be rejected. Pin in Tasks 1 and 2.
+5. A failed combined creation of a dedicated post and bill must leave neither saved, and an archived post must not be offered as a new destination. Pin in Task 4.
+
+---
+
+### Task 1: Schema v8 and import boundary
+
+**Files:**
+- Modify: `src/domain/types.ts`, `src/domain/seed.ts`, `src/store/migrations.ts`, `src/export/json.ts`
+- Test: `src/domain/seed.test.ts`, `src/store/migrations.test.ts`, `src/export/json.test.ts`
+- Modify: typed dataset fixtures reported by `bunx tsc --noEmit`
+
+**Interfaces:**
+- Produces: `type FolderId = string`; `interface BudgetFolder { id: FolderId; name: string; parentId: FolderId | null; order: number }`; required `folderId: FolderId | null` on `Post` and `RecurringCost`; required `Dataset.folders: BudgetFolder[]`; `SCHEMA_VERSION = 8`.
+
+- [ ] **Step 1: Write failing tests.** Name cases `fresh dataset starts Unfiled`, `v7 migration preserves records and assigns mixed order`, and `import rejects invalid folder graph`. Assert `expect(data.folders).toEqual([])`, `expect(data.posts.every(p => p.folderId === null)).toBe(true)`, unchanged purchases/rules/splits, distinct root orders, and `expect(() => parseDatasetJson(json)).toThrow(ImportValidationError)` separately for duplicate IDs, missing parents, missing item folders, and cycles. A valid nested tree must parse.
+- [ ] **Step 2: Run `bun test src/domain/seed.test.ts src/store/migrations.test.ts src/export/json.test.ts`.** Expected: the new v8 assertions fail.
+- [ ] **Step 3: Add the schema and migration.** Append only a v7 -> v8 migration; do not rewrite old steps or import live defaults into a migration. Preserve old post order first, then old bill order. Validate folder references and cycles in `parseDatasetJson` after migration; accept `null` as Unfiled and require nonempty names and finite integer order values for folders and items.
+- [ ] **Step 4: Run `bun test src/domain/seed.test.ts src/store/migrations.test.ts src/export/json.test.ts` and `bunx tsc --noEmit`.** Expected: pass. Update only fixture object literals the required new fields expose.
+- [ ] **Step 5: Commit.** `git add src && git commit -m "feat: add budget folder schema and migration"`.
+
+### Task 2: Folder actions and mixed sibling ordering
+
+**Files:**
+- Modify: `src/store/actions.ts`
+- Test: `src/store/actions.test.ts`
+
+**Interfaces:**
+- Consumes: Task 1 `BudgetFolder`, `FolderId`, and item `folderId`.
+- Produces: `type BudgetItemKey = { kind: "folder" | "post" | "recurring"; id: string }`; `addBudgetFolder(draft: Dataset, name: string, parentId: FolderId | null): BudgetFolder`; `renameBudgetFolder(draft: Dataset, id: FolderId, name: string): void`; `placeBudgetItem(draft: Dataset, key: BudgetItemKey, destination: FolderId | null, index: number): void`.
+
+- [ ] **Step 1: Write failing action tests.** Name cases `mixed siblings reorder densely`, `invalid placement is atomic`, and `legacy move buttons use mixed order`. After placing a bill at index zero, assert `expect(siblings.map(item => item.order)).toEqual([0, 1, 2])` and `expect(siblings[0]!.id).toBe(bill.id)`. For each unknown destination, self/descendant move, nonexistent item, out-of-range index, and blank name, assert a throw and `expect(JSON.stringify(data)).toBe(before)`. Assert moving a folder to Unfiled works.
+- [ ] **Step 2: Run `bun test src/store/actions.test.ts`.** Expected: the new action tests fail.
+- [ ] **Step 3: Implement the three actions.** Resolve mixed siblings from folders, posts, and bills by `folderId`/`parentId`, splice a move into the requested destination, and renumber source and destination siblings. Keep `addPost` and `addRecurringCost` appending to the mixed Unfiled order; add an optional `folderId: FolderId | null = null` argument to `addPost` and use the cost's `folderId` when adding a bill. Delegate existing `movePost` and `moveRecurringCost` to `placeBudgetItem`; exclude `folderId` and `order` from their generic update actions so placement validation cannot be bypassed.
+- [ ] **Step 4: Run `bun test src/store/actions.test.ts` and `bunx tsc --noEmit`.** Expected: pass.
+- [ ] **Step 5: Commit.** `git add src/store && git commit -m "feat: manage nested budget folders"`.
+
+### Task 3: Pure folder tree and scheduled prices
+
+**Files:**
+- Create: `src/domain/budgetTree.ts`, `src/domain/budgetTree.test.ts`
+- Modify: `src/domain/occurrences.ts`
+- Test: `src/domain/occurrences.test.ts`
+
+**Interfaces:**
+- Consumes: `monthView(dataset, monthId).rows`, `occurrencesByMonth`, `toBase`, Task 1 folder fields.
+- Produces: `budgetTree(dataset: Dataset, monthId: MonthId, rows: readonly MonthPostRow[]): BudgetTreeView`, where `BudgetTreeView` has ordered `roots: BudgetNode[]` and `unfiled: BudgetNode[]`; `BudgetNode` is a folder node with `billsDue` and `children`, a post node with its `MonthPostRow`, or a bill node with its `RecurringCost`, selected-month occurrences, and `nextOccurrence`.
+- Produces: `nextUnconfirmedOccurrenceOnOrAfter(dataset: Dataset, recurringId: RecurringCostId, monthId: MonthId): Occurrence | null`, sharing the recurrence walk with `occurrencesOf` so long intervals have no arbitrary 12-month cutoff; `null` means ended.
+
+- [ ] **Step 1: Write failing selector tests.** Name cases `Housing counts rent once`, `nested totals follow bill placement`, `confirmed off-schedule slot uses actual price`, and `next slot exceeds preview horizon`. For Housing with a Rent post and bill, assert `expect(housing.billsDue).toBe(8000)`. For a 7,900 confirmation of a September slot paid in October, assert September Bills due is 7,900 and the October post charge is 7,900. Assert two 28-day slots contribute twice; FX at `digits: 0`, negative amounts, missing FX, empty/post-only folders, and a next occurrence beyond 12 months each get a direct expected value or throw assertion.
+- [ ] **Step 2: Run `bun test src/domain/budgetTree.test.ts src/domain/occurrences.test.ts`.** Expected: new tests fail.
+- [ ] **Step 3: Implement the selectors.** Use `occurrencesByMonth(dataset, monthId)` for selected-month totals, look up confirmed purchases by ID, call `toBase` for each occurrence, and `roundMoney` while summing. Build each item once from its location and shared order. Refactor the existing occurrence iterator only as needed to expose the next-slot query; keep its strict-advance throw and `lastCharge` behavior.
+- [ ] **Step 4: Run `bun test src/domain/budgetTree.test.ts src/domain/occurrences.test.ts src/domain/charges.test.ts` and `bunx tsc --noEmit`.** Expected: pass.
+- [ ] **Step 5: Commit.** `git add src/domain && git commit -m "feat: derive folder bill totals and mixed tree"`.
+
+### Task 4: Choose or create bill destination posts
+
+**Files:**
+- Modify: `src/ui/routes/settings/RecurringSection.tsx`, `src/store/actions.ts`
+- Create: `src/ui/components/RecurringSplitEditor.tsx`, `src/ui/components/RecurringSplitEditor.test.tsx`
+- Test: `src/ui/routes/settings/RecurringSection.test.tsx`, `src/store/actions.test.ts`
+
+**Interfaces:**
+- Consumes: Task 2 `addPost`/`addRecurringCost` and existing `updateRecurringCost`/`useMutate`.
+- Produces: `addRecurringCostWithPost(draft: Dataset, cost: Omit<RecurringCost, "id" | "order" | "splits" | "splitMode">, newPostName: string): RecurringCost` as one mutation for the dedicated-post path; it creates a 100% split to the new post. `RecurringSplitEditor` takes current mode/splits, active posts, and an `onChange` callback.
+
+- [ ] **Step 1: Write failing tests.** Name cases `bill requires an explicit destination`, `bill can split across active posts`, and `dedicated post and bill save together`. Assert `expect(saved.splits[0]!.postId).toBe(chosen.id)` where `chosen` is not the first post; assert edited mode/values/one absorber and changed `monthView(...).rows` projected figures. Assert dedicated records share `folderId`; after a rejected `store.mutate`, assert neither exists. Assert archived posts are absent from select options and `30$` yields USD.
+- [ ] **Step 2: Run `bun test src/ui/components/RecurringSplitEditor.test.tsx src/ui/routes/settings/RecurringSection.test.tsx src/store/actions.test.ts`.** Expected: the new tests fail.
+- [ ] **Step 3: Implement the add and edit controls.** Replace the first-post default with explicit selection. Keep simple one-post assignment as the default form state, reveal multiple splits on demand, and use the existing `roundSplits` path. Capture input values before `mutate`; keep a failed dialog open with its error visible. Implement the combined action without a second persistence call. Give each existing bill row a stable `bill-<id>` anchor and focus target for the month-page Edit link.
+- [ ] **Step 4: Run the focused tests and `bunx tsc --noEmit`.** Expected: pass.
+- [ ] **Step 5: Commit.** `git add src/store src/ui && git commit -m "feat: choose recurring bill destinations"`.
+
+### Task 5: Manage folders and item placement in Settings
+
+**Files:**
+- Create: `src/ui/routes/settings/BudgetFoldersSection.tsx`, `src/ui/routes/settings/BudgetFoldersSection.test.tsx`
+- Modify: `src/ui/routes/SettingsRoute.tsx`, `src/ui/routes/settings/PostsSection.tsx`, `src/ui/routes/settings/RecurringSection.tsx`
+
+**Interfaces:**
+- Consumes: Task 2 actions and Task 3 tree ordering; emits no new domain model.
+
+- [ ] **Step 1: Write failing UI tests.** Name cases `nested folder can be created and renamed`, `post and bill move independently`, and `failed move reports error`. After UI actions, assert `expect(post.folderId).toBe(housing.id)` and `expect(bill.folderId).toBe(utilities.id)`; moving a parent to Unfiled sets `parentId: null`. Assert descendant folders are absent from a parent move select, and a rejected save shows `[role="alert"]` while IDs and locations remain unchanged.
+- [ ] **Step 2: Run `bun test src/ui/routes/settings/BudgetFoldersSection.test.tsx`.** Expected: new tests fail.
+- [ ] **Step 3: Implement the hierarchy controls.** Use labeled native selects and buttons that work by keyboard. Wire `useMutate` for every store write. Keep post rule history and bill-rule editing accessible from their existing Settings sections; expose folder placement there or link clearly to the hierarchy section.
+- [ ] **Step 4: Run focused settings tests and `bunx tsc --noEmit`.** Expected: pass.
+- [ ] **Step 5: Commit.** `git add src/ui/routes && git commit -m "feat: organize posts and bills in settings"`.
+
+### Task 6: Group the month page
+
+**Files:**
+- Create: `src/ui/components/BudgetTree.tsx`, `src/ui/components/BudgetTree.test.tsx`
+- Modify: `src/ui/routes/MonthRoute.tsx`, `src/ui/components/PostTable.tsx`, `scripts/demo-data.ts`, `src/index.css` only if shared tokens are needed
+
+**Interfaces:**
+- Consumes: Task 3 `budgetTree` and Task 4 bill editor; keeps `ExpectedBand` as the sole confirmation queue.
+
+- [ ] **Step 1: Write failing component tests.** Name cases `collapsed folder keeps Bills due`, `expanded tree preserves mixed order`, and `bill edit reaches its settings row`. With the repository's happy-dom/React `act` pattern, assert the Housing button's `getAttribute("aria-expanded")` is `"false"` while its parent text still includes `8,000` and `Bills due`. After activation, assert nested folder, Rent post, and Rent bill occur in sibling order; Unfiled shows migrated items. Assert bill Edit has `href="/settings#bill-<id>"`, an ended bill reads Ended, and a long-interval bill shows its actual next slot.
+- [ ] **Step 2: Run `bun test src/ui/components/BudgetTree.test.tsx`.** Expected: new tests fail.
+- [ ] **Step 3: Implement the month grouping.** Extract reusable desktop post `<tbody>` and mobile post `<li>` renderers from `PostTable`, then render mixed items in sibling order: folder headings, bill rows, and post rows. Keep valid desktop table semantics and a separate mobile list. Bill rows show amount, cadence, assigned posts, and next slot, with no balance figure; Edit links to the Settings bill anchor from Task 4. Keep the global due/overdue band above the tree and preserve rule editing. Update synthetic demo data with a nested folder, a dedicated Rent post/bill, and a shared small-bills post.
+- [ ] **Step 4: Run `bun test src/ui/components/BudgetTree.test.tsx`, `bun test`, `bunx tsc --noEmit`, and `bun run build`.** Expected: all pass. Start `bun run dev` in a live session. Run `bun scripts/demo-data.ts /tmp/seed.js`, then `bun scripts/screenshot.ts http://localhost:3000/month/2026-09 /tmp/budget-folders-desktop.png --eval-file=/tmp/seed.js --reload --w=1280 --h=900` and the same command with `/tmp/budget-folders-mobile.png --w=390 --h=844`; inspect both PNGs and the script's console-error report. Capture dark theme too if the grouping adds theme-specific styles. Run the Impeccable mechanical detector once on changed UI targets after the final UI edits.
+- [ ] **Step 5: Commit.** `git add src && git commit -m "feat: show budget folders on month page"`.
+
+## Completion check
+
+Run `git diff --check`, the full Bun suite, typecheck, and build after the final commit. Read `docs/ARCHITECTURE.md`, `docs/PRODUCT.md`, and `docs/DECISIONS.md` for any durable description that now needs updating; keep documentation changes scoped to the new hierarchy and its decision, then commit them. Report the tested behavior and browser checks separately from unverified offline, install, download, spreadsheet opening, and subjective design feel.

From c34aa846b9670331289c6697c1e4a42b0eb597e9 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 20:25:47 +0200
Subject: [PATCH 08/27] feat: add budget folder schema and migration

---
 scripts/demo-data.ts                        |  4 ++
 src/domain/allocation.test.ts               |  3 +
 src/domain/charges.test.ts                  |  4 ++
 src/domain/currencyDigits.test.ts           |  4 ++
 src/domain/fold.test.ts                     |  6 ++
 src/domain/occurrences.test.ts              |  2 +
 src/domain/seed.test.ts                     |  6 ++
 src/domain/seed.ts                          |  4 +-
 src/domain/types.ts                         | 11 ++++
 src/domain/views.test.ts                    |  3 +
 src/export/json.test.ts                     | 56 ++++++++++++++++-
 src/export/json.ts                          | 68 ++++++++++++++++++++-
 src/store/actions.test.ts                   |  3 +
 src/store/actions.ts                        |  1 +
 src/store/migrations.test.ts                | 34 ++++++++++-
 src/store/migrations.ts                     | 21 +++++++
 src/store/snapshot.test.ts                  |  1 +
 src/ui/components/ExpectedBand.test.ts      |  1 +
 src/ui/routes/settings/RecurringSection.tsx |  1 +
 19 files changed, 227 insertions(+), 6 deletions(-)

diff --git a/scripts/demo-data.ts b/scripts/demo-data.ts
index 1792d4d..995557d 100755
--- a/scripts/demo-data.ts
+++ b/scripts/demo-data.ts
@@ -47,6 +47,7 @@ actions.setRuleOverride(d, "2026-09", social.id, { kind: "fixed", amount: { amou
 // every combination at once.
 const wowSub = actions.addRecurringCost(d, {
   name: "World of Warcraft",
+  folderId: null,
   archived: false,
   amount: { amount: 13, currency: "USD" },
   startDate: "2026-06-05",
@@ -57,6 +58,7 @@ const wowSub = actions.addRecurringCost(d, {
 });
 actions.addRecurringCost(d, {
   name: "Rent",
+  folderId: null,
   archived: false,
   amount: { amount: 8200, currency: "DKK" },
   startDate: "2026-06",
@@ -67,6 +69,7 @@ actions.addRecurringCost(d, {
 });
 actions.addRecurringCost(d, {
   name: "Veg box",
+  folderId: null,
   archived: false,
   amount: { amount: 175, currency: "DKK" },
   startDate: "2026-06-06",
@@ -79,6 +82,7 @@ actions.addRecurringCost(d, {
 // off-schedule payment moves the whole series — the phone-bill behaviour.
 actions.addRecurringCost(d, {
   name: "Car insurance",
+  folderId: null,
   archived: false,
   amount: { amount: 349, currency: "DKK" },
   startDate: "2026-08-14",
diff --git a/src/domain/allocation.test.ts b/src/domain/allocation.test.ts
index f18fa24..8e16fc5 100644
--- a/src/domain/allocation.test.ts
+++ b/src/domain/allocation.test.ts
@@ -36,6 +36,7 @@ function post(overrides: Partial<Post> = {}): Post {
     id: "p1",
     name: "Food",
     order: 0,
+    folderId: null,
     archived: false,
     currency: "DKK",
     rules: [{ from: "2026-01", rule: fixed(400) }],
@@ -48,6 +49,7 @@ function dataset(overrides: Partial<Dataset> = {}): Dataset {
     settings: { baseCurrency: "DKK", foldStartMonth: "2026-01", schemaVersion: 2, digits: DIGITS },
     currencies: TEST_CURRENCIES,
     fxRates: rates,
+    folders: [],
     posts: [post()],
     months: [
       { id: "2026-01", income: { amount: 20000, currency: "DKK" }, ruleOverrides: {} },
@@ -191,6 +193,7 @@ describe("the fold across a rule change", () => {
     settings: { baseCurrency: "DKK", foldStartMonth: "2026-05", schemaVersion: 2, digits: DIGITS },
     currencies: TEST_CURRENCIES,
     fxRates: [],
+    folders: [],
     posts: [
       post({
         rules: [
diff --git a/src/domain/charges.test.ts b/src/domain/charges.test.ts
index c7e91c0..b3eba82 100644
--- a/src/domain/charges.test.ts
+++ b/src/domain/charges.test.ts
@@ -214,6 +214,7 @@ describe("chargesForMonth", () => {
       settings: { baseCurrency: "DKK", foldStartMonth: "2026-01", schemaVersion: 1, digits: DIGITS },
       currencies: TEST_CURRENCIES,
       fxRates: rates,
+      folders: [],
       posts: [],
       months: [],
       purchases: [
@@ -233,6 +234,7 @@ describe("chargesForMonth", () => {
       settings: { baseCurrency: "DKK", foldStartMonth: "2026-01", schemaVersion: 1, digits: DIGITS },
       currencies: TEST_CURRENCIES,
       fxRates: rates,
+      folders: [],
       posts: [],
       months: [],
       purchases: [],
@@ -251,6 +253,7 @@ describe("expectedForMonth", () => {
         { code: "USD", symbol: "$", name: "US dollar" },
       ],
       fxRates: [{ currency: "USD", baseUnitsPerOne: 7, updatedAt: "2026-01-01", source: "manual" }],
+      folders: [],
       posts: [],
       months: [],
       purchases,
@@ -262,6 +265,7 @@ describe("expectedForMonth", () => {
     id: "r1",
     name: "Rent",
     order: 0,
+    folderId: null,
     archived: false,
     amount: { amount: 8000, currency: "DKK" },
     startDate: "2026-01",
diff --git a/src/domain/currencyDigits.test.ts b/src/domain/currencyDigits.test.ts
index bb58637..469488b 100644
--- a/src/domain/currencyDigits.test.ts
+++ b/src/domain/currencyDigits.test.ts
@@ -96,11 +96,13 @@ describe("the fold at zero decimals", () => {
       fxRates: [
         { currency: "USD", baseUnitsPerOne: 151.234567, updatedAt: "2026-01-01", source: "manual" },
       ],
+      folders: [],
       posts: [
         {
           id: "food",
           name: "Food",
           order: 0,
+          folderId: null,
           archived: false,
           currency: "JPY",
           rules: [{ from: "2026-01", rule: { kind: "percentOfIncome", percent: 33.333 } }],
@@ -113,6 +115,7 @@ describe("the fold at zero decimals", () => {
           id: "fun",
           name: "Fun",
           order: 1,
+          folderId: null,
           archived: false,
           currency: "JPY",
           rules: [],
@@ -134,6 +137,7 @@ describe("the fold at zero decimals", () => {
           id: "gym",
           name: "Gym",
           order: 0,
+          folderId: null,
           archived: false,
           amount: { amount: 7, currency: "USD" },
           startDate: "2026-01",
diff --git a/src/domain/fold.test.ts b/src/domain/fold.test.ts
index d3f11fb..2ea0298 100644
--- a/src/domain/fold.test.ts
+++ b/src/domain/fold.test.ts
@@ -18,6 +18,7 @@ function post(id: string, fixed: number, archived = false): Post {
     id,
     name: id,
     order: 0,
+    folderId: null,
     archived,
     currency: "DKK",
     rules: [{ from: "2026-01", rule: { kind: "fixed", amount: { amount: fixed, currency: "DKK" } } }],
@@ -41,6 +42,7 @@ function dataset(posts: Post[], purchases: Purchase[]): Dataset {
     settings: { baseCurrency: "DKK", foldStartMonth: "2026-01", schemaVersion: 1, digits: DIGITS },
     currencies: TEST_CURRENCIES,
     fxRates: [],
+    folders: [],
     posts,
     months: [
       { id: "2026-01", income: { amount: 10000, currency: "DKK" }, ruleOverrides: {} },
@@ -131,6 +133,7 @@ test("percentage allocations follow the month's income", () => {
         id: "food",
         name: "Food",
         order: 0,
+        folderId: null,
         archived: false,
         currency: "DKK",
         rules: [{ from: "2026-01", rule: { kind: "percentOfIncome", percent: 10 } }],
@@ -191,11 +194,13 @@ function datasetWithRent(): Dataset {
     settings: { baseCurrency: "DKK", foldStartMonth: "2026-01", schemaVersion: 7, digits: 2 },
     currencies: [{ code: "DKK", symbol: "kr", name: "Danish krone" }],
     fxRates: [],
+    folders: [],
     posts: [
       {
         id: "housing",
         name: "Housing",
         order: 0,
+        folderId: null,
         archived: false,
         currency: "DKK",
         rules: [{ from: "2026-01", rule: { kind: "fixed", amount: { amount: 10000, currency: "DKK" } } }],
@@ -208,6 +213,7 @@ function datasetWithRent(): Dataset {
         id: "rent",
         name: "Rent",
         order: 0,
+        folderId: null,
         archived: false,
         amount: { amount: 8000, currency: "DKK" },
         startDate: "2026-01",
diff --git a/src/domain/occurrences.test.ts b/src/domain/occurrences.test.ts
index 235ebd4..2660298 100644
--- a/src/domain/occurrences.test.ts
+++ b/src/domain/occurrences.test.ts
@@ -7,6 +7,7 @@ function cost(overrides: Partial<RecurringCost> = {}): RecurringCost {
     id: "r1",
     name: "Rent",
     order: 0,
+    folderId: null,
     archived: false,
     amount: { amount: 8000, currency: "DKK" },
     startDate: "2026-01",
@@ -248,6 +249,7 @@ describe("occurrencesByMonth", () => {
       settings: { baseCurrency: "DKK", foldStartMonth: "2026-01", schemaVersion: 7, digits: 2 },
       currencies: [{ code: "DKK", symbol: "kr", name: "Danish krone" }],
       fxRates: [],
+      folders: [],
       posts: [],
       months: [],
       purchases,
diff --git a/src/domain/seed.test.ts b/src/domain/seed.test.ts
index 03bacfd..f692571 100644
--- a/src/domain/seed.test.ts
+++ b/src/domain/seed.test.ts
@@ -43,3 +43,9 @@ test("the seed dataset renders a valid month view", () => {
 test("newId returns distinct ids", () => {
   expect(newId()).not.toBe(newId());
 });
+
+test("fresh dataset starts Unfiled", () => {
+  const data = createSeedDataset("2026-09");
+  expect(data.folders).toEqual([]);
+  expect(data.posts.every((post) => post.folderId === null)).toBe(true);
+});
diff --git a/src/domain/seed.ts b/src/domain/seed.ts
index 77b99f7..9546075 100644
--- a/src/domain/seed.ts
+++ b/src/domain/seed.ts
@@ -1,7 +1,7 @@
 import { DEFAULT_DIGITS, SEED_CURRENCIES } from "./types.ts";
 import type { CurrencyDef, Dataset, FxRate, MonthId, Post } from "./types.ts";
 
-export const SCHEMA_VERSION = 7;
+export const SCHEMA_VERSION = 8;
 
 const SEED_POST_NAMES = ["Video Games", "Food", "Events and Social"] as const;
 
@@ -24,6 +24,7 @@ export function createSeedDataset(
     id: newId(),
     name,
     order,
+    folderId: null,
     archived: false,
     currency: "DKK",
     // A new user has genuinely not budgeted anything yet. This is a different
@@ -42,6 +43,7 @@ export function createSeedDataset(
     // out from under it the first time the user changes a rate or a currency.
     currencies: currencies.map((currency) => ({ ...currency })),
     fxRates: fxRates.map((rate) => ({ ...rate })),
+    folders: [],
     posts,
     months: [
       { id: startMonth, income: { amount: 0, currency: "DKK" }, ruleOverrides: {} },
diff --git a/src/domain/types.ts b/src/domain/types.ts
index 193c5e7..d52171e 100755
--- a/src/domain/types.ts
+++ b/src/domain/types.ts
@@ -54,6 +54,14 @@ export type MonthId = string;
 export type IsoDate = string;
 export type PostId = string;
 export type PurchaseId = string;
+export type FolderId = string;
+
+export interface BudgetFolder {
+  id: FolderId;
+  name: string;
+  parentId: FolderId | null;
+  order: number;
+}
 
 export type Rule =
   | { kind: "fixed"; amount: Money }
@@ -69,6 +77,7 @@ export interface Post {
   id: PostId;
   name: string;
   order: number;
+  folderId: FolderId | null;
   archived: boolean;
   /** Display currency for this post's own views only. All totals use base. */
   currency: Currency;
@@ -138,6 +147,7 @@ export interface RecurringCost {
   id: RecurringCostId;
   name: string;
   order: number;
+  folderId: FolderId | null;
   /**
    * A UI flag ONLY. Projection is governed by `startDate` and `endedFrom`,
    * exactly as an archived post still folds — archiving must not retroactively
@@ -221,6 +231,7 @@ export interface Dataset {
    */
   currencies: CurrencyDef[];
   fxRates: FxRate[];
+  folders: BudgetFolder[];
   posts: Post[];
   months: Month[];
   purchases: Purchase[];
diff --git a/src/domain/views.test.ts b/src/domain/views.test.ts
index f5e855e..243c1b8 100644
--- a/src/domain/views.test.ts
+++ b/src/domain/views.test.ts
@@ -17,6 +17,7 @@ function post(id: string, order: number, percent: number, archived = false): Pos
     id,
     name: id,
     order,
+    folderId: null,
     archived,
     currency: "DKK",
     rules: [{ from: "2026-01", rule: { kind: "percentOfIncome", percent } }],
@@ -39,6 +40,7 @@ const data: Dataset = {
   settings: { baseCurrency: "DKK", foldStartMonth: "2026-01", schemaVersion: 1, digits: DIGITS },
   currencies: TEST_CURRENCIES,
   fxRates: [],
+  folders: [],
   posts: [post("food", 0, 20), post("games", 1, 10)],
   months: [
     { id: "2026-01", income: { amount: 10000, currency: "DKK" }, ruleOverrides: {} },
@@ -137,6 +139,7 @@ describe("monthView", () => {
           id: "r1",
           name: "Storage unit",
           order: 0,
+          folderId: null,
           archived: false,
           amount: { amount: 400, currency: "DKK" },
           startDate: "2026-01",
diff --git a/src/export/json.test.ts b/src/export/json.test.ts
index 7a75f19..47fe198 100644
--- a/src/export/json.test.ts
+++ b/src/export/json.test.ts
@@ -114,6 +114,57 @@ describe("validation", () => {
   });
 });
 
+describe("import rejects invalid folder graph", () => {
+  const folder = (id: string, parentId: string | null, order: number) => ({ id, name: id, parentId, order });
+  const parse = (data: Dataset) => parseDatasetJson(JSON.stringify(data));
+
+  test("valid nested tree parses", () => {
+    const data = populated();
+    data.folders = [folder("home", null, 0), folder("bills", "home", 0)];
+    data.posts[0]!.folderId = "bills";
+    expect(parse(data).posts[0]!.folderId).toBe("bills");
+  });
+
+  test("rejects duplicate folder IDs", () => {
+    const data = populated();
+    data.folders = [folder("same", null, 0), folder("same", null, 1)];
+    expect(() => parse(data)).toThrow(ImportValidationError);
+  });
+
+  test("rejects missing parent", () => {
+    const data = populated();
+    data.folders = [folder("child", "missing", 0)];
+    expect(() => parse(data)).toThrow(ImportValidationError);
+  });
+
+  test("rejects missing item folders", () => {
+    const data = populated();
+    data.posts[0]!.folderId = "missing";
+    expect(() => parse(data)).toThrow(ImportValidationError);
+    data.posts[0]!.folderId = null;
+    data.recurring.push({
+      id: "rent", name: "Rent", order: 3, folderId: "missing", archived: false,
+      amount: { amount: 100, currency: "DKK" }, startDate: "2026-01",
+      recurrence: { kind: "everyNMonths", n: 1 }, anchoring: "calendar",
+      splitMode: "percent", splits: [{ postId: data.posts[0]!.id, value: 100, absorbsRemainder: true }],
+    });
+    expect(() => parse(data)).toThrow(ImportValidationError);
+  });
+
+  test("rejects cycles", () => {
+    const data = populated();
+    data.folders = [folder("a", "b", 0), folder("b", "a", 0)];
+    expect(() => parse(data)).toThrow(ImportValidationError);
+  });
+
+  test("rejects duplicate sibling order across item kinds", () => {
+    const data = populated();
+    data.folders = [folder("bills", null, 0)];
+    data.posts[0]!.order = 0;
+    expect(() => parse(data)).toThrow(ImportValidationError);
+  });
+});
+
 test("describeDataset counts what an import would replace", () => {
   expect(describeDataset(populated())).toEqual({
     posts: 3,
@@ -286,7 +337,8 @@ describe("recurring cost validation", () => {
   const valid = {
     id: "r1",
     name: "Rent",
-    order: 0,
+    order: 3,
+    folderId: null,
     archived: false,
     amount: { amount: 8000, currency: "DKK" },
     startDate: "2026-01",
@@ -530,7 +582,7 @@ describe("Purchase.source validation", () => {
   test("a source with a malformed occurrence date is refused", () => {
     const data: any = JSON.parse(withSource({ recurringId: "r1", occurrenceDate: "nope" }));
     data.recurring = [{
-      id: "r1", name: "Rent", order: 0, archived: false,
+      id: "r1", name: "Rent", order: 3, folderId: null, archived: false,
       amount: { amount: 8000, currency: "DKK" },
       startDate: "2026-01",
       recurrence: { kind: "everyNMonths", n: 1 },
diff --git a/src/export/json.ts b/src/export/json.ts
index 4829bdc..59ff5dd 100644
--- a/src/export/json.ts
+++ b/src/export/json.ts
@@ -1,4 +1,4 @@
-import type { Currency, CurrencyDef, Dataset, MonthId } from "../domain/types.ts";
+import type { Currency, CurrencyDef, Dataset, FolderId, MonthId } from "../domain/types.ts";
 import { migrate } from "../store/migrations.ts";
 import { monthOf } from "../domain/months.ts";
 import { toDayOrdinal } from "../domain/days.ts";
@@ -132,6 +132,71 @@ function requireArray(data: Record<string, unknown>, key: string): unknown[] {
   return value;
 }
 
+function requireFolderTree(data: Dataset): void {
+  const folders = requireArray(data as unknown as Record<string, unknown>, "folders");
+  const parents = new Map<FolderId, FolderId | null>();
+  const siblingOrders = new Map<FolderId | null, Set<number>>();
+  const requireOrder = (order: unknown, label: string) => {
+    if (typeof order !== "number" || !Number.isFinite(order) || !Number.isInteger(order)) {
+      throw new ImportValidationError(`${label} has an invalid order`);
+    }
+  };
+  const requireLocation = (folderId: unknown, order: unknown, label: string) => {
+    if (folderId !== null && (typeof folderId !== "string" || !parents.has(folderId))) {
+      throw new ImportValidationError(`${label} references unknown folder "${String(folderId)}"`);
+    }
+    requireOrder(order, label);
+    const key = folderId as FolderId | null;
+    const orders = siblingOrders.get(key) ?? new Set<number>();
+    if (orders.has(order as number)) {
+      throw new ImportValidationError(`${label} duplicates sibling order ${String(order)}`);
+    }
+    orders.add(order as number);
+    siblingOrders.set(key, orders);
+  };
+
+  for (const entry of folders) {
+    const folder = entry as Record<string, unknown> | null;
+    if (!folder || typeof folder.id !== "string" || !folder.id.trim()) {
+      throw new ImportValidationError("Folder has an invalid id");
+    }
+    if (parents.has(folder.id)) {
+      throw new ImportValidationError(`Duplicate folder id "${folder.id}"`);
+    }
+    if (typeof folder.name !== "string" || !folder.name.trim()) {
+      throw new ImportValidationError(`Folder "${folder.id}" has an empty name`);
+    }
+    if (folder.parentId !== null && typeof folder.parentId !== "string") {
+      throw new ImportValidationError(`Folder "${folder.id}" has an invalid parent`);
+    }
+    parents.set(folder.id, folder.parentId as FolderId | null);
+  }
+
+  for (const [id, parentId] of parents) {
+    if (parentId !== null && !parents.has(parentId)) {
+      throw new ImportValidationError(`Folder "${id}" references unknown parent "${parentId}"`);
+    }
+    const visited = new Set<FolderId>();
+    let cursor: FolderId | null = id;
+    while (cursor !== null) {
+      if (visited.has(cursor)) throw new ImportValidationError(`Folder cycle at "${cursor}"`);
+      visited.add(cursor);
+      cursor = parents.get(cursor) ?? null;
+    }
+  }
+
+  for (const entry of folders) {
+    const folder = entry as Record<string, unknown>;
+    requireLocation(folder.parentId, folder.order, `Folder "${folder.id}"`);
+  }
+  for (const post of data.posts) {
+    requireLocation(post?.folderId, post?.order, `Post "${post?.name}"`);
+  }
+  for (const cost of data.recurring) {
+    requireLocation(cost?.folderId, cost?.order, `Recurring cost "${cost?.name}"`);
+  }
+}
+
 /**
  * `n` is checked hard rather than clamped. The projection walk in
  * `domain/occurrences.ts` terminates only if every step strictly advances, and
@@ -331,6 +396,7 @@ export function parseDatasetJson(text: string): Dataset {
 
   const recurring = requireArray(data, "recurring") as any[];
   dataset.recurring = recurring;
+  requireFolderTree(dataset);
   // Optional chaining, not `.id` directly: a null/non-object entry must fall
   // through to the loop below and fail there with an ImportValidationError,
   // not throw a raw TypeError here while merely collecting ids.
diff --git a/src/store/actions.test.ts b/src/store/actions.test.ts
index aef132a..090959d 100644
--- a/src/store/actions.test.ts
+++ b/src/store/actions.test.ts
@@ -464,6 +464,7 @@ describe("recurring costs", () => {
 
   const rentInput = {
     name: "Rent",
+    folderId: null,
     archived: false,
     amount: { amount: 8000, currency: "DKK" },
     startDate: "2026-01",
@@ -764,6 +765,7 @@ describe("confirmOccurrence", () => {
     data.posts[0]!.id = "housing";
     actions.addRecurringCost(data, {
       name: "Rent",
+      folderId: null,
       archived: false,
       amount: { amount: 8000, currency: "DKK" },
       startDate: "2026-01",
@@ -836,6 +838,7 @@ describe("editing a confirmation's date", () => {
     data.posts[0]!.id = "housing";
     actions.addRecurringCost(data, {
       name: "Car insurance",
+      folderId: null,
       archived: false,
       amount: { amount: 900, currency: "DKK" },
       startDate: "2026-08-14",
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 59093ac..d830c85 100755
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -134,6 +134,7 @@ export function addPost(draft: Dataset, name: string, currency: Currency): Post
     id: newId(),
     name,
     order: draft.posts.length,
+    folderId: null,
     archived: false,
     currency,
     rules: [],
diff --git a/src/store/migrations.test.ts b/src/store/migrations.test.ts
index d1f27ce..69b5f3a 100644
--- a/src/store/migrations.test.ts
+++ b/src/store/migrations.test.ts
@@ -193,7 +193,7 @@ describe("v2 -> v3: currencies become data", () => {
   test("nothing else about the dataset is touched", () => {
     const before = v2();
     const migrated = migrate(structuredClone(before));
-    expect(migrated.posts).toEqual(before.posts);
+    expect(migrated.posts.map(({ folderId, ...post }) => post)).toEqual(before.posts);
     expect(migrated.months).toEqual(before.months);
     // Sterling's rate arrives later, in 4 -> 5; nothing this step does touches
     // the rate table.
@@ -466,7 +466,7 @@ describe("6 -> 7: recurring costs join the dataset", () => {
     const v6: any = { ...createSeedDataset("2026-09"), recurring: existing };
     v6.settings = { ...v6.settings, schemaVersion: 6 };
 
-    expect(migrate(v6).recurring).toEqual(existing);
+    expect(migrate(v6).recurring).toEqual([{ ...existing[0], order: 3, folderId: null }]);
   });
 
   test("NO figure changes: every post in every month folds identically", () => {
@@ -485,3 +485,33 @@ describe("6 -> 7: recurring costs join the dataset", () => {
     }
   });
 });
+
+test("v7 migration preserves records and assigns mixed order", () => {
+  const data: any = createSeedDataset("2026-09");
+  data.settings.schemaVersion = 7;
+  delete data.folders;
+  data.posts = [
+    { ...data.posts[0], id: "later", order: 9, rules: [{ from: "2026-09", rule: { kind: "fixed", amount: { amount: 20, currency: "DKK" } } }] },
+    { ...data.posts[1], id: "first", order: 2 },
+  ].map(({ folderId, ...post }: any) => post);
+  data.recurring = [
+    { id: "bill-later", name: "Later", order: 8, splits: [{ postId: "first", value: 100, absorbsRemainder: true }] },
+    { id: "bill-first", name: "First", order: 1, splits: [{ postId: "later", value: 100, absorbsRemainder: true }] },
+  ];
+  data.purchases = [{ id: "purchase", splits: [{ postId: "later", value: 100, absorbsRemainder: true }] }];
+  const before = structuredClone(data);
+
+  const migrated = migrate(data);
+
+  expect(migrated.folders).toEqual([]);
+  expect(migrated.posts.map((post) => [post.id, post.order, post.folderId])).toEqual([
+    ["later", 1, null], ["first", 0, null],
+  ]);
+  expect(migrated.recurring.map((bill) => [bill.id, bill.order, bill.folderId])).toEqual([
+    ["bill-later", 3, null], ["bill-first", 2, null],
+  ]);
+  expect(new Set([...migrated.posts, ...migrated.recurring].map((item) => item.order)).size).toBe(4);
+  expect(migrated.posts[0]!.rules).toEqual(before.posts[0].rules);
+  expect(migrated.recurring.map((bill) => bill.splits)).toEqual(before.recurring.map((bill: any) => bill.splits));
+  expect(migrated.purchases).toEqual(before.purchases);
+});
diff --git a/src/store/migrations.ts b/src/store/migrations.ts
index de9ba06..f58f54a 100644
--- a/src/store/migrations.ts
+++ b/src/store/migrations.ts
@@ -193,6 +193,27 @@ const MIGRATIONS: Array<(data: any) => any> = [
     settings: { ...data.settings, schemaVersion: 7 },
     recurring: Array.isArray(data.recurring) ? data.recurring : [],
   }),
+
+  // 7 -> 8: posts and recurring bills gain independent locations in a shared
+  // folder tree. Preserve each type's former display order, with posts first.
+  // The migration writes no financial data and reads no live default.
+  (data: any) => {
+    const posts = Array.isArray(data.posts) ? data.posts : [];
+    const recurring = Array.isArray(data.recurring) ? data.recurring : [];
+    const postOrders = new Map(
+      [...posts].sort((a: any, b: any) => a.order - b.order).map((post: any, index) => [post, index]),
+    );
+    const billOrders = new Map(
+      [...recurring].sort((a: any, b: any) => a.order - b.order).map((bill: any, index) => [bill, posts.length + index]),
+    );
+    return {
+      ...data,
+      settings: { ...data.settings, schemaVersion: 8 },
+      folders: [],
+      posts: posts.map((post: any) => ({ ...post, order: postOrders.get(post), folderId: null })),
+      recurring: recurring.map((bill: any) => ({ ...bill, order: billOrders.get(bill), folderId: null })),
+    };
+  },
 ];
 
 export function migrate(raw: unknown): Dataset {
diff --git a/src/store/snapshot.test.ts b/src/store/snapshot.test.ts
index 34a1fab..02ed8e7 100644
--- a/src/store/snapshot.test.ts
+++ b/src/store/snapshot.test.ts
@@ -181,6 +181,7 @@ describe("reset", () => {
         id: "extra",
         name: "Extra",
         order: 9,
+        folderId: null,
         archived: false,
         currency: "DKK",
         rules: [],
diff --git a/src/ui/components/ExpectedBand.test.ts b/src/ui/components/ExpectedBand.test.ts
index 7f9ec59..7de253b 100644
--- a/src/ui/components/ExpectedBand.test.ts
+++ b/src/ui/components/ExpectedBand.test.ts
@@ -65,6 +65,7 @@ function cost(overrides: Partial<RecurringCost> = {}): RecurringCost {
     id: "r1",
     name: "Rent",
     order: 0,
+    folderId: null,
     archived: false,
     amount: { amount: 8000, currency: "DKK" },
     startDate: "2026-01",
diff --git a/src/ui/routes/settings/RecurringSection.tsx b/src/ui/routes/settings/RecurringSection.tsx
index 13dbe6a..b4f8072 100644
--- a/src/ui/routes/settings/RecurringSection.tsx
+++ b/src/ui/routes/settings/RecurringSection.tsx
@@ -373,6 +373,7 @@ export function RecurringSection() {
             void mutate((draft) =>
               addRecurringCost(draft, {
                 name,
+                folderId: null,
                 archived: false,
                 amount: { amount: 0, currency: base },
                 startDate: currentMonth,

From 046ca7824eb82d1bcf90debfab60d8d2275570c5 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 20:29:26 +0200
Subject: [PATCH 09/27] fix: reject blank imported budget item names

---
 src/export/json.test.ts | 17 +++++++++++++++++
 src/export/json.ts      |  6 ++++++
 2 files changed, 23 insertions(+)

diff --git a/src/export/json.test.ts b/src/export/json.test.ts
index 47fe198..c496d91 100644
--- a/src/export/json.test.ts
+++ b/src/export/json.test.ts
@@ -163,6 +163,23 @@ describe("import rejects invalid folder graph", () => {
     data.posts[0]!.order = 0;
     expect(() => parse(data)).toThrow(ImportValidationError);
   });
+
+  test("rejects a blank post name", () => {
+    const data = populated();
+    data.posts[0]!.name = "  ";
+    expect(() => parse(data)).toThrow(ImportValidationError);
+  });
+
+  test("rejects a blank recurring-cost name", () => {
+    const data = populated();
+    data.recurring.push({
+      id: "rent", name: "  ", order: 3, folderId: null, archived: false,
+      amount: { amount: 100, currency: "DKK" }, startDate: "2026-01",
+      recurrence: { kind: "everyNMonths", n: 1 }, anchoring: "calendar",
+      splitMode: "percent", splits: [{ postId: data.posts[0]!.id, value: 100, absorbsRemainder: true }],
+    });
+    expect(() => parse(data)).toThrow(ImportValidationError);
+  });
 });
 
 test("describeDataset counts what an import would replace", () => {
diff --git a/src/export/json.ts b/src/export/json.ts
index 59ff5dd..ee68998 100644
--- a/src/export/json.ts
+++ b/src/export/json.ts
@@ -190,9 +190,15 @@ function requireFolderTree(data: Dataset): void {
     requireLocation(folder.parentId, folder.order, `Folder "${folder.id}"`);
   }
   for (const post of data.posts) {
+    if (typeof post?.name !== "string" || !post.name.trim()) {
+      throw new ImportValidationError("Post has an empty name");
+    }
     requireLocation(post?.folderId, post?.order, `Post "${post?.name}"`);
   }
   for (const cost of data.recurring) {
+    if (typeof cost?.name !== "string" || !cost.name.trim()) {
+      throw new ImportValidationError("Recurring cost has an empty name");
+    }
     requireLocation(cost?.folderId, cost?.order, `Recurring cost "${cost?.name}"`);
   }
 }

From 3f976e0943a6417ff6a392cd338b789755b26bfa Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 20:34:16 +0200
Subject: [PATCH 10/27] feat: manage nested budget folders

---
 src/store/actions.test.ts |  89 +++++++++++++++++++++++++--
 src/store/actions.ts      | 126 ++++++++++++++++++++++++++++++++------
 2 files changed, 191 insertions(+), 24 deletions(-)

diff --git a/src/store/actions.test.ts b/src/store/actions.test.ts
index 090959d..6f16896 100644
--- a/src/store/actions.test.ts
+++ b/src/store/actions.test.ts
@@ -4,6 +4,87 @@ import { createSeedDataset } from "../domain/seed.ts";
 import { occurrencesByMonth } from "../domain/occurrences.ts";
 import type { Dataset } from "../domain/types.ts";
 
+const billInput = (postId: string, folderId: string | null = null) => ({
+  name: "Phone", folderId, archived: false,
+  amount: { amount: 30, currency: "DKK" }, startDate: "2026-09",
+  recurrence: { kind: "everyNMonths" as const, n: 1 }, anchoring: "calendar" as const,
+  splitMode: "percent" as const,
+  splits: [{ postId, value: 100, absorbsRemainder: true }],
+});
+
+describe("budget folder placement", () => {
+  test("mixed siblings reorder densely", () => {
+    const data = createSeedDataset("2026-09");
+    const folder = actions.addBudgetFolder(data, "Utilities", null);
+    actions.addBudgetFolder(data, "Subscriptions", folder.id);
+    const post = actions.addPost(data, "Bills", "DKK", folder.id);
+    const bill = actions.addRecurringCost(data, billInput(post.id, folder.id));
+    actions.placeBudgetItem(data, { kind: "recurring", id: bill.id }, folder.id, 0);
+    const siblings = actions.budgetSiblings(data, folder.id);
+    expect(siblings.map(item => item.order)).toEqual([0, 1, 2]);
+    expect(siblings[0]!.id).toBe(bill.id);
+    actions.placeBudgetItem(data, { kind: "folder", id: folder.id }, null, 0);
+    expect(actions.budgetSiblings(data, null)[0]!.id).toBe(folder.id);
+  });
+
+  test("invalid placement is atomic", () => {
+    const data = createSeedDataset("2026-09");
+    const parent = actions.addBudgetFolder(data, "Parent", null);
+    const child = actions.addBudgetFolder(data, "Child", parent.id);
+    const post = actions.addPost(data, "Bills", "DKK", parent.id);
+    const bill = actions.addRecurringCost(data, billInput(post.id));
+    const invalid = [
+      () => actions.placeBudgetItem(data, { kind: "post", id: post.id }, "ghost", 0),
+      () => actions.placeBudgetItem(data, { kind: "folder", id: parent.id }, parent.id, 0),
+      () => actions.placeBudgetItem(data, { kind: "folder", id: parent.id }, child.id, 0),
+      () => actions.placeBudgetItem(data, { kind: "post", id: "ghost" }, null, 0),
+      () => actions.placeBudgetItem(data, { kind: "recurring", id: bill.id }, null, 99),
+      () => actions.addBudgetFolder(data, "   ", null),
+      () => actions.addBudgetFolder(data, "Unknown parent", "ghost"),
+      () => actions.renameBudgetFolder(data, parent.id, "   "),
+      () => actions.addPost(data, "Orphan", "DKK", "ghost"),
+      () => actions.addRecurringCost(data, billInput(post.id, "ghost")),
+      () => actions.updatePost(data, post.id, { folderId: null } as never),
+      () => actions.updateRecurringCost(data, bill.id, { order: 0 } as never),
+    ];
+    for (const operation of invalid) {
+      const before = JSON.stringify(data);
+      expect(operation).toThrow();
+      expect(JSON.stringify(data)).toBe(before);
+    }
+    actions.renameBudgetFolder(data, parent.id, "New name");
+    expect(parent.name).toBe("New name");
+    actions.placeBudgetItem(data, { kind: "folder", id: child.id }, null, 0);
+    expect(child.parentId).toBe(null);
+    expect(actions.budgetSiblings(data, parent.id).map(item => item.order)).toEqual([0]);
+  });
+
+  test("legacy move buttons use mixed order", () => {
+    const data = createSeedDataset("2026-09");
+    const bill = actions.addRecurringCost(data, billInput(data.posts[0]!.id));
+    actions.moveRecurringCost(data, bill.id, -1);
+    expect(actions.budgetSiblings(data, null).map(item => item.id)).toEqual([
+      data.posts[0]!.id, data.posts[1]!.id, bill.id, data.posts[2]!.id,
+    ]);
+    actions.movePost(data, data.posts[2]!.id, -1);
+    expect(actions.budgetSiblings(data, null).map(item => item.id)).toEqual([
+      data.posts[0]!.id, data.posts[1]!.id, data.posts[2]!.id, bill.id,
+    ]);
+    const before = JSON.stringify(data);
+    actions.movePost(data, data.posts[0]!.id, -1);
+    expect(JSON.stringify(data)).toBe(before);
+  });
+
+  test("new items append after sparse imported sibling orders", () => {
+    const data = createSeedDataset("2026-09");
+    data.posts[2]!.order = 3;
+    const folder = actions.addBudgetFolder(data, "Utilities", null);
+    const post = actions.addPost(data, "Bills", "DKK");
+    const bill = actions.addRecurringCost(data, billInput(post.id));
+    expect([folder.order, post.order, bill.order]).toEqual([4, 5, 6]);
+  });
+});
+
 /**
  * Decimal places are one dataset-wide setting, so a different minor unit is
  * expressed by moving `settings.digits` — no monkey-patching a module
@@ -480,8 +561,8 @@ describe("recurring costs", () => {
     const second = actions.addRecurringCost(data, { ...rentInput, name: "Phone" });
 
     expect(first.id).not.toBe(second.id);
-    expect(first.order).toBe(0);
-    expect(second.order).toBe(1);
+    expect(first.order).toBe(3);
+    expect(second.order).toBe(4);
     expect(data.recurring.length).toBe(2);
   });
 
@@ -754,8 +835,8 @@ describe("recurring costs", () => {
     const second = actions.addRecurringCost(data, { ...rentInput, name: "Phone" });
     actions.moveRecurringCost(data, second.id, -1);
 
-    expect(data.recurring.find((c) => c.id === second.id)!.order).toBe(0);
-    expect(data.recurring.find((c) => c.id === first.id)!.order).toBe(1);
+    expect(data.recurring.find((c) => c.id === second.id)!.order).toBe(3);
+    expect(data.recurring.find((c) => c.id === first.id)!.order).toBe(4);
   });
 });
 
diff --git a/src/store/actions.ts b/src/store/actions.ts
index d830c85..697b118 100755
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -8,6 +8,8 @@ import type {
   Currency,
   CurrencyDef,
   Dataset,
+  BudgetFolder,
+  FolderId,
   FxRate,
   IsoDate,
   Money,
@@ -43,6 +45,88 @@ function requirePost(draft: Dataset, postId: PostId): Post {
   return post;
 }
 
+export type BudgetItemKey = { kind: "folder" | "post" | "recurring"; id: string };
+type BudgetItem = BudgetFolder | Post | RecurringCost;
+type BudgetSibling = BudgetItemKey & { order: number };
+
+function siblingRefs(draft: Dataset, parentId: FolderId | null): Array<{ key: BudgetItemKey; item: BudgetItem }> {
+  return [
+    ...draft.folders.filter(item => item.parentId === parentId).map(item => ({ key: { kind: "folder" as const, id: item.id }, item })),
+    ...draft.posts.filter(item => item.folderId === parentId).map(item => ({ key: { kind: "post" as const, id: item.id }, item })),
+    ...draft.recurring.filter(item => item.folderId === parentId).map(item => ({ key: { kind: "recurring" as const, id: item.id }, item })),
+  ].sort((a, b) => a.item.order - b.item.order);
+}
+
+/** A clock-free, FX-free view of the shared order for Settings and placement. */
+export function budgetSiblings(draft: Dataset, parentId: FolderId | null): BudgetSibling[] {
+  return siblingRefs(draft, parentId).map(({ key, item }) => ({ ...key, order: item.order }));
+}
+
+function nextSiblingOrder(draft: Dataset, parentId: FolderId | null): number {
+  const siblings = siblingRefs(draft, parentId);
+  return siblings.length ? siblings[siblings.length - 1]!.item.order + 1 : 0;
+}
+
+function requireFolder(draft: Dataset, id: FolderId): BudgetFolder {
+  const folder = draft.folders.find(item => item.id === id);
+  if (!folder) throw new Error(`Unknown folder: ${id}`);
+  return folder;
+}
+
+function requireFolderName(name: string): string {
+  const trimmed = name.trim();
+  if (!trimmed) throw new Error("Folder name cannot be blank");
+  return trimmed;
+}
+
+function requireBudgetItem(draft: Dataset, key: BudgetItemKey): BudgetItem {
+  if (key.kind === "folder") return requireFolder(draft, key.id);
+  if (key.kind === "post") return requirePost(draft, key.id);
+  if (key.kind === "recurring") return requireRecurringCost(draft, key.id);
+  throw new Error(`Unknown budget item kind: ${String(key.kind)}`);
+}
+
+function itemParent(key: BudgetItemKey, item: BudgetItem): FolderId | null {
+  return key.kind === "folder" ? (item as BudgetFolder).parentId : (item as Post | RecurringCost).folderId;
+}
+
+export function addBudgetFolder(draft: Dataset, name: string, parentId: FolderId | null): BudgetFolder {
+  const resolvedName = requireFolderName(name);
+  if (parentId !== null) requireFolder(draft, parentId);
+  const folder: BudgetFolder = { id: newId(), name: resolvedName, parentId, order: nextSiblingOrder(draft, parentId) };
+  draft.folders.push(folder);
+  return folder;
+}
+
+export function renameBudgetFolder(draft: Dataset, id: FolderId, name: string): void {
+  const folder = requireFolder(draft, id);
+  const resolvedName = requireFolderName(name);
+  folder.name = resolvedName;
+}
+
+export function placeBudgetItem(draft: Dataset, key: BudgetItemKey, destination: FolderId | null, index: number): void {
+  const item = requireBudgetItem(draft, key);
+  if (destination !== null) requireFolder(draft, destination);
+  if (key.kind === "folder") {
+    let cursor = destination;
+    while (cursor !== null) {
+      if (cursor === key.id) throw new Error("A folder cannot be moved into itself or a descendant");
+      cursor = requireFolder(draft, cursor).parentId;
+    }
+  }
+  const source = itemParent(key, item);
+  const sourceItems = siblingRefs(draft, source).filter(entry => !(entry.key.kind === key.kind && entry.key.id === key.id));
+  const destinationItems = source === destination ? sourceItems : siblingRefs(draft, destination);
+  if (!Number.isInteger(index) || index < 0 || index > destinationItems.length) {
+    throw new Error(`Invalid sibling index: ${index}`);
+  }
+  if (key.kind === "folder") (item as BudgetFolder).parentId = destination;
+  else (item as Post | RecurringCost).folderId = destination;
+  destinationItems.splice(index, 0, { key, item });
+  if (source !== destination) sourceItems.forEach((entry, order) => { entry.item.order = order; });
+  destinationItems.forEach((entry, order) => { entry.item.order = order; });
+}
+
 function requirePurchase(draft: Dataset, purchaseId: PurchaseId): Purchase {
   const purchase = draft.purchases.find((p) => p.id === purchaseId);
   if (!purchase) throw new Error(`Unknown purchase: ${purchaseId}`);
@@ -129,12 +213,13 @@ export function setRuleOverride(
   month.ruleOverrides[postId] = roundRule(draft, rule);
 }
 
-export function addPost(draft: Dataset, name: string, currency: Currency): Post {
+export function addPost(draft: Dataset, name: string, currency: Currency, folderId: FolderId | null = null): Post {
+  if (folderId !== null) requireFolder(draft, folderId);
   const post: Post = {
     id: newId(),
     name,
-    order: draft.posts.length,
-    folderId: null,
+    order: nextSiblingOrder(draft, folderId),
+    folderId,
     archived: false,
     currency,
     rules: [],
@@ -146,10 +231,11 @@ export function addPost(draft: Dataset, name: string, currency: Currency): Post
 export function updatePost(
   draft: Dataset,
   postId: PostId,
-  changes: Partial<Omit<Post, "id">>,
+  changes: Partial<Omit<Post, "id" | "folderId" | "order">>,
 ): void {
   const post = requirePost(draft, postId);
-  const resolved: Partial<Omit<Post, "id">> = { ...changes };
+  if ("folderId" in changes || "order" in changes) throw new Error("Use placeBudgetItem to move a post");
+  const resolved: Partial<Omit<Post, "id" | "folderId" | "order">> = { ...changes };
   Object.assign(post, resolved);
 }
 
@@ -163,13 +249,12 @@ export function setPostArchived(
 }
 
 export function movePost(draft: Dataset, postId: PostId, direction: -1 | 1): void {
-  const ordered = [...draft.posts].sort((a, b) => a.order - b.order);
-  const index = ordered.findIndex((p) => p.id === postId);
+  const post = requirePost(draft, postId);
+  const ordered = budgetSiblings(draft, post.folderId);
+  const index = ordered.findIndex(item => item.kind === "post" && item.id === postId);
   const target = index + direction;
-  if (index === -1 || target < 0 || target >= ordered.length) return;
-  const a = ordered[index]!;
-  const b = ordered[target]!;
-  [a.order, b.order] = [b.order, a.order];
+  if (target < 0 || target >= ordered.length) return;
+  placeBudgetItem(draft, { kind: "post", id: postId }, post.folderId, target);
 }
 
 /**
@@ -482,10 +567,11 @@ export function addRecurringCost(
 ): RecurringCost {
   const recurrence = requireRecurrence(cost.recurrence);
   requireStartDateGranularity(recurrence, cost.startDate);
+  if (cost.folderId !== null) requireFolder(draft, cost.folderId);
   const created: RecurringCost = {
     ...cost,
     id: newId(),
-    order: draft.recurring.length,
+    order: nextSiblingOrder(draft, cost.folderId),
     recurrence,
     amount: roundMoneyValue(draft, cost.amount),
     splits: roundSplits(draft, cost.splits, cost.splitMode, cost.amount.currency),
@@ -506,10 +592,11 @@ export function addRecurringCost(
 export function updateRecurringCost(
   draft: Dataset,
   id: RecurringCostId,
-  changes: Partial<Omit<RecurringCost, "id" | "archived" | "endedFrom">>,
+  changes: Partial<Omit<RecurringCost, "id" | "archived" | "endedFrom" | "folderId" | "order">>,
 ): void {
   const cost = requireRecurringCost(draft, id);
-  const resolved: Partial<Omit<RecurringCost, "id" | "archived" | "endedFrom">> = { ...changes };
+  if ("folderId" in changes || "order" in changes) throw new Error("Use placeBudgetItem to move a recurring cost");
+  const resolved: Partial<Omit<RecurringCost, "id" | "archived" | "endedFrom" | "folderId" | "order">> = { ...changes };
 
   if (changes.recurrence) {
     resolved.recurrence = requireRecurrence(changes.recurrence);
@@ -544,13 +631,12 @@ export function moveRecurringCost(
   id: RecurringCostId,
   direction: -1 | 1,
 ): void {
-  const ordered = [...draft.recurring].sort((a, b) => a.order - b.order);
-  const index = ordered.findIndex((c) => c.id === id);
+  const cost = requireRecurringCost(draft, id);
+  const ordered = budgetSiblings(draft, cost.folderId);
+  const index = ordered.findIndex(item => item.kind === "recurring" && item.id === id);
   const target = index + direction;
-  if (index === -1 || target < 0 || target >= ordered.length) return;
-  const a = ordered[index]!;
-  const b = ordered[target]!;
-  [a.order, b.order] = [b.order, a.order];
+  if (target < 0 || target >= ordered.length) return;
+  placeBudgetItem(draft, { kind: "recurring", id }, cost.folderId, target);
 }
 
 /**

From 390abf2be40569298c4e1bc4a12b343ce3cd5ebc Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 20:36:33 +0200
Subject: [PATCH 11/27] fix: keep budget sibling order distinct at numeric
 limit

---
 src/store/actions.test.ts | 15 +++++++++++++++
 src/store/actions.ts      |  7 ++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/store/actions.test.ts b/src/store/actions.test.ts
index 6f16896..e9ac285 100644
--- a/src/store/actions.test.ts
+++ b/src/store/actions.test.ts
@@ -2,6 +2,7 @@ import { test, expect, describe } from "bun:test";
 import * as actions from "./actions.ts";
 import { createSeedDataset } from "../domain/seed.ts";
 import { occurrencesByMonth } from "../domain/occurrences.ts";
+import { exportDatasetJson, parseDatasetJson } from "../export/json.ts";
 import type { Dataset } from "../domain/types.ts";
 
 const billInput = (postId: string, folderId: string | null = null) => ({
@@ -83,6 +84,20 @@ describe("budget folder placement", () => {
     const bill = actions.addRecurringCost(data, billInput(post.id));
     expect([folder.order, post.order, bill.order]).toEqual([4, 5, 6]);
   });
+
+  test("adding after the largest finite sibling order stays importable", () => {
+    for (const add of [
+      (data: Dataset) => actions.addBudgetFolder(data, "Utilities", null),
+      (data: Dataset) => actions.addPost(data, "Bills", "DKK"),
+      (data: Dataset) => actions.addRecurringCost(data, billInput(data.posts[0]!.id)),
+    ]) {
+      const data = createSeedDataset("2026-09");
+      data.posts[2]!.order = Number.MAX_VALUE;
+      const added = add(data);
+      expect(added.order).not.toBe(Number.MAX_VALUE);
+      expect(() => parseDatasetJson(exportDatasetJson(data))).not.toThrow();
+    }
+  });
 });
 
 /**
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 697b118..68a23fe 100755
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -64,7 +64,12 @@ export function budgetSiblings(draft: Dataset, parentId: FolderId | null): Budge
 
 function nextSiblingOrder(draft: Dataset, parentId: FolderId | null): number {
   const siblings = siblingRefs(draft, parentId);
-  return siblings.length ? siblings[siblings.length - 1]!.item.order + 1 : 0;
+  if (!siblings.length) return 0;
+  const highest = siblings[siblings.length - 1]!.item.order;
+  const next = highest + 1;
+  if (Number.isFinite(next) && next > highest) return next;
+  siblings.forEach(({ item }, order) => { item.order = order; });
+  return siblings.length;
 }
 
 function requireFolder(draft: Dataset, id: FolderId): BudgetFolder {

From 1e30671d76bbd7c6535c868fefd53b57e62c51be Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 20:41:38 +0200
Subject: [PATCH 12/27] feat: derive folder bill totals and mixed tree

---
 src/domain/budgetTree.test.ts  | 124 +++++++++++++++++++++++++++++++++
 src/domain/budgetTree.ts       |  87 +++++++++++++++++++++++
 src/domain/index.ts            |   1 +
 src/domain/occurrences.test.ts |  30 +++++++-
 src/domain/occurrences.ts      |  43 +++++++++---
 5 files changed, 274 insertions(+), 11 deletions(-)
 create mode 100644 src/domain/budgetTree.test.ts
 create mode 100644 src/domain/budgetTree.ts

diff --git a/src/domain/budgetTree.test.ts b/src/domain/budgetTree.test.ts
new file mode 100644
index 0000000..bdd9a19
--- /dev/null
+++ b/src/domain/budgetTree.test.ts
@@ -0,0 +1,124 @@
+import { expect, test } from "bun:test";
+import { budgetTree } from "./budgetTree.ts";
+import { MissingRateError } from "./fx.ts";
+import { createSeedDataset } from "./seed.ts";
+import type { BudgetFolder, Dataset, Post, Purchase, RecurringCost } from "./types.ts";
+import { monthView } from "./views.ts";
+
+const post = (id: string, folderId: string | null, order = 0): Post => ({
+  id, name: id, order, folderId, archived: false, currency: "DKK", rules: [],
+});
+const folder = (id: string, parentId: string | null, order = 0): BudgetFolder => ({ id, name: id, parentId, order });
+const bill = (id: string, folderId: string | null, amount = 8000, order = 1): RecurringCost => ({
+  id, name: id, order, folderId, archived: false,
+  amount: { amount, currency: "DKK" }, startDate: "2026-09",
+  recurrence: { kind: "everyNMonths", n: 1 }, anchoring: "calendar",
+  splitMode: "percent", splits: [{ postId: "rent", value: 100, absorbsRemainder: true }],
+});
+function dataset(): Dataset {
+  const data = createSeedDataset("2026-09");
+  data.posts = [];
+  data.months = [{ id: "2026-09", income: { amount: 0, currency: "DKK" }, ruleOverrides: {} }];
+  return data;
+}
+const tree = (data: Dataset, month = "2026-09") => budgetTree(data, month, monthView(data, month).rows);
+
+test("Housing counts rent once", () => {
+  const data = dataset();
+  data.folders = [folder("housing", null)];
+  data.posts = [post("rent", "housing")];
+  data.recurring = [bill("rent-bill", "housing")];
+  const housing = tree(data).roots[0]!;
+  expect(housing.kind).toBe("folder");
+  if (housing.kind !== "folder") return;
+  expect(housing.billsDue).toBe(8000);
+  expect(housing.children.map(node => node.kind)).toEqual(["post", "bill"]);
+  expect(housing.children[1]!.kind).toBe("bill");
+});
+
+test("nested totals follow bill placement", () => {
+  const data = dataset();
+  data.folders = [folder("housing", null), folder("utilities", "housing")];
+  data.posts = [post("rent", null)];
+  data.recurring = [bill("phone", "utilities", 250)];
+  const housing = tree(data).roots[0]!;
+  expect(housing.kind).toBe("folder");
+  if (housing.kind !== "folder") return;
+  expect(housing.billsDue).toBe(250);
+  expect(housing.children[0]!.kind).toBe("folder");
+  const utilities = housing.children[0]!;
+  if (utilities.kind !== "folder") return;
+  expect(utilities.billsDue).toBe(250);
+  expect(tree(data).unfiled.map(node => node.kind)).toEqual(["post"]);
+});
+
+test("confirmed off-schedule slot uses actual price", () => {
+  const data = dataset();
+  data.folders = [folder("housing", null)];
+  data.posts = [post("rent", "housing")];
+  data.recurring = [bill("rent-bill", "housing")];
+  const purchase: Purchase = {
+    id: "paid", date: "2026-10-02", description: "Rent",
+    total: { amount: 7900, currency: "DKK" }, splitMode: "percent",
+    splits: [{ postId: "rent", value: 100, absorbsRemainder: true }],
+    schedule: null, source: { recurringId: "rent-bill", occurrenceDate: "2026-09" },
+  };
+  data.purchases = [purchase];
+  const housing = tree(data).roots[0]!;
+  if (housing.kind !== "folder") throw new Error("Missing housing folder");
+  expect(housing.billsDue).toBe(7900);
+  expect(monthView(data, "2026-10").rows[0]!.figures.charges).toBe(7900);
+});
+
+test("two 28-day slots contribute twice", () => {
+  const data = dataset();
+  data.folders = [folder("housing", null)];
+  data.posts = [post("rent", null)];
+  data.recurring = [bill("twice", "housing", 50)];
+  data.recurring[0]!.startDate = "2026-09-01";
+  data.recurring[0]!.recurrence = { kind: "everyNDays", n: 28 };
+  const housing = tree(data).roots[0]!;
+  if (housing.kind !== "folder") throw new Error("Missing housing folder");
+  expect(housing.billsDue).toBe(100);
+  expect(housing.children[0]!.kind).toBe("bill");
+  const node = housing.children[0]!;
+  if (node.kind === "bill") expect(node.occurrences.map(o => o.date)).toEqual(["2026-09-01", "2026-09-29"]);
+});
+
+test("FX rounds each price at dataset digits zero", () => {
+  const data = dataset();
+  data.settings.digits = 0;
+  data.folders = [folder("housing", null)];
+  data.posts = [post("rent", null)];
+  data.recurring = [bill("fx", "housing", 10.6)];
+  data.recurring[0]!.amount.currency = "EUR";
+  data.fxRates = [{ currency: "EUR", baseUnitsPerOne: 7.5, updatedAt: "2026-09-01", source: "manual" }];
+  const housing = tree(data).roots[0]!;
+  if (housing.kind !== "folder") throw new Error("Missing housing folder");
+  expect(housing.billsDue).toBe(80);
+});
+
+test("negative prices subtract from Bills due", () => {
+  const data = dataset();
+  data.folders = [folder("housing", null)];
+  data.posts = [post("rent", null)];
+  data.recurring = [bill("refund", "housing", -25)];
+  const housing = tree(data).roots[0]!;
+  if (housing.kind === "folder") expect(housing.billsDue).toBe(-25);
+});
+
+test("missing FX surfaces an error", () => {
+  const data = dataset();
+  data.folders = [folder("housing", null)];
+  data.posts = [post("rent", null)];
+  data.recurring = [bill("fx", "housing")];
+  data.recurring[0]!.amount.currency = "EUR";
+  expect(() => budgetTree(data, "2026-09", [])).toThrow(MissingRateError);
+});
+
+test("empty and post-only folders have zero Bills due", () => {
+  const data = dataset();
+  data.folders = [folder("empty", null), folder("post-only", null, 1)];
+  data.posts = [post("rent", "post-only")];
+  expect(tree(data).roots.map(node => node.kind === "folder" ? node.billsDue : NaN)).toEqual([0, 0]);
+});
diff --git a/src/domain/budgetTree.ts b/src/domain/budgetTree.ts
new file mode 100644
index 0000000..b0f424b
--- /dev/null
+++ b/src/domain/budgetTree.ts
@@ -0,0 +1,87 @@
+import { toBase } from "./fx.ts";
+import { roundMoney } from "./money.ts";
+import {
+  nextUnconfirmedOccurrenceOnOrAfter,
+  occurrencesByMonth,
+  type Occurrence,
+} from "./occurrences.ts";
+import type { BudgetFolder, Dataset, MonthId, RecurringCost } from "./types.ts";
+import type { MonthPostRow } from "./views.ts";
+
+export type BudgetNode =
+  | { kind: "folder"; folder: BudgetFolder; billsDue: number; children: BudgetNode[] }
+  | { kind: "post"; row: MonthPostRow }
+  | { kind: "bill"; cost: RecurringCost; occurrences: Occurrence[]; nextOccurrence: Occurrence | null };
+
+export interface BudgetTreeView {
+  roots: BudgetNode[];
+  unfiled: BudgetNode[];
+}
+
+/** Pure month-specific placement and scheduled bill prices. */
+export function budgetTree(
+  dataset: Dataset,
+  monthId: MonthId,
+  rows: readonly MonthPostRow[],
+): BudgetTreeView {
+  const slots = occurrencesByMonth(dataset, monthId).get(monthId) ?? [];
+  const purchases = new Map(dataset.purchases.map(purchase => [purchase.id, purchase]));
+  const slotsByBill = new Map<string, Occurrence[]>();
+  for (const slot of slots) {
+    const found = slotsByBill.get(slot.recurringId);
+    if (found) found.push(slot);
+    else slotsByBill.set(slot.recurringId, [slot]);
+  }
+
+  type OrderedNode = { order: number; node: BudgetNode };
+  const byParent = new Map<string | null, OrderedNode[]>();
+  const add = (parent: string | null, order: number, node: BudgetNode): void => {
+    const found = byParent.get(parent);
+    if (found) found.push({ order, node });
+    else byParent.set(parent, [{ order, node }]);
+  };
+
+  for (const folder of dataset.folders) {
+    add(folder.parentId, folder.order, { kind: "folder", folder, billsDue: 0, children: [] });
+  }
+  for (const row of rows) {
+    add(row.post.folderId, row.post.order, { kind: "post", row });
+  }
+  for (const cost of dataset.recurring) {
+    add(cost.folderId, cost.order, {
+      kind: "bill",
+      cost,
+      occurrences: slotsByBill.get(cost.id) ?? [],
+      nextOccurrence: nextUnconfirmedOccurrenceOnOrAfter(dataset, cost.id, monthId),
+    });
+  }
+
+  const digits = dataset.settings.digits;
+  const childrenOf = (parent: string | null): BudgetNode[] =>
+    (byParent.get(parent) ?? [])
+      .sort((a, b) => a.order - b.order)
+      .map(({ node }) => {
+        if (node.kind === "folder") {
+          node.children = childrenOf(node.folder.id);
+          node.billsDue = node.children.reduce((sum, child) =>
+            roundMoney(sum + (child.kind === "folder" ? child.billsDue : child.kind === "bill" ? billDue(child.occurrences) : 0), digits), 0);
+        }
+        return node;
+      });
+
+  const billDue = (occurrences: readonly Occurrence[]): number =>
+    occurrences.reduce((sum, occurrence) => {
+      const purchase = occurrence.confirmedBy ? purchases.get(occurrence.confirmedBy) : null;
+      if (occurrence.confirmedBy && !purchase) {
+        throw new Error(`Missing confirming purchase: ${occurrence.confirmedBy}`);
+      }
+      const price = purchase?.total ?? occurrence.amount;
+      return roundMoney(sum + toBase(price, dataset.settings.baseCurrency, dataset.fxRates, digits), digits);
+    }, 0);
+
+  const rootItems = childrenOf(null);
+  return {
+    roots: rootItems.filter(node => node.kind === "folder"),
+    unfiled: rootItems.filter(node => node.kind !== "folder"),
+  };
+}
diff --git a/src/domain/index.ts b/src/domain/index.ts
index ed838dc..7104a7e 100644
--- a/src/domain/index.ts
+++ b/src/domain/index.ts
@@ -10,5 +10,6 @@ export * from "./charges.ts";
 export * from "./occurrences.ts";
 export * from "./fold.ts";
 export * from "./views.ts";
+export * from "./budgetTree.ts";
 export * from "./seed.ts";
 export * from "./plans.ts";
diff --git a/src/domain/occurrences.test.ts b/src/domain/occurrences.test.ts
index 2660298..b55702f 100644
--- a/src/domain/occurrences.test.ts
+++ b/src/domain/occurrences.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import { occurrencesByMonth, occurrencesOf, stepFrom } from "./occurrences.ts";
+import { nextUnconfirmedOccurrenceOnOrAfter, occurrencesByMonth, occurrencesOf, stepFrom } from "./occurrences.ts";
 import type { Dataset, Purchase, RecurringCost } from "./types.ts";
 
 function cost(overrides: Partial<RecurringCost> = {}): RecurringCost {
@@ -287,3 +287,31 @@ describe("occurrencesByMonth", () => {
     expect(byMonth.has("2026-02")).toBe(false);
   });
 });
+
+test("next slot exceeds preview horizon", () => {
+  const data: Dataset = {
+    settings: { baseCurrency: "DKK", foldStartMonth: "2026-01", schemaVersion: 8, digits: 2 },
+    currencies: [{ code: "DKK", symbol: "kr", name: "Danish krone" }],
+    fxRates: [], folders: [], posts: [], months: [], purchases: [],
+    recurring: [cost({ startDate: "2026-01", recurrence: { kind: "everyNMonths", n: 24 } })],
+  };
+  expect(nextUnconfirmedOccurrenceOnOrAfter(data, "r1", "2026-02")?.date).toBe("2028-01");
+  data.recurring[0]!.endedFrom = "2027-01";
+  expect(nextUnconfirmedOccurrenceOnOrAfter(data, "r1", "2026-02")).toBeNull();
+});
+
+test("next-slot lookup rejects a recurrence that does not advance", () => {
+  const data: Dataset = {
+    settings: { baseCurrency: "DKK", foldStartMonth: "2026-01", schemaVersion: 8, digits: 2 },
+    currencies: [{ code: "DKK", symbol: "kr", name: "Danish krone" }],
+    fxRates: [], folders: [], posts: [], months: [], purchases: [],
+    recurring: [cost({ startDate: "2026-01-01", recurrence: { kind: "everyNDays", n: 0 } })],
+  };
+  expect(() => nextUnconfirmedOccurrenceOnOrAfter(data, "r1", "2026-01")).toThrow(/did not advance/);
+});
+
+test("bounded projection ignores invalid confirmations beyond its requested month", () => {
+  const phone = cost({ startDate: "2026-01-01", recurrence: { kind: "everyNDays", n: 30 }, anchoring: "lastCharge" });
+  const future = new Map([["2026-03-02", confirmation("2026-03-02", "2025-11-02", "bad")]]);
+  expect(occurrencesOf(phone, future, "2026-02").map(slot => slot.date)).toEqual(["2026-01-01", "2026-01-31"]);
+});
diff --git a/src/domain/occurrences.ts b/src/domain/occurrences.ts
index 3462c44..f9d48ea 100644
--- a/src/domain/occurrences.ts
+++ b/src/domain/occurrences.ts
@@ -141,24 +141,26 @@ export function occurrencesOf(
   confirmations: ReadonlyMap<IsoDate, Purchase>,
   upToMonth: MonthId,
 ): Occurrence[] {
-  const found: Occurrence[] = [];
+  return [...occurrenceWalk(cost, confirmations, upToMonth)];
+}
+
+/** The same walk serves bounded month projections and unbounded next-slot lookup. */
+function* occurrenceWalk(
+  cost: RecurringCost,
+  confirmations: ReadonlyMap<IsoDate, Purchase>,
+  upToMonth?: MonthId,
+): Generator<Occurrence> {
 
   // A monthly cost is month-granular throughout, even if its start date was
   // typed with a day. Rent occurs IN a month.
   let cursor =
     cost.recurrence.kind === "everyNMonths" ? monthOf(cost.startDate) : cost.startDate;
 
-  while (compareMonths(monthOf(cursor), upToMonth) <= 0) {
+  while (true) {
+    if (upToMonth && compareMonths(monthOf(cursor), upToMonth) > 0) break;
     if (cost.endedFrom && !isBefore(cursor, cost.endedFrom)) break;
 
     const confirmation = confirmations.get(cursor) ?? null;
-    found.push({
-      recurringId: cost.id,
-      date: cursor,
-      amount: cost.amount,
-      confirmedBy: confirmation?.id ?? null,
-    });
-
     // `lastCharge` measures from when the money ACTUALLY moved, which is what
     // makes an early charge rebase the series. An unconfirmed occurrence steps
     // from its own projected date: the projection assumes bills are paid on
@@ -194,10 +196,31 @@ export function occurrencesOf(
             : `A recurrence must move strictly forward; check that n is at least 1.`),
       );
     }
+    yield {
+      recurringId: cost.id,
+      date: cursor,
+      amount: cost.amount,
+      confirmedBy: confirmation?.id ?? null,
+    };
     cursor = next;
   }
+}
 
-  return found;
+/** First still-open slot in or after the requested month, without a preview cutoff. */
+export function nextUnconfirmedOccurrenceOnOrAfter(
+  dataset: Dataset,
+  recurringId: RecurringCostId,
+  monthId: MonthId,
+): Occurrence | null {
+  const cost = dataset.recurring.find(item => item.id === recurringId);
+  if (!cost) return null;
+  const confirmations = confirmationsFor(dataset.purchases, recurringId);
+  for (const occurrence of occurrenceWalk(cost, confirmations)) {
+    if (compareMonths(monthOf(occurrence.date), monthId) >= 0 && !occurrence.confirmedBy) {
+      return occurrence;
+    }
+  }
+  return null;
 }
 
 /**

From 6de115843bf709b680d5f8f3aed963c91ec879ef Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Tue, 29 Sep 2026 20:49:18 +0200
Subject: [PATCH 13/27] feat: choose recurring bill destinations

---
 src/store/actions.test.ts                     | 62 +++++++++++++
 src/store/actions.ts                          | 26 ++++++
 .../components/RecurringSplitEditor.test.tsx  | 30 +++++++
 src/ui/components/RecurringSplitEditor.tsx    | 60 +++++++++++++
 ...tion.test.ts => RecurringSection.test.tsx} | 72 +++++++++++++++
 src/ui/routes/settings/RecurringSection.tsx   | 88 ++++++++++++++-----
 6 files changed, 318 insertions(+), 20 deletions(-)
 create mode 100644 src/ui/components/RecurringSplitEditor.test.tsx
 create mode 100644 src/ui/components/RecurringSplitEditor.tsx
 rename src/ui/routes/settings/{RecurringSection.test.ts => RecurringSection.test.tsx} (51%)

diff --git a/src/store/actions.test.ts b/src/store/actions.test.ts
index e9ac285..244563f 100644
--- a/src/store/actions.test.ts
+++ b/src/store/actions.test.ts
@@ -2,6 +2,8 @@ import { test, expect, describe } from "bun:test";
 import * as actions from "./actions.ts";
 import { createSeedDataset } from "../domain/seed.ts";
 import { occurrencesByMonth } from "../domain/occurrences.ts";
+import { monthView } from "../domain/views.ts";
+import { createSnapshotStore } from "./snapshot.ts";
 import { exportDatasetJson, parseDatasetJson } from "../export/json.ts";
 import type { Dataset } from "../domain/types.ts";
 
@@ -570,6 +572,66 @@ describe("recurring costs", () => {
     splits: [{ postId: "housing", value: 100, absorbsRemainder: true }],
   };
 
+  test("dedicated post and bill save together", () => {
+    const data = draft();
+    const folder = actions.addBudgetFolder(data, "Housing", null);
+    const bill = actions.addRecurringCostWithPost(data, {
+      name: "Rent", folderId: folder.id, archived: false,
+      amount: { amount: 8000, currency: "DKK" }, startDate: "2026-09",
+      recurrence: { kind: "everyNMonths", n: 1 }, anchoring: "calendar",
+    }, "Rent post");
+    const post = data.posts.find(p => p.id === bill.splits[0]!.postId)!;
+    expect(post.name).toBe("Rent post");
+    expect(post.folderId).toBe(folder.id);
+    expect(bill.folderId).toBe(folder.id);
+    expect(bill.splits).toEqual([{ postId: post.id, value: 100, absorbsRemainder: true }]);
+  });
+
+  test("a rejected store mutation leaves neither dedicated record", async () => {
+    const data = draft();
+    let writes = 0;
+    const snapshot = createSnapshotStore({ read: async () => data, write: async () => { writes++; throw new Error("Disk full"); } }, "2026-01");
+    await snapshot.load();
+    await expect(snapshot.mutate(draft => {
+      actions.addRecurringCostWithPost(draft, {
+        name: "Rent", folderId: null, archived: false,
+        amount: { amount: 8000, currency: "DKK" }, startDate: "2026-09",
+        recurrence: { kind: "everyNMonths", n: 1 }, anchoring: "calendar",
+      }, "Rent post");
+    })).rejects.toThrow("Disk full");
+    expect(writes).toBe(1);
+    expect(snapshot.get().posts.some(post => post.name === "Rent post")).toBe(false);
+    expect(snapshot.get().recurring).toHaveLength(0);
+  });
+
+  test("editing split mode, values and absorber moves projected figures", () => {
+    const data = draft();
+    const other = data.posts[1]!;
+    const bill = actions.addRecurringCost(data, { ...rentInput, amount: { amount: 30, currency: "DKK" }, startDate: "2026-09" });
+    expect(monthView(data, "2026-09").rows.find(row => row.post.id === "housing")!.figures.expected).toBe(30);
+    actions.updateRecurringCost(data, bill.id, {
+      splitMode: "fixed",
+      splits: [
+        { postId: "housing", value: 10, absorbsRemainder: false },
+        { postId: other.id, value: 0, absorbsRemainder: true },
+      ],
+    });
+    expect(bill.splitMode).toBe("fixed");
+    expect(bill.splits.map(split => split.absorbsRemainder)).toEqual([false, true]);
+    expect(monthView(data, "2026-09").rows.find(row => row.post.id === "housing")!.figures.expected).toBe(10);
+    expect(monthView(data, "2026-09").rows.find(row => row.post.id === other.id)!.figures.expected).toBe(20);
+  });
+
+  test("recurring split destinations must be active posts", () => {
+    const data = draft();
+    data.posts[1]!.archived = true;
+    expect(() => actions.addRecurringCost(data, { ...rentInput, splits: [{ postId: "ghost", value: 100, absorbsRemainder: true }] })).toThrow(/post/i);
+    expect(() => actions.addRecurringCost(data, { ...rentInput, splits: [{ postId: data.posts[1]!.id, value: 100, absorbsRemainder: true }] })).toThrow(/archived/i);
+    const bill = actions.addRecurringCost(data, rentInput);
+    expect(() => actions.updateRecurringCost(data, bill.id, { splits: [{ postId: "ghost", value: 100, absorbsRemainder: true }] })).toThrow(/post/i);
+    expect(bill.splits).toEqual(rentInput.splits);
+  });
+
   test("adding assigns an id and an order", () => {
     const data = draft();
     const first = actions.addRecurringCost(data, rentInput);
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 68a23fe..1d7be5e 100755
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -176,6 +176,14 @@ function roundSplits(
   }));
 }
 
+function requireRecurringSplitDestinations(draft: Dataset, splits: Split[]): void {
+  if (splits.length === 0) throw new Error("A bill needs a destination post");
+  for (const split of splits) {
+    const post = requirePost(draft, split.postId);
+    if (post.archived) throw new Error(`Post ${post.name} is archived`);
+  }
+}
+
 function roundSchedule(draft: Dataset, schedule: Schedule | null): Schedule | null {
   if (!schedule) return null;
   return {
@@ -573,6 +581,7 @@ export function addRecurringCost(
   const recurrence = requireRecurrence(cost.recurrence);
   requireStartDateGranularity(recurrence, cost.startDate);
   if (cost.folderId !== null) requireFolder(draft, cost.folderId);
+  requireRecurringSplitDestinations(draft, cost.splits);
   const created: RecurringCost = {
     ...cost,
     id: newId(),
@@ -585,6 +594,22 @@ export function addRecurringCost(
   return created;
 }
 
+/** Creates the dedicated envelope and its bill in one store mutation. */
+export function addRecurringCostWithPost(
+  draft: Dataset,
+  cost: Omit<RecurringCost, "id" | "order" | "splits" | "splitMode">,
+  newPostName: string,
+): RecurringCost {
+  const name = newPostName.trim();
+  if (!name) throw new Error("Post name cannot be blank");
+  const post = addPost(draft, name, cost.amount.currency, cost.folderId);
+  return addRecurringCost(draft, {
+    ...cost,
+    splitMode: "percent",
+    splits: [{ postId: post.id, value: 100, absorbsRemainder: true }],
+  });
+}
+
 /**
  * `archived` and `endedFrom` are excluded on purpose: they are a coherent
  * pair (`archived` mirrors "`endedFrom` is set") maintained ONLY by
@@ -617,6 +642,7 @@ export function updateRecurringCost(
     resolved.amount = roundMoneyValue(draft, changes.amount);
   }
   if (changes.splits) {
+    requireRecurringSplitDestinations(draft, changes.splits);
     // Either field may be absent from a partial update; the stored cost
     // supplies whichever one is, so the mode and currency always agree with
     // the values being rounded.
diff --git a/src/ui/components/RecurringSplitEditor.test.tsx b/src/ui/components/RecurringSplitEditor.test.tsx
new file mode 100644
index 0000000..abfc8bc
--- /dev/null
+++ b/src/ui/components/RecurringSplitEditor.test.tsx
@@ -0,0 +1,30 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+import { expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { createSeedDataset } from "../../domain/seed.ts";
+import { RecurringSplitEditor, type RecurringSplitSelection } from "./RecurringSplitEditor.tsx";
+
+test("bill can split across active posts", () => {
+  const data = createSeedDataset("2026-09");
+  data.posts[0]!.archived = true;
+  const active = data.posts.filter(post => !post.archived);
+  let selection: RecurringSplitSelection = { splitMode: "percent", splits: [{ postId: active[0]!.id, value: 100, absorbsRemainder: true }] };
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  const render = () => root.render(<RecurringSplitEditor {...selection} posts={active} onChange={next => { selection = next; render(); }} />);
+  act(render);
+  expect(container.querySelector(`option[value="${data.posts[0]!.id}"]`)).toBeNull();
+  act(() => { (Array.from(container.querySelectorAll("button")).find(button => button.textContent?.includes("Add another post"))!).click(); });
+  expect(selection.splits).toHaveLength(2);
+  const selects = container.querySelectorAll("select");
+  act(() => { selects[2]!.value = active[1]!.id; selects[2]!.dispatchEvent(new Event("change", { bubbles: true })); });
+  const radios = container.querySelectorAll('input[type="radio"]');
+  act(() => { (radios[1] as HTMLInputElement).click(); });
+  expect(selection.splits.map(split => split.postId)).toEqual([active[0]!.id, active[1]!.id]);
+  expect(selection.splits.map(split => split.absorbsRemainder)).toEqual([false, true]);
+  act(() => root.unmount());
+});
diff --git a/src/ui/components/RecurringSplitEditor.tsx b/src/ui/components/RecurringSplitEditor.tsx
new file mode 100644
index 0000000..7fd41c1
--- /dev/null
+++ b/src/ui/components/RecurringSplitEditor.tsx
@@ -0,0 +1,60 @@
+import { Button } from "@/components/ui/button";
+import { useId } from "react";
+import { Input } from "@/components/ui/input";
+import { NativeSelect } from "@/components/ui/native-select";
+import type { Post, RecurringCost, Split } from "../../domain/types.ts";
+
+export type RecurringSplitSelection = Pick<RecurringCost, "splitMode" | "splits">;
+
+interface Props extends RecurringSplitSelection {
+  posts: Post[];
+  onChange: (next: RecurringSplitSelection) => void;
+}
+
+export function RecurringSplitEditor({ splitMode, splits, posts, onChange }: Props) {
+  const absorberGroup = useId();
+  function changeSplit(index: number, changes: Partial<Split>) {
+    onChange({ splitMode, splits: splits.map((split, i) => i === index ? { ...split, ...changes } : split) });
+  }
+
+  return (
+    <fieldset className="space-y-2">
+      <legend className="text-sm font-medium">Destination posts</legend>
+      {splits.length > 1 && (
+        <NativeSelect aria-label="Split by" value={splitMode} onChange={event => {
+          const mode = event.target.value as RecurringCost["splitMode"];
+          onChange({ splitMode: mode, splits: splits.map((split, index) => ({ ...split, value: mode === "percent" && index === 0 ? 100 : 0 })) });
+        }}>
+          <option value="percent">Percentages</option>
+          <option value="fixed">Amounts</option>
+        </NativeSelect>
+      )}
+      {splits.map((split, index) => (
+        <div key={index} className="flex flex-wrap items-center gap-2">
+          <NativeSelect
+            aria-label={index === 0 ? "Destination post" : `Destination post ${index + 1}`}
+            className="min-w-36 flex-1"
+            value={split.postId}
+            onChange={event => changeSplit(index, { postId: event.target.value })}
+          >
+            <option value="">Choose a post…</option>
+            {posts.map(post => <option key={post.id} value={post.id}>{post.name}</option>)}
+          </NativeSelect>
+          {splits.length > 1 && (
+            <>
+              <Input aria-label={`Split value ${index + 1}`} type="number" step="0.01" className="w-24" value={split.value} onChange={event => changeSplit(index, { value: Number(event.target.value) || 0 })} />
+              <span className="text-xs text-budget-ink-muted">{splitMode === "percent" ? "%" : "amount"}</span>
+              <label className="flex items-center gap-1 text-xs"><input type="radio" name={absorberGroup} checked={split.absorbsRemainder} onChange={() => onChange({ splitMode, splits: splits.map((item, i) => ({ ...item, absorbsRemainder: i === index })) })} />rounding</label>
+              <Button type="button" size="xs" variant="ghost" onClick={() => {
+                const remaining = splits.filter((_, i) => i !== index);
+                if (!remaining.some(item => item.absorbsRemainder)) remaining[0] = { ...remaining[0]!, absorbsRemainder: true };
+                onChange({ splitMode, splits: remaining });
+              }}>remove</Button>
+            </>
+          )}
+        </div>
+      ))}
+      <Button type="button" size="sm" variant="outline" onClick={() => onChange({ splitMode, splits: [...splits, { postId: "", value: 0, absorbsRemainder: false }] })}>Add another post</Button>
+    </fieldset>
+  );
+}
diff --git a/src/ui/routes/settings/RecurringSection.test.ts b/src/ui/routes/settings/RecurringSection.test.tsx
similarity index 51%
rename from src/ui/routes/settings/RecurringSection.test.ts
rename to src/ui/routes/settings/RecurringSection.test.tsx
index c276506..3532edc 100644
--- a/src/ui/routes/settings/RecurringSection.test.ts
+++ b/src/ui/routes/settings/RecurringSection.test.tsx
@@ -1,5 +1,77 @@
 import { describe, expect, test } from "bun:test";
 import { isValidEndedFrom, isValidStartDate, normalizedStartDateFor } from "./RecurringSection.tsx";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { createSeedDataset } from "../../../domain/seed.ts";
+import { store } from "../../../store/index.ts";
+import { addRecurringCost } from "../../../store/actions.ts";
+import { RecurringSection } from "./RecurringSection.tsx";
+
+test("bill requires an explicit destination", async () => {
+  const data = createSeedDataset("2026-09");
+  data.posts[0]!.archived = true;
+  const original = { get: store.get, subscribe: store.subscribe, mutate: store.mutate };
+  store.get = () => data;
+  store.subscribe = () => () => {};
+  store.mutate = async change => { change(data); };
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  document.body.append(container);
+  try {
+    act(() => root.render(<RecurringSection />));
+    const name = container.querySelector('input[placeholder="New cost name"]') as HTMLInputElement;
+    act(() => { name.focus(); Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(name, "Phone"); name.dispatchEvent(new InputEvent("input", { bubbles: true, data: "Phone", inputType: "insertText" })); });
+    const add = Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Add recurring cost")!;
+    expect(add.disabled).toBe(true);
+    const chosen = data.posts[1]!;
+    const destination = container.querySelector('select[aria-label="Destination post"]') as HTMLSelectElement;
+    expect(destination.querySelector(`option[value="${data.posts[0]!.id}"]`)).toBeNull();
+    act(() => { destination.value = chosen.id; destination.dispatchEvent(new Event("change", { bubbles: true })); });
+    const amount = container.querySelector('input[aria-label="New bill amount"]') as HTMLInputElement;
+    act(() => { Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(amount, "30$"); amount.dispatchEvent(new InputEvent("input", { bubbles: true, data: "30$", inputType: "insertText" })); });
+    expect(add.disabled).toBe(false);
+    await act(async () => { add.click(); });
+    const saved = data.recurring[0]!;
+    expect(saved.splits[0]!.postId).toBe(chosen.id);
+    expect(saved.amount).toEqual({ amount: 30, currency: "USD" });
+  } finally {
+    act(() => root.unmount()); container.remove();
+    store.get = original.get; store.subscribe = original.subscribe; store.mutate = original.mutate;
+  }
+});
+
+test("failed destination edit keeps its editor and error visible", async () => {
+  const data = createSeedDataset("2026-09");
+  const cost = addRecurringCost(data, {
+    name: "Phone", folderId: null, archived: false,
+    amount: { amount: 30, currency: "DKK" }, startDate: "2026-09",
+    recurrence: { kind: "everyNMonths", n: 1 }, anchoring: "calendar",
+    splitMode: "percent", splits: [{ postId: data.posts[0]!.id, value: 100, absorbsRemainder: true }],
+  });
+  const original = { get: store.get, subscribe: store.subscribe, mutate: store.mutate };
+  store.get = () => data;
+  store.subscribe = () => () => {};
+  store.mutate = async () => { throw new Error("Disk full"); };
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  document.body.append(container);
+  try {
+    act(() => root.render(<RecurringSection />));
+    const edit = container.querySelector(`#bill-${cost.id}`) as HTMLButtonElement;
+    expect(edit).not.toBeNull();
+    act(() => edit.click());
+    await act(async () => { (Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Save destinations")!).click(); });
+    expect(container.textContent).toContain("Save destinations");
+    expect(container.querySelector('[role="alert"]')?.textContent).toContain("Disk full");
+    expect(cost.splits[0]!.postId).toBe(data.posts[0]!.id);
+  } finally {
+    act(() => root.unmount()); container.remove();
+    store.get = original.get; store.subscribe = original.subscribe; store.mutate = original.mutate;
+  }
+});
 
 // C2: the "Starts" field must never be able to persist an empty or
 // malformed value — `isValidStartDate` is the guard the onBlur handler uses
diff --git a/src/ui/routes/settings/RecurringSection.tsx b/src/ui/routes/settings/RecurringSection.tsx
index b4f8072..8f7108a 100644
--- a/src/ui/routes/settings/RecurringSection.tsx
+++ b/src/ui/routes/settings/RecurringSection.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { Fragment, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { NativeSelect } from "@/components/ui/native-select";
@@ -6,6 +6,7 @@ import { useDataset } from "../../hooks/useDataset.ts";
 import { useMutate } from "../../hooks/useMutate.ts";
 import {
   addRecurringCost,
+  addRecurringCostWithPost,
   endRecurringCost,
   moveRecurringCost,
   restoreRecurringCost,
@@ -15,6 +16,7 @@ import {
 import { parseMoneyInput } from "../../moneyInput.ts";
 import { currentMonth } from "../../../store/index.ts";
 import { Section } from "../../components/Section.tsx";
+import { RecurringSplitEditor, type RecurringSplitSelection } from "../../components/RecurringSplitEditor.tsx";
 import { monthOf } from "../../../domain/months.ts";
 import { toDayOrdinal } from "../../../domain/days.ts";
 import type { IsoDate, Recurrence, RecurringCost } from "../../../domain/types.ts";
@@ -97,9 +99,18 @@ export function RecurringSection() {
   const dataset = useDataset();
   const { mutate, error } = useMutate();
   const [newName, setNewName] = useState("");
+  const [newAmount, setNewAmount] = useState("0");
+  const [destinationKind, setDestinationKind] = useState<"existing" | "dedicated">("existing");
+  const [newPostName, setNewPostName] = useState("");
+  const [folderId, setFolderId] = useState<string | null>(null);
+  const [newSelection, setNewSelection] = useState<RecurringSplitSelection>({ splitMode: "percent", splits: [{ postId: "", value: 100, absorbsRemainder: true }] });
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editSelection, setEditSelection] = useState<RecurringSplitSelection | null>(null);
   const ordered = [...dataset.recurring].sort((a, b) => a.order - b.order);
   const base = dataset.settings.baseCurrency;
-  const firstPost = [...dataset.posts].sort((a, b) => a.order - b.order)[0];
+  const activePosts = dataset.posts.filter(post => !post.archived).sort((a, b) => a.order - b.order);
+  const parsedNewAmount = parseMoneyInput(newAmount, dataset.currencies, base);
+  const validNewSplits = newSelection.splits.length > 0 && newSelection.splits.every(split => activePosts.some(post => post.id === split.postId));
 
   function amountCell(cost: RecurringCost) {
     return (
@@ -222,9 +233,9 @@ export function RecurringSection() {
               </tr>
             </thead>
             <tbody>
-              {ordered.map((cost, index) => (
+              {ordered.map((cost, index) => (<Fragment key={cost.id}>
                 <tr
-                  key={cost.id}
+                  data-bill-id={cost.id}
                   className={`border-b last:border-0 ${cost.archived ? "opacity-50" : ""}`}
                 >
                   <td className="py-2">
@@ -310,6 +321,10 @@ export function RecurringSection() {
                   </td>
                   <td className="py-2">
                     <div className="flex items-center justify-end gap-1">
+                      <Button id={`bill-${cost.id}`} size="xs" variant="ghost" onClick={() => {
+                        setEditingId(cost.id);
+                        setEditSelection({ splitMode: cost.splitMode, splits: cost.splits.map(split => ({ ...split })) });
+                      }}>Edit</Button>
                       <Button
                         size="xs"
                         variant="ghost"
@@ -343,7 +358,21 @@ export function RecurringSection() {
                     </div>
                   </td>
                 </tr>
-              ))}
+                {editingId === cost.id && editSelection && (
+                  <tr key={`${cost.id}-editor`}><td colSpan={7} className="py-3">
+                    <div className="space-y-3 rounded-md border border-budget-rule p-3">
+                      <RecurringSplitEditor {...editSelection} posts={activePosts} onChange={setEditSelection} />
+                      <div className="flex gap-2">
+                        <Button size="sm" disabled={!editSelection.splits.every(split => activePosts.some(post => post.id === split.postId))} onClick={() => {
+                          const selected = { splitMode: editSelection.splitMode, splits: editSelection.splits.map(split => ({ ...split })) };
+                          void mutate(draft => updateRecurringCost(draft, cost.id, selected)).then(saved => { if (saved) setEditingId(null); });
+                        }}>Save destinations</Button>
+                        <Button size="sm" variant="outline" onClick={() => setEditingId(null)}>Cancel</Button>
+                      </div>
+                    </div>
+                  </td></tr>
+                )}
+              </Fragment>))}
             </tbody>
           </table>
         </div>
@@ -363,35 +392,54 @@ export function RecurringSection() {
           className="w-48"
           placeholder="New cost name"
           value={newName}
-          onChange={(event) => setNewName(event.target.value)}
+          onInput={(event) => setNewName(event.currentTarget.value)}
         />
+        <Input className="w-28" type="text" aria-label="New bill amount" value={newAmount} onInput={event => setNewAmount(event.currentTarget.value)} />
+        <NativeSelect aria-label="Bill folder" value={folderId ?? ""} onChange={event => setFolderId(event.target.value || null)}>
+          <option value="">Unfiled</option>
+          {dataset.folders.map(folder => <option key={folder.id} value={folder.id}>{folder.name}</option>)}
+        </NativeSelect>
+        <NativeSelect aria-label="Destination type" value={destinationKind} onChange={event => setDestinationKind(event.target.value as "existing" | "dedicated")}>
+          <option value="existing">Use existing post</option>
+          <option value="dedicated">Create dedicated post</option>
+        </NativeSelect>
+        {destinationKind === "dedicated" ? (
+          <Input aria-label="Dedicated post name" placeholder="New post name" value={newPostName} onChange={event => setNewPostName(event.target.value)} />
+        ) : (
+          <RecurringSplitEditor {...newSelection} posts={activePosts} onChange={setNewSelection} />
+        )}
         <Button
           variant="outline"
-          disabled={newName.trim() === "" || !firstPost}
+          disabled={newName.trim() === "" || !parsedNewAmount || (destinationKind === "dedicated" ? !newPostName.trim() : !validNewSplits)}
           onClick={() => {
             const name = newName.trim();
-            void mutate((draft) =>
-              addRecurringCost(draft, {
+            const amount = parsedNewAmount;
+            if (!amount) return;
+            const selectedFolder = folderId;
+            const selectedKind = destinationKind;
+            const dedicatedName = newPostName.trim();
+            const selectedSplits = newSelection.splits.map(split => ({ ...split }));
+            const selectedMode = newSelection.splitMode;
+            void mutate((draft) => {
+              const input = {
                 name,
-                folderId: null,
+                folderId: selectedFolder,
                 archived: false,
-                amount: { amount: 0, currency: base },
+                amount,
                 startDate: currentMonth,
-                recurrence: { kind: "everyNMonths", n: 1 },
-                anchoring: "calendar",
-                splitMode: "percent",
-                splits: [{ postId: firstPost!.id, value: 100, absorbsRemainder: true }],
-              }),
+                recurrence: { kind: "everyNMonths" as const, n: 1 },
+                anchoring: "calendar" as const,
+              };
+              if (selectedKind === "dedicated") addRecurringCostWithPost(draft, input, dedicatedName);
+              else addRecurringCost(draft, { ...input, splitMode: selectedMode, splits: selectedSplits });
+            },
             ).then((saved) => {
-              if (saved) setNewName("");
+              if (saved) { setNewName(""); setNewPostName(""); setNewAmount("0"); setNewSelection({ splitMode: "percent", splits: [{ postId: "", value: 100, absorbsRemainder: true }] }); }
             });
           }}
         >
           Add recurring cost
         </Button>
-        {!firstPost && (
-          <span className="text-xs text-budget-ink-muted">Create a post first.</span>
-        )}
       </div>
     </Section>
   );

From 725c836788df03ad0420cdbcc44262b29b8567b8 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 00:35:45 +0200
Subject: [PATCH 14/27] feat: organize posts and bills in settings

---
 src/ui/routes/SettingsRoute.tsx               |  2 +
 .../settings/BudgetFoldersSection.test.tsx    | 69 ++++++++++++++++
 .../routes/settings/BudgetFoldersSection.tsx  | 81 +++++++++++++++++++
 src/ui/routes/settings/PostsSection.tsx       | 16 +---
 src/ui/routes/settings/RecurringSection.tsx   | 20 +----
 5 files changed, 157 insertions(+), 31 deletions(-)
 create mode 100644 src/ui/routes/settings/BudgetFoldersSection.test.tsx
 create mode 100644 src/ui/routes/settings/BudgetFoldersSection.tsx

diff --git a/src/ui/routes/SettingsRoute.tsx b/src/ui/routes/SettingsRoute.tsx
index cb3becf..83928a6 100644
--- a/src/ui/routes/SettingsRoute.tsx
+++ b/src/ui/routes/SettingsRoute.tsx
@@ -1,4 +1,5 @@
 import { CurrencySection } from "./settings/CurrencySection.tsx";
+import { BudgetFoldersSection } from "./settings/BudgetFoldersSection.tsx";
 import { PostsSection } from "./settings/PostsSection.tsx";
 import { RecurringSection } from "./settings/RecurringSection.tsx";
 import { DataSection } from "./settings/DataSection.tsx";
@@ -21,6 +22,7 @@ export function SettingsRoute() {
     <div className="space-y-5">
       <h1 className="text-2xl">Settings</h1>
       <CurrencySection />
+      <BudgetFoldersSection />
       <PostsSection />
       <RecurringSection />
       <DataSection />
diff --git a/src/ui/routes/settings/BudgetFoldersSection.test.tsx b/src/ui/routes/settings/BudgetFoldersSection.test.tsx
new file mode 100644
index 0000000..b68aae2
--- /dev/null
+++ b/src/ui/routes/settings/BudgetFoldersSection.test.tsx
@@ -0,0 +1,69 @@
+import { expect, test } from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { createSeedDataset } from "../../../domain/seed.ts";
+import { store } from "../../../store/index.ts";
+import { addBudgetFolder, addRecurringCost } from "../../../store/actions.ts";
+import { BudgetFoldersSection } from "./BudgetFoldersSection.tsx";
+
+async function setup(run: (container: HTMLDivElement, data: ReturnType<typeof createSeedDataset>) => Promise<void>, fail = false) {
+  let data = createSeedDataset("2026-09");
+  const housing = addBudgetFolder(data, "Housing", null);
+  addBudgetFolder(data, "Utilities", housing.id);
+  addRecurringCost(data, { name: "Phone", folderId: null, archived: false, amount: { amount: 30, currency: "USD" }, startDate: "2026-09", recurrence: { kind: "everyNMonths", n: 1 }, anchoring: "calendar", splitMode: "percent", splits: [{ postId: data.posts[0]!.id, value: 100, absorbsRemainder: true }] });
+  data.fxRates = [];
+  const original = { get: store.get, subscribe: store.subscribe, mutate: store.mutate };
+  const listeners = new Set<() => void>();
+  store.get = () => data;
+  store.subscribe = fn => { listeners.add(fn); return () => listeners.delete(fn); };
+  store.mutate = async change => { if (fail) throw new Error("Disk full"); const draft = structuredClone(data); change(draft); data = draft; listeners.forEach(fn => fn()); };
+  const container = document.createElement("div"); document.body.append(container);
+  const root = createRoot(container);
+  try { act(() => root.render(<BudgetFoldersSection />)); await run(container, data); }
+  finally { act(() => root.unmount()); container.remove(); Object.assign(store, original); }
+}
+function select(container: HTMLDivElement, label: string, value: string) {
+  const field = container.querySelector(`select[aria-label="${label}"]`) as HTMLSelectElement;
+  field.value = value; field.dispatchEvent(new Event("change", { bubbles: true }));
+}
+function input(container: HTMLDivElement, label: string, value: string) {
+  const field = container.querySelector(`input[aria-label="${label}"]`) as HTMLInputElement;
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(field, value);
+  field.dispatchEvent(new InputEvent("input", { bubbles: true }));
+}
+test("nested folder can be created and renamed", async () => setup(async (container, data) => {
+  const housing = data.folders[0]!;
+  const parent = container.querySelector('select[aria-label="Folder for Housing"]')!;
+  expect(parent.querySelector(`option[value="${housing.id}"]`)).toBeNull();
+  expect(parent.querySelector(`option[value="${data.folders[1]!.id}"]`)).toBeNull();
+  act(() => { input(container, "New folder name", "Services"); select(container, "New folder parent", housing.id); });
+  await act(async () => { Array.from(container.querySelectorAll("button")).find(b => b.textContent === "Add folder")!.click(); });
+  const services = store.get().folders.find(f => f.name === "Services")!;
+  expect(services.parentId).toBe(housing.id);
+  await act(async () => { input(container, "Name for Services", "Household"); });
+  expect(store.get().folders.find(f => f.id === services.id)!.name).toBe("Household");
+  await act(async () => { select(container, "Folder for Utilities", ""); });
+  expect(store.get().folders[1]!.parentId).toBeNull();
+}));
+test("post and bill move independently", async () => setup(async (container, data) => {
+  const housing = data.folders[0]!, utilities = data.folders[1]!;
+  const post = data.posts[0]!, bill = data.recurring[0]!;
+  await act(async () => { select(container, `Folder for ${post.name}`, housing.id); });
+  await act(async () => { select(container, "Folder for Phone", utilities.id); });
+  expect(store.get().posts[0]!.folderId).toBe(housing.id);
+  expect(store.get().recurring[0]!.folderId).toBe(utilities.id);
+  expect(store.get().recurring[0]!.splits).toEqual(bill.splits);
+  await act(async () => { (container.querySelector(`button[aria-label="Move ${post.name} up"]`) as HTMLButtonElement).click(); });
+  expect(store.get().posts[0]!.order).toBe(0);
+  const rows = Array.from(container.querySelectorAll("[data-budget-item]"));
+  expect(rows.findIndex(row => row.getAttribute("data-budget-item") === post.id)).toBeLessThan(rows.findIndex(row => row.getAttribute("data-budget-item") === utilities.id));
+}));
+test("failed move reports error", async () => setup(async (container, data) => {
+  const before = JSON.stringify(data);
+  await act(async () => { select(container, `Folder for ${data.posts[0]!.name}`, data.folders[0]!.id); });
+  expect(container.querySelector('[role="alert"]')?.textContent).toContain("Disk full");
+  expect(JSON.stringify(store.get())).toBe(before);
+}, true));
diff --git a/src/ui/routes/settings/BudgetFoldersSection.tsx b/src/ui/routes/settings/BudgetFoldersSection.tsx
new file mode 100644
index 0000000..90aef2f
--- /dev/null
+++ b/src/ui/routes/settings/BudgetFoldersSection.tsx
@@ -0,0 +1,81 @@
+import { useState, type ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { NativeSelect } from "@/components/ui/native-select";
+import { Section } from "../../components/Section.tsx";
+import { useDataset } from "../../hooks/useDataset.ts";
+import { useMutate } from "../../hooks/useMutate.ts";
+import { addBudgetFolder, budgetSiblings, placeBudgetItem, renameBudgetFolder, type BudgetItemKey } from "../../../store/actions.ts";
+
+export function BudgetFoldersSection() {
+  const dataset = useDataset();
+  const { mutate, error } = useMutate();
+  const [name, setName] = useState("");
+  const [parent, setParent] = useState<string | null>(null);
+
+  function folderPath(id: string): string {
+    const folder = dataset.folders.find(folder => folder.id === id)!;
+    return folder.parentId === null ? folder.name : `${folderPath(folder.parentId)} / ${folder.name}`;
+  }
+  const folders = [...dataset.folders].sort((a, b) => folderPath(a.id).localeCompare(folderPath(b.id)));
+  function allowedDestination(key: BudgetItemKey, id: string): boolean {
+    if (key.kind !== "folder") return true;
+    let cursor: string | null = id;
+    while (cursor !== null) {
+      if (cursor === key.id) return false;
+      cursor = dataset.folders.find(folder => folder.id === cursor)!.parentId;
+    }
+    return true;
+  }
+  function children(parentId: string | null): ReactNode {
+    const siblings = budgetSiblings(dataset, parentId);
+    return <ul className="space-y-2">{siblings.map((key, index) => {
+      const item = key.kind === "folder" ? dataset.folders.find(item => item.id === key.id)! : key.kind === "post" ? dataset.posts.find(item => item.id === key.id)! : dataset.recurring.find(item => item.id === key.id)!;
+      return <li key={`${key.kind}-${key.id}`}>
+        <div data-budget-item={key.id} className="flex flex-wrap items-center gap-2 border-b border-budget-rule py-2">
+          <div className="min-w-0 flex-1 basis-40">
+            {key.kind === "folder" ? <Input className="h-8 w-full max-w-64" aria-label={`Name for ${item.name}`} value={item.name} onInput={event => {
+              const name = event.currentTarget.value;
+              if (name.trim()) void mutate(draft => renameBudgetFolder(draft, key.id, name));
+            }} /> : <span className="break-words text-sm">{item.name}</span>}
+            <span className="mt-1 block text-xs text-budget-ink-muted">{key.kind === "folder" ? "Folder" : key.kind === "post" ? "Post" : "Bill"}</span>
+          </div>
+          <NativeSelect className="h-8 w-full sm:w-56 text-xs md:text-xs" aria-label={`Folder for ${item.name}`} value={parentId ?? ""} onChange={event => {
+            const destination = event.target.value || null;
+            void mutate(draft => placeBudgetItem(draft, key, destination, budgetSiblings(draft, destination).filter(sibling => !(sibling.kind === key.kind && sibling.id === key.id)).length));
+          }}>
+            <option value="">Unfiled</option>
+            {folders.filter(folder => allowedDestination(key, folder.id)).map(folder => <option key={folder.id} value={folder.id}>{folderPath(folder.id)}</option>)}
+          </NativeSelect>
+          <div className="flex gap-1">
+            <Button size="xs" variant="ghost" aria-label={`Move ${item.name} up`} disabled={index === 0} onClick={() => void mutate(draft => {
+              const position = budgetSiblings(draft, parentId).findIndex(sibling => sibling.kind === key.kind && sibling.id === key.id);
+              placeBudgetItem(draft, key, parentId, position - 1);
+            })}>up</Button>
+            <Button size="xs" variant="ghost" aria-label={`Move ${item.name} down`} disabled={index === siblings.length - 1} onClick={() => void mutate(draft => {
+              const position = budgetSiblings(draft, parentId).findIndex(sibling => sibling.kind === key.kind && sibling.id === key.id);
+              placeBudgetItem(draft, key, parentId, position + 1);
+            })}>down</Button>
+          </div>
+        </div>
+        {key.kind === "folder" && <div className="ml-3 border-l border-budget-rule pl-3 sm:ml-5 sm:pl-5">{children(key.id)}</div>}
+      </li>;
+    })}</ul>;
+  }
+
+  return <div id="budget-folders" className="scroll-mt-5"><Section title="Budget folders" hint="Organize folders, posts, and bills together. Moving a bill keeps its destination posts and all payment history.">
+    {error && <p role="alert" className="mb-3 text-sm text-destructive">Could not save: {error}</p>}
+    <h3 className="text-sm font-medium">Top level · Unfiled</h3>
+    {children(null)}
+    <div className="mt-5 flex flex-wrap items-end gap-2 border-t border-budget-rule pt-5">
+      <label className="text-xs">Folder name<Input className="mt-1 w-48" aria-label="New folder name" value={name} onInput={event => setName(event.currentTarget.value)} /></label>
+      <label className="text-xs">Parent folder<NativeSelect className="mt-1 w-56" aria-label="New folder parent" value={parent ?? ""} onChange={event => setParent(event.target.value || null)}>
+        <option value="">Unfiled</option>{folders.map(folder => <option key={folder.id} value={folder.id}>{folderPath(folder.id)}</option>)}
+      </NativeSelect></label>
+      <Button variant="outline" disabled={!name.trim()} onClick={() => {
+        const newName = name.trim(), destination = parent;
+        void mutate(draft => { addBudgetFolder(draft, newName, destination); }).then(saved => { if (saved) setName(""); });
+      }}>Add folder</Button>
+    </div>
+  </Section></div>;
+}
diff --git a/src/ui/routes/settings/PostsSection.tsx b/src/ui/routes/settings/PostsSection.tsx
index 4b94af3..f6819b0 100644
--- a/src/ui/routes/settings/PostsSection.tsx
+++ b/src/ui/routes/settings/PostsSection.tsx
@@ -4,7 +4,7 @@ import { Input } from "@/components/ui/input";
 import { NativeSelect } from "@/components/ui/native-select";
 import { useDataset } from "../../hooks/useDataset.ts";
 import { useMutate } from "../../hooks/useMutate.ts";
-import { addPost, movePost, setPostArchived, updatePost } from "../../../store/actions.ts";
+import { addPost, setPostArchived, updatePost } from "../../../store/actions.ts";
 import type { Currency, Post } from "../../../domain/types.ts";
 import { ruleAt } from "../../../domain/allocation.ts";
 import { currentMonth } from "../../../store/index.ts";
@@ -40,6 +40,7 @@ export function PostsSection() {
       title="Posts"
       hint="A post's allocation is a dated series: each rule applies from its own month onward until the next one takes over, so changing it never rewrites what earlier months got. Click a rule to see and edit that history. A single month can still override its own allocation from the month view, and percentages may total more than 100%."
     >
+      <p className="mb-3 text-xs"><a className="underline underline-offset-2" href="#budget-folders">Move and reorder posts in Budget folders</a></p>
       {error && <p role="alert" className="mb-3 text-sm text-destructive">Could not save: {error}</p>}
       <div className="overflow-x-auto">
       <table className="w-full min-w-[36rem] text-sm">
@@ -52,7 +53,7 @@ export function PostsSection() {
           </tr>
         </thead>
         <tbody>
-          {ordered.map((post, index) => (
+          {ordered.map((post) => (
             <Fragment key={post.id}>
               <tr className={`border-b last:border-0 ${post.archived ? "opacity-50" : ""}`}>
                 <td className="py-2">
@@ -102,18 +103,7 @@ export function PostsSection() {
                   </Button>
                 </td>
                 <td className="py-2">
-                  {/* Three inline-flex siblings with nothing between them: the
-                      hover backgrounds touched, so the row read as one wide
-                      slab rather than three actions. */}
                   <div className="flex items-center justify-end gap-1">
-                    <Button size="xs" variant="ghost" disabled={index === 0}
-                      onClick={() => mutate((draft) => movePost(draft, post.id, -1))}>
-                      up
-                    </Button>
-                    <Button size="xs" variant="ghost" disabled={index === ordered.length - 1}
-                      onClick={() => mutate((draft) => movePost(draft, post.id, 1))}>
-                      down
-                    </Button>
                     <Button size="xs" variant="ghost" className="-mr-2"
                       onClick={() => mutate((draft) => setPostArchived(draft, post.id, !post.archived))}>
                       {post.archived ? "restore" : "archive"}
diff --git a/src/ui/routes/settings/RecurringSection.tsx b/src/ui/routes/settings/RecurringSection.tsx
index 8f7108a..45ea3b7 100644
--- a/src/ui/routes/settings/RecurringSection.tsx
+++ b/src/ui/routes/settings/RecurringSection.tsx
@@ -8,7 +8,6 @@ import {
   addRecurringCost,
   addRecurringCostWithPost,
   endRecurringCost,
-  moveRecurringCost,
   restoreRecurringCost,
   setRecurringCostEndedFrom,
   updateRecurringCost,
@@ -213,6 +212,7 @@ export function RecurringSection() {
       title="Recurring costs"
       hint="Bills that repeat. Each one projects forward as EXPECTED spending and is confirmed from the month view when the money actually moves — expected never touches a post's real balance. Anchoring decides where the next charge is measured from: the calendar, or the date the last one actually charged. Use the second for a bill that can charge early, like a phone plan that recharges when its data runs out."
     >
+      <p className="mb-3 text-xs"><a className="underline underline-offset-2" href="#budget-folders">Move and reorder bills in Budget folders</a></p>
       {error && <p role="alert" className="mb-3 text-sm text-destructive">Could not save: {error}</p>}
       {ordered.length === 0 ? (
         <p className="text-sm text-budget-ink-muted">
@@ -233,7 +233,7 @@ export function RecurringSection() {
               </tr>
             </thead>
             <tbody>
-              {ordered.map((cost, index) => (<Fragment key={cost.id}>
+              {ordered.map((cost) => (<Fragment key={cost.id}>
                 <tr
                   data-bill-id={cost.id}
                   className={`border-b last:border-0 ${cost.archived ? "opacity-50" : ""}`}
@@ -325,22 +325,6 @@ export function RecurringSection() {
                         setEditingId(cost.id);
                         setEditSelection({ splitMode: cost.splitMode, splits: cost.splits.map(split => ({ ...split })) });
                       }}>Edit</Button>
-                      <Button
-                        size="xs"
-                        variant="ghost"
-                        disabled={index === 0}
-                        onClick={() => mutate((draft) => moveRecurringCost(draft, cost.id, -1))}
-                      >
-                        up
-                      </Button>
-                      <Button
-                        size="xs"
-                        variant="ghost"
-                        disabled={index === ordered.length - 1}
-                        onClick={() => mutate((draft) => moveRecurringCost(draft, cost.id, 1))}
-                      >
-                        down
-                      </Button>
                       <Button
                         size="xs"
                         variant="ghost"

From e71516023538ce29253a71a0505c3575ad5b92ab Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 00:40:21 +0200
Subject: [PATCH 15/27] fix: preserve folder rename drafts until save

---
 .../settings/BudgetFoldersSection.test.tsx    | 36 ++++++++++++++++++-
 .../routes/settings/BudgetFoldersSection.tsx  | 31 +++++++++++++---
 2 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/src/ui/routes/settings/BudgetFoldersSection.test.tsx b/src/ui/routes/settings/BudgetFoldersSection.test.tsx
index b68aae2..5f1cc66 100644
--- a/src/ui/routes/settings/BudgetFoldersSection.test.tsx
+++ b/src/ui/routes/settings/BudgetFoldersSection.test.tsx
@@ -43,7 +43,9 @@ test("nested folder can be created and renamed", async () => setup(async (contai
   await act(async () => { Array.from(container.querySelectorAll("button")).find(b => b.textContent === "Add folder")!.click(); });
   const services = store.get().folders.find(f => f.name === "Services")!;
   expect(services.parentId).toBe(housing.id);
-  await act(async () => { input(container, "Name for Services", "Household"); });
+  const field = container.querySelector('input[aria-label="Name for Services"]') as HTMLInputElement;
+  act(() => { field.focus(); input(container, "Name for Services", "Household"); });
+  await act(async () => field.blur());
   expect(store.get().folders.find(f => f.id === services.id)!.name).toBe("Household");
   await act(async () => { select(container, "Folder for Utilities", ""); });
   expect(store.get().folders[1]!.parentId).toBeNull();
@@ -67,3 +69,35 @@ test("failed move reports error", async () => setup(async (container, data) => {
   expect(container.querySelector('[role="alert"]')?.textContent).toContain("Disk full");
   expect(JSON.stringify(store.get())).toBe(before);
 }, true));
+
+
+test("folder rename keeps multiple keystrokes until explicit save", async () => setup(async (container, data) => {
+  const persist = store.mutate;
+  const pending: Array<() => Promise<void>> = [];
+  store.mutate = change => new Promise<void>((resolve, reject) => {
+    pending.push(async () => { try { await persist(change); resolve(); } catch (error) { reject(error); } });
+  });
+  const field = container.querySelector('input[aria-label="Name for Housing"]') as HTMLInputElement;
+  act(() => field.focus());
+  for (const value of ["H", "Ho", "Home", "Home ", "Home bills"]) {
+    act(() => input(container, "Name for Housing", value));
+    expect(field.value).toBe(value);
+    expect(store.get().folders[0]!.name).toBe("Housing");
+  }
+  expect(pending.length).toBe(0);
+  act(() => field.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true })));
+  expect(pending.length).toBe(1);
+  expect(store.get().folders[0]!.name).toBe("Housing");
+  await act(async () => { await pending.shift()!(); });
+  expect(store.get().folders[0]!.name).toBe("Home bills");
+  expect(store.get().folders[0]!.id).toBe(data.folders[0]!.id);
+}));
+
+test("failed folder rename retains draft for retry", async () => setup(async (container) => {
+  const field = container.querySelector('input[aria-label="Name for Housing"]') as HTMLInputElement;
+  act(() => { field.focus(); input(container, "Name for Housing", "Home bills"); });
+  await act(async () => field.blur());
+  expect(container.querySelector('[role="alert"]')?.textContent).toContain("Disk full");
+  expect(store.get().folders[0]!.name).toBe("Housing");
+  expect(field.value).toBe("Home bills");
+}, true));
diff --git a/src/ui/routes/settings/BudgetFoldersSection.tsx b/src/ui/routes/settings/BudgetFoldersSection.tsx
index 90aef2f..cf1511b 100644
--- a/src/ui/routes/settings/BudgetFoldersSection.tsx
+++ b/src/ui/routes/settings/BudgetFoldersSection.tsx
@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from "react";
+import { useRef, useState, type ReactNode } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { NativeSelect } from "@/components/ui/native-select";
@@ -13,6 +13,24 @@ export function BudgetFoldersSection() {
   const [name, setName] = useState("");
   const [parent, setParent] = useState<string | null>(null);
 
+  const [folderNames, setFolderNames] = useState<Record<string, string>>({});
+  const savingNames = useRef(new Set<string>());
+
+  function saveFolderName(id: string, savedName: string) {
+    const typed = folderNames[id];
+    if (typed === undefined || typed === savedName || savingNames.current.has(id)) return;
+    savingNames.current.add(id);
+    void mutate(draft => renameBudgetFolder(draft, id, typed)).then(saved => {
+      savingNames.current.delete(id);
+      if (saved) setFolderNames(names => {
+        if (names[id] !== typed) return names;
+        const next = { ...names };
+        delete next[id];
+        return next;
+      });
+    });
+  }
+
   function folderPath(id: string): string {
     const folder = dataset.folders.find(folder => folder.id === id)!;
     return folder.parentId === null ? folder.name : `${folderPath(folder.parentId)} / ${folder.name}`;
@@ -34,9 +52,14 @@ export function BudgetFoldersSection() {
       return <li key={`${key.kind}-${key.id}`}>
         <div data-budget-item={key.id} className="flex flex-wrap items-center gap-2 border-b border-budget-rule py-2">
           <div className="min-w-0 flex-1 basis-40">
-            {key.kind === "folder" ? <Input className="h-8 w-full max-w-64" aria-label={`Name for ${item.name}`} value={item.name} onInput={event => {
-              const name = event.currentTarget.value;
-              if (name.trim()) void mutate(draft => renameBudgetFolder(draft, key.id, name));
+            {key.kind === "folder" ? <Input className="h-8 w-full max-w-64" aria-label={`Name for ${item.name}`} value={folderNames[key.id] ?? item.name} onInput={event => {
+              const typed = event.currentTarget.value;
+              setFolderNames(names => ({ ...names, [key.id]: typed }));
+            }} onBlur={() => saveFolderName(key.id, item.name)} onKeyDown={event => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                saveFolderName(key.id, item.name);
+              }
             }} /> : <span className="break-words text-sm">{item.name}</span>}
             <span className="mt-1 block text-xs text-budget-ink-muted">{key.kind === "folder" ? "Folder" : key.kind === "post" ? "Post" : "Bill"}</span>
           </div>

From d3c14857fcf8d3f22259c2844fa24d25581bcf43 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 00:50:42 +0200
Subject: [PATCH 16/27] feat: show budget folders on month page

---
 scripts/demo-data.ts                  |  8 ++++-
 src/ui/components/BudgetTree.test.tsx | 50 ++++++++++++++++++++++++++
 src/ui/components/BudgetTree.tsx      | 52 +++++++++++++++++++++++++++
 src/ui/components/PostTable.tsx       | 47 +++++++++++++++---------
 src/ui/routes/MonthRoute.tsx          |  7 ++--
 5 files changed, 143 insertions(+), 21 deletions(-)
 create mode 100644 src/ui/components/BudgetTree.test.tsx
 create mode 100644 src/ui/components/BudgetTree.tsx

diff --git a/scripts/demo-data.ts b/scripts/demo-data.ts
index 995557d..0f9c42c 100755
--- a/scripts/demo-data.ts
+++ b/scripts/demo-data.ts
@@ -25,6 +25,12 @@ const d = createSeedDataset("2026-01", FALLBACK_FX_RATES);
 const [games, food, social] = d.posts as [typeof d.posts[0], typeof d.posts[0], typeof d.posts[0]];
 const rent = actions.addPost(d, "Rent", "DKK");
 const transport = actions.addPost(d, "Transport", "DKK");
+const housing = actions.addBudgetFolder(d, "Housing", null);
+const utilities = actions.addBudgetFolder(d, "Small bills", housing.id);
+rent.folderId = housing.id;
+const smallBills = actions.addPost(d, "Household bills", "DKK");
+smallBills.folderId = utilities.id;
+for (const name of ["Internet", "Phone"]) actions.addRecurringCost(d, { name, folderId: utilities.id, archived: false, amount: { amount: name === "Internet" ? 249 : 129, currency: "DKK" }, startDate: "2026-09", recurrence: { kind: "everyNMonths", n: 1 }, anchoring: "calendar", splitMode: "percent", splits: [{ postId: smallBills.id, value: 100, absorbsRemainder: true }] });
 const savings = actions.addPost(d, "Savings", "DKK");
 
 for (let m = 1; m <= 9; m++) {
@@ -58,7 +64,7 @@ const wowSub = actions.addRecurringCost(d, {
 });
 actions.addRecurringCost(d, {
   name: "Rent",
-  folderId: null,
+  folderId: housing.id,
   archived: false,
   amount: { amount: 8200, currency: "DKK" },
   startDate: "2026-06",
diff --git a/src/ui/components/BudgetTree.test.tsx b/src/ui/components/BudgetTree.test.tsx
new file mode 100644
index 0000000..df54080
--- /dev/null
+++ b/src/ui/components/BudgetTree.test.tsx
@@ -0,0 +1,50 @@
+import { expect, test } from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { MemoryRouter } from "react-router";
+import { createSeedDataset } from "../../domain/seed.ts";
+import { addBudgetFolder, addRecurringCost, confirmOccurrence } from "../../store/actions.ts";
+import { monthView } from "../../domain/views.ts";
+import { store } from "../../store/index.ts";
+import { BudgetTree } from "./BudgetTree.tsx";
+
+function setup(run: (container: HTMLDivElement, billId: string) => void, confirm = false) {
+  const data = createSeedDataset("2026-09");
+  const housing = addBudgetFolder(data, "Housing", null);
+  const utilities = addBudgetFolder(data, "Utilities", housing.id); utilities.order = 0;
+  const post = data.posts[0]!; post.name = "Rent post"; post.folderId = housing.id; post.order = 1;
+  const bill = addRecurringCost(data, { name: "Rent bill", folderId: housing.id, archived: false, amount: { amount: 8000, currency: "DKK" }, startDate: "2026-09", recurrence: { kind: "everyNMonths", n: 18 }, anchoring: "calendar", splitMode: "percent", splits: [{ postId: post.id, value: 100, absorbsRemainder: true }] }); bill.order = 2;
+  addRecurringCost(data, { ...bill, name: "Ended bill", folderId: null, endedFrom: "2026-08" });
+  if (confirm) confirmOccurrence(data, bill.id, "2026-09", { date: "2026-09-01" });
+  const original = { get: store.get, subscribe: store.subscribe }; store.get = () => data; store.subscribe = () => () => {};
+  const container = document.createElement("div"); document.body.append(container); const root = createRoot(container);
+  try { act(() => root.render(<MemoryRouter><BudgetTree monthId="2026-09" rows={monthView(data, "2026-09").rows} /></MemoryRouter>)); run(container, bill.id); }
+  finally { act(() => root.unmount()); container.remove(); Object.assign(store, original); }
+}
+function housing(container: HTMLDivElement) { return container.querySelector('button[aria-label="Housing"]') as HTMLButtonElement; }
+test("collapsed folder keeps Bills due", () => setup(container => {
+  expect(housing(container).getAttribute("aria-expanded")).toBe("false");
+  expect(housing(container).parentElement!.textContent).toContain("8,000");
+  expect(housing(container).parentElement!.textContent).toContain("Bills due");
+  expect(container.querySelector('[data-budget-name="Rent post"]')).toBeNull();
+}));
+test("expanded tree preserves mixed order", () => setup(container => {
+  act(() => housing(container).click());
+  for (const scope of [container.querySelector("table")!, container.querySelector("ul")!]) {
+    const names = Array.from(scope.querySelectorAll("[data-budget-item]")).map(item => item.getAttribute("data-budget-name"));
+    expect(names.slice(0, 4)).toEqual(["Housing", "Utilities", "Rent post", "Rent bill"]);
+  }
+  expect((container.querySelector('table [data-budget-name="Rent post"] td') as HTMLElement).style.paddingInlineStart).toBe("16px");
+  expect((container.querySelector('ul [data-budget-name="Rent post"]') as HTMLElement).style.paddingInlineStart).toBe("16px");
+  expect(container.textContent).toContain("Unfiled"); expect(container.textContent).toContain("Social");
+  expect(container.querySelector("table > div")).toBeNull();
+}));
+test("bill edit reaches its settings row", () => setup((container, billId) => {
+  act(() => housing(container).click());
+  expect(container.querySelector(`[data-budget-item="${billId}"] a`)!.getAttribute("href")).toBe(`/settings#bill-${billId}`);
+  expect(container.textContent).toContain("Ended");
+  expect(container.textContent).toContain("Next 2028-03");
+}, true));
diff --git a/src/ui/components/BudgetTree.tsx b/src/ui/components/BudgetTree.tsx
new file mode 100644
index 0000000..0a0144b
--- /dev/null
+++ b/src/ui/components/BudgetTree.tsx
@@ -0,0 +1,52 @@
+import { useState, type ReactNode } from "react";
+import { Link } from "react-router";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { budgetTree, type BudgetNode } from "../../domain/budgetTree.ts";
+import type { MonthId, Recurrence } from "../../domain/types.ts";
+import type { MonthPostRow } from "../../domain/views.ts";
+import { useDataset } from "../hooks/useDataset.ts";
+import { useMoneyFormat } from "../hooks/useMoneyFormat.ts";
+import { DesktopPostBody, MobilePostRow } from "./PostTable.tsx";
+
+function cadence(rule: Recurrence) {
+  const unit = rule.kind === "everyNMonths" ? "month" : rule.kind === "everyNWeeks" ? "week" : "day";
+  return `Every ${rule.n} ${unit}${rule.n === 1 ? "" : "s"}`;
+}
+
+/** A mixed placement tree; only post rows carry envelope balances. */
+export function BudgetTree({ monthId, rows, onChangeRule }: { monthId: MonthId; rows: MonthPostRow[]; onChangeRule?: (postId: string) => void }) {
+  const dataset = useDataset();
+  const fmt = useMoneyFormat();
+  const tree = budgetTree(dataset, monthId, rows);
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
+  const toggle = (id: string) => setExpanded(previous => { const next = new Set(previous); if (next.has(id)) next.delete(id); else next.add(id); return next; });
+  const folderHeading = (node: Extract<BudgetNode, { kind: "folder" }>) => {
+    const open = expanded.has(node.folder.id);
+    const Icon = open ? ChevronDown : ChevronRight;
+    return <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1">
+      <button type="button" aria-label={node.folder.name} aria-expanded={open} onClick={() => toggle(node.folder.id)} className="flex items-center gap-2 rounded-sm py-2 font-medium hover:text-budget-accent focus-visible:outline-2 focus-visible:outline-ring"><Icon size={16} aria-hidden="true" />{node.folder.name}</button>
+      <span className="text-xs text-budget-ink-muted">Bills due <span className="font-money ml-2">{fmt.money(node.billsDue, dataset.settings.baseCurrency)}</span></span>
+    </div>;
+  };
+  const billContent = (node: Extract<BudgetNode, { kind: "bill" }>) => <div className="space-y-1 py-3 text-sm">
+    <div className="flex flex-wrap items-baseline justify-between gap-2"><span className="font-medium">{node.cost.name} <span className="ml-2 font-money font-normal">{fmt.money(node.cost.amount.amount, node.cost.amount.currency)}</span></span><Link className="text-xs underline underline-offset-2 hover:text-budget-accent" to={`/settings#bill-${node.cost.id}`}>Edit</Link></div>
+    <p className="text-xs text-budget-ink-muted">{cadence(node.cost.recurrence)} · Assigned to {node.cost.splits.map(split => dataset.posts.find(post => post.id === split.postId)?.name).join(", ")} · {node.nextOccurrence ? `Next ${node.nextOccurrence.date}` : "Ended"}</p>
+  </div>;
+  const render = (nodes: BudgetNode[], mobile: boolean, depth = 0): ReactNode[] => nodes.flatMap(node => {
+    const indent = Math.min(depth, 4) * 16;
+    const id = node.kind === "folder" ? node.folder.id : node.kind === "post" ? node.row.post.id : node.cost.id;
+    if (node.kind === "post") return [mobile ? <MobilePostRow key={id} row={node.row} indent={indent} monthId={monthId} onChangeRule={onChangeRule} /> : <DesktopPostBody key={id} row={node.row} indent={indent} monthId={monthId} onChangeRule={onChangeRule} />];
+    const name = node.kind === "folder" ? node.folder.name : node.cost.name;
+    const content = node.kind === "folder" ? folderHeading(node) : billContent(node);
+    const style = { paddingInlineStart: `${indent}px` };
+    const item = mobile ? <li key={id} data-budget-item={id} data-budget-name={name} style={style}>{content}</li> : <tbody key={id} data-budget-item={id} data-budget-name={name}><tr><td colSpan={6} className={node.kind === "folder" ? "border-b border-budget-rule pt-3" : "border-b border-budget-rule"} style={style}>{content}</td></tr></tbody>;
+    return [item, ...(node.kind === "folder" && expanded.has(id) ? render(node.children, mobile, depth + 1) : [])];
+  });
+  return <>
+    <div className="hidden overflow-x-auto sm:block"><table className="w-full text-sm"><thead className="text-left"><tr className="border-b border-budget-rule text-[0.6875rem] uppercase tracking-wider text-budget-ink-muted">{["Post / bill", "Carried in", "Allocated", "Spent", "Remaining", "Projected"].map((label, index) => <th key={label} className={`py-2 font-medium ${index ? "pl-6 text-right" : ""}`}>{label}</th>)}</tr></thead>
+      {render(tree.roots, false)}
+      {tree.unfiled.length > 0 && <tbody><tr><th colSpan={6} className="border-b border-budget-rule pb-2 pt-5 text-left font-medium">Unfiled</th></tr></tbody>}{render(tree.unfiled, false)}
+    </table></div>
+    <ul className="space-y-3 sm:hidden">{render(tree.roots, true)}{tree.unfiled.length > 0 && <li className="border-b border-budget-rule pb-2 pt-4 font-medium">Unfiled</li>}{render(tree.unfiled, true)}</ul>
+  </>;
+}
diff --git a/src/ui/components/PostTable.tsx b/src/ui/components/PostTable.tsx
index 0690c38..43a5ece 100644
--- a/src/ui/components/PostTable.tsx
+++ b/src/ui/components/PostTable.tsx
@@ -173,7 +173,6 @@ function ChangeRuleButton({
 }
 
 export function PostTable({ monthId, rows, onChangeRule }: Props) {
-  const fmt = useMoneyFormat();
   return (
     <>
       <div className="hidden overflow-x-auto sm:block">
@@ -194,11 +193,32 @@ export function PostTable({ monthId, rows, onChangeRule }: Props) {
               belong together, which is exactly how the meter came to look like
               a divider between two rows rather than part of one. */}
           {rows.map((row) => {
-            const cells = postRowCells(row, fmt);
             return (
-              <tbody key={row.post.id} className="group">
+              <DesktopPostBody key={row.post.id} row={row} monthId={monthId} onChangeRule={onChangeRule} />
+            );
+          })}
+        </table>
+      </div>
+
+      <ul className="space-y-4 sm:hidden">
+        {rows.map((row) => {
+          return (
+            <MobilePostRow key={row.post.id} row={row} monthId={monthId} onChangeRule={onChangeRule} />
+          );
+        })}
+      </ul>
+    </>
+  );
+}
+
+interface PostRowProps { row: MonthPostRow; monthId: MonthId; onChangeRule?: (postId: string) => void; indent?: number; }
+
+export function DesktopPostBody({ row, monthId, onChangeRule, indent = 0 }: PostRowProps) {
+  const cells = postRowCells(row, useMoneyFormat());
+  return (
+              <tbody data-budget-item={row.post.id} data-budget-name={row.post.name} className="group">
                 <tr className="transition-colors group-hover:bg-accent/60">
-                  <td className="pb-0 pt-3">
+                  <td className="pb-0 pt-3" style={{ paddingInlineStart: indent }}>
                     <PostName row={row} monthId={monthId} />
                     {onChangeRule && (
                       <ChangeRuleButton
@@ -234,16 +254,13 @@ export function PostTable({ monthId, rows, onChangeRule }: Props) {
                   </td>
                 </tr>
               </tbody>
-            );
-          })}
-        </table>
-      </div>
+  );
+}
 
-      <ul className="space-y-4 sm:hidden">
-        {rows.map((row) => {
-          const cells = postRowCells(row, fmt);
-          return (
-            <li key={row.post.id} className="space-y-1.5">
+export function MobilePostRow({ row, monthId, onChangeRule, indent = 0 }: PostRowProps) {
+  const cells = postRowCells(row, useMoneyFormat());
+  return (
+            <li data-budget-item={row.post.id} data-budget-name={row.post.name} className="space-y-1.5" style={{ paddingInlineStart: indent }}>
               <div className="flex items-baseline justify-between gap-3 text-sm">
                 <span className="min-w-0">
                   <PostName row={row} monthId={monthId} />
@@ -281,9 +298,5 @@ export function PostTable({ monthId, rows, onChangeRule }: Props) {
                 )}
               </p>
             </li>
-          );
-        })}
-      </ul>
-    </>
   );
 }
diff --git a/src/ui/routes/MonthRoute.tsx b/src/ui/routes/MonthRoute.tsx
index 16a7e4d..b3b8a5d 100644
--- a/src/ui/routes/MonthRoute.tsx
+++ b/src/ui/routes/MonthRoute.tsx
@@ -13,7 +13,8 @@ import { ruleAt } from "../../domain/allocation.ts";
 import type { MonthId, Post, Purchase, Rule } from "../../domain/types.ts";
 import { sliceAmountForMonth } from "../../domain/charges.ts";
 import { useMoneyFormat } from "../hooks/useMoneyFormat.ts";
-import { PostTable, PostTableLegend } from "../components/PostTable.tsx";
+import { PostTableLegend } from "../components/PostTable.tsx";
+import { BudgetTree } from "../components/BudgetTree.tsx";
 import { PurchaseDialog } from "../components/PurchaseDialog.tsx";
 import { ExpectedBand } from "../components/ExpectedBand.tsx";
 import { Meter } from "../components/Meter.tsx";
@@ -128,11 +129,11 @@ export function MonthRoute() {
       <ExpectedBand monthId={monthId} />
 
       <Section
-        title="Posts"
+        title="Budget"
         hint={<PostTableLegend baseCurrency={base} />}
         className="overflow-hidden"
       >
-        <PostTable monthId={monthId} rows={view.rows} onChangeRule={setChangingRuleFor} />
+        <BudgetTree monthId={monthId} rows={view.rows} onChangeRule={setChangingRuleFor} />
       </Section>
 
       {changingPost && (

From abf57a963f885eb00160933f18750739af309a9b Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 00:50:42 +0200
Subject: [PATCH 17/27] docs: explain budget folder placement and totals

---
 docs/ARCHITECTURE.md | 10 ++++++++++
 docs/DECISIONS.md    |  8 ++++++++
 docs/PRODUCT.md      |  3 +++
 3 files changed, 21 insertions(+)

diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index 256a802..a8bbf2f 100755
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -204,6 +204,16 @@ is first and stored, every XML part parses, and numeric cells carry
 behavioural one, because the bug it prevents depends on real browser render
 timing that happy-dom does not reproduce.
 
+## Budget placement
+
+Folders organize posts and recurring bills in one sibling order. The pure
+`budgetTree` selector combines month post rows with computed scheduled slots;
+folder Bills due sums bill prices in the selected slot month, including
+descendants, using confirmed purchase totals where available. Folder placement
+is independent of bill split destinations. Only posts have allocations and
+rollover balances. The month UI renders the same tree as a desktop table and a
+mobile list, and keeps occurrence confirmation in the Expected band.
+
 ## Where the reasoning lives
 
 - `AGENTS.md` — the rules, in enforceable one-line form, and which test fails
diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md
index c77b5be..18baca8 100644
--- a/docs/DECISIONS.md
+++ b/docs/DECISIONS.md
@@ -75,6 +75,14 @@ record.
 - **Posts are archived, never deleted**, because purchases reference them.
   Archived posts still fold. → [`ARCHITECTURE.md`](ARCHITECTURE.md)
 
+## Budget folders
+
+- **Folders contain posts and recurring bills in a mixed order.** Folders carry
+  scheduled Bills due totals; allocation and rollover remain on posts. Bill
+  placement and split destinations are independent. Rejected nested posts as
+  folders because that would mix schedule prices and envelope balances.
+  → [`specs/2026-09-29-budget-folders-and-recurring-cost-placement-design.md`](specs/2026-09-29-budget-folders-and-recurring-cost-placement-design.md)
+
 ## Recurring costs
 
 - **Two-stage confirmation, over projection-only or generation-only.** A
diff --git a/docs/PRODUCT.md b/docs/PRODUCT.md
index cb93375..d959926 100755
--- a/docs/PRODUCT.md
+++ b/docs/PRODUCT.md
@@ -54,6 +54,9 @@ Money is handled in DKK, USD and EUR, with DKK as the base.
 
 Confirmed and in place:
 
+- Nested budget folders organize posts and bills independently of bill split
+  destinations. Folder Bills due reports scheduled prices for the selected month;
+  posts alone hold envelope balances.
 - Posts (envelopes) with monthly allocation, created and archived by the owner.
   Posts are archived, never deleted, because purchases reference them.
 - Allocation is either a fixed amount or a percentage of that month's income.

From 228d48d97836507d23e9952530b6333ef59e45fb Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 00:54:15 +0200
Subject: [PATCH 18/27] fix: clarify currencies in mixed budget legend

---
 src/ui/components/BudgetTree.test.tsx | 11 ++++++++++-
 src/ui/components/PostTable.tsx       |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/ui/components/BudgetTree.test.tsx b/src/ui/components/BudgetTree.test.tsx
index df54080..c98681d 100644
--- a/src/ui/components/BudgetTree.test.tsx
+++ b/src/ui/components/BudgetTree.test.tsx
@@ -9,6 +9,7 @@ import { createSeedDataset } from "../../domain/seed.ts";
 import { addBudgetFolder, addRecurringCost, confirmOccurrence } from "../../store/actions.ts";
 import { monthView } from "../../domain/views.ts";
 import { store } from "../../store/index.ts";
+import { PostTableLegend } from "./PostTable.tsx";
 import { BudgetTree } from "./BudgetTree.tsx";
 
 function setup(run: (container: HTMLDivElement, billId: string) => void, confirm = false) {
@@ -21,7 +22,7 @@ function setup(run: (container: HTMLDivElement, billId: string) => void, confirm
   if (confirm) confirmOccurrence(data, bill.id, "2026-09", { date: "2026-09-01" });
   const original = { get: store.get, subscribe: store.subscribe }; store.get = () => data; store.subscribe = () => () => {};
   const container = document.createElement("div"); document.body.append(container); const root = createRoot(container);
-  try { act(() => root.render(<MemoryRouter><BudgetTree monthId="2026-09" rows={monthView(data, "2026-09").rows} /></MemoryRouter>)); run(container, bill.id); }
+  try { act(() => root.render(<MemoryRouter><PostTableLegend baseCurrency="DKK" /><BudgetTree monthId="2026-09" rows={monthView(data, "2026-09").rows} /></MemoryRouter>)); run(container, bill.id); }
   finally { act(() => root.unmount()); container.remove(); Object.assign(store, original); }
 }
 function housing(container: HTMLDivElement) { return container.querySelector('button[aria-label="Housing"]') as HTMLButtonElement; }
@@ -48,3 +49,11 @@ test("bill edit reaches its settings row", () => setup((container, billId) => {
   expect(container.textContent).toContain("Ended");
   expect(container.textContent).toContain("Next 2028-03");
 }, true));
+
+test("legend scopes base currency to post figures and identifies bill currencies", () => setup(container => {
+  const legend = container.querySelector("span.flex.flex-wrap")!;
+  expect(legend.textContent).toContain("Post figures in DKK.");
+  expect(legend.textContent).toContain("Bill prices show their own currency.");
+  expect(legend.textContent).toContain("Projected subtracts bills not yet confirmed.");
+  expect(legend.textContent).not.toContain("All figures");
+}));
diff --git a/src/ui/components/PostTable.tsx b/src/ui/components/PostTable.tsx
index 43a5ece..34d5477 100644
--- a/src/ui/components/PostTable.tsx
+++ b/src/ui/components/PostTable.tsx
@@ -76,7 +76,7 @@ export function PostTableLegend({ baseCurrency }: { baseCurrency: Currency }) {
   return (
     <span className="flex flex-wrap items-center gap-x-3 gap-y-1">
       <span>
-        All figures in {baseCurrency}. Projected subtracts bills not yet confirmed.
+        Post figures in {baseCurrency}. Bill prices show their own currency. Projected subtracts bills not yet confirmed.
       </span>
       <Swatch token="--surplus" label="carried in" />
       <Swatch token="--budget-accent" label="spent" />

From fc14341f1efe8ee8613e971de9a237e3b9137a81 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 00:57:50 +0200
Subject: [PATCH 19/27] docs: update folder worktree state and follow-up queue

---
 docs/DECISIONS.md |  6 +++---
 docs/TODO.md      | 39 ++++++++++++++++++++++++++++++---------
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md
index 18baca8..54b9290 100644
--- a/docs/DECISIONS.md
+++ b/docs/DECISIONS.md
@@ -228,8 +228,8 @@ Not oversights. Each was decided against, and reopening one needs a reason.
   amounts are all **allowed**. Adding validation is a regression.
   → [`AGENTS.md`](../AGENTS.md) §3
 - The income field and the split editor's fixed-amount fields **do not parse a
-  currency**; only the purchase total does. → [`TODO.md`](TODO.md) §3
+  currency**; only the purchase total does. → [`TODO.md`](TODO.md) §5
 - **No currency picker.** Adding a currency means typing code, name, symbol and
-  decimals by hand. → [`TODO.md`](TODO.md) §3
+  decimals by hand. → [`TODO.md`](TODO.md) §5
 - **Symbol collisions resolve to the first currency defined with that symbol.**
-  Tested and documented rather than solved. → [`TODO.md`](TODO.md) §3
+  Tested and documented rather than solved. → [`TODO.md`](TODO.md) §5
diff --git a/docs/TODO.md b/docs/TODO.md
index 69afe54..5ea03a4 100755
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -8,15 +8,19 @@ decisions behind it are in `docs/specs/` — one spec per sub-project,
 each recording the alternatives that were rejected. Rules that outlived their
 task moved to `AGENTS.md`.
 
-**Current state:** merged to `main`. 661 tests passing,
-`bunx tsc --noEmit` clean, `bun run build` succeeds on both the live-fetch and
-offline paths.
+**Current feature worktree state:** budget folders and recurring cost placement
+are implemented.
+707 tests passing across 54 files. `bunx tsc --noEmit` is clean;
+`bun run --bun build` succeeds using the committed seed rates when live-fetch
+is unavailable. The runtime override bypasses a broken local Bun shim.
 
-**Schema is at version 7.** v1 -> v2 made allocation rules a dated series;
+**Schema is at version 8.** v1 -> v2 made allocation rules a dated series;
 v2 -> v3 moved currencies into the dataset; v3 -> v4 drops a stored rate-service
 URL that can no longer work; v4 -> v5 adds sterling to an existing dataset;
 v5 -> v6 collapses per-currency decimals into one dataset-wide setting; v6 -> v7
-adds `Dataset.recurring`. All six are behaviour-preserving by construction —
+adds `Dataset.recurring`; v7 -> v8 adds budget folders and assigns existing
+posts and recurring bills a deterministic mixed sibling order under Unfiled.
+All seven are behaviour-preserving by construction —
 not one changes a stored figure — and are tested as such.
 
 A migration applies **on load, in memory**; it is written back on the next
@@ -27,7 +31,24 @@ IndexedDB instead of the app.
 
 ---
 
-## 1. Visual redesign, sub-project 3 — Year, Summary, Post detail
+## 1. Folder rename blur during an in-flight save
+
+A folder name draft can remain unsaved if the owner changes it while a rename
+save is in flight and then blurs the field before that save finishes. Preserve
+the newer draft and ensure the blur requests a subsequent save after the pending
+write completes. Cover the delayed-write sequence with a UI interaction test,
+including the final persisted name and any surfaced write error.
+
+## 2. Recurring split editor interaction coverage
+
+`RecurringSplitEditor` has coverage for destination selection and dedicated post
+creation, but its rendered split mode and value controls lack a focused
+interaction test. Exercise the real controls to switch percentage/fixed mode
+and edit a split value, then assert the resulting splits and remainder behavior.
+Keep this scoped to the editor's user interaction; domain split calculations
+already have their own tests.
+
+## 3. Visual redesign, sub-project 3 — Year, Summary, Post detail
 
 The owner's brief for the whole redesign: *"right now it looks a bit boring,
 simple and ugly. We want sleek, modern, and nice to use."* On scoping: both
@@ -67,7 +88,7 @@ than re-decide** (spec: `2026-09-02-month-view-design.md`):
   phone. `formatMoney` is still right wherever an amount can be in some other
   currency — every purchase row, for one.
 
-## 2. Visual redesign, sub-project 4 — dialogs and fast entry
+## 4. Visual redesign, sub-project 4 — dialogs and fast entry
 
 Untouched. Native `<select>` elements are still browser-default, and
 `up` / `down` / `archive` in Settings are bare text buttons. Covers the purchase
@@ -77,7 +98,7 @@ There is already a spec for fast-entry *behaviour* —
 `2026-09-02-fast-entry-refinements-design.md`. Read it before restyling, so the
 visual work does not fight it.
 
-## 3. Currency work deliberately left undone
+## 5. Currency work deliberately left undone
 
 All three were decided against at the time, not forgotten. Reopen only with a
 reason.
@@ -93,7 +114,7 @@ reason.
   Fine for one "$" currency; if the owner adds two, typing the code
   disambiguates and nothing warns them. Tested, documented, not solved.
 
-## 4. Still needs a human
+## 6. Still needs a human
 
 `scripts/screenshot.ts` drives headless Chrome, so this list is much shorter
 than it was. Already seen and confirmed working: the carry meter (including red

From 581ede9b079e0f0fef45d64478e8e0945801877c Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 01:04:08 +0200
Subject: [PATCH 20/27] fix: preserve blank-name backups and open linked bill
 editors

---
 src/export/json.test.ts              | 33 ++++++++++++------
 src/export/json.ts                   |  8 ++---
 src/ui/routes/SettingsRoute.test.tsx | 51 ++++++++++++++++++++++++++++
 src/ui/routes/SettingsRoute.tsx      | 14 ++++++++
 4 files changed, 92 insertions(+), 14 deletions(-)
 create mode 100644 src/ui/routes/SettingsRoute.test.tsx

diff --git a/src/export/json.test.ts b/src/export/json.test.ts
index c496d91..5bc497b 100644
--- a/src/export/json.test.ts
+++ b/src/export/json.test.ts
@@ -6,6 +6,7 @@ import {
   ImportValidationError,
   exportFilename,
 } from "./json.ts";
+import { addRecurringCost, updatePost, updateRecurringCost } from "../store/actions.ts";
 import { createSeedDataset } from "../domain/seed.ts";
 import { monthView, yearView } from "../domain/views.ts";
 import type { Dataset } from "../domain/types.ts";
@@ -164,21 +165,33 @@ describe("import rejects invalid folder graph", () => {
     expect(() => parse(data)).toThrow(ImportValidationError);
   });
 
-  test("rejects a blank post name", () => {
+  test.each([
+    ["", "Rent"], ["  ", "Rent"], ["Games", ""], ["Games", "  "],
+  ])("blank item names (%j, %j) survive saved dataset round trips and v7 import", (postName, billName) => {
     const data = populated();
-    data.posts[0]!.name = "  ";
-    expect(() => parse(data)).toThrow(ImportValidationError);
-  });
-
-  test("rejects a blank recurring-cost name", () => {
-    const data = populated();
-    data.recurring.push({
-      id: "rent", name: "  ", order: 3, folderId: null, archived: false,
+    const bill = addRecurringCost(data, {
+      name: "Rent", folderId: null, archived: false,
       amount: { amount: 100, currency: "DKK" }, startDate: "2026-01",
       recurrence: { kind: "everyNMonths", n: 1 }, anchoring: "calendar",
       splitMode: "percent", splits: [{ postId: data.posts[0]!.id, value: 100, absorbsRemainder: true }],
     });
-    expect(() => parse(data)).toThrow(ImportValidationError);
+    updatePost(data, data.posts[0]!.id, { name: postName });
+    updateRecurringCost(data, bill.id, { name: billName });
+    expect(parseDatasetJson(exportDatasetJson(data))).toEqual(data);
+    const legacy = JSON.parse(exportDatasetJson(data));
+    legacy.settings.schemaVersion = 7;
+    delete legacy.folders;
+    for (const item of [...legacy.posts, ...legacy.recurring]) delete item.folderId;
+    const imported = parseDatasetJson(JSON.stringify(legacy));
+    expect(imported.posts[0]!.name).toBe(postName);
+    expect(imported.recurring[0]!.name).toBe(billName);
+    expect(imported.folders).toEqual([]);
+  });
+
+  test.each(["", "  "])("still rejects blank folder names %j", name => {
+    const data = populated();
+    data.folders = [{ ...folder("home", null, data.posts.length), name }];
+    expect(() => parse(data)).toThrow(/empty name/);
   });
 });
 
diff --git a/src/export/json.ts b/src/export/json.ts
index ee68998..6d92bc1 100644
--- a/src/export/json.ts
+++ b/src/export/json.ts
@@ -190,14 +190,14 @@ function requireFolderTree(data: Dataset): void {
     requireLocation(folder.parentId, folder.order, `Folder "${folder.id}"`);
   }
   for (const post of data.posts) {
-    if (typeof post?.name !== "string" || !post.name.trim()) {
-      throw new ImportValidationError("Post has an empty name");
+    if (typeof post?.name !== "string") {
+      throw new ImportValidationError("Post name must be a string");
     }
     requireLocation(post?.folderId, post?.order, `Post "${post?.name}"`);
   }
   for (const cost of data.recurring) {
-    if (typeof cost?.name !== "string" || !cost.name.trim()) {
-      throw new ImportValidationError("Recurring cost has an empty name");
+    if (typeof cost?.name !== "string") {
+      throw new ImportValidationError("Recurring cost name must be a string");
     }
     requireLocation(cost?.folderId, cost?.order, `Recurring cost "${cost?.name}"`);
   }
diff --git a/src/ui/routes/SettingsRoute.test.tsx b/src/ui/routes/SettingsRoute.test.tsx
new file mode 100644
index 0000000..82dc167
--- /dev/null
+++ b/src/ui/routes/SettingsRoute.test.tsx
@@ -0,0 +1,51 @@
+import { expect, test } from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { Link, MemoryRouter, Route, Routes } from "react-router";
+import { createSeedDataset } from "../../domain/seed.ts";
+import { addRecurringCost } from "../../store/actions.ts";
+import { store } from "../../store/index.ts";
+import { monthView } from "../../domain/views.ts";
+import { BudgetTree } from "../components/BudgetTree.tsx";
+import { SettingsRoute } from "./SettingsRoute.tsx";
+
+test("month bill Edit navigates to Settings, opens and focuses its editor; fragment changes retarget it", () => {
+  const data = createSeedDataset("2026-09");
+  const bill = addRecurringCost(data, {
+    name: "Phone", folderId: null, archived: false,
+    amount: { amount: 30, currency: "DKK" }, startDate: "2026-09",
+    recurrence: { kind: "everyNMonths", n: 1 }, anchoring: "calendar",
+    splitMode: "percent", splits: [{ postId: data.posts[0]!.id, value: 100, absorbsRemainder: true }],
+  });
+  const second = addRecurringCost(data, { ...bill, name: "Internet" });
+  const original = { get: store.get, subscribe: store.subscribe };
+  store.get = () => data;
+  store.subscribe = () => () => {};
+  const container = document.createElement("div");
+  document.body.append(container);
+  const root = createRoot(container);
+  try {
+    act(() => root.render(<MemoryRouter initialEntries={["/month/2026-09"]}>
+      <Link id="second-bill" to={`/settings#bill-${second.id}`}>Other bill</Link>
+      <Link id="missing-bill" to="/settings#bill-missing">Missing bill</Link>
+      <Routes>
+        <Route path="/month/:month" element={<BudgetTree monthId="2026-09" rows={monthView(data, "2026-09").rows} />} />
+        <Route path="/settings" element={<SettingsRoute />} />
+      </Routes>
+    </MemoryRouter>));
+    act(() => (container.querySelector(`[data-budget-item="${bill.id}"] a`) as HTMLAnchorElement).click());
+    expect(container.textContent).toContain("Save destinations");
+    expect(document.activeElement?.id).toBe(`bill-${bill.id}`);
+    act(() => (container.querySelector("#second-bill") as HTMLAnchorElement).click());
+    expect(document.activeElement?.id).toBe(`bill-${second.id}`);
+    const editorRow = container.querySelector(`[data-bill-id="${second.id}"]`)!.nextElementSibling!;
+    expect(editorRow.textContent).toContain("Save destinations");
+    act(() => (container.querySelector("#missing-bill") as HTMLAnchorElement).click());
+    expect(container.textContent).toContain("Recurring costs");
+  } finally {
+    act(() => root.unmount()); container.remove(); Object.assign(store, original);
+  }
+});
diff --git a/src/ui/routes/SettingsRoute.tsx b/src/ui/routes/SettingsRoute.tsx
index 83928a6..f6c98b8 100644
--- a/src/ui/routes/SettingsRoute.tsx
+++ b/src/ui/routes/SettingsRoute.tsx
@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router";
 import { CurrencySection } from "./settings/CurrencySection.tsx";
 import { BudgetFoldersSection } from "./settings/BudgetFoldersSection.tsx";
 import { PostsSection } from "./settings/PostsSection.tsx";
@@ -18,6 +20,18 @@ import { ColophonSection } from "./settings/ColophonSection.tsx";
  * "remove" against the card edge.
  */
 export function SettingsRoute() {
+  const location = useLocation();
+  useEffect(() => {
+    // BrowserRouter updates the URL without native fragment navigation. Run
+    // after the settings rows mount, and again for navigation within Settings.
+    if (!location.hash.startsWith("#bill-")) return;
+    const target = document.getElementById(location.hash.slice(1));
+    if (!(target instanceof HTMLButtonElement)) return;
+    target.click();
+    target.focus({ preventScroll: true });
+    target.scrollIntoView({ block: "center" });
+  }, [location.key, location.hash]);
+
   return (
     <div className="space-y-5">
       <h1 className="text-2xl">Settings</h1>

From d38584396b9f299ff575afe30b65d37d5c9c54a5 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 01:05:59 +0200
Subject: [PATCH 21/27] docs: record final folder test count

---
 docs/TODO.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/TODO.md b/docs/TODO.md
index 5ea03a4..41df9bc 100755
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -10,7 +10,7 @@ task moved to `AGENTS.md`.
 
 **Current feature worktree state:** budget folders and recurring cost placement
 are implemented.
-707 tests passing across 54 files. `bunx tsc --noEmit` is clean;
+712 tests passing across 55 files. `bunx tsc --noEmit` is clean;
 `bun run --bun build` succeeds using the committed seed rates when live-fetch
 is unavailable. The runtime override bypasses a broken local Bun shim.
 

From 804f32c5fb89b03b4e3e99bb46f051cddaf53929 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 01:33:29 +0200
Subject: [PATCH 22/27] feat: add session undo and redo

---
 README.md                                     |   6 +
 docs/ARCHITECTURE.md                          |  15 +++
 docs/plans/2026-09-30-session-undo-redo.md    |  12 ++
 .../2026-09-30-session-undo-redo-design.md    |  31 +++++
 src/store/snapshot.test.ts                    | 115 ++++++++++++++++++
 src/store/snapshot.ts                         |  89 ++++++++++++--
 src/ui/App.tsx                                |   4 +-
 src/ui/components/HistoryControls.test.tsx    |  94 ++++++++++++++
 src/ui/components/HistoryControls.tsx         |  59 +++++++++
 9 files changed, 411 insertions(+), 14 deletions(-)
 create mode 100644 docs/plans/2026-09-30-session-undo-redo.md
 create mode 100644 docs/specs/2026-09-30-session-undo-redo-design.md
 create mode 100644 src/ui/components/HistoryControls.test.tsx
 create mode 100644 src/ui/components/HistoryControls.tsx

diff --git a/README.md b/README.md
index 56252dd..152e17b 100755
--- a/README.md
+++ b/README.md
@@ -59,10 +59,16 @@ Everything is stored in this browser's IndexedDB. **Export regularly** from
 Settings → Your data: the JSON export is both your backup and how you move your
 budget to another device.
 
+Use the header's Undo and Redo controls to reverse saved edits in the current
+session. Ctrl/Cmd+Z undoes; Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y redoes. While typing
+in a field, those shortcuts use the browser's text undo. History holds up to
+50 edits and disappears when the page reloads.
+
 Both destructive actions there — Import, and "Reset everything" — download a
 backup of your current data before replacing it, and abort if that download
 fails. Reset puts the app back to a brand-new install: the three starter posts,
 the DKK/USD/EUR currency table, this month at zero income, no purchases.
+Import and reset clear session undo history after they succeed.
 
 ## Known limitations
 
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index a8bbf2f..fb3ee41 100755
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -101,6 +101,21 @@ uses on a first run, so "reset" and "a brand-new browser" cannot drift apart.
 Both are preceded in the UI by a JSON backup download that must succeed before
 the destructive write is attempted.
 
+## Session undo and redo
+
+The snapshot store keeps up to 50 prior saved datasets in memory. A changed
+`mutate` adds one step after its write succeeds; an unchanged mutation adds
+none. Undo and redo run through the same queue and persist their target dataset
+before changing the visible snapshot or either history stack. A failed write
+therefore leaves both the data and the available undo/redo actions intact.
+
+Import and reset clear the stacks only after their write succeeds. They are
+whole-dataset replacement flows with backup-first protection, not ordinary
+undoable edits. History is not in `Dataset` or IndexedDB and vanishes on reload.
+The header reads a stable history capability snapshot from the store to enable
+its controls; keyboard shortcuts skip editable fields so browser text undo
+still works.
+
 ## Money
 
 A float, deliberately, with two rules that make it safe:
diff --git a/docs/plans/2026-09-30-session-undo-redo.md b/docs/plans/2026-09-30-session-undo-redo.md
new file mode 100644
index 0000000..c773956
--- /dev/null
+++ b/docs/plans/2026-09-30-session-undo-redo.md
@@ -0,0 +1,12 @@
+# Session undo and redo implementation
+
+1. Extend snapshot-store tests with changed and unchanged edits, undo/redo
+   ordering, a new edit after undo, the 50-step bound, queued writes, failed
+   writes, import/reset boundaries, and session reload behavior. Run them red.
+2. Add history state and queued undo/redo operations in `snapshot.ts`. Ensure
+   history changes only after persistence commits. Run the store tests green.
+3. Add header controls and keyboard handling with an interaction test for
+   disabled states, error display, and native editable shortcuts. Run it red,
+   implement, then run it green.
+4. Update architecture and user-facing documentation. Run `bun test`,
+   `bunx tsc --noEmit`, build, and inspect desktop/mobile browser captures.
diff --git a/docs/specs/2026-09-30-session-undo-redo-design.md b/docs/specs/2026-09-30-session-undo-redo-design.md
new file mode 100644
index 0000000..4e71f65
--- /dev/null
+++ b/docs/specs/2026-09-30-session-undo-redo-design.md
@@ -0,0 +1,31 @@
+# Session undo and redo
+
+The owner needs to reverse an accidental saved edit without reconstructing a
+budget from an export. History lasts for the current page session only; a reload
+starts with the saved dataset and empty history.
+
+## Behavior
+
+- Every successful, changed `mutate` produces one undo step. Unchanged edits
+  produce none. The last 50 prior datasets are retained.
+- Undo and redo restore complete datasets, including IDs and dated rules, by
+  writing through the store's existing serialization queue. A failed write
+  changes neither the displayed dataset nor either history stack.
+- A new successful edit after undo clears redo. A failed edit leaves redo
+  available.
+- Import and reset are destructive whole-dataset operations. Their existing
+  backup-first flow remains mandatory. On success they clear both history
+  stacks; on failure they leave history intact. Neither can be undone with the
+  session controls.
+- The header offers Undo and Redo buttons. Ctrl/Cmd+Z undoes and
+  Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y redoes when focus is outside an editable
+  control. Native text editing shortcuts remain native.
+- A failed undo or redo shows its persistence error near the controls.
+
+## Implementation boundary
+
+History belongs to `src/store/snapshot.ts`, where edits already serialize and
+only become visible after persistence succeeds. The UI reads stable capability
+state from the same store and invokes its methods; no domain or dataset schema
+change is needed. History is deliberately memory-only, so exports contain only
+the current dataset and IndexedDB needs no upgrade.
diff --git a/src/store/snapshot.test.ts b/src/store/snapshot.test.ts
index 02ed8e7..4366587 100644
--- a/src/store/snapshot.test.ts
+++ b/src/store/snapshot.test.ts
@@ -286,3 +286,118 @@ describe("seed rates", () => {
     expect(store.get().fxRates).toEqual([]);
   });
 });
+
+describe("session history", () => {
+  test("undo and redo persist complete prior snapshots in order", async () => {
+    const fake = fakePersistence(createSeedDataset("2026-09"));
+    const store = createSnapshotStore(fake.persistence, "2026-09");
+    await store.load();
+    const originalId = store.get().posts[0]!.id;
+    await store.mutate(draft => { draft.posts[0]!.name = "First"; });
+    await store.mutate(draft => { draft.posts[0]!.name = "Second"; });
+
+    expect(store.getHistory()).toEqual({ canUndo: true, canRedo: false });
+    expect(await store.undo()).toBe(true);
+    expect(store.get().posts[0]).toMatchObject({ id: originalId, name: "First" });
+    expect(fake.stored!.posts[0]!.name).toBe("First");
+    expect(await store.undo()).toBe(true);
+    expect(store.get().posts[0]!.name).toBe("Video Games");
+    expect(await store.undo()).toBe(false);
+    expect(store.getHistory()).toEqual({ canUndo: false, canRedo: true });
+    expect(await store.redo()).toBe(true);
+    expect(await store.redo()).toBe(true);
+    expect(await store.redo()).toBe(false);
+    expect(store.get().posts[0]!.name).toBe("Second");
+    expect(fake.stored!.posts[0]!.name).toBe("Second");
+  });
+
+  test("an unchanged edit creates no step and does not discard redo", async () => {
+    const store = createSnapshotStore(fakePersistence(createSeedDataset("2026-09")).persistence, "2026-09");
+    await store.load();
+    await store.mutate(draft => { draft.posts[0]!.name = "First"; });
+    await store.undo();
+    await store.mutate(draft => { draft.posts[0]!.name = "Video Games"; });
+    expect(store.getHistory()).toEqual({ canUndo: false, canRedo: true });
+    expect(await store.redo()).toBe(true);
+    expect(store.get().posts[0]!.name).toBe("First");
+  });
+
+  test("a new saved edit after undo discards redo", async () => {
+    const store = createSnapshotStore(fakePersistence(createSeedDataset("2026-09")).persistence, "2026-09");
+    await store.load();
+    await store.mutate(draft => { draft.posts[0]!.name = "First"; });
+    await store.undo();
+    await store.mutate(draft => { draft.posts[1]!.name = "Changed"; });
+    expect(store.getHistory()).toEqual({ canUndo: true, canRedo: false });
+    expect(await store.redo()).toBe(false);
+  });
+
+  test("a rejected undo leaves data and history available for retry", async () => {
+    const fake = fakePersistence(createSeedDataset("2026-09"));
+    const store = createSnapshotStore(fake.persistence, "2026-09");
+    await store.load();
+    await store.mutate(draft => { draft.posts[0]!.name = "First"; });
+    fake.persistence.write = async () => { throw new Error("disk full"); };
+    await expect(store.undo()).rejects.toThrow("disk full");
+    expect(store.get().posts[0]!.name).toBe("First");
+    expect(store.getHistory()).toEqual({ canUndo: true, canRedo: false });
+    fake.persistence.write = async () => {};
+    expect(await store.undo()).toBe(true);
+  });
+
+  test("a rejected new edit preserves redo", async () => {
+    const fake = fakePersistence(createSeedDataset("2026-09"));
+    const store = createSnapshotStore(fake.persistence, "2026-09");
+    await store.load();
+    await store.mutate(draft => { draft.posts[0]!.name = "First"; });
+    await store.undo();
+    fake.persistence.write = async () => { throw new Error("disk full"); };
+    await expect(store.mutate(draft => { draft.posts[1]!.name = "Fail"; })).rejects.toThrow("disk full");
+    expect(store.getHistory()).toEqual({ canUndo: false, canRedo: true });
+  });
+
+  test("undo runs after already queued edits", async () => {
+    const fake = fakePersistence(createSeedDataset("2026-09"));
+    const store = createSnapshotStore(fake.persistence, "2026-09");
+    await store.load();
+    const first = store.mutate(draft => { draft.posts[0]!.name = "First"; });
+    const second = store.mutate(draft => { draft.posts[0]!.name = "Second"; });
+    const undo = store.undo();
+    await Promise.all([first, second, undo]);
+    expect(store.get().posts[0]!.name).toBe("First");
+    expect(fake.stored!.posts[0]!.name).toBe("First");
+  });
+
+  test("import and reset clear history only after their writes succeed", async () => {
+    const fake = fakePersistence(createSeedDataset("2026-09"));
+    const store = createSnapshotStore(fake.persistence, "2026-09");
+    await store.load();
+    await store.mutate(draft => { draft.posts[0]!.name = "First"; });
+    const incoming = createSeedDataset("2020-01");
+    fake.persistence.write = async () => { throw new Error("disk full"); };
+    await expect(store.replace(incoming)).rejects.toThrow("disk full");
+    expect(store.getHistory().canUndo).toBe(true);
+    fake.persistence.write = async () => {};
+    await store.replace(incoming);
+    expect(store.getHistory()).toEqual({ canUndo: false, canRedo: false });
+    await store.mutate(draft => { draft.posts[0]!.name = "New"; });
+    await store.reset();
+    expect(store.getHistory()).toEqual({ canUndo: false, canRedo: false });
+  });
+
+  test("history is limited to fifty edits and disappears on reload", async () => {
+    const fake = fakePersistence(createSeedDataset("2026-09"));
+    const store = createSnapshotStore(fake.persistence, "2026-09");
+    await store.load();
+    for (let n = 1; n <= 51; n++) {
+      await store.mutate(draft => { draft.posts[0]!.name = `Edit ${n}`; });
+    }
+    for (let n = 0; n < 50; n++) expect(await store.undo()).toBe(true);
+    expect(store.get().posts[0]!.name).toBe("Edit 1");
+    expect(await store.undo()).toBe(false);
+    const reopened = createSnapshotStore(fake.persistence, "2026-09");
+    await reopened.load();
+    expect(reopened.get().posts[0]!.name).toBe("Edit 1");
+    expect(reopened.getHistory()).toEqual({ canUndo: false, canRedo: false });
+  });
+});
diff --git a/src/store/snapshot.ts b/src/store/snapshot.ts
index 256f330..7dc87c1 100644
--- a/src/store/snapshot.ts
+++ b/src/store/snapshot.ts
@@ -8,12 +8,20 @@ export interface Persistence {
 
 export type Listener = () => void;
 
+export interface HistoryState {
+  canUndo: boolean;
+  canRedo: boolean;
+}
+
 export interface SnapshotStore {
   load(): Promise<void>;
   get(): Dataset;
   mutate(fn: (draft: Dataset) => void): Promise<void>;
   replace(dataset: Dataset): Promise<void>;
   reset(): Promise<void>;
+  getHistory(): HistoryState;
+  undo(): Promise<boolean>;
+  redo(): Promise<boolean>;
   subscribe(listener: Listener): () => void;
 }
 
@@ -30,6 +38,10 @@ export function createSnapshotStore(
 ): SnapshotStore {
   let snapshot: Dataset | null = null;
   const listeners = new Set<Listener>();
+  const undoStack: Dataset[] = [];
+  const redoStack: Dataset[] = [];
+  let historyState: HistoryState = { canUndo: false, canRedo: false };
+  const historyLimit = 50;
 
   // All mutations run through this chain, one at a time, so a mutation
   // always clones from the snapshot the previous mutation committed rather
@@ -51,42 +63,81 @@ export function createSnapshotStore(
     for (const listener of listeners) listener();
   }
 
+  function updateHistoryState() {
+    historyState = { canUndo: undoStack.length > 0, canRedo: redoStack.length > 0 };
+  }
+
+  function pushHistory(stack: Dataset[], dataset: Dataset) {
+    stack.push(dataset);
+    if (stack.length > historyLimit) stack.shift();
+  }
+
+  function clearHistory() {
+    undoStack.length = 0;
+    redoStack.length = 0;
+    updateHistoryState();
+  }
+
   function get(): Dataset {
     if (!snapshot) throw new Error("Snapshot store is not loaded yet");
     return snapshot;
   }
 
-  async function commit(next: Dataset) {
+  async function commit(next: Dataset, afterWrite?: () => void) {
     // Write first: if persistence fails, the in-memory snapshot must not have
     // moved, or the UI would show data that was never saved.
     await persistence.write(next);
     snapshot = next;
+    afterWrite?.();
     notify();
   }
 
+  function travel(from: Dataset[], to: Dataset[]): Promise<boolean> {
+    return enqueue(async () => {
+      const target = from.at(-1);
+      if (!target) return false;
+      const previous = get();
+      await commit(structuredClone(target), () => {
+        from.pop();
+        pushHistory(to, previous);
+        updateHistoryState();
+      });
+      return true;
+    });
+  }
+
   return {
-    async load() {
-      const stored = await persistence.read();
-      if (stored) {
-        snapshot = stored;
-        notify();
-        return;
-      }
-      await commit(createSeedDataset(currentMonth, seedRates));
+    load() {
+      return enqueue(async () => {
+        const stored = await persistence.read();
+        if (stored) {
+          snapshot = stored;
+          clearHistory();
+          notify();
+          return;
+        }
+        await commit(createSeedDataset(currentMonth, seedRates), clearHistory);
+      });
     },
 
     get,
 
     mutate(fn) {
       return enqueue(async () => {
-        const draft = structuredClone(get());
+        const previous = get();
+        const draft = structuredClone(previous);
         fn(draft);
-        await commit(draft);
+        if (JSON.stringify(draft) === JSON.stringify(previous)) return;
+        await commit(draft, () => {
+          pushHistory(undoStack, previous);
+          redoStack.length = 0;
+          updateHistoryState();
+        });
       });
     },
 
     replace(dataset) {
-      return enqueue(() => commit(dataset));
+      return enqueue(() => commit(structuredClone(dataset), clearHistory));
     },
 
     /**
@@ -99,7 +150,19 @@ export function createSnapshotStore(
      * mutation is still in flight cannot be overtaken by it.
      */
     reset() {
-      return enqueue(() => commit(createSeedDataset(currentMonth, seedRates)));
+      return enqueue(() => commit(createSeedDataset(currentMonth, seedRates), clearHistory));
+    },
+
+    getHistory() {
+      return historyState;
+    },
+
+    undo() {
+      return travel(undoStack, redoStack);
+    },
+
+    redo() {
+      return travel(redoStack, undoStack);
     },
 
     subscribe(listener) {
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 8abec1a..8c41b25 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -10,6 +10,7 @@ import { SettingsRoute } from "./routes/SettingsRoute.tsx";
 import { UpdatePrompt } from "./components/UpdatePrompt.tsx";
 import { RouteErrorBoundaryReset } from "./components/ErrorBoundary.tsx";
 import { ThemeToggle } from "./components/ThemeToggle.tsx";
+import { HistoryControls } from "./components/HistoryControls.tsx";
 
 /**
  * One nav item. The active route is marked with weight and an accent
@@ -44,7 +45,7 @@ export function AppRoutes() {
           it. Translucent with a blur so the paper ground still reads as one
           continuous sheet scrolling underneath. */}
       <header className="sticky top-0 z-30 border-b border-budget-rule bg-budget-paper/85 backdrop-blur-md">
-        <div className="mx-auto flex max-w-6xl items-center gap-1 px-4 py-2.5 sm:px-6">
+        <div className="mx-auto flex max-w-6xl flex-wrap items-center gap-x-1 gap-y-1 px-4 py-2.5 sm:px-6">
           <span className="mr-3 hidden text-sm font-semibold tracking-tight text-budget-ink sm:block">
             Budget<span className="text-budget-accent">&nbsp;2.0</span>
           </span>
@@ -54,6 +55,7 @@ export function AppRoutes() {
             <NavItem to="/summary">Summary</NavItem>
           </nav>
           <div className="ml-auto flex items-center gap-1">
+            <HistoryControls />
             <ThemeToggle />
             <NavItem to="/settings">Settings</NavItem>
           </div>
diff --git a/src/ui/components/HistoryControls.test.tsx b/src/ui/components/HistoryControls.test.tsx
new file mode 100644
index 0000000..fb760a7
--- /dev/null
+++ b/src/ui/components/HistoryControls.test.tsx
@@ -0,0 +1,94 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+import { afterEach, expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { createSeedDataset } from "../../domain/seed.ts";
+import { createSnapshotStore } from "../../store/snapshot.ts";
+import { store } from "../../store/index.ts";
+import { HistoryControls } from "./HistoryControls.tsx";
+
+const original = { getHistory: store.getHistory, subscribe: store.subscribe, undo: store.undo, redo: store.redo };
+let root: Root | null = null;
+let container: HTMLDivElement | null = null;
+
+afterEach(() => {
+  if (root) act(() => root!.unmount());
+  root = null;
+  container?.remove();
+  container = null;
+  Object.assign(store, original);
+});
+
+async function setup() {
+  let saved = createSeedDataset("2026-09");
+  let fail = false;
+  const history = createSnapshotStore({
+    async read() { return saved; },
+    async write(next) {
+      if (fail) throw new Error("Disk full");
+      saved = next;
+    },
+  }, "2026-09");
+  await history.load();
+  Object.assign(store, {
+    getHistory: history.getHistory,
+    subscribe: history.subscribe,
+    undo: history.undo,
+    redo: history.redo,
+  });
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+  act(() => root!.render(<HistoryControls />));
+  return { history, failWrites(value: boolean) { fail = value; } };
+}
+
+test("buttons follow saved history and restore data", async () => {
+  const { history } = await setup();
+  const undo = container!.querySelector<HTMLButtonElement>('button[aria-label="Undo"]')!;
+  const redo = container!.querySelector<HTMLButtonElement>('button[aria-label="Redo"]')!;
+  expect(undo.disabled).toBe(true);
+  expect(redo.disabled).toBe(true);
+
+  await act(async () => { await history.mutate(draft => { draft.posts[0]!.name = "Changed"; }); });
+  expect(undo.disabled).toBe(false);
+  await act(async () => { undo.click(); });
+  expect(history.get().posts[0]!.name).toBe("Video Games");
+  expect(redo.disabled).toBe(false);
+  await act(async () => { redo.click(); });
+  expect(history.get().posts[0]!.name).toBe("Changed");
+});
+
+test("a failed undo shows an error and permits retry", async () => {
+  const { history, failWrites } = await setup();
+  await act(async () => { await history.mutate(draft => { draft.posts[0]!.name = "Changed"; }); });
+  failWrites(true);
+  await act(async () => { container!.querySelector<HTMLButtonElement>('button[aria-label="Undo"]')!.click(); });
+  expect(container!.querySelector('[role="alert"]')?.textContent).toContain("Disk full");
+  expect(history.get().posts[0]!.name).toBe("Changed");
+  failWrites(false);
+  await act(async () => { container!.querySelector<HTMLButtonElement>('button[aria-label="Undo"]')!.click(); });
+  expect(container!.querySelector('[role="alert"]')).toBeNull();
+});
+
+test("keyboard shortcut reverses saved edits outside editable controls", async () => {
+  const { history } = await setup();
+  await act(async () => { await history.mutate(draft => { draft.posts[0]!.name = "Changed"; }); });
+  const field = document.createElement("input");
+  container!.append(field);
+  await act(async () => {
+    field.dispatchEvent(new KeyboardEvent("keydown", { key: "z", ctrlKey: true, bubbles: true, cancelable: true }));
+  });
+  expect(history.get().posts[0]!.name).toBe("Changed");
+  await act(async () => {
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "z", ctrlKey: true, bubbles: true, cancelable: true }));
+  });
+  expect(history.get().posts[0]!.name).toBe("Video Games");
+  await act(async () => {
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "z", ctrlKey: true, shiftKey: true, bubbles: true, cancelable: true }));
+  });
+  expect(history.get().posts[0]!.name).toBe("Changed");
+});
diff --git a/src/ui/components/HistoryControls.tsx b/src/ui/components/HistoryControls.tsx
new file mode 100644
index 0000000..ab5ced9
--- /dev/null
+++ b/src/ui/components/HistoryControls.tsx
@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Redo2, Undo2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { store } from "../../store/index.ts";
+
+/** Session history controls. Dataset writes remain serialized by the store. */
+export function HistoryControls() {
+  const { canUndo, canRedo } = useSyncExternalStore(store.subscribe, store.getHistory);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const busyRef = useRef(false);
+
+  const run = useCallback(async (direction: "undo" | "redo") => {
+    if (busyRef.current) return;
+    busyRef.current = true;
+    setBusy(true);
+    try {
+      await store[direction]();
+      setError(null);
+    } catch (cause) {
+      const message = cause instanceof Error ? cause.message : String(cause);
+      setError(`Could not ${direction}: ${message}. Your data has not changed.`);
+    } finally {
+      busyRef.current = false;
+      setBusy(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.defaultPrevented || event.altKey || !(event.ctrlKey || event.metaKey)) return;
+      const target = event.target;
+      if (target instanceof Element && target.closest("input, textarea, select, [contenteditable]")) return;
+      const key = event.key.toLowerCase();
+      const direction = key === "z"
+        ? (event.shiftKey ? "redo" : "undo")
+        : key === "y" && !event.shiftKey ? "redo" : null;
+      if (!direction) return;
+      event.preventDefault();
+      void run(direction);
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [run]);
+
+  return (
+    <div className="flex items-center gap-0.5 border-r border-budget-rule pr-1.5 mr-1.5">
+      <Button type="button" variant="ghost" size="icon-sm" aria-label="Undo"
+        title="Undo (Ctrl/Cmd+Z)" disabled={busy || !canUndo} onClick={() => void run("undo")}>
+        <Undo2 aria-hidden="true" />
+      </Button>
+      <Button type="button" variant="ghost" size="icon-sm" aria-label="Redo"
+        title="Redo (Ctrl/Cmd+Shift+Z)" disabled={busy || !canRedo} onClick={() => void run("redo")}>
+        <Redo2 aria-hidden="true" />
+      </Button>
+      {error && <p role="alert" className="absolute right-4 top-full max-w-[calc(100vw-2rem)] rounded-b-md border border-t-0 border-destructive/40 bg-background px-3 py-2 text-sm text-destructive shadow-sm sm:right-6">{error}</p>}
+    </div>
+  );
+}

From c1446db39f200442b9e5f2d219791eb96072f071 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 01:50:48 +0200
Subject: [PATCH 23/27] feat: improve recurring cost setup and folder
 management

---
 docs/TODO.md                                  | 12 +++
 src/store/actions.test.ts                     | 33 +++++++
 src/store/actions.ts                          | 31 +++++-
 src/ui/routes/SummaryRoute.tsx                |  4 +-
 .../settings/BudgetFoldersSection.test.tsx    |  6 ++
 .../routes/settings/BudgetFoldersSection.tsx  |  3 +-
 .../routes/settings/RecurringSection.test.tsx | 40 +++++++-
 src/ui/routes/settings/RecurringSection.tsx   | 94 ++++++++++++++++---
 8 files changed, 203 insertions(+), 20 deletions(-)

diff --git a/docs/TODO.md b/docs/TODO.md
index 41df9bc..45b9c58 100755
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -31,6 +31,18 @@ IndexedDB instead of the app.
 
 ---
 
+## Optional monthly income forecast
+
+Add a user-controlled toggle that predicts a month's income from earlier months.
+For each earlier month, divide its recorded income by that month's number of
+workdays; average those per-workday figures, then multiply by the target month's
+workdays. Let the owner adjust the prediction when income changes, for example
+after a raise, without rewriting recorded income or earlier months. Show
+predicted and entered income distinctly, and keep budgeting based on entered
+income unless the owner explicitly chooses otherwise. Before implementation,
+settle whether workdays mean Monday–Friday only or exclude local holidays, and
+whether an adjustment applies to one month or all future predictions.
+
 ## 1. Folder rename blur during an in-flight save
 
 A folder name draft can remain unsaved if the owner changes it while a rename
diff --git a/src/store/actions.test.ts b/src/store/actions.test.ts
index 244563f..36e185f 100644
--- a/src/store/actions.test.ts
+++ b/src/store/actions.test.ts
@@ -16,6 +16,22 @@ const billInput = (postId: string, folderId: string | null = null) => ({
 });
 
 describe("budget folder placement", () => {
+  test("removing a folder moves its direct contents to its parent in order", () => {
+    const data = createSeedDataset("2026-09");
+    const parent = actions.addBudgetFolder(data, "Parent", null);
+    const before = actions.addPost(data, "Before", "DKK", parent.id);
+    const removed = actions.addBudgetFolder(data, "Removed", parent.id);
+    const after = actions.addPost(data, "After", "DKK", parent.id);
+    const child = actions.addBudgetFolder(data, "Child", removed.id);
+    const post = actions.addPost(data, "Kept", "DKK", removed.id);
+    const bill = actions.addRecurringCost(data, billInput(post.id, removed.id));
+    actions.removeBudgetFolder(data, removed.id);
+    expect(data.folders.some(folder => folder.id === removed.id)).toBe(false);
+    expect([child.parentId, post.folderId, bill.folderId]).toEqual([parent.id, parent.id, parent.id]);
+    expect(actions.budgetSiblings(data, parent.id).map(item => item.id)).toEqual([before.id, child.id, post.id, bill.id, after.id]);
+    expect(bill.splits[0]!.postId).toBe(post.id);
+    expect(() => parseDatasetJson(exportDatasetJson(data))).not.toThrow();
+  });
   test("mixed siblings reorder densely", () => {
     const data = createSeedDataset("2026-09");
     const folder = actions.addBudgetFolder(data, "Utilities", null);
@@ -585,6 +601,23 @@ describe("recurring costs", () => {
     expect(post.folderId).toBe(folder.id);
     expect(bill.folderId).toBe(folder.id);
     expect(bill.splits).toEqual([{ postId: post.id, value: 100, absorbsRemainder: true }]);
+    expect(post.rules).toEqual([{ from: "2026-09", rule: { kind: "fixed", amount: { amount: 8000, currency: "DKK" } } }]);
+    actions.confirmOccurrence(data, bill.id, "2026-09");
+    const figures = monthView(data, "2026-09").rows.find(row => row.post.id === post.id)!.figures;
+    expect(figures.allocation).toBe(8000);
+    expect(figures.charges).toBe(8000);
+    expect(figures.remaining).toBe(0);
+  });
+
+  test("dedicated post allocates a rounded monthly share of a less frequent bill", () => {
+    const data = draft();
+    const bill = actions.addRecurringCostWithPost(data, {
+      name: "Insurance", folderId: null, archived: false,
+      amount: { amount: 1200, currency: "DKK" }, startDate: "2026-10",
+      recurrence: { kind: "everyNMonths", n: 12 }, anchoring: "calendar",
+    }, "Insurance");
+    const post = data.posts.find(p => p.id === bill.splits[0]!.postId)!;
+    expect(post.rules[0]).toEqual({ from: "2026-10", rule: { kind: "fixed", amount: { amount: 100, currency: "DKK" } } });
   });
 
   test("a rejected store mutation leaves neither dedicated record", async () => {
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 1d7be5e..430d129 100755
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -109,6 +109,22 @@ export function renameBudgetFolder(draft: Dataset, id: FolderId, name: string):
   folder.name = resolvedName;
 }
 
+/** Removes only the container; its direct children take its place in the parent. */
+export function removeBudgetFolder(draft: Dataset, id: FolderId): void {
+  const folder = requireFolder(draft, id);
+  const parent = folder.parentId;
+  const siblings = siblingRefs(draft, parent);
+  const position = siblings.findIndex(entry => entry.key.kind === "folder" && entry.key.id === id);
+  const children = siblingRefs(draft, id);
+  for (const { key, item } of children) {
+    if (key.kind === "folder") (item as BudgetFolder).parentId = parent;
+    else (item as Post | RecurringCost).folderId = parent;
+  }
+  draft.folders.splice(draft.folders.indexOf(folder), 1);
+  siblings.splice(position, 1, ...children);
+  siblings.forEach(({ item }, order) => { item.order = order; });
+}
+
 export function placeBudgetItem(draft: Dataset, key: BudgetItemKey, destination: FolderId | null, index: number): void {
   const item = requireBudgetItem(draft, key);
   if (destination !== null) requireFolder(draft, destination);
@@ -602,12 +618,25 @@ export function addRecurringCostWithPost(
 ): RecurringCost {
   const name = newPostName.trim();
   if (!name) throw new Error("Post name cannot be blank");
+  const recurrence = requireRecurrence(cost.recurrence);
+  requireStartDateGranularity(recurrence, cost.startDate);
   const post = addPost(draft, name, cost.amount.currency, cost.folderId);
-  return addRecurringCost(draft, {
+  const bill = addRecurringCost(draft, {
     ...cost,
     splitMode: "percent",
     splits: [{ postId: post.id, value: 100, absorbsRemainder: true }],
   });
+  const monthly = recurrence.kind === "everyNMonths"
+    ? bill.amount.amount / recurrence.n
+    : recurrence.kind === "everyNWeeks"
+      ? bill.amount.amount * 52 / (12 * recurrence.n)
+      : bill.amount.amount * 365 / (12 * recurrence.n);
+  const factor = 10 ** draft.settings.digits;
+  const allocation = roundMoney(Math.ceil(monthly * factor) / factor, draft.settings.digits);
+  setRuleFrom(draft, post.id, monthOf(cost.startDate), {
+    kind: "fixed", amount: { amount: allocation, currency: cost.amount.currency },
+  });
+  return bill;
 }
 
 /**
diff --git a/src/ui/routes/SummaryRoute.tsx b/src/ui/routes/SummaryRoute.tsx
index 3e819ac..036ce9d 100644
--- a/src/ui/routes/SummaryRoute.tsx
+++ b/src/ui/routes/SummaryRoute.tsx
@@ -96,7 +96,7 @@ export function SummaryRoute() {
               ? view.byPost.map((entry) => (
                   <tr key={entry.post.id} className="border-b border-budget-rule transition-colors last:border-0 hover:bg-accent/60">
                     <td className="py-2.5">{entry.post.name}</td>
-                    <td className="font-money py-2.5 pl-6 text-right">{fmt.amount(entry.charges)}</td>
+                    <td className="font-money py-2.5 pl-6 text-right">{fmt.money(entry.charges, base)}</td>
                     <td className="font-money py-2.5 pl-6 text-right text-budget-ink-muted">
                       {view.totalCharges === 0
                         ? "—"
@@ -111,7 +111,7 @@ export function SummaryRoute() {
                         {entry.monthId}
                       </Link>
                     </td>
-                    <td className="font-money py-2.5 pl-6 text-right">{fmt.amount(entry.charges)}</td>
+                    <td className="font-money py-2.5 pl-6 text-right">{fmt.money(entry.charges, base)}</td>
                     <td className="font-money py-2.5 pl-6 text-right text-budget-ink-muted">
                       {view.totalCharges === 0
                         ? "—"
diff --git a/src/ui/routes/settings/BudgetFoldersSection.test.tsx b/src/ui/routes/settings/BudgetFoldersSection.test.tsx
index 5f1cc66..17d0260 100644
--- a/src/ui/routes/settings/BudgetFoldersSection.test.tsx
+++ b/src/ui/routes/settings/BudgetFoldersSection.test.tsx
@@ -63,6 +63,12 @@ test("post and bill move independently", async () => setup(async (container, dat
   const rows = Array.from(container.querySelectorAll("[data-budget-item]"));
   expect(rows.findIndex(row => row.getAttribute("data-budget-item") === post.id)).toBeLessThan(rows.findIndex(row => row.getAttribute("data-budget-item") === utilities.id));
 }));
+test("remove folder moves nested items into its parent", async () => setup(async (container, data) => {
+  const housing = data.folders[0]!, utilities = data.folders[1]!;
+  await act(async () => { (container.querySelector('button[aria-label="Remove folder Utilities"]') as HTMLButtonElement).click(); });
+  expect(store.get().folders.some(folder => folder.id === utilities.id)).toBe(false);
+  expect(store.get().folders.find(folder => folder.id === housing.id)).toBeDefined();
+}));
 test("failed move reports error", async () => setup(async (container, data) => {
   const before = JSON.stringify(data);
   await act(async () => { select(container, `Folder for ${data.posts[0]!.name}`, data.folders[0]!.id); });
diff --git a/src/ui/routes/settings/BudgetFoldersSection.tsx b/src/ui/routes/settings/BudgetFoldersSection.tsx
index cf1511b..b0c5750 100644
--- a/src/ui/routes/settings/BudgetFoldersSection.tsx
+++ b/src/ui/routes/settings/BudgetFoldersSection.tsx
@@ -5,7 +5,7 @@ import { NativeSelect } from "@/components/ui/native-select";
 import { Section } from "../../components/Section.tsx";
 import { useDataset } from "../../hooks/useDataset.ts";
 import { useMutate } from "../../hooks/useMutate.ts";
-import { addBudgetFolder, budgetSiblings, placeBudgetItem, renameBudgetFolder, type BudgetItemKey } from "../../../store/actions.ts";
+import { addBudgetFolder, budgetSiblings, placeBudgetItem, removeBudgetFolder, renameBudgetFolder, type BudgetItemKey } from "../../../store/actions.ts";
 
 export function BudgetFoldersSection() {
   const dataset = useDataset();
@@ -79,6 +79,7 @@ export function BudgetFoldersSection() {
               const position = budgetSiblings(draft, parentId).findIndex(sibling => sibling.kind === key.kind && sibling.id === key.id);
               placeBudgetItem(draft, key, parentId, position + 1);
             })}>down</Button>
+            {key.kind === "folder" && <Button size="xs" variant="ghost" aria-label={`Remove folder ${item.name}`} title="Move contents to parent and remove folder" onClick={() => void mutate(draft => removeBudgetFolder(draft, key.id))}>remove</Button>}
           </div>
         </div>
         {key.kind === "folder" && <div className="ml-3 border-l border-budget-rule pl-3 sm:ml-5 sm:pl-5">{children(key.id)}</div>}
diff --git a/src/ui/routes/settings/RecurringSection.test.tsx b/src/ui/routes/settings/RecurringSection.test.tsx
index 3532edc..1b47163 100644
--- a/src/ui/routes/settings/RecurringSection.test.tsx
+++ b/src/ui/routes/settings/RecurringSection.test.tsx
@@ -10,7 +10,7 @@ import { store } from "../../../store/index.ts";
 import { addRecurringCost } from "../../../store/actions.ts";
 import { RecurringSection } from "./RecurringSection.tsx";
 
-test("bill requires an explicit destination", async () => {
+test("existing post destination requires a selection", async () => {
   const data = createSeedDataset("2026-09");
   data.posts[0]!.archived = true;
   const original = { get: store.get, subscribe: store.subscribe, mutate: store.mutate };
@@ -24,6 +24,8 @@ test("bill requires an explicit destination", async () => {
     act(() => root.render(<RecurringSection />));
     const name = container.querySelector('input[placeholder="New cost name"]') as HTMLInputElement;
     act(() => { name.focus(); Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(name, "Phone"); name.dispatchEvent(new InputEvent("input", { bubbles: true, data: "Phone", inputType: "insertText" })); });
+    const kind = container.querySelector('select[aria-label="Destination type"]') as HTMLSelectElement;
+    act(() => { kind.value = "existing"; kind.dispatchEvent(new Event("change", { bubbles: true })); });
     const add = Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Add recurring cost")!;
     expect(add.disabled).toBe(true);
     const chosen = data.posts[1]!;
@@ -43,6 +45,42 @@ test("bill requires an explicit destination", async () => {
   }
 });
 
+test("new bill defaults to a same-name post and accepts schedule controls", async () => {
+  const data = createSeedDataset("2026-09");
+  const original = { get: store.get, subscribe: store.subscribe, mutate: store.mutate };
+  store.get = () => data;
+  store.subscribe = () => () => {};
+  store.mutate = async change => { change(data); };
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  document.body.append(container);
+  try {
+    act(() => root.render(<RecurringSection />));
+    expect((container.querySelector('select[aria-label="Destination type"]') as HTMLSelectElement).value).toBe("dedicated");
+    expect((container.querySelector('input[aria-label="New bill amount"]') as HTMLInputElement).value).toContain(data.settings.baseCurrency);
+    expect((container.querySelector('input[aria-label="New bill start date"]') as HTMLInputElement).type).toBe("month");
+    const precision = container.querySelector('select[aria-label="New bill date precision"]') as HTMLSelectElement;
+    act(() => { precision.value = "date"; precision.dispatchEvent(new Event("change", { bubbles: true })); });
+    expect((container.querySelector('input[aria-label="New bill start date"]') as HTMLInputElement).type).toBe("date");
+    const name = container.querySelector('input[placeholder="New cost name"]') as HTMLInputElement;
+    act(() => { Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(name, "Insurance"); name.dispatchEvent(new InputEvent("input", { bubbles: true })); });
+    const amount = container.querySelector('input[aria-label="New bill amount"]') as HTMLInputElement;
+    act(() => { Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(amount, "1200 DKK"); amount.dispatchEvent(new InputEvent("input", { bubbles: true })); });
+    const interval = container.querySelector('input[aria-label="New bill interval"]') as HTMLInputElement;
+    act(() => { Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(interval, "12"); interval.dispatchEvent(new InputEvent("input", { bubbles: true })); });
+    await act(async () => { Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Add recurring cost")!.click(); });
+    const bill = data.recurring[0]!;
+    const post = data.posts.find(post => post.id === bill.splits[0]!.postId)!;
+    expect(post.name).toBe("Insurance");
+    expect(bill.recurrence).toEqual({ kind: "everyNMonths", n: 12 });
+    expect(bill.startDate).toHaveLength(10);
+    expect(post.rules[0]!.rule).toEqual({ kind: "fixed", amount: { amount: 100, currency: "DKK" } });
+  } finally {
+    act(() => root.unmount()); container.remove();
+    Object.assign(store, original);
+  }
+});
+
 test("failed destination edit keeps its editor and error visible", async () => {
   const data = createSeedDataset("2026-09");
   const cost = addRecurringCost(data, {
diff --git a/src/ui/routes/settings/RecurringSection.tsx b/src/ui/routes/settings/RecurringSection.tsx
index 45ea3b7..8e46cc5 100644
--- a/src/ui/routes/settings/RecurringSection.tsx
+++ b/src/ui/routes/settings/RecurringSection.tsx
@@ -94,22 +94,36 @@ export function normalizedStartDateFor(kind: Recurrence["kind"], startDate: IsoD
   return `${startDate}-01`;
 }
 
+function dateForInput(value: IsoDate | undefined, precision: "month" | "date"): string {
+  if (!value) return "";
+  return precision === "date" ? (isDayGranular(value) ? value : `${value}-01`) : value.slice(0, 7);
+}
+
 export function RecurringSection() {
   const dataset = useDataset();
   const { mutate, error } = useMutate();
   const [newName, setNewName] = useState("");
-  const [newAmount, setNewAmount] = useState("0");
-  const [destinationKind, setDestinationKind] = useState<"existing" | "dedicated">("existing");
+  const [newAmount, setNewAmount] = useState(`0 ${dataset.settings.baseCurrency}`);
+  const [destinationKind, setDestinationKind] = useState<"existing" | "dedicated">("dedicated");
   const [newPostName, setNewPostName] = useState("");
+  const [newInterval, setNewInterval] = useState("1");
+  const [newUnit, setNewUnit] = useState<Recurrence["kind"]>("everyNMonths");
+  const [newWeekday, setNewWeekday] = useState(1);
+  const [newStartDate, setNewStartDate] = useState<IsoDate>(currentMonth);
+  const [newDatePrecision, setNewDatePrecision] = useState<"month" | "date">("month");
+  const [newAnchoring, setNewAnchoring] = useState<RecurringCost["anchoring"]>("calendar");
   const [folderId, setFolderId] = useState<string | null>(null);
   const [newSelection, setNewSelection] = useState<RecurringSplitSelection>({ splitMode: "percent", splits: [{ postId: "", value: 100, absorbsRemainder: true }] });
   const [editingId, setEditingId] = useState<string | null>(null);
+  const [endDatePrecision, setEndDatePrecision] = useState<Record<string, "month" | "date">>({});
   const [editSelection, setEditSelection] = useState<RecurringSplitSelection | null>(null);
   const ordered = [...dataset.recurring].sort((a, b) => a.order - b.order);
   const base = dataset.settings.baseCurrency;
   const activePosts = dataset.posts.filter(post => !post.archived).sort((a, b) => a.order - b.order);
   const parsedNewAmount = parseMoneyInput(newAmount, dataset.currencies, base);
   const validNewSplits = newSelection.splits.length > 0 && newSelection.splits.every(split => activePosts.some(post => post.id === split.postId));
+  const validNewInterval = Number.isInteger(Number(newInterval)) && Number(newInterval) >= 1;
+  const validNewStart = isValidStartDate(newStartDate, newUnit);
 
   function amountCell(cost: RecurringCost) {
     return (
@@ -265,6 +279,12 @@ export function RecurringSection() {
                     </NativeSelect>
                   </td>
                   <td className="py-2">
+                    <div className="flex items-center gap-1">
+                    {cost.recurrence.kind === "everyNMonths" && <NativeSelect className="h-8 w-auto text-xs" aria-label={`Date precision for ${cost.name}`} value={isDayGranular(cost.startDate) ? "date" : "month"} onChange={event => {
+                      const precision = event.target.value;
+                      const startDate = precision === "date" ? `${monthOf(cost.startDate)}-01` : monthOf(cost.startDate);
+                      void mutate(draft => updateRecurringCost(draft, cost.id, { startDate }));
+                    }}><option value="month">Month</option><option value="date">Date</option></NativeSelect>}
                     {/* Uncontrolled: committing only happens on blur, and only
                         when the text parses as an IsoDate of the granularity
                         this cost's recurrence kind requires. Keyed on the
@@ -274,7 +294,7 @@ export function RecurringSection() {
                     <Input
                       key={`${cost.id}-${cost.startDate}`}
                       className="h-8 w-32"
-                      type="text"
+                      type={cost.recurrence.kind === "everyNMonths" && !isDayGranular(cost.startDate) ? "month" : "date"}
                       aria-label={`Start date for ${cost.name}`}
                       defaultValue={cost.startDate}
                       onBlur={(event) => {
@@ -288,8 +308,11 @@ export function RecurringSection() {
                         );
                       }}
                     />
+                    </div>
                   </td>
                   <td className="py-2">
+                    <div className="flex items-center gap-1">
+                    <NativeSelect className="h-8 w-auto text-xs" aria-label={`End date precision for ${cost.name}`} value={endDatePrecision[cost.id] ?? (cost.endedFrom && isDayGranular(cost.endedFrom) ? "date" : "month")} onChange={event => setEndDatePrecision(precision => ({ ...precision, [cost.id]: event.target.value as "month" | "date" }))}><option value="month">Month</option><option value="date">Date</option></NativeSelect>
                     {/* Same idiom as "Starts": uncontrolled, committed on
                         blur, keyed on the stored value so an external change
                         (the end/restart button, or a rejected edit) shows up
@@ -297,12 +320,12 @@ export function RecurringSection() {
                         ended" and is itself a valid value — clearing it here
                         does the same thing as the "restart" button. */}
                     <Input
-                      key={`${cost.id}-ends-${cost.endedFrom ?? ""}`}
+                      key={`${cost.id}-ends-${cost.endedFrom ?? ""}-${endDatePrecision[cost.id] ?? "stored"}`}
                       className="h-8 w-32"
-                      type="text"
+                      type={endDatePrecision[cost.id] ?? (cost.endedFrom && isDayGranular(cost.endedFrom) ? "date" : "month")}
                       placeholder="—"
                       aria-label={`Ends date for ${cost.name}`}
-                      defaultValue={cost.endedFrom ?? ""}
+                      defaultValue={dateForInput(cost.endedFrom, endDatePrecision[cost.id] ?? (cost.endedFrom && isDayGranular(cost.endedFrom) ? "date" : "month"))}
                       onBlur={(event) => {
                         const typed = event.target.value.trim();
                         if (!isValidEndedFrom(typed)) {
@@ -318,6 +341,7 @@ export function RecurringSection() {
                         );
                       }}
                     />
+                    </div>
                   </td>
                   <td className="py-2">
                     <div className="flex items-center justify-end gap-1">
@@ -378,30 +402,69 @@ export function RecurringSection() {
           value={newName}
           onInput={(event) => setNewName(event.currentTarget.value)}
         />
-        <Input className="w-28" type="text" aria-label="New bill amount" value={newAmount} onInput={event => setNewAmount(event.currentTarget.value)} />
+        <Input className="w-32" type="text" aria-label="New bill amount" value={newAmount} onInput={event => setNewAmount(event.currentTarget.value)} />
+        <label className="text-xs">Every
+          <span className="mt-1 flex items-center gap-1">
+            <Input className="w-20" type="number" min={1} step={1} aria-label="New bill interval" value={newInterval} onInput={event => setNewInterval(event.currentTarget.value)} />
+            <NativeSelect aria-label="New bill recurrence unit" value={newUnit} onChange={event => {
+              const kind = event.target.value as Recurrence["kind"];
+              setNewUnit(kind);
+              setNewStartDate(date => normalizedStartDateFor(kind, date));
+              if (kind !== "everyNMonths") setNewDatePrecision("date");
+            }}>
+              <option value="everyNMonths">months</option>
+              <option value="everyNWeeks">weeks</option>
+              <option value="everyNDays">days</option>
+            </NativeSelect>
+          </span>
+        </label>
+        {newUnit === "everyNWeeks" && <NativeSelect aria-label="New bill weekday" value={newWeekday} onChange={event => setNewWeekday(Number(event.target.value))}>
+          {WEEKDAYS.map((day, index) => <option key={day} value={index}>{day}</option>)}
+        </NativeSelect>}
+        <label className="text-xs">First due
+          <span className="mt-1 flex items-center gap-1">
+            {newUnit === "everyNMonths" && <NativeSelect aria-label="New bill date precision" value={newDatePrecision} onChange={event => {
+              const precision = event.target.value as "month" | "date";
+              setNewDatePrecision(precision);
+              setNewStartDate(date => {
+                const valid = isValidStartDate(date, "everyNMonths") ? date : currentMonth;
+                return precision === "date" ? normalizedStartDateFor("everyNDays", valid) : monthOf(valid);
+              });
+            }}><option value="month">Month</option><option value="date">Date</option></NativeSelect>}
+            <Input className="w-36" type={newUnit === "everyNMonths" && newDatePrecision === "month" ? "month" : "date"} aria-label="New bill start date" value={newStartDate} onChange={event => setNewStartDate(event.target.value)} aria-invalid={!validNewStart} />
+          </span>
+        </label>
+        <NativeSelect aria-label="New bill anchoring" value={newAnchoring} onChange={event => setNewAnchoring(event.target.value as RecurringCost["anchoring"])}>
+          <option value="calendar">From calendar</option>
+          <option value="lastCharge">From last charge</option>
+        </NativeSelect>
         <NativeSelect aria-label="Bill folder" value={folderId ?? ""} onChange={event => setFolderId(event.target.value || null)}>
           <option value="">Unfiled</option>
           {dataset.folders.map(folder => <option key={folder.id} value={folder.id}>{folder.name}</option>)}
         </NativeSelect>
         <NativeSelect aria-label="Destination type" value={destinationKind} onChange={event => setDestinationKind(event.target.value as "existing" | "dedicated")}>
-          <option value="existing">Use existing post</option>
           <option value="dedicated">Create dedicated post</option>
+          <option value="existing">Use existing post</option>
         </NativeSelect>
         {destinationKind === "dedicated" ? (
-          <Input aria-label="Dedicated post name" placeholder="New post name" value={newPostName} onChange={event => setNewPostName(event.target.value)} />
+          <Input aria-label="Dedicated post name" placeholder={newName.trim() || "Same name as bill"} value={newPostName} onChange={event => setNewPostName(event.target.value)} />
         ) : (
           <RecurringSplitEditor {...newSelection} posts={activePosts} onChange={setNewSelection} />
         )}
         <Button
           variant="outline"
-          disabled={newName.trim() === "" || !parsedNewAmount || (destinationKind === "dedicated" ? !newPostName.trim() : !validNewSplits)}
+          disabled={newName.trim() === "" || !parsedNewAmount || !validNewInterval || !validNewStart || (destinationKind === "existing" && !validNewSplits)}
           onClick={() => {
             const name = newName.trim();
             const amount = parsedNewAmount;
             if (!amount) return;
             const selectedFolder = folderId;
             const selectedKind = destinationKind;
-            const dedicatedName = newPostName.trim();
+            const dedicatedName = newPostName.trim() || name;
+            const startDate = newStartDate;
+            const n = Number(newInterval);
+            const recurrence: Recurrence = newUnit === "everyNWeeks" ? { kind: newUnit, n, weekday: newWeekday } : { kind: newUnit, n };
+            const anchoring = newAnchoring;
             const selectedSplits = newSelection.splits.map(split => ({ ...split }));
             const selectedMode = newSelection.splitMode;
             void mutate((draft) => {
@@ -410,21 +473,22 @@ export function RecurringSection() {
                 folderId: selectedFolder,
                 archived: false,
                 amount,
-                startDate: currentMonth,
-                recurrence: { kind: "everyNMonths" as const, n: 1 },
-                anchoring: "calendar" as const,
+                startDate,
+                recurrence,
+                anchoring,
               };
               if (selectedKind === "dedicated") addRecurringCostWithPost(draft, input, dedicatedName);
               else addRecurringCost(draft, { ...input, splitMode: selectedMode, splits: selectedSplits });
             },
             ).then((saved) => {
-              if (saved) { setNewName(""); setNewPostName(""); setNewAmount("0"); setNewSelection({ splitMode: "percent", splits: [{ postId: "", value: 100, absorbsRemainder: true }] }); }
+              if (saved) { setNewName(""); setNewPostName(""); setNewAmount(`0 ${base}`); setNewSelection({ splitMode: "percent", splits: [{ postId: "", value: 100, absorbsRemainder: true }] }); }
             });
           }}
         >
           Add recurring cost
         </Button>
       </div>
+      <p className="mt-2 text-xs text-budget-ink-muted">A dedicated post receives an automatic monthly allocation based on this bill’s schedule. If its first payment comes before enough has accumulated, its balance may be negative until later allocations catch up.</p>
     </Section>
   );
 }

From b0e8145d2ead1c37f0f37f05a4e4650c513b53ff Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 13:09:07 +0200
Subject: [PATCH 24/27] feat: support unassigned purchases and allocation
 status

Allow month-only purchases to start finance plans. Keep unbudgeted posts distinct from explicit zero rules in overspend reporting.
---
 docs/ARCHITECTURE.md                     | 16 +++++-
 docs/PRODUCT.md                          |  5 ++
 src/domain/charges.ts                    | 14 +++++
 src/domain/types.ts                      |  3 +-
 src/domain/views.test.ts                 | 56 +++++++++++++++++++
 src/domain/views.ts                      | 45 ++++++++++++----
 src/export/json.test.ts                  | 11 ++--
 src/export/json.ts                       | 12 +++--
 src/export/ods.test.ts                   | 18 +++++++
 src/export/ods.ts                        | 19 ++++++-
 src/store/actions.test.ts                | 10 ++++
 src/ui/bulkEntry.test.ts                 | 11 ++--
 src/ui/bulkEntry.ts                      | 10 ++--
 src/ui/components/PlanEditor.test.tsx    | 48 +++++++++++++++++
 src/ui/components/PlanEditor.tsx         | 16 +++---
 src/ui/components/PostTable.test.tsx     | 43 +++++++++++++++
 src/ui/components/PostTable.tsx          | 10 ++--
 src/ui/components/PurchaseDialog.tsx     | 20 ++++++-
 src/ui/components/RuleHistory.tsx        |  4 +-
 src/ui/components/SplitEditor.tsx        | 22 ++++++++
 src/ui/components/YearMatrix.tsx         | 13 ++++-
 src/ui/meterSegments.test.ts             |  5 ++
 src/ui/meterSegments.ts                  | 15 +++++-
 src/ui/purchaseForm.test.ts              | 10 ++--
 src/ui/purchaseForm.ts                   |  7 +--
 src/ui/routes/MonthRoute.tsx             |  6 +++
 src/ui/routes/NoAllocationViews.test.tsx | 68 ++++++++++++++++++++++++
 src/ui/routes/PostMonthRoute.tsx         |  6 +--
 src/ui/routes/PostYearRoute.tsx          |  9 ++--
 src/ui/routes/SummaryRoute.tsx           | 15 +++++-
 src/ui/routes/YearRoute.tsx              |  2 +-
 31 files changed, 469 insertions(+), 80 deletions(-)
 create mode 100644 src/ui/components/PlanEditor.test.tsx
 create mode 100644 src/ui/components/PostTable.test.tsx
 create mode 100644 src/ui/routes/NoAllocationViews.test.tsx

diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index fb3ee41..bb792e3 100755
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -47,8 +47,9 @@ remaining = carriedIn + allocation − charges     (carried forward, monthly)
 
 Unspent carries; overspend carries as debt. **Nothing else may recompute this.**
 The month view, year matrix, summary, per-post views and the ODS export all
-aggregate over `foldBalances` / `figuresFor`. A closing balance is read from
-`byMonth[11].remaining`, never re-summed.
+aggregate envelope figures over `foldBalances` / `figuresFor`. Overall Spent
+also includes unassigned purchase slices, which have no envelope to fold. A
+closing balance is read from `byMonth[11].remaining`, never re-summed.
 
 A recurring cost adds a SECOND balance beside it, on its own carry:
 
@@ -156,6 +157,17 @@ those parts*. Both split modes collapse to one code path per slice.
 Applying a split's raw value per-slice looks simpler and passes every percentage
 test — and charges a fixed "2000 to Video Games" in full on every slice.
 
+A purchase with no post has an empty `splits` array. Its dated amount counts in
+monthly, yearly and summary Spent totals, but charges no envelope and changes no
+rollover balance. Recurring bills still require a destination post. JSON import
+and ODS export preserve these unassigned purchases.
+
+A post with no applicable allocation rule has no overspend status, even if its
+balance is negative. The balance remains visible and carries normally. An
+explicit zero rule, including a zero monthly override, does have an overspend
+status when its balance is negative. The views use the presence of a rule rather
+than infer it from the numeric allocation, since both cases fold to zero.
+
 ## Things the app deliberately does NOT validate
 
 Adding a "missing" guard here is a regression, not a fix:
diff --git a/docs/PRODUCT.md b/docs/PRODUCT.md
index d959926..57b9355 100755
--- a/docs/PRODUCT.md
+++ b/docs/PRODUCT.md
@@ -59,10 +59,15 @@ Confirmed and in place:
   posts alone hold envelope balances.
 - Posts (envelopes) with monthly allocation, created and archived by the owner.
   Posts are archived, never deleted, because purchases reference them.
+- A post with no applicable allocation rule still records spending and shows its
+  balance, but is not labelled overspent. An explicit zero allocation is a
+  budget rule and can be overspent.
 - Allocation is either a fixed amount or a percentage of that month's income.
 - A purchase can be split across several posts, by percentage or by fixed
   amounts, and can also be spread across future months as a payment plan. The
   two compose.
+- A purchase may have no post. It remains visible in its month and counts in
+  Spent, while leaving envelope balances unchanged.
 - Per-month income, entered directly, varying month to month.
 - Multi-currency (DKK/USD/EUR) against a user-maintained exchange-rate table,
   with an optional on-demand fetch that fails soft and is never required.
diff --git a/src/domain/charges.ts b/src/domain/charges.ts
index 25406b3..e230ba7 100644
--- a/src/domain/charges.ts
+++ b/src/domain/charges.ts
@@ -125,6 +125,7 @@ export function chargesForPurchaseInMonth(
 ): Charge[] {
   const slice = sliceAmountForMonth(purchase, monthId);
   if (!slice) return [];
+  if (purchase.splits.length === 0) return [];
 
   // Split proportions come from the WHOLE purchase, so a financed purchase
   // divides each slice in the same ratio as the purchase as a whole — which is
@@ -140,6 +141,19 @@ export function chargesForPurchaseInMonth(
   );
 }
 
+/** Spending with no envelope destination in one month, in base currency. */
+export function looseChargesForMonth(dataset: Dataset, monthId: MonthId): number {
+  return dataset.purchases.reduce((sum, purchase) => {
+    if (purchase.splits.length !== 0) return sum;
+    const slice = sliceAmountForMonth(purchase, monthId);
+    if (!slice) return sum;
+    return roundMoney(
+      sum + toBase(slice, dataset.settings.baseCurrency, dataset.fxRates, dataset.settings.digits),
+      dataset.settings.digits,
+    );
+  }, 0);
+}
+
 /** Total charged per post in `monthId`, in base currency. */
 export function chargesForMonth(
   dataset: Dataset,
diff --git a/src/domain/types.ts b/src/domain/types.ts
index d52171e..2eee7d1 100755
--- a/src/domain/types.ts
+++ b/src/domain/types.ts
@@ -169,7 +169,7 @@ export interface RecurringCost {
   endedFrom?: IsoDate;
   recurrence: Recurrence;
   anchoring: Anchoring;
-  /** Same shape and same invariant as Purchase: exactly one absorbsRemainder. */
+  /** Bills require exactly one remainder-absorbing destination. */
   splitMode: "percent" | "fixed";
   splits: Split[];
 }
@@ -183,6 +183,7 @@ export interface Purchase {
   /** In the purchase's own currency. */
   total: Money;
   splitMode: "percent" | "fixed";
+  /** Empty means spent in the month without charging any post. */
   splits: Split[];
   /** null means the whole total is charged in the month of `date`. */
   schedule: Schedule | null;
diff --git a/src/domain/views.test.ts b/src/domain/views.test.ts
index 243c1b8..a217640 100644
--- a/src/domain/views.test.ts
+++ b/src/domain/views.test.ts
@@ -55,6 +55,33 @@ const data: Dataset = {
 };
 
 describe("monthView", () => {
+  test("counts a loose purchase as spent without charging a post", () => {
+    const loose: Dataset = { ...data, purchases: [{ ...spend("loose", "food", 75, "2026-01"), splits: [] }] };
+    const view = monthView(loose, "2026-01");
+    expect(view.totalCharges).toBe(75);
+    expect(view.rows.every((row) => row.figures.charges === 0)).toBe(true);
+    expect(view.rows[0]!.figures.remaining).toBe(2000);
+  });
+
+  test("counts financed loose slices in their months and converts currency", () => {
+    const loose: Dataset = {
+      ...data,
+      fxRates: [{ currency: "EUR", baseUnitsPerOne: 7.5, updatedAt: "2026-01-01", source: "manual" }],
+      purchases: [{
+        ...spend("loose", "food", 10, "2026-01"),
+        total: { amount: 10, currency: "EUR" },
+        splits: [],
+        schedule: { slices: [
+          { month: "2026-01", amount: { amount: 4, currency: "EUR" } },
+          { month: "2026-02", amount: { amount: 6, currency: "EUR" } },
+        ] },
+      }],
+    };
+    expect(monthView(loose, "2026-01").totalCharges).toBe(30);
+    expect(monthView(loose, "2026-02").totalCharges).toBe(45);
+    expect(yearView(loose, 2026).totalCharges).toBe(75);
+    expect(summaryView(loose, "2026-01", "2026-02").looseCharges).toBe(75);
+  });
   test("reports income, allocations, and the unallocated remainder", () => {
     const view = monthView(data, "2026-01");
     expect(view.income).toBe(10000);
@@ -104,6 +131,35 @@ describe("monthView", () => {
     expect(view.overspentCount).toBe(0);
   });
 
+  test("no allocation rule stays distinct from an explicit zero allocation", () => {
+    const unbudgeted = { ...post("none", 0, 0), rules: [] };
+    const zero = post("zero", 1, 0);
+    const caseData: Dataset = {
+      ...data,
+      posts: [unbudgeted, zero],
+      purchases: [spend("a", "none", 25, "2026-01"), spend("b", "zero", 25, "2026-01")],
+    };
+    const view = monthView(caseData, "2026-01");
+    expect(view.rows.map((row) => row.hasAllocationRule)).toEqual([false, true]);
+    expect(view.rows.map((row) => row.figures.remaining)).toEqual([-25, -25]);
+    expect(view.overspentCount).toBe(1);
+    expect(yearView(caseData, 2026).rows.map((row) => row.hasAllocationRuleByMonth[0])).toEqual([false, true]);
+  });
+
+  test("a monthly override counts as an allocation rule even before any standing rule", () => {
+    const caseData: Dataset = {
+      ...data,
+      posts: [{ ...post("none", 0, 0), rules: [] }],
+      months: [{ id: "2026-01", income: { amount: 10000, currency: "DKK" }, ruleOverrides: {
+        none: { kind: "fixed", amount: { amount: 0, currency: "DKK" } },
+      } }],
+      purchases: [spend("a", "none", 25, "2026-01")],
+    };
+    const view = monthView(caseData, "2026-01");
+    expect(view.rows[0]!.hasAllocationRule).toBe(true);
+    expect(view.overspentCount).toBe(1);
+  });
+
   test("archived posts appear only when they have activity", () => {
     const withArchived: Dataset = {
       ...data,
diff --git a/src/domain/views.ts b/src/domain/views.ts
index 01145d8..61e01fe 100644
--- a/src/domain/views.ts
+++ b/src/domain/views.ts
@@ -1,4 +1,5 @@
-import { incomeFor, isOverridden } from "./allocation.ts";
+import { incomeFor, isOverridden, ruleForPost } from "./allocation.ts";
+import { looseChargesForMonth } from "./charges.ts";
 import { figuresFor, foldBalances, type Fold, type PostMonthFigures } from "./fold.ts";
 import { roundMoney } from "./money.ts";
 import { compareMonths, monthOf, monthRange, monthsOfYear } from "./months.ts";
@@ -8,6 +9,8 @@ export interface MonthPostRow {
   post: Post;
   figures: PostMonthFigures;
   overridden: boolean;
+  /** An applicable standing rule or monthly override, including an explicit zero. */
+  hasAllocationRule: boolean;
 }
 
 export interface MonthViewModel {
@@ -15,11 +18,13 @@ export interface MonthViewModel {
   income: number;
   totalAllocation: number;
   totalCharges: number;
+  looseCharges: number;
   /** income - totalAllocation. Negative when allocations exceed income. */
   unallocated: number;
   /**
-   * How many rows are overspent — `remaining < 0`, so a post at exactly zero
-   * does not count. Computed here rather than in the component because it is
+   * How many budgeted rows are overspent — `remaining < 0` with an applicable
+   * allocation rule. A post with no rule still shows its negative balance,
+   * but has no budget to overspend. Computed here because it is
    * the month-level answer to "did I overspend", and it belongs where the
    * rest of the month's arithmetic is tested.
    */
@@ -57,17 +62,22 @@ export function monthView(dataset: Dataset, monthId: MonthId): MonthViewModel {
     const figures = figuresFor(fold, post.id, monthId);
     // Archived posts stay visible only while they still have activity.
     if (post.archived && !hasActivity(figures)) continue;
-    rows.push({ post, figures, overridden: isOverridden(month, post.id) });
+    rows.push({
+      post,
+      figures,
+      overridden: isOverridden(month, post.id),
+      hasAllocationRule: ruleForPost(month, post, monthId) !== null,
+    });
   }
 
-  const base = dataset.settings.baseCurrency;
   const baseDigits = dataset.settings.digits;
+  const looseCharges = looseChargesForMonth(dataset, monthId);
   const totalAllocation = roundMoney(
     rows.reduce((sum, r) => sum + r.figures.allocation, 0),
     baseDigits,
   );
   const totalCharges = roundMoney(
-    rows.reduce((sum, r) => sum + r.figures.charges, 0),
+    rows.reduce((sum, r) => sum + r.figures.charges, looseCharges),
     baseDigits,
   );
 
@@ -76,8 +86,9 @@ export function monthView(dataset: Dataset, monthId: MonthId): MonthViewModel {
     income,
     totalAllocation,
     totalCharges,
+    looseCharges,
     unallocated: roundMoney(income - totalAllocation, baseDigits),
-    overspentCount: rows.filter((r) => r.figures.remaining < 0).length,
+    overspentCount: rows.filter((r) => r.hasAllocationRule && r.figures.remaining < 0).length,
     rows,
   };
 }
@@ -86,6 +97,7 @@ export interface YearPostRow {
   post: Post;
   /** Twelve entries, January to December. */
   byMonth: PostMonthFigures[];
+  hasAllocationRuleByMonth: boolean[];
   totalAllocation: number;
   totalCharges: number;
   /** December's remaining balance. */
@@ -98,22 +110,27 @@ export interface YearViewModel {
   incomeByMonth: number[];
   totalIncome: number;
   totalCharges: number;
+  looseByMonth: number[];
+  totalLooseCharges: number;
   rows: YearPostRow[];
 }
 
 export function yearView(dataset: Dataset, year: number): YearViewModel {
   const months = monthsOfYear(year);
   const fold = foldBalances(dataset, months[11]!);
-  const base = dataset.settings.baseCurrency;
   const baseDigits = dataset.settings.digits;
 
   const incomeByMonth = months.map((m) => incomeFor(dataset, m));
+  const looseByMonth = months.map((m) => looseChargesForMonth(dataset, m));
 
   const rows: YearPostRow[] = visiblePosts(dataset).map((post) => {
     const byMonth = months.map((m) => figuresFor(fold, post.id, m));
     return {
       post,
       byMonth,
+      hasAllocationRuleByMonth: months.map((monthId) =>
+        ruleForPost(dataset.months.find((m) => m.id === monthId), post, monthId) !== null,
+      ),
       totalAllocation: roundMoney(
         byMonth.reduce((sum, f) => sum + f.allocation, 0),
         baseDigits,
@@ -135,9 +152,11 @@ export function yearView(dataset: Dataset, year: number): YearViewModel {
       baseDigits,
     ),
     totalCharges: roundMoney(
-      rows.reduce((sum, r) => sum + r.totalCharges, 0),
+      rows.reduce((sum, r) => sum + r.totalCharges, looseByMonth.reduce((a, b) => a + b, 0)),
       baseDigits,
     ),
+    looseByMonth,
+    totalLooseCharges: roundMoney(looseByMonth.reduce((a, b) => a + b, 0), baseDigits),
     rows,
   };
 }
@@ -148,6 +167,7 @@ export interface SummaryViewModel {
   byPost: { post: Post; charges: number }[];
   byMonth: { monthId: MonthId; charges: number }[];
   totalCharges: number;
+  looseCharges: number;
   totalIncome: number;
   difference: number;
 }
@@ -176,7 +196,7 @@ export function summaryView(
     charges: roundMoney(
       dataset.posts.reduce(
         (sum, p) => sum + figuresFor(fold, p.id, monthId).charges,
-        0,
+        looseChargesForMonth(dataset, monthId),
       ),
       baseDigits,
     ),
@@ -186,6 +206,10 @@ export function summaryView(
     byMonth.reduce((sum, m) => sum + m.charges, 0),
     baseDigits,
   );
+  const looseCharges = roundMoney(
+    months.reduce((sum, monthId) => sum + looseChargesForMonth(dataset, monthId), 0),
+    baseDigits,
+  );
   const totalIncome = roundMoney(
     months.reduce((sum, m) => sum + incomeFor(dataset, m), 0),
     baseDigits,
@@ -197,6 +221,7 @@ export function summaryView(
     byPost,
     byMonth,
     totalCharges,
+    looseCharges,
     totalIncome,
     difference: roundMoney(totalIncome - totalCharges, baseDigits),
   };
diff --git a/src/export/json.test.ts b/src/export/json.test.ts
index 5bc497b..38b9097 100644
--- a/src/export/json.test.ts
+++ b/src/export/json.test.ts
@@ -53,6 +53,11 @@ describe("round trip", () => {
 });
 
 describe("validation", () => {
+  test("accepts a purchase with no post and preserves it through export", () => {
+    const data = populated();
+    data.purchases[0]!.splits = [];
+    expect(parseDatasetJson(exportDatasetJson(data)).purchases[0]!.splits).toEqual([]);
+  });
   test("rejects malformed JSON", () => {
     expect(() => parseDatasetJson("{not json")).toThrow(ImportValidationError);
   });
@@ -89,12 +94,6 @@ describe("validation", () => {
     expect(() => parseDatasetJson(JSON.stringify(data))).toThrow(/exactly one/i);
   });
 
-  test("rejects a purchase with no splits", () => {
-    const data = populated();
-    data.purchases[0]!.splits = [];
-    expect(() => parseDatasetJson(JSON.stringify(data))).toThrow(/at least one split/i);
-  });
-
   test("rejects an unsupported currency", () => {
     const data = populated() as any;
     // CHF, not GBP: GBP is one of the currencies the app ships with now.
diff --git a/src/export/json.ts b/src/export/json.ts
index 6d92bc1..586c788 100644
--- a/src/export/json.ts
+++ b/src/export/json.ts
@@ -242,8 +242,8 @@ function requireRecurrence(recurrence: any, label: string): void {
  * `distributeByWeight`/`distributeByAmount` branch in `domain/charges.ts`.
  * One helper means the two write paths cannot silently drift into checking
  * to different standards; the two loops used to each carry their own copy of
- * the "no splits" / "one absorber" / "unknown post" checks, so this replaces
- * both rather than adding a third copy.
+ * the "one absorber" / "unknown post" checks, so this replaces both rather
+ * than adding a third copy. Bills require a split; purchases may be unassigned.
  *
  * `splitMode` must be one of the two known modes: `charges.ts` picks its
  * distribution function with `splitMode === "percent" ? ... : ...`, so any
@@ -266,15 +266,17 @@ function requireSplits(
   splitMode: unknown,
   label: string,
   postIds: ReadonlySet<string>,
+  allowEmpty = false,
 ): void {
   if (!SPLIT_MODES.has(splitMode as string)) {
     throw new ImportValidationError(
       `${label} has an unknown splitMode "${String(splitMode)}"`,
     );
   }
-  if (!Array.isArray(splits) || splits.length === 0) {
+  if (!Array.isArray(splits) || (splits.length === 0 && !allowEmpty)) {
     throw new ImportValidationError(`${label} has no splits; at least one split is required`);
   }
+  if (splits.length === 0) return;
   const absorbers = (splits as Array<Record<string, unknown>>).filter(
     (s) => s?.absorbsRemainder,
   ).length;
@@ -297,7 +299,7 @@ function requireSplits(
 
 /**
  * Validates far enough that the fold cannot throw on the imported data: every
- * split points at a real post, every purchase has exactly one remainder
+ * split points at a real post, every assigned purchase has exactly one remainder
  * absorber, every MonthId parses, every rule version resolves unambiguously
  * to a number rather than to NaN or a missing rate, and every recurring
  * cost's startDate is both granular enough for its recurrence kind
@@ -484,7 +486,7 @@ export function parseDatasetJson(text: string): Dataset {
     if (!PURCHASE_DATE.test(purchase.date)) {
       throw new ImportValidationError(`${label} has an invalid date "${purchase.date}"`);
     }
-    requireSplits(purchase.splits, purchase.splitMode, label, postIds);
+    requireSplits(purchase.splits, purchase.splitMode, label, postIds, true);
     for (const slice of purchase.schedule?.slices ?? []) {
       if (!MONTH_ID.test(slice.month)) {
         throw new ImportValidationError(`${label} has invalid slice month "${slice.month}"`);
diff --git a/src/export/ods.test.ts b/src/export/ods.test.ts
index d9af74c..5404ce7 100644
--- a/src/export/ods.test.ts
+++ b/src/export/ods.test.ts
@@ -25,6 +25,24 @@ function populated(): Dataset {
 }
 
 describe("buildWorkbook", () => {
+  test("exports an unassigned purchase as a row", () => {
+    const data = populated();
+    data.purchases[0]!.splits = [];
+    const purchases = buildWorkbook(data).find((sheet) => sheet.name === "Purchases")!;
+    expect(purchases.rows).toHaveLength(2);
+    expect(purchases.rows[1]![3]).toEqual({ kind: "text", value: "Unassigned" });
+  });
+
+  test("exports each unassigned purchase amount separately", () => {
+    const data = populated();
+    data.purchases[0]!.splits = [];
+    data.purchases.push({ ...data.purchases[0]!, id: "p2", total: { amount: 50, currency: "DKK" } });
+    const purchases = buildWorkbook(data).find((sheet) => sheet.name === "Purchases")!;
+    expect(purchases.rows.slice(1).map((row) => row[4])).toEqual([
+      { kind: "number", value: 400 },
+      { kind: "number", value: 50 },
+    ]);
+  });
   test("includes Summary, Months, Purchases, and one sheet per post", () => {
     const names = buildWorkbook(populated()).map((s) => s.name);
     expect(names.slice(0, 3)).toEqual(["Summary", "Months", "Purchases"]);
diff --git a/src/export/ods.ts b/src/export/ods.ts
index da67ff7..a97eacb 100644
--- a/src/export/ods.ts
+++ b/src/export/ods.ts
@@ -1,5 +1,6 @@
 import { zipSync, strToU8 } from "fflate";
-import { chargesForPurchaseInMonth, sliceAmountForMonth } from "../domain/charges.ts";
+import { chargesForPurchaseInMonth, looseChargesForMonth, sliceAmountForMonth } from "../domain/charges.ts";
+import { toBase } from "../domain/fx.ts";
 import { monthRange } from "../domain/months.ts";
 import { roundMoney } from "../domain/money.ts";
 import { datasetMonthSpan, monthView, summaryView } from "../domain/views.ts";
@@ -35,6 +36,15 @@ function summarySheet(dataset: Dataset, months: MonthId[], byMonth: FiguresByMon
     ]);
   }
 
+  const loose = months.map((m) => looseChargesForMonth(dataset, m));
+  if (loose.some((amount) => amount !== 0)) {
+    rows.push([
+      text("Unassigned"),
+      ...loose.map(num),
+      num(roundMoney(loose.reduce((a, b) => a + b, 0), dataset.settings.digits)),
+    ]);
+  }
+
   const summary = summaryView(dataset, months[0]!, months[months.length - 1]!);
   rows.push([
     text("Total"),
@@ -89,6 +99,13 @@ function purchasesSheet(dataset: Dataset, months: MonthId[]): Sheet {
         dataset.fxRates,
         dataset.settings.digits,
       );
+      if (purchase.splits.length === 0) {
+        const amount = toBase(slice, base, dataset.fxRates, dataset.settings.digits);
+        rows.push([
+          text(monthId), text(purchase.date), text(purchase.description), text("Unassigned"),
+          num(amount), num(slice.amount), text(slice.currency), text(purchase.schedule ? "yes" : "no"),
+        ]);
+      }
       for (const charge of charges) {
         rows.push([
           text(monthId),
diff --git a/src/store/actions.test.ts b/src/store/actions.test.ts
index 36e185f..7838ab3 100644
--- a/src/store/actions.test.ts
+++ b/src/store/actions.test.ts
@@ -312,6 +312,16 @@ describe("purchases", () => {
     expect(data.purchases[0]!.description).toBe("Dinner");
   });
 
+  test("an edited purchase can lose its post and bill association", () => {
+    const data = draft();
+    const bill = actions.addRecurringCost(data, billInput(data.posts[0]!.id));
+    const purchase = actions.confirmOccurrence(data, bill.id, "2026-09");
+    actions.updatePurchase(data, purchase.id, { splits: [], source: undefined });
+    expect(data.purchases[0]!.splits).toEqual([]);
+    expect(data.purchases[0]!.source).toBeUndefined();
+    expect(monthView(data, "2026-09").looseCharges).toBe(30);
+  });
+
   test("updatePurchase rounds the total amount, split values, and schedule slice amounts", () => {
     const data = draft();
     const postId = data.posts[0]!.id;
diff --git a/src/ui/bulkEntry.test.ts b/src/ui/bulkEntry.test.ts
index d3dd6b4..a5363b8 100644
--- a/src/ui/bulkEntry.test.ts
+++ b/src/ui/bulkEntry.test.ts
@@ -76,6 +76,11 @@ describe("lineToDraft", () => {
 });
 
 describe("validateBulk", () => {
+  test("allows lines with no post", () => {
+    const loose = draft({ postId: "", lines: [line("Milk", 25)] });
+    expect(validateBulk(loose)).toEqual([]);
+    expect(toPurchases(loose)[0]!.splits).toEqual([]);
+  });
   test("a well-formed batch has no errors", () => {
     expect(validateBulk(draft({ lines: [line("Milk", 25), line("Bread", 30)] }))).toEqual([]);
   });
@@ -98,12 +103,6 @@ describe("validateBulk", () => {
     expect(errors.some((e) => e.includes("1") && /description/i.test(e))).toBe(true);
   });
 
-  test("requires a post", () => {
-    expect(validateBulk(draft({ postId: "", lines: [line("Milk", 25)] }))).toContain(
-      "Choose a post for these lines.",
-    );
-  });
-
   test("does NOT reject a negative amount — over-budget and refunds are allowed", () => {
     expect(validateBulk(draft({ lines: [line("Refund", -25)] }))).toEqual([]);
   });
diff --git a/src/ui/bulkEntry.ts b/src/ui/bulkEntry.ts
index 690c8fc..923800f 100644
--- a/src/ui/bulkEntry.ts
+++ b/src/ui/bulkEntry.ts
@@ -8,8 +8,9 @@ import { toPurchase, type PurchaseDraft } from "./purchaseForm.ts";
  *
  * Date, post and currency are shared across the batch and set once; a line is
  * just a description and an amount. Each line becomes its own Purchase landing
- * wholly in the shared post, built through the SAME `toPurchase` the single
- * form uses, so there is one definition of what a purchase is.
+ * wholly in the shared post, or unassigned when no post is selected. The
+ * SAME `toPurchase` the single form uses builds it, so there is one definition
+ * of what a purchase is.
  */
 
 export interface BulkLine {
@@ -85,7 +86,7 @@ export function lineToDraft(draft: BulkDraft, line: BulkLine): PurchaseDraft {
     amount: line.amount,
     currency: draft.currency,
     splitMode: "percent",
-    splits: [{ postId: draft.postId, value: 100, absorbsRemainder: true }],
+    splits: draft.postId ? [{ postId: draft.postId, value: 100, absorbsRemainder: true }] : [],
     plan: null,
   };
 }
@@ -99,9 +100,6 @@ export function validateBulk(draft: BulkDraft): string[] {
   const errors: string[] = [];
   const filled = filledLines(draft);
 
-  if (draft.postId === "") {
-    errors.push("Choose a post for these lines.");
-  }
   if (filled.length === 0) {
     errors.push("Add at least one line.");
   }
diff --git a/src/ui/components/PlanEditor.test.tsx b/src/ui/components/PlanEditor.test.tsx
new file mode 100644
index 0000000..859b5d4
--- /dev/null
+++ b/src/ui/components/PlanEditor.test.tsx
@@ -0,0 +1,48 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+import { expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { createSeedDataset } from "../../domain/seed.ts";
+import { store } from "../../store/index.ts";
+import { emptyDraft, type PurchaseDraft } from "../purchaseForm.ts";
+import { PlanEditor } from "./PlanEditor.tsx";
+
+test("a purchase dated by month can start a finance plan in that month", () => {
+  const original = { get: store.get, subscribe: store.subscribe };
+  const dataset = createSeedDataset("2026-09");
+  store.get = () => dataset;
+  store.subscribe = () => () => {};
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  let draft: PurchaseDraft = { ...emptyDraft("2026-09", "food"), amount: 90 };
+  const render = () => root.render(<PlanEditor draft={draft} onChange={(next) => { draft = next; render(); }} />);
+  try {
+    act(render);
+    const button = container.querySelector("button")!;
+    expect(button.disabled).toBe(false);
+    act(() => button.click());
+    expect(draft.plan?.slices.map((slice) => slice.month)).toEqual(["2026-09", "2026-10", "2026-11"]);
+  } finally {
+    act(() => root.unmount());
+    Object.assign(store, original);
+  }
+});
+
+test("an incomplete purchase date cannot start a finance plan", () => {
+  const original = { get: store.get, subscribe: store.subscribe };
+  const dataset = createSeedDataset("2026-09");
+  store.get = () => dataset;
+  store.subscribe = () => () => {};
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  try {
+    act(() => root.render(<PlanEditor draft={{ ...emptyDraft("2026-09", "food"), date: "" }} onChange={() => {}} />));
+    expect(container.querySelector("button")!.disabled).toBe(true);
+  } finally {
+    act(() => root.unmount());
+    Object.assign(store, original);
+  }
+});
diff --git a/src/ui/components/PlanEditor.tsx b/src/ui/components/PlanEditor.tsx
index 92201c6..2eb18ee 100644
--- a/src/ui/components/PlanEditor.tsx
+++ b/src/ui/components/PlanEditor.tsx
@@ -17,15 +17,13 @@ interface Props {
   onChange: (next: PurchaseDraft) => void;
 }
 
-// A native <input type="date"> reports "" until the user has filled in every
-// field, and monthOf() throws on anything that isn't a well-formed
-// YYYY-MM-DD. This is UI-level input validation, not a domain concern — the
-// domain is right to throw on malformed input; the caller just must not call
-// it with malformed input.
-const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
-
 function hasValidDate(draft: PurchaseDraft): boolean {
-  return ISO_DATE_PATTERN.test(draft.date);
+  try {
+    monthOf(draft.date);
+    return true;
+  } catch {
+    return false;
+  }
 }
 
 export function PlanEditor({ draft, onChange }: Props) {
@@ -53,7 +51,7 @@ export function PlanEditor({ draft, onChange }: Props) {
         </Button>
         {!dateReady && (
           <p className="text-xs text-muted-foreground">
-            Pick a date for this purchase first.
+            Pick a month or date for this purchase first.
           </p>
         )}
       </div>
diff --git a/src/ui/components/PostTable.test.tsx b/src/ui/components/PostTable.test.tsx
new file mode 100644
index 0000000..db82986
--- /dev/null
+++ b/src/ui/components/PostTable.test.tsx
@@ -0,0 +1,43 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+import { expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { MemoryRouter } from "react-router";
+import { createSeedDataset } from "../../domain/seed.ts";
+import { monthView } from "../../domain/views.ts";
+import { store } from "../../store/index.ts";
+import { PostTable } from "./PostTable.tsx";
+
+test("an unbudgeted post shows no allocation or overspend status, unlike an explicit zero rule", () => {
+  const data = createSeedDataset("2026-09");
+  const [unbudgeted, zero] = data.posts;
+  unbudgeted!.name = "Unbudgeted";
+  unbudgeted!.rules = [];
+  zero!.name = "Zero rule";
+  zero!.rules = [{ from: "2026-09", rule: { kind: "fixed", amount: { amount: 0, currency: "DKK" } } }];
+  data.purchases = [unbudgeted!, zero!].map((post, i) => ({
+    id: `p${i}`, date: "2026-09", description: post.name,
+    total: { amount: 25, currency: "DKK" }, splitMode: "percent" as const,
+    splits: [{ postId: post.id, value: 100, absorbsRemainder: true }], schedule: null,
+  }));
+  const original = { get: store.get, subscribe: store.subscribe };
+  store.get = () => data;
+  store.subscribe = () => () => {};
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  try {
+    act(() => root.render(<MemoryRouter><PostTable monthId="2026-09" rows={monthView(data, "2026-09").rows} /></MemoryRouter>));
+    const noneRow = container.querySelector('tbody[data-budget-name="Unbudgeted"]')!;
+    const zeroRow = container.querySelector('tbody[data-budget-name="Zero rule"]')!;
+    expect(noneRow.querySelectorAll("td")[2]!.textContent).toBe("—");
+    expect(noneRow.querySelectorAll("td")[4]!.classList.contains("text-overspend")).toBe(false);
+    expect(zeroRow.querySelectorAll("td")[2]!.textContent).toContain("0");
+    expect(zeroRow.querySelectorAll("td")[4]!.classList.contains("text-overspend")).toBe(true);
+  } finally {
+    act(() => root.unmount());
+    Object.assign(store, original);
+  }
+});
diff --git a/src/ui/components/PostTable.tsx b/src/ui/components/PostTable.tsx
index 34d5477..1b6114c 100644
--- a/src/ui/components/PostTable.tsx
+++ b/src/ui/components/PostTable.tsx
@@ -50,21 +50,21 @@ interface RowCells {
  * plain function, not a component, and both table markups call it from inside
  * a map.
  */
-function postRowCells({ figures }: MonthPostRow, fmt: MoneyFormat): RowCells {
+function postRowCells({ figures, hasAllocationRule }: MonthPostRow, fmt: MoneyFormat): RowCells {
   return {
     carriedIn: fmt.signedAmount(figures.carriedIn),
     carriedInTone:
       figures.carriedIn > 0
         ? "text-surplus"
-        : figures.carriedIn < 0
+        : hasAllocationRule && figures.carriedIn < 0
           ? "text-overspend"
           : "",
-    allocation: fmt.amount(figures.allocation),
+    allocation: hasAllocationRule ? fmt.amount(figures.allocation) : "—",
     charges: fmt.amount(figures.charges),
     remaining: fmt.signedAmount(figures.remaining),
-    remainingTone: figures.remaining < 0 ? "text-overspend" : "",
+    remainingTone: hasAllocationRule && figures.remaining < 0 ? "text-overspend" : "",
     projected: fmt.signedAmount(figures.projected),
-    segments: carryMeterSegments(figures),
+    segments: carryMeterSegments(figures, hasAllocationRule),
   };
 }
 
diff --git a/src/ui/components/PurchaseDialog.tsx b/src/ui/components/PurchaseDialog.tsx
index ec4a814..884e436 100644
--- a/src/ui/components/PurchaseDialog.tsx
+++ b/src/ui/components/PurchaseDialog.tsx
@@ -49,6 +49,7 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
     .sort((a, b) => a.order - b.order);
 
   const [open, setOpen] = useState(false);
+  const [detachBill, setDetachBill] = useState(false);
   const [draft, setDraft] = useState<PurchaseDraft>(() =>
     purchase ? fromPurchase(purchase) : emptyDraft(monthId, activePosts[0]?.id ?? ""),
   );
@@ -68,6 +69,7 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
   const errors = bulkMode ? validateBulk(bulk) : validatePurchase(draft);
 
   function reset() {
+    setDetachBill(false);
     setDraft(
       purchase ? fromPurchase(purchase) : emptyDraft(monthId, activePosts[0]?.id ?? ""),
     );
@@ -86,7 +88,10 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
     const created = bulkMode ? toPurchases(bulk) : null;
     void mutate((data) => {
       if (created) for (const p of created) addPurchase(data, p);
-      else if (purchase) updatePurchase(data, purchase.id, toPurchase(draft));
+      else if (purchase) updatePurchase(data, purchase.id, {
+        ...toPurchase(draft),
+        ...(detachBill ? { source: undefined } : {}),
+      });
       else addPurchase(data, toPurchase(draft));
     }).then((saved) => {
       if (!saved) return;
@@ -166,7 +171,7 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
                       setBulk((b) => ({ ...b, postId }));
                     }}
                   >
-                    <option value="">Choose a post…</option>
+                    <option value="">No post (unassigned)</option>
                     {activePosts.map((post) => (
                       <option key={post.id} value={post.id}>
                         {post.name}
@@ -301,6 +306,17 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
 
           <SplitEditor draft={draft} posts={activePosts} onChange={setDraft} />
 
+          {purchase?.source && (
+            <label className="flex items-start gap-2 text-sm">
+              <input
+                type="checkbox"
+                checked={detachBill}
+                onChange={(event) => setDetachBill(event.target.checked)}
+              />
+              <span>Unlink from bill. The occurrence will show as expected again.</span>
+            </label>
+          )}
+
           <PlanEditor draft={draft} onChange={setDraft} />
             </>
           )}
diff --git a/src/ui/components/RuleHistory.tsx b/src/ui/components/RuleHistory.tsx
index 9d5feaf..043dc63 100755
--- a/src/ui/components/RuleHistory.tsx
+++ b/src/ui/components/RuleHistory.tsx
@@ -53,8 +53,8 @@ export function RuleHistory({ post }: Props) {
     <div className="space-y-3 rounded-md border border-budget-rule p-3">
       {post.rules.length === 0 ? (
         <p className="text-xs text-muted-foreground">
-          Not budgeted. Until a rule starts, this post is allocated nothing —
-          spending still records, and shows as overspend.
+          Not budgeted. Until a rule starts, this post is allocated nothing.
+          Spending still records without an overspend status.
         </p>
       ) : (
         <table className="w-full text-xs">
diff --git a/src/ui/components/SplitEditor.tsx b/src/ui/components/SplitEditor.tsx
index 924cd28..0c27056 100644
--- a/src/ui/components/SplitEditor.tsx
+++ b/src/ui/components/SplitEditor.tsx
@@ -39,6 +39,26 @@ export function SplitEditor({ draft, posts, onChange }: Props) {
 
   return (
     <fieldset className="space-y-3">
+      <label className="flex items-center gap-2 text-sm">
+        <input
+          type="checkbox"
+          checked={draft.splits.length === 0}
+          onChange={(event) =>
+            onChange({
+              ...draft,
+              splits: event.target.checked
+                ? []
+                : posts[0]
+                  ? [{ postId: posts[0].id, value: 100, absorbsRemainder: true }]
+                  : [],
+            })
+          }
+          disabled={posts.length === 0 && draft.splits.length === 0}
+        />
+        No post — leave this purchase unassigned
+      </label>
+      {draft.splits.length > 0 && (
+        <>
       <div className="flex items-center justify-between">
         <Label>Split across posts</Label>
         <Segmented
@@ -136,6 +156,8 @@ export function SplitEditor({ draft, posts, onChange }: Props) {
             : `${fmt.amount(balance)} ${unit} unassigned — the rounding post absorbs it.`}
         </span>
       </div>
+        </>
+      )}
     </fieldset>
   );
 }
diff --git a/src/ui/components/YearMatrix.tsx b/src/ui/components/YearMatrix.tsx
index 10ed496..c20412a 100644
--- a/src/ui/components/YearMatrix.tsx
+++ b/src/ui/components/YearMatrix.tsx
@@ -59,7 +59,7 @@ export function YearMatrix({ view, mode }: Props) {
                     <td
                       key={i}
                       className={`font-money py-2 pl-4 text-right whitespace-nowrap ${
-                        mode === "balance" && value < 0 ? "text-overspend" : ""
+                        mode === "balance" && row.hasAllocationRuleByMonth[i] && value < 0 ? "text-overspend" : ""
                       }`}
                     >
                       {fmt.amount(value)}
@@ -68,13 +68,22 @@ export function YearMatrix({ view, mode }: Props) {
                 })}
                 <td
                   className={`font-money py-2 pl-4 text-right font-medium whitespace-nowrap ${
-                    mode === "balance" && row.closingBalance < 0 ? "text-overspend" : ""
+                    mode === "balance" && row.hasAllocationRuleByMonth[11] && row.closingBalance < 0 ? "text-overspend" : ""
                   }`}
                 >
                   {fmt.amount(mode === "spend" ? row.totalCharges : row.closingBalance)}
                 </td>
               </tr>
             ))}
+            {mode === "spend" && view.totalLooseCharges !== 0 && (
+              <tr className="border-b border-budget-rule text-budget-ink-muted">
+                <td className="py-2">Unassigned</td>
+                {view.looseByMonth.map((amount, i) => (
+                  <td key={i} className="font-money py-2 pl-4 text-right whitespace-nowrap">{fmt.amount(amount)}</td>
+                ))}
+                <td className="font-money py-2 pl-4 text-right whitespace-nowrap">{fmt.amount(view.totalLooseCharges)}</td>
+              </tr>
+            )}
           </tbody>
         </table>
       </div>
diff --git a/src/ui/meterSegments.test.ts b/src/ui/meterSegments.test.ts
index 6b0024b..db0be3b 100644
--- a/src/ui/meterSegments.test.ts
+++ b/src/ui/meterSegments.test.ts
@@ -69,6 +69,11 @@ test("overspending paints past the end of the allocation and leaves no unspent t
   ]);
 });
 
+test("spending without an allocation rule uses the spending color, not overspend", () => {
+  const segments = carryMeterSegments(figures({ charges: 250, remaining: -250 }), false);
+  expect(widths(segments)).toEqual([["--budget-accent", 100]]);
+});
+
 test("a negative carried-in balance contributes no surplus segment", () => {
   // Transport in the demo data: behind by 1600, allocated 1100, spent 2700.
   // The debt is not on the meter — only the red Carried-in figure says why the
diff --git a/src/ui/meterSegments.ts b/src/ui/meterSegments.ts
index 11cd3ae..ff2dd84 100644
--- a/src/ui/meterSegments.ts
+++ b/src/ui/meterSegments.ts
@@ -43,15 +43,26 @@ function scaled(parts: [string, number][], scale: number): MeterSegment[] {
  *   --overspend     spend beyond the allocation
  *
  * Negatives are clamped rather than inverted. A carried-in *debt* therefore
- * does not appear here at all — only the red Carried-in figure beside the
+ * does not appear here at all — only the Carried-in figure beside the
  * meter says why the post is behind — and a net refund reads as no spend.
  * Both are deliberate: a segment of negative width would put the gradient's
  * stops out of order, which paints something arbitrary instead of failing.
+ * Without an allocation rule, spending uses the ordinary spend color: there
+ * is no budget threshold to paint as overspent.
  */
-export function carryMeterSegments(figures: PostMonthFigures): MeterSegment[] {
+export function carryMeterSegments(
+  figures: PostMonthFigures,
+  hasAllocationRule = true,
+): MeterSegment[] {
   const surplus = Math.max(figures.carriedIn, 0);
   const allocation = Math.max(figures.allocation, 0);
   const charges = Math.max(figures.charges, 0);
+  if (!hasAllocationRule) {
+    return scaled(
+      [["--surplus", surplus], ["--budget-accent", charges]],
+      surplus + charges,
+    );
+  }
   const scale = surplus + Math.max(allocation, charges);
 
   if (scale <= 0) return EMPTY_TRACK;
diff --git a/src/ui/purchaseForm.test.ts b/src/ui/purchaseForm.test.ts
index f441ccf..9a11a5d 100644
--- a/src/ui/purchaseForm.test.ts
+++ b/src/ui/purchaseForm.test.ts
@@ -56,6 +56,10 @@ describe("splitBalance", () => {
 });
 
 describe("validatePurchase", () => {
+  test("allows a purchase with no post", () => {
+    expect(validatePurchase(draft({ splits: [] }))).toEqual([]);
+    expect(toPurchase(draft({ splits: [] })).splits).toEqual([]);
+  });
   test("a well-formed draft has no errors", () => {
     expect(validatePurchase(draft())).toEqual([]);
   });
@@ -72,12 +76,6 @@ describe("validatePurchase", () => {
     );
   });
 
-  test("requires at least one split", () => {
-    expect(validatePurchase(draft({ splits: [] }))).toContain(
-      "Add at least one post to split across.",
-    );
-  });
-
   test("requires exactly one remainder absorber", () => {
     const none = draft({
       splits: [{ postId: "food", value: 100, absorbsRemainder: false }],
diff --git a/src/ui/purchaseForm.ts b/src/ui/purchaseForm.ts
index b76025e..2a79847 100644
--- a/src/ui/purchaseForm.ts
+++ b/src/ui/purchaseForm.ts
@@ -39,7 +39,7 @@ export function emptyDraft(monthId: MonthId, postId: string): PurchaseDraft {
     amount: 0,
     currency: "DKK",
     splitMode: "percent",
-    splits: [{ postId, value: 100, absorbsRemainder: true }],
+    splits: postId ? [{ postId, value: 100, absorbsRemainder: true }] : [],
     plan: null,
   };
 }
@@ -60,10 +60,7 @@ export function validatePurchase(draft: PurchaseDraft): string[] {
   if (draft.amount === 0) {
     errors.push("Enter an amount other than zero.");
   }
-  if (draft.splits.length === 0) {
-    errors.push("Add at least one post to split across.");
-  }
-  if (draft.splits.filter((s) => s.absorbsRemainder).length !== 1) {
+  if (draft.splits.length > 0 && draft.splits.filter((s) => s.absorbsRemainder).length !== 1) {
     errors.push("Choose exactly one post to absorb rounding.");
   }
   const postIds = draft.splits.map((s) => s.postId);
diff --git a/src/ui/routes/MonthRoute.tsx b/src/ui/routes/MonthRoute.tsx
index b3b8a5d..f926868 100644
--- a/src/ui/routes/MonthRoute.tsx
+++ b/src/ui/routes/MonthRoute.tsx
@@ -112,6 +112,9 @@ export function MonthRoute() {
         <div className="mt-4 flex flex-wrap items-end justify-between gap-x-10 gap-y-2 border-t border-budget-rule pt-3">
           <dl>
             <Stat label="Spent">{fmt.money(view.totalCharges, base)}</Stat>
+            {view.looseCharges !== 0 && (
+              <Stat label="Unassigned">{fmt.money(view.looseCharges, base)}</Stat>
+            )}
           </dl>
           {/* Rendered in both directions. "No posts overspent" is a real answer
               to the app's second question, and a line that only appears when
@@ -226,6 +229,9 @@ function PurchaseRow({
             financed
           </span>
         )}
+        {purchase.splits.length === 0 && (
+          <span className="shrink-0 text-xs text-budget-ink-muted">unassigned</span>
+        )}
         <span className="font-money shrink-0 tabular-nums">
           {fmt.money(slice.amount, slice.currency)}
         </span>
diff --git a/src/ui/routes/NoAllocationViews.test.tsx b/src/ui/routes/NoAllocationViews.test.tsx
new file mode 100644
index 0000000..de1bd3a
--- /dev/null
+++ b/src/ui/routes/NoAllocationViews.test.tsx
@@ -0,0 +1,68 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+import { expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { createSeedDataset } from "../../domain/seed.ts";
+import { yearView } from "../../domain/views.ts";
+import { store } from "../../store/index.ts";
+import { YearMatrix } from "../components/YearMatrix.tsx";
+import { PostMonthRoute } from "./PostMonthRoute.tsx";
+import { PostYearRoute } from "./PostYearRoute.tsx";
+
+function withUnbudgetedPost(run: (container: HTMLDivElement, postId: string) => void) {
+  const data = createSeedDataset("2026-09");
+  const post = data.posts[0]!;
+  post.rules = [];
+  data.purchases.push({
+    id: "unbudgeted-purchase", date: "2026-09", description: "Unbudgeted spending",
+    total: { amount: 25, currency: "DKK" }, splitMode: "percent",
+    splits: [{ postId: post.id, value: 100, absorbsRemainder: true }], schedule: null,
+  });
+  const original = { get: store.get, subscribe: store.subscribe };
+  store.get = () => data;
+  store.subscribe = () => () => {};
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  try {
+    act(() => root.render(<MemoryRouter key="month" initialEntries={[`/post/${post.id}/month/2026-09`]}>
+      <Routes>
+        <Route path="/post/:postId/month/:monthId" element={<PostMonthRoute />} />
+      </Routes>
+    </MemoryRouter>));
+    run(container, post.id);
+    act(() => root.render(<MemoryRouter key="year" initialEntries={[`/post/${post.id}/year/2026`]}>
+      <Routes><Route path="/post/:postId/year/:year" element={<PostYearRoute />} /></Routes>
+    </MemoryRouter>));
+    run(container, post.id);
+    act(() => root.render(<MemoryRouter key="matrix"><YearMatrix view={yearView(data, 2026)} mode="balance" /></MemoryRouter>));
+    run(container, post.id);
+  } finally {
+    act(() => root.unmount());
+    Object.assign(store, original);
+  }
+}
+
+test("post detail and year balances stay neutral when no allocation rule exists", () => {
+  let pass = 0;
+  withUnbudgetedPost((container) => {
+    pass++;
+    if (pass === 1) {
+      const details = container.querySelector("dl")!;
+      expect(details.querySelectorAll("dd")[1]!.textContent).toBe("—");
+      expect(details.querySelectorAll("dd")[3]!.classList.contains("text-overspend")).toBe(false);
+    } else if (pass === 2) {
+      expect(container.querySelector("p")!.textContent).toContain("Allocated —");
+      const september = [...container.querySelectorAll("tr")].find((row) => row.textContent?.includes("2026-09"))!;
+      expect(september.querySelectorAll("td")[2]!.textContent).toBe("—");
+      expect(september.querySelectorAll("td")[4]!.classList.contains("text-overspend")).toBe(false);
+    } else {
+      const row = container.querySelector("tbody tr:nth-child(2)")!;
+      expect(row.querySelectorAll("td")[9]!.classList.contains("text-overspend")).toBe(false);
+      expect(row.querySelectorAll("td")[13]!.classList.contains("text-overspend")).toBe(false);
+    }
+  });
+});
diff --git a/src/ui/routes/PostMonthRoute.tsx b/src/ui/routes/PostMonthRoute.tsx
index c8a07f7..9259fd1 100644
--- a/src/ui/routes/PostMonthRoute.tsx
+++ b/src/ui/routes/PostMonthRoute.tsx
@@ -68,7 +68,7 @@ export function PostMonthRoute() {
             className={`font-money ${
               (row?.figures.carriedIn ?? 0) > 0
                 ? "text-surplus"
-                : (row?.figures.carriedIn ?? 0) < 0
+                : row?.hasAllocationRule && (row?.figures.carriedIn ?? 0) < 0
                   ? "text-overspend"
                   : ""
             }`}
@@ -78,7 +78,7 @@ export function PostMonthRoute() {
         </div>
         <div>
           <dt className="text-muted-foreground">Allocated</dt>
-          <dd className="font-money">{fmt.money(row?.figures.allocation ?? 0, base)}</dd>
+          <dd className="font-money">{row?.hasAllocationRule ? fmt.money(row.figures.allocation, base) : "—"}</dd>
         </div>
         <div>
           <dt className="text-muted-foreground">Spent</dt>
@@ -87,7 +87,7 @@ export function PostMonthRoute() {
         <div>
           <dt className="text-muted-foreground">Remaining</dt>
           <dd
-            className={`font-money ${(row?.figures.remaining ?? 0) < 0 ? "text-overspend" : ""}`}
+            className={`font-money ${row?.hasAllocationRule && (row.figures.remaining < 0) ? "text-overspend" : ""}`}
           >
             {fmt.signedMoney(row?.figures.remaining ?? 0, base)}
           </dd>
diff --git a/src/ui/routes/PostYearRoute.tsx b/src/ui/routes/PostYearRoute.tsx
index 29853da..ed81817 100644
--- a/src/ui/routes/PostYearRoute.tsx
+++ b/src/ui/routes/PostYearRoute.tsx
@@ -21,7 +21,7 @@ export function PostYearRoute() {
         {post.name} &middot; {year}
       </h1>
       <p className="text-sm text-muted-foreground">
-        Allocated {fmt.money(row.totalAllocation, base)} &middot; spent{" "}
+        Allocated {row.hasAllocationRuleByMonth.some(Boolean) ? fmt.money(row.totalAllocation, base) : "—"} &middot; spent{" "}
         {fmt.money(row.totalCharges, base)} &middot; closing balance{" "}
         {fmt.signedMoney(row.closingBalance, base)}
       </p>
@@ -40,6 +40,7 @@ export function PostYearRoute() {
           <tbody>
             {view.months.map((month, i) => {
               const figures = row.byMonth[i]!;
+              const hasAllocationRule = row.hasAllocationRuleByMonth[i]!;
               return (
                 <tr key={month} className="border-b last:border-0">
                   <td className="py-2">
@@ -51,18 +52,18 @@ export function PostYearRoute() {
                     className={`font-money py-2 text-right ${
                       figures.carriedIn > 0
                         ? "text-surplus"
-                        : figures.carriedIn < 0
+                        : hasAllocationRule && figures.carriedIn < 0
                           ? "text-overspend"
                           : ""
                     }`}
                   >
                     {fmt.signedMoney(figures.carriedIn, base)}
                   </td>
-                  <td className="font-money py-2 text-right">{fmt.amount(figures.allocation)}</td>
+                  <td className="font-money py-2 text-right">{hasAllocationRule ? fmt.amount(figures.allocation) : "—"}</td>
                   <td className="font-money py-2 text-right">{fmt.amount(figures.charges)}</td>
                   <td
                     className={`font-money py-2 text-right font-medium ${
-                      figures.remaining < 0 ? "text-overspend" : ""
+                      hasAllocationRule && figures.remaining < 0 ? "text-overspend" : ""
                     }`}
                   >
                     {fmt.signedMoney(figures.remaining, base)}
diff --git a/src/ui/routes/SummaryRoute.tsx b/src/ui/routes/SummaryRoute.tsx
index 036ce9d..50c5fad 100644
--- a/src/ui/routes/SummaryRoute.tsx
+++ b/src/ui/routes/SummaryRoute.tsx
@@ -93,7 +93,8 @@ export function SummaryRoute() {
           </thead>
           <tbody>
             {groupBy === "post"
-              ? view.byPost.map((entry) => (
+              ? <>
+                {view.byPost.map((entry) => (
                   <tr key={entry.post.id} className="border-b border-budget-rule transition-colors last:border-0 hover:bg-accent/60">
                     <td className="py-2.5">{entry.post.name}</td>
                     <td className="font-money py-2.5 pl-6 text-right">{fmt.money(entry.charges, base)}</td>
@@ -103,7 +104,17 @@ export function SummaryRoute() {
                         : `${((entry.charges / view.totalCharges) * 100).toFixed(1)}%`}
                     </td>
                   </tr>
-                ))
+                ))}
+                {view.looseCharges !== 0 && (
+                  <tr className="border-b border-budget-rule text-budget-ink-muted">
+                    <td className="py-2.5">Unassigned</td>
+                    <td className="font-money py-2.5 pl-6 text-right">{fmt.amount(view.looseCharges)}</td>
+                    <td className="font-money py-2.5 pl-6 text-right">
+                      {view.totalCharges === 0 ? "—" : `${((view.looseCharges / view.totalCharges) * 100).toFixed(1)}%`}
+                    </td>
+                  </tr>
+                )}
+              </>
               : view.byMonth.map((entry) => (
                   <tr key={entry.monthId} className="border-b border-budget-rule transition-colors last:border-0 hover:bg-accent/60">
                     <td className="py-2.5">
diff --git a/src/ui/routes/YearRoute.tsx b/src/ui/routes/YearRoute.tsx
index 6d4a1a8..762bbc8 100644
--- a/src/ui/routes/YearRoute.tsx
+++ b/src/ui/routes/YearRoute.tsx
@@ -42,7 +42,7 @@ export function YearRoute() {
       </Section>
 
       <Section
-        title="Posts by month"
+        title={mode === "spend" ? "Spending by month" : "Posts by month"}
         action={
           <Segmented
             label="Figures to show"

From 85a21c58eb7e8d745881fbbe89086a18589429b4 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 13:48:49 +0200
Subject: [PATCH 25/27] feat: place purchases and bills in budget hierarchy

---
 docs/PRODUCT.md                               |  8 ++-
 docs/TODO.md                                  |  7 +-
 ...9-30-purchase-and-bill-budget-placement.md |  9 +++
 src/domain/budgetTree.test.ts                 | 27 ++++++++
 src/domain/budgetTree.ts                      | 53 +++++++++-----
 src/domain/seed.ts                            |  2 +-
 src/domain/types.ts                           |  4 ++
 src/export/json.test.ts                       | 15 ++++
 src/export/json.ts                            | 17 ++++-
 src/store/actions.test.ts                     | 30 +++++++-
 src/store/actions.ts                          | 69 ++++++++++++++-----
 src/store/migrations.test.ts                  | 11 +++
 src/store/migrations.ts                       |  2 +
 src/ui/components/BudgetTree.tsx              | 12 ++--
 src/ui/components/PurchaseDialog.tsx          | 31 +++++++--
 .../settings/BudgetFoldersSection.test.tsx    | 10 +++
 .../routes/settings/BudgetFoldersSection.tsx  | 36 ++++++----
 .../routes/settings/RecurringSection.test.tsx |  2 +
 src/ui/routes/settings/RecurringSection.tsx   |  6 +-
 19 files changed, 281 insertions(+), 70 deletions(-)
 create mode 100644 docs/specs/2026-09-30-purchase-and-bill-budget-placement.md

diff --git a/docs/PRODUCT.md b/docs/PRODUCT.md
index 57b9355..9a2c58f 100755
--- a/docs/PRODUCT.md
+++ b/docs/PRODUCT.md
@@ -54,9 +54,11 @@ Money is handled in DKK, USD and EUR, with DKK as the base.
 
 Confirmed and in place:
 
-- Nested budget folders organize posts and bills independently of bill split
-  destinations. Folder Bills due reports scheduled prices for the selected month;
-  posts alone hold envelope balances.
+- Nested budget folders organize posts, bills, and optionally individual
+  purchases. A single-post bill starts beneath that post but can be moved
+  independently. Folder Bills due reports scheduled bill prices for the selected
+  month; posts alone hold envelope balances. A purchase's separate row never
+  changes which posts its splits charge.
 - Posts (envelopes) with monthly allocation, created and archived by the owner.
   Posts are archived, never deleted, because purchases reference them.
 - A post with no applicable allocation rule still records spending and shows its
diff --git a/docs/TODO.md b/docs/TODO.md
index 45b9c58..7f935b5 100755
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -10,17 +10,18 @@ task moved to `AGENTS.md`.
 
 **Current feature worktree state:** budget folders and recurring cost placement
 are implemented.
-712 tests passing across 55 files. `bunx tsc --noEmit` is clean;
+746 tests passing across 59 files. `bunx tsc --noEmit` is clean;
 `bun run --bun build` succeeds using the committed seed rates when live-fetch
 is unavailable. The runtime override bypasses a broken local Bun shim.
 
-**Schema is at version 8.** v1 -> v2 made allocation rules a dated series;
+**Schema is at version 9.** v1 -> v2 made allocation rules a dated series;
 v2 -> v3 moved currencies into the dataset; v3 -> v4 drops a stored rate-service
 URL that can no longer work; v4 -> v5 adds sterling to an existing dataset;
 v5 -> v6 collapses per-currency decimals into one dataset-wide setting; v6 -> v7
 adds `Dataset.recurring`; v7 -> v8 adds budget folders and assigns existing
 posts and recurring bills a deterministic mixed sibling order under Unfiled.
-All seven are behaviour-preserving by construction —
+v8 -> v9 adds optional purchase and bill placement fields without moving old rows.
+All eight are behaviour-preserving by construction —
 not one changes a stored figure — and are tested as such.
 
 A migration applies **on load, in memory**; it is written back on the next
diff --git a/docs/specs/2026-09-30-purchase-and-bill-budget-placement.md b/docs/specs/2026-09-30-purchase-and-bill-budget-placement.md
new file mode 100644
index 0000000..39080b0
--- /dev/null
+++ b/docs/specs/2026-09-30-purchase-and-bill-budget-placement.md
@@ -0,0 +1,9 @@
+# Purchase and bill placement in budget folders
+
+The owner can edit a purchase's post splits and also give it an independent row in the budget listing. That row may live in a selected folder or Unfiled. The purchase still appears in the monthly ledger, and its splits alone determine which envelope is charged. The budget row shows only in months where the purchase or an active finance-plan slice contributes. Moving the row changes organization, not the fold.
+
+`Purchase.placement` is optional and carries a folder ID plus a sibling order. An absent placement means the purchase stays only in the monthly ledger. The edit dialog controls this field; the Settings folder tree can subsequently move or reorder a placed purchase. Folder deletion moves its placed purchases to the parent with the other children.
+
+A new recurring cost assigned to one post defaults to a row nested beneath that post. A dedicated post and its bill are nested when created together. A bill split across several posts remains at folder level. An explicit folder choice in the add form takes precedence. `RecurringCost.parentPostId` records the nested display parent, while its splits remain the financial destinations. A nested bill follows the post when the post moves. Settings can move the bill to another post or to a folder without changing its splits or confirmations.
+
+Schema 9 adds these optional fields. The v8 to v9 migration only advances the version; existing purchases and bills retain their locations. JSON import checks placement references, sibling order, and parent post references. Folder Bills due includes nested bills once. Purchase rows do not contribute to Bills due, since the figure is a schedule total.
diff --git a/src/domain/budgetTree.test.ts b/src/domain/budgetTree.test.ts
index bdd9a19..691aaf8 100644
--- a/src/domain/budgetTree.test.ts
+++ b/src/domain/budgetTree.test.ts
@@ -122,3 +122,30 @@ test("empty and post-only folders have zero Bills due", () => {
   data.posts = [post("rent", "post-only")];
   expect(tree(data).roots.map(node => node.kind === "folder" ? node.billsDue : NaN)).toEqual([0, 0]);
 });
+
+test("a placed purchase is its own row while its post still carries the charge", () => {
+  const data = dataset();
+  data.folders = [folder("housing", null)];
+  data.posts = [post("rent", "housing")];
+  data.purchases = [{ id: "paid", date: "2026-09", description: "Deposit", total: { amount: 100, currency: "DKK" }, splitMode: "percent", splits: [{ postId: "rent", value: 100, absorbsRemainder: true }], schedule: null, placement: { folderId: "housing", order: 1 } }];
+  const housing = tree(data).roots[0]!;
+  if (housing.kind !== "folder") throw new Error("Missing folder");
+  expect(housing.children.map(node => node.kind)).toEqual(["post", "purchase"]);
+  expect(monthView(data, "2026-09").rows[0]!.figures.charges).toBe(100);
+  expect(tree(data, "2026-10").roots[0]).toMatchObject({ kind: "folder", children: [{ kind: "post" }] });
+});
+
+test("a bill nested under its post follows that post into another folder", () => {
+  const data = dataset();
+  data.folders = [folder("housing", null), folder("other", null, 1)];
+  data.posts = [post("rent", "housing")];
+  data.recurring = [{ ...bill("rent-bill", null), parentPostId: "rent" }];
+  const first = tree(data).roots[0]!;
+  if (first.kind !== "folder") throw new Error("Missing folder");
+  expect(first.billsDue).toBe(8000);
+  expect(first.children[0]).toMatchObject({ kind: "post", children: [{ kind: "bill" }] });
+  data.posts[0]!.folderId = "other";
+  const second = tree(data).roots[1]!;
+  if (second.kind !== "folder") throw new Error("Missing folder");
+  expect(second.billsDue).toBe(8000);
+});
diff --git a/src/domain/budgetTree.ts b/src/domain/budgetTree.ts
index b0f424b..f82258a 100644
--- a/src/domain/budgetTree.ts
+++ b/src/domain/budgetTree.ts
@@ -1,16 +1,18 @@
 import { toBase } from "./fx.ts";
 import { roundMoney } from "./money.ts";
+import { sliceAmountForMonth } from "./charges.ts";
 import {
   nextUnconfirmedOccurrenceOnOrAfter,
   occurrencesByMonth,
   type Occurrence,
 } from "./occurrences.ts";
-import type { BudgetFolder, Dataset, MonthId, RecurringCost } from "./types.ts";
+import type { BudgetFolder, Dataset, MonthId, Purchase, RecurringCost } from "./types.ts";
 import type { MonthPostRow } from "./views.ts";
 
 export type BudgetNode =
   | { kind: "folder"; folder: BudgetFolder; billsDue: number; children: BudgetNode[] }
-  | { kind: "post"; row: MonthPostRow }
+  | { kind: "post"; row: MonthPostRow; children: BudgetNode[] }
+  | { kind: "purchase"; purchase: Purchase; amount: NonNullable<ReturnType<typeof sliceAmountForMonth>> }
   | { kind: "bill"; cost: RecurringCost; occurrences: Occurrence[]; nextOccurrence: Occurrence | null };
 
 export interface BudgetTreeView {
@@ -45,30 +47,29 @@ export function budgetTree(
     add(folder.parentId, folder.order, { kind: "folder", folder, billsDue: 0, children: [] });
   }
   for (const row of rows) {
-    add(row.post.folderId, row.post.order, { kind: "post", row });
+    add(row.post.folderId, row.post.order, { kind: "post", row, children: [] });
   }
+  const postBills = new Map<string, BudgetNode[]>();
   for (const cost of dataset.recurring) {
-    add(cost.folderId, cost.order, {
+    const node: BudgetNode = {
       kind: "bill",
       cost,
       occurrences: slotsByBill.get(cost.id) ?? [],
       nextOccurrence: nextUnconfirmedOccurrenceOnOrAfter(dataset, cost.id, monthId),
-    });
+    };
+    if (cost.parentPostId) {
+      const children = postBills.get(cost.parentPostId) ?? [];
+      children.push(node);
+      postBills.set(cost.parentPostId, children);
+    } else add(cost.folderId, cost.order, node);
+  }
+  for (const purchase of dataset.purchases) {
+    if (!purchase.placement) continue;
+    const amount = sliceAmountForMonth(purchase, monthId);
+    if (amount) add(purchase.placement.folderId, purchase.placement.order, { kind: "purchase", purchase, amount });
   }
 
   const digits = dataset.settings.digits;
-  const childrenOf = (parent: string | null): BudgetNode[] =>
-    (byParent.get(parent) ?? [])
-      .sort((a, b) => a.order - b.order)
-      .map(({ node }) => {
-        if (node.kind === "folder") {
-          node.children = childrenOf(node.folder.id);
-          node.billsDue = node.children.reduce((sum, child) =>
-            roundMoney(sum + (child.kind === "folder" ? child.billsDue : child.kind === "bill" ? billDue(child.occurrences) : 0), digits), 0);
-        }
-        return node;
-      });
-
   const billDue = (occurrences: readonly Occurrence[]): number =>
     occurrences.reduce((sum, occurrence) => {
       const purchase = occurrence.confirmedBy ? purchases.get(occurrence.confirmedBy) : null;
@@ -78,6 +79,24 @@ export function budgetTree(
       const price = purchase?.total ?? occurrence.amount;
       return roundMoney(sum + toBase(price, dataset.settings.baseCurrency, dataset.fxRates, digits), digits);
     }, 0);
+  const dueInNode = (node: BudgetNode): number => {
+    if (node.kind === "folder") return node.billsDue;
+    if (node.kind === "bill") return billDue(node.occurrences);
+    if (node.kind === "post") return node.children.reduce((sum, child) => roundMoney(sum + dueInNode(child), digits), 0);
+    return 0;
+  };
+  const childrenOf = (parent: string | null): BudgetNode[] =>
+    (byParent.get(parent) ?? [])
+      .sort((a, b) => a.order - b.order)
+      .map(({ node }) => {
+        if (node.kind === "folder") {
+          node.children = childrenOf(node.folder.id);
+          node.billsDue = node.children.reduce((sum, child) => roundMoney(sum + dueInNode(child), digits), 0);
+        } else if (node.kind === "post") {
+          node.children = (postBills.get(node.row.post.id) ?? []).sort((a, b) => a.kind === "bill" && b.kind === "bill" ? a.cost.order - b.cost.order : 0);
+        }
+        return node;
+      });
 
   const rootItems = childrenOf(null);
   return {
diff --git a/src/domain/seed.ts b/src/domain/seed.ts
index 9546075..6f57f7b 100644
--- a/src/domain/seed.ts
+++ b/src/domain/seed.ts
@@ -1,7 +1,7 @@
 import { DEFAULT_DIGITS, SEED_CURRENCIES } from "./types.ts";
 import type { CurrencyDef, Dataset, FxRate, MonthId, Post } from "./types.ts";
 
-export const SCHEMA_VERSION = 8;
+export const SCHEMA_VERSION = 9;
 
 const SEED_POST_NAMES = ["Video Games", "Food", "Events and Social"] as const;
 
diff --git a/src/domain/types.ts b/src/domain/types.ts
index 2eee7d1..063ef15 100755
--- a/src/domain/types.ts
+++ b/src/domain/types.ts
@@ -148,6 +148,8 @@ export interface RecurringCost {
   name: string;
   order: number;
   folderId: FolderId | null;
+  /** When set, the bill is displayed beneath this post and follows its folder. */
+  parentPostId?: PostId;
   /**
    * A UI flag ONLY. Projection is governed by `startDate` and `endedFrom`,
    * exactly as an archived post still folds — archiving must not retroactively
@@ -176,6 +178,8 @@ export interface RecurringCost {
 
 export interface Purchase {
   id: PurchaseId;
+  /** Optional standalone budget row; splits remain the financial destination. */
+  placement?: { folderId: FolderId | null; order: number };
   date: IsoDate;
   description: string;
   /** Optional longer context, alongside the short `description` label. */
diff --git a/src/export/json.test.ts b/src/export/json.test.ts
index 38b9097..d8b675b 100644
--- a/src/export/json.test.ts
+++ b/src/export/json.test.ts
@@ -118,6 +118,21 @@ describe("import rejects invalid folder graph", () => {
   const folder = (id: string, parentId: string | null, order: number) => ({ id, name: id, parentId, order });
   const parse = (data: Dataset) => parseDatasetJson(JSON.stringify(data));
 
+  test("round-trips a standalone purchase and a bill nested beneath a post", () => {
+    const data = populated();
+    data.folders = [folder("home", null, 3)];
+    data.purchases[0]!.placement = { folderId: "home", order: 0 };
+    data.recurring.push({ id: "rent", name: "Rent", order: 0, folderId: null, parentPostId: data.posts[0]!.id, archived: false, amount: { amount: 100, currency: "DKK" }, startDate: "2026-01", recurrence: { kind: "everyNMonths", n: 1 }, anchoring: "calendar", splitMode: "percent", splits: [{ postId: data.posts[0]!.id, value: 100, absorbsRemainder: true }] });
+    const restored = parse(data);
+    expect(restored.purchases[0]!.placement?.folderId).toBe("home");
+    expect(restored.recurring[0]!.parentPostId).toBe(data.posts[0]!.id);
+    restored.recurring[0]!.parentPostId = "missing";
+    expect(() => parse(restored)).toThrow(/parent post/);
+    restored.recurring[0]!.parentPostId = data.posts[0]!.id;
+    restored.purchases[0]!.placement!.folderId = "missing";
+    expect(() => parse(restored)).toThrow(/unknown folder/);
+  });
+
   test("valid nested tree parses", () => {
     const data = populated();
     data.folders = [folder("home", null, 0), folder("bills", "home", 0)];
diff --git a/src/export/json.ts b/src/export/json.ts
index 586c788..4956c46 100644
--- a/src/export/json.ts
+++ b/src/export/json.ts
@@ -136,6 +136,7 @@ function requireFolderTree(data: Dataset): void {
   const folders = requireArray(data as unknown as Record<string, unknown>, "folders");
   const parents = new Map<FolderId, FolderId | null>();
   const siblingOrders = new Map<FolderId | null, Set<number>>();
+  const nestedBillOrders = new Map<string, Set<number>>();
   const requireOrder = (order: unknown, label: string) => {
     if (typeof order !== "number" || !Number.isFinite(order) || !Number.isInteger(order)) {
       throw new ImportValidationError(`${label} has an invalid order`);
@@ -199,7 +200,21 @@ function requireFolderTree(data: Dataset): void {
     if (typeof cost?.name !== "string") {
       throw new ImportValidationError("Recurring cost name must be a string");
     }
-    requireLocation(cost?.folderId, cost?.order, `Recurring cost "${cost?.name}"`);
+    if (cost.parentPostId !== undefined) {
+      if (!data.posts.some(post => post.id === cost.parentPostId)) throw new ImportValidationError(`Recurring cost "${cost.name}" references unknown parent post`);
+      if (cost.folderId !== null && !parents.has(cost.folderId)) throw new ImportValidationError(`Recurring cost "${cost.name}" references unknown folder`);
+      requireOrder(cost.order, `Recurring cost "${cost.name}"`);
+      const orders = nestedBillOrders.get(cost.parentPostId) ?? new Set<number>();
+      if (orders.has(cost.order)) throw new ImportValidationError(`Recurring cost "${cost.name}" duplicates nested order ${cost.order}`);
+      orders.add(cost.order);
+      nestedBillOrders.set(cost.parentPostId, orders);
+    } else requireLocation(cost?.folderId, cost?.order, `Recurring cost "${cost?.name}"`);
+  }
+  for (const purchase of data.purchases) {
+    if (purchase.placement !== undefined) {
+      if (!purchase.placement || typeof purchase.placement !== "object") throw new ImportValidationError(`Purchase "${purchase.description}" has invalid placement`);
+      requireLocation(purchase.placement.folderId, purchase.placement.order, `Purchase "${purchase.description}"`);
+    }
   }
 }
 
diff --git a/src/store/actions.test.ts b/src/store/actions.test.ts
index 7838ab3..26ee444 100644
--- a/src/store/actions.test.ts
+++ b/src/store/actions.test.ts
@@ -16,6 +16,29 @@ const billInput = (postId: string, folderId: string | null = null) => ({
 });
 
 describe("budget folder placement", () => {
+  test("editing a purchase can place it in a folder without changing its charge", () => {
+    const data = createSeedDataset("2026-09");
+    const folder = actions.addBudgetFolder(data, "Trips", null);
+    const postId = data.posts[0]!.id;
+    const purchase = actions.addPurchase(data, { date: "2026-09", description: "Ticket", total: { amount: 50, currency: "DKK" }, splitMode: "percent", splits: [{ postId, value: 100, absorbsRemainder: true }], schedule: null });
+    actions.placePurchase(data, purchase.id, folder.id);
+    expect(purchase.placement?.folderId).toBe(folder.id);
+    expect(purchase.splits[0]!.postId).toBe(postId);
+    actions.placePurchase(data, purchase.id, null);
+    expect(purchase.placement?.folderId).toBe(null);
+    actions.placePurchase(data, purchase.id, undefined);
+    expect(purchase.placement).toBeUndefined();
+  });
+  test("a bill can be nested under a post and later moved out", () => {
+    const data = createSeedDataset("2026-09");
+    const bill = actions.addRecurringCost(data, billInput(data.posts[0]!.id));
+    actions.placeRecurringUnderPost(data, bill.id, data.posts[0]!.id);
+    expect(bill.parentPostId).toBe(data.posts[0]!.id);
+    actions.placeRecurringUnderPost(data, bill.id, data.posts[1]!.id);
+    expect(bill.parentPostId).toBe(data.posts[1]!.id);
+    actions.placeBudgetItem(data, { kind: "recurring", id: bill.id }, null, 3);
+    expect(bill.parentPostId).toBeUndefined();
+  });
   test("removing a folder moves its direct contents to its parent in order", () => {
     const data = createSeedDataset("2026-09");
     const parent = actions.addBudgetFolder(data, "Parent", null);
@@ -25,10 +48,12 @@ describe("budget folder placement", () => {
     const child = actions.addBudgetFolder(data, "Child", removed.id);
     const post = actions.addPost(data, "Kept", "DKK", removed.id);
     const bill = actions.addRecurringCost(data, billInput(post.id, removed.id));
+    const purchase = actions.addPurchase(data, { date: "2026-09", description: "Ticket", total: { amount: 20, currency: "DKK" }, splitMode: "percent", splits: [{ postId: post.id, value: 100, absorbsRemainder: true }], schedule: null });
+    actions.placePurchase(data, purchase.id, removed.id);
     actions.removeBudgetFolder(data, removed.id);
     expect(data.folders.some(folder => folder.id === removed.id)).toBe(false);
     expect([child.parentId, post.folderId, bill.folderId]).toEqual([parent.id, parent.id, parent.id]);
-    expect(actions.budgetSiblings(data, parent.id).map(item => item.id)).toEqual([before.id, child.id, post.id, bill.id, after.id]);
+    expect(actions.budgetSiblings(data, parent.id).map(item => item.id)).toEqual([before.id, child.id, post.id, bill.id, purchase.id, after.id]);
     expect(bill.splits[0]!.postId).toBe(post.id);
     expect(() => parseDatasetJson(exportDatasetJson(data))).not.toThrow();
   });
@@ -609,7 +634,8 @@ describe("recurring costs", () => {
     const post = data.posts.find(p => p.id === bill.splits[0]!.postId)!;
     expect(post.name).toBe("Rent post");
     expect(post.folderId).toBe(folder.id);
-    expect(bill.folderId).toBe(folder.id);
+    expect(bill.folderId).toBeNull();
+    expect(bill.parentPostId).toBe(post.id);
     expect(bill.splits).toEqual([{ postId: post.id, value: 100, absorbsRemainder: true }]);
     expect(post.rules).toEqual([{ from: "2026-09", rule: { kind: "fixed", amount: { amount: 8000, currency: "DKK" } } }]);
     actions.confirmOccurrence(data, bill.id, "2026-09");
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 430d129..c01fea1 100755
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -45,30 +45,33 @@ function requirePost(draft: Dataset, postId: PostId): Post {
   return post;
 }
 
-export type BudgetItemKey = { kind: "folder" | "post" | "recurring"; id: string };
-type BudgetItem = BudgetFolder | Post | RecurringCost;
+export type BudgetItemKey = { kind: "folder" | "post" | "recurring" | "purchase"; id: string };
+type BudgetItem = BudgetFolder | Post | RecurringCost | Purchase;
 type BudgetSibling = BudgetItemKey & { order: number };
+const orderOf = (item: BudgetItem): number => "placement" in item && item.placement ? item.placement.order : (item as BudgetFolder | Post | RecurringCost).order;
+const setOrder = (item: BudgetItem, order: number): void => { if ("placement" in item && item.placement) item.placement.order = order; else (item as BudgetFolder | Post | RecurringCost).order = order; };
 
 function siblingRefs(draft: Dataset, parentId: FolderId | null): Array<{ key: BudgetItemKey; item: BudgetItem }> {
   return [
     ...draft.folders.filter(item => item.parentId === parentId).map(item => ({ key: { kind: "folder" as const, id: item.id }, item })),
     ...draft.posts.filter(item => item.folderId === parentId).map(item => ({ key: { kind: "post" as const, id: item.id }, item })),
-    ...draft.recurring.filter(item => item.folderId === parentId).map(item => ({ key: { kind: "recurring" as const, id: item.id }, item })),
-  ].sort((a, b) => a.item.order - b.item.order);
+    ...draft.recurring.filter(item => !item.parentPostId && item.folderId === parentId).map(item => ({ key: { kind: "recurring" as const, id: item.id }, item })),
+    ...draft.purchases.filter(item => item.placement?.folderId === parentId).map(item => ({ key: { kind: "purchase" as const, id: item.id }, item })),
+  ].sort((a, b) => orderOf(a.item) - orderOf(b.item));
 }
 
 /** A clock-free, FX-free view of the shared order for Settings and placement. */
 export function budgetSiblings(draft: Dataset, parentId: FolderId | null): BudgetSibling[] {
-  return siblingRefs(draft, parentId).map(({ key, item }) => ({ ...key, order: item.order }));
+  return siblingRefs(draft, parentId).map(({ key, item }) => ({ ...key, order: orderOf(item) }));
 }
 
 function nextSiblingOrder(draft: Dataset, parentId: FolderId | null): number {
   const siblings = siblingRefs(draft, parentId);
   if (!siblings.length) return 0;
-  const highest = siblings[siblings.length - 1]!.item.order;
+  const highest = orderOf(siblings[siblings.length - 1]!.item);
   const next = highest + 1;
   if (Number.isFinite(next) && next > highest) return next;
-  siblings.forEach(({ item }, order) => { item.order = order; });
+  siblings.forEach(({ item }, order) => setOrder(item, order));
   return siblings.length;
 }
 
@@ -88,11 +91,12 @@ function requireBudgetItem(draft: Dataset, key: BudgetItemKey): BudgetItem {
   if (key.kind === "folder") return requireFolder(draft, key.id);
   if (key.kind === "post") return requirePost(draft, key.id);
   if (key.kind === "recurring") return requireRecurringCost(draft, key.id);
+  if (key.kind === "purchase") return requirePurchase(draft, key.id);
   throw new Error(`Unknown budget item kind: ${String(key.kind)}`);
 }
 
 function itemParent(key: BudgetItemKey, item: BudgetItem): FolderId | null {
-  return key.kind === "folder" ? (item as BudgetFolder).parentId : (item as Post | RecurringCost).folderId;
+  return key.kind === "folder" ? (item as BudgetFolder).parentId : key.kind === "purchase" ? (item as Purchase).placement!.folderId : (item as Post | RecurringCost).folderId;
 }
 
 export function addBudgetFolder(draft: Dataset, name: string, parentId: FolderId | null): BudgetFolder {
@@ -118,11 +122,12 @@ export function removeBudgetFolder(draft: Dataset, id: FolderId): void {
   const children = siblingRefs(draft, id);
   for (const { key, item } of children) {
     if (key.kind === "folder") (item as BudgetFolder).parentId = parent;
+    else if (key.kind === "purchase") (item as Purchase).placement!.folderId = parent;
     else (item as Post | RecurringCost).folderId = parent;
   }
   draft.folders.splice(draft.folders.indexOf(folder), 1);
   siblings.splice(position, 1, ...children);
-  siblings.forEach(({ item }, order) => { item.order = order; });
+  siblings.forEach(({ item }, order) => setOrder(item, order));
 }
 
 export function placeBudgetItem(draft: Dataset, key: BudgetItemKey, destination: FolderId | null, index: number): void {
@@ -142,10 +147,40 @@ export function placeBudgetItem(draft: Dataset, key: BudgetItemKey, destination:
     throw new Error(`Invalid sibling index: ${index}`);
   }
   if (key.kind === "folder") (item as BudgetFolder).parentId = destination;
-  else (item as Post | RecurringCost).folderId = destination;
+  else if (key.kind === "purchase") (item as Purchase).placement!.folderId = destination;
+  else {
+    (item as Post | RecurringCost).folderId = destination;
+    if (key.kind === "recurring") {
+      const cost = item as RecurringCost;
+      if (cost.parentPostId) draft.recurring.filter(other => other.parentPostId === cost.parentPostId && other.id !== cost.id).sort((a, b) => a.order - b.order).forEach((other, position) => { other.order = position; });
+      delete cost.parentPostId;
+    }
+  }
   destinationItems.splice(index, 0, { key, item });
-  if (source !== destination) sourceItems.forEach((entry, order) => { entry.item.order = order; });
-  destinationItems.forEach((entry, order) => { entry.item.order = order; });
+  if (source !== destination) sourceItems.forEach((entry, order) => setOrder(entry.item, order));
+  destinationItems.forEach((entry, order) => setOrder(entry.item, order));
+}
+
+export function placePurchase(draft: Dataset, purchaseId: PurchaseId, folderId: FolderId | null | undefined): void {
+  const purchase = requirePurchase(draft, purchaseId);
+  if (folderId !== undefined && folderId !== null) requireFolder(draft, folderId);
+  if (purchase.placement) {
+    siblingRefs(draft, purchase.placement.folderId).filter(entry => !(entry.key.kind === "purchase" && entry.key.id === purchaseId)).forEach(({ item }, order) => setOrder(item, order));
+  }
+  delete purchase.placement;
+  if (folderId === undefined) delete purchase.placement;
+  else purchase.placement = { folderId, order: nextSiblingOrder(draft, folderId) };
+}
+
+export function placeRecurringUnderPost(draft: Dataset, recurringId: RecurringCostId, postId: PostId): void {
+  requirePost(draft, postId);
+  const cost = requireRecurringCost(draft, recurringId);
+  const formerPostId = cost.parentPostId;
+  if (!cost.parentPostId) siblingRefs(draft, cost.folderId).filter(entry => !(entry.key.kind === "recurring" && entry.key.id === recurringId)).forEach(({ item }, order) => setOrder(item, order));
+  if (formerPostId) draft.recurring.filter(other => other.parentPostId === formerPostId && other.id !== recurringId).sort((a, b) => a.order - b.order).forEach((other, index) => { other.order = index; });
+  cost.folderId = null;
+  cost.parentPostId = postId;
+  cost.order = draft.recurring.filter(other => other.parentPostId === postId && other.id !== recurringId).length;
 }
 
 function requirePurchase(draft: Dataset, purchaseId: PurchaseId): Purchase {
@@ -592,10 +627,11 @@ function requireStartDateGranularity(recurrence: Recurrence, startDate: IsoDate)
 
 export function addRecurringCost(
   draft: Dataset,
-  cost: Omit<RecurringCost, "id" | "order">,
+  cost: Omit<RecurringCost, "id" | "order" | "parentPostId">,
 ): RecurringCost {
   const recurrence = requireRecurrence(cost.recurrence);
   requireStartDateGranularity(recurrence, cost.startDate);
+  if ("parentPostId" in cost) throw new Error("Use placeRecurringUnderPost to nest a recurring cost");
   if (cost.folderId !== null) requireFolder(draft, cost.folderId);
   requireRecurringSplitDestinations(draft, cost.splits);
   const created: RecurringCost = {
@@ -613,7 +649,7 @@ export function addRecurringCost(
 /** Creates the dedicated envelope and its bill in one store mutation. */
 export function addRecurringCostWithPost(
   draft: Dataset,
-  cost: Omit<RecurringCost, "id" | "order" | "splits" | "splitMode">,
+  cost: Omit<RecurringCost, "id" | "order" | "splits" | "splitMode" | "parentPostId">,
   newPostName: string,
 ): RecurringCost {
   const name = newPostName.trim();
@@ -626,6 +662,7 @@ export function addRecurringCostWithPost(
     splitMode: "percent",
     splits: [{ postId: post.id, value: 100, absorbsRemainder: true }],
   });
+  placeRecurringUnderPost(draft, bill.id, post.id);
   const monthly = recurrence.kind === "everyNMonths"
     ? bill.amount.amount / recurrence.n
     : recurrence.kind === "everyNWeeks"
@@ -651,10 +688,10 @@ export function addRecurringCostWithPost(
 export function updateRecurringCost(
   draft: Dataset,
   id: RecurringCostId,
-  changes: Partial<Omit<RecurringCost, "id" | "archived" | "endedFrom" | "folderId" | "order">>,
+  changes: Partial<Omit<RecurringCost, "id" | "archived" | "endedFrom" | "folderId" | "order" | "parentPostId">>,
 ): void {
   const cost = requireRecurringCost(draft, id);
-  if ("folderId" in changes || "order" in changes) throw new Error("Use placeBudgetItem to move a recurring cost");
+  if ("folderId" in changes || "order" in changes || "parentPostId" in changes) throw new Error("Use placement actions to move a recurring cost");
   const resolved: Partial<Omit<RecurringCost, "id" | "archived" | "endedFrom" | "folderId" | "order">> = { ...changes };
 
   if (changes.recurrence) {
diff --git a/src/store/migrations.test.ts b/src/store/migrations.test.ts
index 69b5f3a..502604f 100644
--- a/src/store/migrations.test.ts
+++ b/src/store/migrations.test.ts
@@ -515,3 +515,14 @@ test("v7 migration preserves records and assigns mixed order", () => {
   expect(migrated.recurring.map((bill) => bill.splits)).toEqual(before.recurring.map((bill: any) => bill.splits));
   expect(migrated.purchases).toEqual(before.purchases);
 });
+
+test("v8 migration preserves existing purchase and bill locations", () => {
+  const data = createSeedDataset("2026-09");
+  data.settings.schemaVersion = 8;
+  const before = structuredClone(data);
+  const migrated = migrate(data);
+  expect(migrated.settings.schemaVersion).toBe(9);
+  expect(migrated.posts).toEqual(before.posts);
+  expect(migrated.purchases).toEqual(before.purchases);
+  expect(migrated.recurring).toEqual(before.recurring);
+});
diff --git a/src/store/migrations.ts b/src/store/migrations.ts
index f58f54a..91c75f1 100644
--- a/src/store/migrations.ts
+++ b/src/store/migrations.ts
@@ -214,6 +214,8 @@ const MIGRATIONS: Array<(data: any) => any> = [
       recurring: recurring.map((bill: any) => ({ ...bill, order: billOrders.get(bill), folderId: null })),
     };
   },
+  // 8 -> 9: placement fields are optional, so existing rows stay where they are.
+  (data: any) => ({ ...data, settings: { ...data.settings, schemaVersion: 9 } }),
 ];
 
 export function migrate(raw: unknown): Dataset {
diff --git a/src/ui/components/BudgetTree.tsx b/src/ui/components/BudgetTree.tsx
index 0a0144b..2ce1241 100644
--- a/src/ui/components/BudgetTree.tsx
+++ b/src/ui/components/BudgetTree.tsx
@@ -7,6 +7,7 @@ import type { MonthPostRow } from "../../domain/views.ts";
 import { useDataset } from "../hooks/useDataset.ts";
 import { useMoneyFormat } from "../hooks/useMoneyFormat.ts";
 import { DesktopPostBody, MobilePostRow } from "./PostTable.tsx";
+import { PurchaseDialog } from "./PurchaseDialog.tsx";
 
 function cadence(rule: Recurrence) {
   const unit = rule.kind === "everyNMonths" ? "month" : rule.kind === "everyNWeeks" ? "week" : "day";
@@ -32,18 +33,19 @@ export function BudgetTree({ monthId, rows, onChangeRule }: { monthId: MonthId;
     <div className="flex flex-wrap items-baseline justify-between gap-2"><span className="font-medium">{node.cost.name} <span className="ml-2 font-money font-normal">{fmt.money(node.cost.amount.amount, node.cost.amount.currency)}</span></span><Link className="text-xs underline underline-offset-2 hover:text-budget-accent" to={`/settings#bill-${node.cost.id}`}>Edit</Link></div>
     <p className="text-xs text-budget-ink-muted">{cadence(node.cost.recurrence)} · Assigned to {node.cost.splits.map(split => dataset.posts.find(post => post.id === split.postId)?.name).join(", ")} · {node.nextOccurrence ? `Next ${node.nextOccurrence.date}` : "Ended"}</p>
   </div>;
+  const purchaseContent = (node: Extract<BudgetNode, { kind: "purchase" }>) => <div className="flex flex-wrap items-center justify-between gap-2 py-3 text-sm"><span>{node.purchase.description} <span className="ml-2 font-money">{fmt.money(node.amount.amount, node.amount.currency)}</span></span><PurchaseDialog monthId={monthId} purchase={node.purchase} trigger={<button type="button" className="text-xs underline underline-offset-2 hover:text-budget-accent">Edit</button>} /></div>;
   const render = (nodes: BudgetNode[], mobile: boolean, depth = 0): ReactNode[] => nodes.flatMap(node => {
     const indent = Math.min(depth, 4) * 16;
-    const id = node.kind === "folder" ? node.folder.id : node.kind === "post" ? node.row.post.id : node.cost.id;
-    if (node.kind === "post") return [mobile ? <MobilePostRow key={id} row={node.row} indent={indent} monthId={monthId} onChangeRule={onChangeRule} /> : <DesktopPostBody key={id} row={node.row} indent={indent} monthId={monthId} onChangeRule={onChangeRule} />];
-    const name = node.kind === "folder" ? node.folder.name : node.cost.name;
-    const content = node.kind === "folder" ? folderHeading(node) : billContent(node);
+    const id = node.kind === "folder" ? node.folder.id : node.kind === "post" ? node.row.post.id : node.kind === "purchase" ? node.purchase.id : node.cost.id;
+    if (node.kind === "post") return [mobile ? <MobilePostRow key={id} row={node.row} indent={indent} monthId={monthId} onChangeRule={onChangeRule} /> : <DesktopPostBody key={id} row={node.row} indent={indent} monthId={monthId} onChangeRule={onChangeRule} />, ...render(node.children, mobile, depth + 1)];
+    const name = node.kind === "folder" ? node.folder.name : node.kind === "purchase" ? node.purchase.description : node.cost.name;
+    const content = node.kind === "folder" ? folderHeading(node) : node.kind === "purchase" ? purchaseContent(node) : billContent(node);
     const style = { paddingInlineStart: `${indent}px` };
     const item = mobile ? <li key={id} data-budget-item={id} data-budget-name={name} style={style}>{content}</li> : <tbody key={id} data-budget-item={id} data-budget-name={name}><tr><td colSpan={6} className={node.kind === "folder" ? "border-b border-budget-rule pt-3" : "border-b border-budget-rule"} style={style}>{content}</td></tr></tbody>;
     return [item, ...(node.kind === "folder" && expanded.has(id) ? render(node.children, mobile, depth + 1) : [])];
   });
   return <>
-    <div className="hidden overflow-x-auto sm:block"><table className="w-full text-sm"><thead className="text-left"><tr className="border-b border-budget-rule text-[0.6875rem] uppercase tracking-wider text-budget-ink-muted">{["Post / bill", "Carried in", "Allocated", "Spent", "Remaining", "Projected"].map((label, index) => <th key={label} className={`py-2 font-medium ${index ? "pl-6 text-right" : ""}`}>{label}</th>)}</tr></thead>
+    <div className="hidden overflow-x-auto sm:block"><table className="w-full text-sm"><thead className="text-left"><tr className="border-b border-budget-rule text-[0.6875rem] uppercase tracking-wider text-budget-ink-muted">{["Budget item", "Carried in", "Allocated", "Spent", "Remaining", "Projected"].map((label, index) => <th key={label} className={`py-2 font-medium ${index ? "pl-6 text-right" : ""}`}>{label}</th>)}</tr></thead>
       {render(tree.roots, false)}
       {tree.unfiled.length > 0 && <tbody><tr><th colSpan={6} className="border-b border-budget-rule pb-2 pt-5 text-left font-medium">Unfiled</th></tr></tbody>}{render(tree.unfiled, false)}
     </table></div>
diff --git a/src/ui/components/PurchaseDialog.tsx b/src/ui/components/PurchaseDialog.tsx
index 884e436..b3e31c5 100644
--- a/src/ui/components/PurchaseDialog.tsx
+++ b/src/ui/components/PurchaseDialog.tsx
@@ -31,7 +31,7 @@ import {
 import { useDataset } from "../hooks/useDataset.ts";
 import { parseMoneyInput } from "../moneyInput.ts";
 import { useMutate } from "../hooks/useMutate.ts";
-import { addPurchase, cancelScheduleFrom, updatePurchase } from "../../store/actions.ts";
+import { addPurchase, cancelScheduleFrom, placePurchase, updatePurchase } from "../../store/actions.ts";
 import type { MonthId, Purchase } from "../../domain/types.ts";
 
 interface Props {
@@ -47,9 +47,13 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
   const activePosts = dataset.posts
     .filter((p) => !p.archived)
     .sort((a, b) => a.order - b.order);
+  const editablePosts = dataset.posts
+    .filter((p) => !p.archived || purchase?.splits.some(split => split.postId === p.id))
+    .sort((a, b) => a.order - b.order);
 
   const [open, setOpen] = useState(false);
   const [detachBill, setDetachBill] = useState(false);
+  const [placement, setPlacement] = useState(() => purchase?.placement ? purchase.placement.folderId ?? "__unfiled" : "__ledger");
   const [draft, setDraft] = useState<PurchaseDraft>(() =>
     purchase ? fromPurchase(purchase) : emptyDraft(monthId, activePosts[0]?.id ?? ""),
   );
@@ -70,6 +74,7 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
 
   function reset() {
     setDetachBill(false);
+    setPlacement(purchase?.placement ? purchase.placement.folderId ?? "__unfiled" : "__ledger");
     setDraft(
       purchase ? fromPurchase(purchase) : emptyDraft(monthId, activePosts[0]?.id ?? ""),
     );
@@ -88,10 +93,14 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
     const created = bulkMode ? toPurchases(bulk) : null;
     void mutate((data) => {
       if (created) for (const p of created) addPurchase(data, p);
-      else if (purchase) updatePurchase(data, purchase.id, {
-        ...toPurchase(draft),
-        ...(detachBill ? { source: undefined } : {}),
-      });
+      else if (purchase) {
+        updatePurchase(data, purchase.id, {
+          ...toPurchase(draft),
+          ...(detachBill ? { source: undefined } : {}),
+        });
+        const destination = placement === "__ledger" ? undefined : placement === "__unfiled" ? null : placement;
+        if (destination !== purchase.placement?.folderId || (destination === undefined) !== (purchase.placement === undefined)) placePurchase(data, purchase.id, destination);
+      }
       else addPurchase(data, toPurchase(draft));
     }).then((saved) => {
       if (!saved) return;
@@ -304,7 +313,17 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
             />
           </div>
 
-          <SplitEditor draft={draft} posts={activePosts} onChange={setDraft} />
+          <SplitEditor draft={draft} posts={purchase ? editablePosts : activePosts} onChange={setDraft} />
+
+          {purchase && <div className="space-y-1">
+            <Label htmlFor="purchase-placement">Budget listing</Label>
+            <NativeSelect id="purchase-placement" value={placement} onChange={event => setPlacement(event.target.value)}>
+              <option value="__ledger">Monthly purchases only</option>
+              <option value="__unfiled">Own row in Unfiled</option>
+              {dataset.folders.map(folder => <option key={folder.id} value={folder.id}>Own row in {folder.name}</option>)}
+            </NativeSelect>
+            <p className="text-xs text-budget-ink-muted">Post splits above determine which balances this purchase charges.</p>
+          </div>}
 
           {purchase?.source && (
             <label className="flex items-start gap-2 text-sm">
diff --git a/src/ui/routes/settings/BudgetFoldersSection.test.tsx b/src/ui/routes/settings/BudgetFoldersSection.test.tsx
index 17d0260..7c7fa02 100644
--- a/src/ui/routes/settings/BudgetFoldersSection.test.tsx
+++ b/src/ui/routes/settings/BudgetFoldersSection.test.tsx
@@ -63,6 +63,16 @@ test("post and bill move independently", async () => setup(async (container, dat
   const rows = Array.from(container.querySelectorAll("[data-budget-item]"));
   expect(rows.findIndex(row => row.getAttribute("data-budget-item") === post.id)).toBeLessThan(rows.findIndex(row => row.getAttribute("data-budget-item") === utilities.id));
 }));
+test("a bill can move beneath a post and follows that post's folder", async () => setup(async (container, data) => {
+  const post = data.posts[0]!, bill = data.recurring[0]!;
+  await act(async () => { select(container, "Folder for Phone", `post:${post.id}`); });
+  expect(store.get().recurring[0]!.parentPostId).toBe(post.id);
+  expect(store.get().recurring[0]!.folderId).toBeNull();
+  await act(async () => { select(container, `Folder for ${post.name}`, data.folders[0]!.id); });
+  expect(store.get().posts[0]!.folderId).toBe(data.folders[0]!.id);
+  expect(store.get().recurring[0]!.parentPostId).toBe(post.id);
+  expect(container.querySelector(`[data-budget-item="${post.id}"] + div [data-budget-item="${bill.id}"]`)).not.toBeNull();
+}));
 test("remove folder moves nested items into its parent", async () => setup(async (container, data) => {
   const housing = data.folders[0]!, utilities = data.folders[1]!;
   await act(async () => { (container.querySelector('button[aria-label="Remove folder Utilities"]') as HTMLButtonElement).click(); });
diff --git a/src/ui/routes/settings/BudgetFoldersSection.tsx b/src/ui/routes/settings/BudgetFoldersSection.tsx
index b0c5750..3cae99b 100644
--- a/src/ui/routes/settings/BudgetFoldersSection.tsx
+++ b/src/ui/routes/settings/BudgetFoldersSection.tsx
@@ -5,7 +5,7 @@ import { NativeSelect } from "@/components/ui/native-select";
 import { Section } from "../../components/Section.tsx";
 import { useDataset } from "../../hooks/useDataset.ts";
 import { useMutate } from "../../hooks/useMutate.ts";
-import { addBudgetFolder, budgetSiblings, placeBudgetItem, removeBudgetFolder, renameBudgetFolder, type BudgetItemKey } from "../../../store/actions.ts";
+import { addBudgetFolder, budgetSiblings, placeBudgetItem, placeRecurringUnderPost, removeBudgetFolder, renameBudgetFolder, type BudgetItemKey } from "../../../store/actions.ts";
 
 export function BudgetFoldersSection() {
   const dataset = useDataset();
@@ -45,49 +45,55 @@ export function BudgetFoldersSection() {
     }
     return true;
   }
-  function children(parentId: string | null): ReactNode {
-    const siblings = budgetSiblings(dataset, parentId);
+  function children(parentId: string | null, parentPostId?: string): ReactNode {
+    const siblings = parentPostId ? dataset.recurring.filter(cost => cost.parentPostId === parentPostId).sort((a, b) => a.order - b.order).map(cost => ({ kind: "recurring" as const, id: cost.id, order: cost.order })) : budgetSiblings(dataset, parentId);
     return <ul className="space-y-2">{siblings.map((key, index) => {
-      const item = key.kind === "folder" ? dataset.folders.find(item => item.id === key.id)! : key.kind === "post" ? dataset.posts.find(item => item.id === key.id)! : dataset.recurring.find(item => item.id === key.id)!;
+      const item = key.kind === "folder" ? dataset.folders.find(item => item.id === key.id)! : key.kind === "post" ? dataset.posts.find(item => item.id === key.id)! : key.kind === "purchase" ? dataset.purchases.find(item => item.id === key.id)! : dataset.recurring.find(item => item.id === key.id)!;
+      const name = "description" in item ? item.description : item.name;
       return <li key={`${key.kind}-${key.id}`}>
         <div data-budget-item={key.id} className="flex flex-wrap items-center gap-2 border-b border-budget-rule py-2">
           <div className="min-w-0 flex-1 basis-40">
-            {key.kind === "folder" ? <Input className="h-8 w-full max-w-64" aria-label={`Name for ${item.name}`} value={folderNames[key.id] ?? item.name} onInput={event => {
+            {key.kind === "folder" ? <Input className="h-8 w-full max-w-64" aria-label={`Name for ${name}`} value={folderNames[key.id] ?? name} onInput={event => {
               const typed = event.currentTarget.value;
               setFolderNames(names => ({ ...names, [key.id]: typed }));
-            }} onBlur={() => saveFolderName(key.id, item.name)} onKeyDown={event => {
+            }} onBlur={() => saveFolderName(key.id, name)} onKeyDown={event => {
               if (event.key === "Enter") {
                 event.preventDefault();
-                saveFolderName(key.id, item.name);
+                saveFolderName(key.id, name);
               }
-            }} /> : <span className="break-words text-sm">{item.name}</span>}
-            <span className="mt-1 block text-xs text-budget-ink-muted">{key.kind === "folder" ? "Folder" : key.kind === "post" ? "Post" : "Bill"}</span>
+            }} /> : <span className="break-words text-sm">{name}</span>}
+            <span className="mt-1 block text-xs text-budget-ink-muted">{key.kind === "folder" ? "Folder" : key.kind === "post" ? "Post" : key.kind === "purchase" ? "Purchase" : "Bill"}</span>
           </div>
-          <NativeSelect className="h-8 w-full sm:w-56 text-xs md:text-xs" aria-label={`Folder for ${item.name}`} value={parentId ?? ""} onChange={event => {
+          <NativeSelect className="h-8 w-full sm:w-56 text-xs md:text-xs" aria-label={`Folder for ${name}`} value={parentPostId ? `post:${parentPostId}` : parentId ?? ""} onChange={event => {
             const destination = event.target.value || null;
-            void mutate(draft => placeBudgetItem(draft, key, destination, budgetSiblings(draft, destination).filter(sibling => !(sibling.kind === key.kind && sibling.id === key.id)).length));
+            void mutate(draft => {
+              if (key.kind === "recurring" && destination?.startsWith("post:")) placeRecurringUnderPost(draft, key.id, destination.slice(5));
+              else placeBudgetItem(draft, key, destination, budgetSiblings(draft, destination).filter(sibling => !(sibling.kind === key.kind && sibling.id === key.id)).length);
+            });
           }}>
             <option value="">Unfiled</option>
             {folders.filter(folder => allowedDestination(key, folder.id)).map(folder => <option key={folder.id} value={folder.id}>{folderPath(folder.id)}</option>)}
+            {key.kind === "recurring" && dataset.posts.map(post => <option key={post.id} value={`post:${post.id}`}>Under {post.name}</option>)}
           </NativeSelect>
           <div className="flex gap-1">
-            <Button size="xs" variant="ghost" aria-label={`Move ${item.name} up`} disabled={index === 0} onClick={() => void mutate(draft => {
+            <Button size="xs" variant="ghost" aria-label={`Move ${name} up`} disabled={index === 0 || !!parentPostId} onClick={() => void mutate(draft => {
               const position = budgetSiblings(draft, parentId).findIndex(sibling => sibling.kind === key.kind && sibling.id === key.id);
               placeBudgetItem(draft, key, parentId, position - 1);
             })}>up</Button>
-            <Button size="xs" variant="ghost" aria-label={`Move ${item.name} down`} disabled={index === siblings.length - 1} onClick={() => void mutate(draft => {
+            <Button size="xs" variant="ghost" aria-label={`Move ${name} down`} disabled={index === siblings.length - 1 || !!parentPostId} onClick={() => void mutate(draft => {
               const position = budgetSiblings(draft, parentId).findIndex(sibling => sibling.kind === key.kind && sibling.id === key.id);
               placeBudgetItem(draft, key, parentId, position + 1);
             })}>down</Button>
-            {key.kind === "folder" && <Button size="xs" variant="ghost" aria-label={`Remove folder ${item.name}`} title="Move contents to parent and remove folder" onClick={() => void mutate(draft => removeBudgetFolder(draft, key.id))}>remove</Button>}
+            {key.kind === "folder" && <Button size="xs" variant="ghost" aria-label={`Remove folder ${name}`} title="Move contents to parent and remove folder" onClick={() => void mutate(draft => removeBudgetFolder(draft, key.id))}>remove</Button>}
           </div>
         </div>
         {key.kind === "folder" && <div className="ml-3 border-l border-budget-rule pl-3 sm:ml-5 sm:pl-5">{children(key.id)}</div>}
+        {key.kind === "post" && dataset.recurring.some(cost => cost.parentPostId === key.id) && <div className="ml-3 border-l border-budget-rule pl-3 sm:ml-5 sm:pl-5">{children(parentId, key.id)}</div>}
       </li>;
     })}</ul>;
   }
 
-  return <div id="budget-folders" className="scroll-mt-5"><Section title="Budget folders" hint="Organize folders, posts, and bills together. Moving a bill keeps its destination posts and all payment history.">
+  return <div id="budget-folders" className="scroll-mt-5"><Section title="Budget folders" hint="Organize folders, posts, bills, and placed purchases together. Moving a bill or purchase leaves its post charges unchanged.">
     {error && <p role="alert" className="mb-3 text-sm text-destructive">Could not save: {error}</p>}
     <h3 className="text-sm font-medium">Top level · Unfiled</h3>
     {children(null)}
diff --git a/src/ui/routes/settings/RecurringSection.test.tsx b/src/ui/routes/settings/RecurringSection.test.tsx
index 1b47163..affcea6 100644
--- a/src/ui/routes/settings/RecurringSection.test.tsx
+++ b/src/ui/routes/settings/RecurringSection.test.tsx
@@ -38,6 +38,7 @@ test("existing post destination requires a selection", async () => {
     await act(async () => { add.click(); });
     const saved = data.recurring[0]!;
     expect(saved.splits[0]!.postId).toBe(chosen.id);
+    expect(saved.parentPostId).toBe(chosen.id);
     expect(saved.amount).toEqual({ amount: 30, currency: "USD" });
   } finally {
     act(() => root.unmount()); container.remove();
@@ -72,6 +73,7 @@ test("new bill defaults to a same-name post and accepts schedule controls", asyn
     const bill = data.recurring[0]!;
     const post = data.posts.find(post => post.id === bill.splits[0]!.postId)!;
     expect(post.name).toBe("Insurance");
+    expect(bill.parentPostId).toBe(post.id);
     expect(bill.recurrence).toEqual({ kind: "everyNMonths", n: 12 });
     expect(bill.startDate).toHaveLength(10);
     expect(post.rules[0]!.rule).toEqual({ kind: "fixed", amount: { amount: 100, currency: "DKK" } });
diff --git a/src/ui/routes/settings/RecurringSection.tsx b/src/ui/routes/settings/RecurringSection.tsx
index 8e46cc5..d884551 100644
--- a/src/ui/routes/settings/RecurringSection.tsx
+++ b/src/ui/routes/settings/RecurringSection.tsx
@@ -7,6 +7,7 @@ import { useMutate } from "../../hooks/useMutate.ts";
 import {
   addRecurringCost,
   addRecurringCostWithPost,
+  placeRecurringUnderPost,
   endRecurringCost,
   restoreRecurringCost,
   setRecurringCostEndedFrom,
@@ -478,7 +479,10 @@ export function RecurringSection() {
                 anchoring,
               };
               if (selectedKind === "dedicated") addRecurringCostWithPost(draft, input, dedicatedName);
-              else addRecurringCost(draft, { ...input, splitMode: selectedMode, splits: selectedSplits });
+              else {
+                const bill = addRecurringCost(draft, { ...input, splitMode: selectedMode, splits: selectedSplits });
+                if (selectedFolder === null && selectedSplits.length === 1) placeRecurringUnderPost(draft, bill.id, selectedSplits[0]!.postId);
+              }
             },
             ).then((saved) => {
               if (saved) { setNewName(""); setNewPostName(""); setNewAmount(`0 ${base}`); setNewSelection({ splitMode: "percent", splits: [{ postId: "", value: 100, absorbsRemainder: true }] }); }

From f02c452d6c95f7e59d40132ad652dff3a9cb6075 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 14:35:29 +0200
Subject: [PATCH 26/27] fix: nest legacy bills and stamp builds with commit

---
 .gitea/workflows/ci.yml                       |  3 +
 .github/workflows/ci.yml                      |  2 +-
 .github/workflows/pages.yml                   |  1 +
 Dockerfile                                    |  2 +
 README.md                                     |  4 +-
 build.ts                                      | 27 +++++++-
 docs/TODO.md                                  |  9 +--
 ...9-30-purchase-and-bill-budget-placement.md |  4 +-
 src/domain/seed.ts                            |  2 +-
 src/store/migrations.test.ts                  | 68 +++++++++++++++++--
 src/store/migrations.ts                       | 24 +++++++
 src/ui/buildVersion.test.ts                   | 17 ++++-
 src/ui/buildVersion.ts                        | 25 ++++++-
 src/ui/components/BudgetTree.test.tsx         | 26 ++++++-
 src/ui/components/BudgetTree.tsx              |  5 +-
 src/ui/components/PostTable.tsx               | 14 +++-
 src/ui/routes/settings/ColophonSection.tsx    |  8 +--
 17 files changed, 214 insertions(+), 27 deletions(-)

diff --git a/.gitea/workflows/ci.yml b/.gitea/workflows/ci.yml
index 73b22a6..4e24da1 100644
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@@ -59,6 +59,9 @@ jobs:
         uses: docker/build-push-action@v6
         with:
           context: .
+          build-args: |
+            BUILD_VERSION=${{ gitea.sha }}
+            BUILD_REPOSITORY=https://gitea.lucaswinther.info/${{ gitea.repository }}
           push: ${{ gitea.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9261a06..e771ec7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -22,7 +22,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - run: docker build -t budget2 .
+      - run: docker build --build-arg BUILD_VERSION=${{ github.sha }} --build-arg BUILD_REPOSITORY=https://github.com/${{ github.repository }} -t budget2 .
       - name: Serve the image and check it responds
         run: |
           docker run -d --rm -p 3000:3000 --name budget2 budget2
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index 9acb05f..5b8fd77 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -28,6 +28,7 @@ jobs:
         env:
           BUN_PUBLIC_BASE_PATH: /${{ github.event.repository.name }}/
           BUILD_VERSION: ${{ github.sha }}
+          BUILD_REPOSITORY: https://github.com/${{ github.repository }}
         run: bun run build
       - name: Stop Pages from running the output through Jekyll
         run: touch dist/.nojekyll
diff --git a/Dockerfile b/Dockerfile
index bc8a24e..ae089de 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -4,6 +4,8 @@ COPY package.json bun.lock ./
 RUN bun install --frozen-lockfile
 COPY . .
 ARG BUN_PUBLIC_BASE_PATH=/
+ARG BUILD_VERSION
+ARG BUILD_REPOSITORY
 ENV BUN_PUBLIC_BASE_PATH=$BUN_PUBLIC_BASE_PATH
 RUN bun run build
 
diff --git a/README.md b/README.md
index 152e17b..81c4a70 100755
--- a/README.md
+++ b/README.md
@@ -36,14 +36,14 @@ Gitea account or token that has package read permission.
 To build locally instead:
 
 ```bash
-docker build -t budget2 .
+docker build --build-arg BUILD_VERSION="$(git rev-parse HEAD)" --build-arg BUILD_REPOSITORY=https://gitea.lucaswinther.info/lucasw89/budget2.0 -t budget2 .
 docker run --rm -p 3000:3000 budget2
 ```
 
 To serve from a subpath, build and run with `BUN_PUBLIC_BASE_PATH`:
 
 ```bash
-docker build -t budget2 --build-arg BUN_PUBLIC_BASE_PATH=/budget/ .
+docker build -t budget2 --build-arg BUN_PUBLIC_BASE_PATH=/budget/ --build-arg BUILD_VERSION="$(git rev-parse HEAD)" --build-arg BUILD_REPOSITORY=https://gitea.lucaswinther.info/lucasw89/budget2.0 .
 docker run --rm -p 3000:3000 -e BUN_PUBLIC_BASE_PATH=/budget/ budget2
 ```
 
diff --git a/build.ts b/build.ts
index 196fe2c..f97d107 100644
--- a/build.ts
+++ b/build.ts
@@ -10,7 +10,31 @@ import type { Currency, FxRate } from "./src/domain/types.ts";
 
 const basePath = normalizeBase(process.env.BUN_PUBLIC_BASE_PATH);
 const outdir = path.join(process.cwd(), "dist");
-const version = process.env.BUILD_VERSION ?? String(Date.now());
+// A checkout knows its own revision. Docker excludes .git, so CI passes the
+// same value through BUILD_VERSION as a build argument instead.
+let checkoutCommit: string | undefined;
+if (!process.env.BUILD_VERSION) {
+  try {
+    const candidate = (await Bun.$`git rev-parse --verify HEAD`.quiet().text()).trim();
+    if (/^(?:[0-9a-f]{40}|[0-9a-f]{64})$/i.test(candidate)) {
+      const changes = (await Bun.$`git status --porcelain --untracked-files=normal`.quiet().text()).trim();
+      checkoutCommit = changes ? `${candidate}-dirty` : candidate;
+    }
+  } catch {
+    // Source archives and Docker contexts may have no Git metadata.
+  }
+}
+const version = process.env.BUILD_VERSION || checkoutCommit || String(Date.now());
+let checkoutRepository: string | undefined;
+if (!process.env.BUILD_REPOSITORY) {
+  try {
+    const candidate = (await Bun.$`git remote get-url origin`.quiet().text()).trim();
+    if (/^https?:\/\//.test(candidate)) checkoutRepository = candidate.replace(/\.git\/?$/, "").replace(/\/$/, "");
+  } catch {
+    // Source archives and Docker contexts may have no remote.
+  }
+}
+const sourceRepository = process.env.BUILD_REPOSITORY || checkoutRepository || "https://github.com/StereotypicalCat/budget2.0";
 
 const FX_BASE: Currency = "DKK";
 const FX_TARGETS: Currency[] = ["USD", "EUR", "GBP"];
@@ -108,6 +132,7 @@ const result = await Bun.build({
     // build a bug report is about. Only defined here, never in dev, which is
     // why it is read through a try/catch accessor.
     "process.env.BUN_PUBLIC_BUILD_VERSION": JSON.stringify(version),
+    "process.env.BUN_PUBLIC_SOURCE_REPOSITORY": JSON.stringify(sourceRepository),
     // Double-encoded on purpose: the inlined literal must be a JSON *string*
     // for parseBakedRates to parse at runtime.
     "process.env.BUN_PUBLIC_BAKED_FX_RATES": JSON.stringify(JSON.stringify(bakedFxRates)),
diff --git a/docs/TODO.md b/docs/TODO.md
index 7f935b5..6123527 100755
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -10,18 +10,19 @@ task moved to `AGENTS.md`.
 
 **Current feature worktree state:** budget folders and recurring cost placement
 are implemented.
-746 tests passing across 59 files. `bunx tsc --noEmit` is clean;
+753 tests passing across 59 files. `bunx tsc --noEmit` is clean;
 `bun run --bun build` succeeds using the committed seed rates when live-fetch
 is unavailable. The runtime override bypasses a broken local Bun shim.
 
-**Schema is at version 9.** v1 -> v2 made allocation rules a dated series;
+**Schema is at version 10.** v1 -> v2 made allocation rules a dated series;
 v2 -> v3 moved currencies into the dataset; v3 -> v4 drops a stored rate-service
 URL that can no longer work; v4 -> v5 adds sterling to an existing dataset;
 v5 -> v6 collapses per-currency decimals into one dataset-wide setting; v6 -> v7
 adds `Dataset.recurring`; v7 -> v8 adds budget folders and assigns existing
 posts and recurring bills a deterministic mixed sibling order under Unfiled.
-v8 -> v9 adds optional purchase and bill placement fields without moving old rows.
-All eight are behaviour-preserving by construction —
+v8 -> v9 adds optional purchase and bill placement fields without moving old rows;
+v9 -> v10 nests existing unfiled single-post bills under their post.
+All nine preserve financial behaviour —
 not one changes a stored figure — and are tested as such.
 
 A migration applies **on load, in memory**; it is written back on the next
diff --git a/docs/specs/2026-09-30-purchase-and-bill-budget-placement.md b/docs/specs/2026-09-30-purchase-and-bill-budget-placement.md
index 39080b0..ed206b2 100644
--- a/docs/specs/2026-09-30-purchase-and-bill-budget-placement.md
+++ b/docs/specs/2026-09-30-purchase-and-bill-budget-placement.md
@@ -6,4 +6,6 @@ The owner can edit a purchase's post splits and also give it an independent row
 
 A new recurring cost assigned to one post defaults to a row nested beneath that post. A dedicated post and its bill are nested when created together. A bill split across several posts remains at folder level. An explicit folder choice in the add form takes precedence. `RecurringCost.parentPostId` records the nested display parent, while its splits remain the financial destinations. A nested bill follows the post when the post moves. Settings can move the bill to another post or to a folder without changing its splits or confirmations.
 
-Schema 9 adds these optional fields. The v8 to v9 migration only advances the version; existing purchases and bills retain their locations. JSON import checks placement references, sibling order, and parent post references. Folder Bills due includes nested bills once. Purchase rows do not contribute to Bills due, since the figure is a schedule total.
+Posts with nested bills have a disclosure control on the month page. They start collapsed, like folders, and expanding the post reveals its bills beneath the balance row. The post balance remains visible in either state.
+
+Schema 9 adds these optional fields. Its v8 to v9 migration only advances the version. Schema 10 then nests existing unfiled, single-post bills beneath their destination posts, so a preexisting budget gets the same layout as new bills. It leaves splits and confirmations unchanged. JSON import checks placement references, sibling order, and parent post references. Folder Bills due includes nested bills once. Purchase rows do not contribute to Bills due, since the figure is a schedule total.
diff --git a/src/domain/seed.ts b/src/domain/seed.ts
index 6f57f7b..bb0768e 100644
--- a/src/domain/seed.ts
+++ b/src/domain/seed.ts
@@ -1,7 +1,7 @@
 import { DEFAULT_DIGITS, SEED_CURRENCIES } from "./types.ts";
 import type { CurrencyDef, Dataset, FxRate, MonthId, Post } from "./types.ts";
 
-export const SCHEMA_VERSION = 9;
+export const SCHEMA_VERSION = 10;
 
 const SEED_POST_NAMES = ["Video Games", "Food", "Events and Social"] as const;
 
diff --git a/src/store/migrations.test.ts b/src/store/migrations.test.ts
index 502604f..fb1c5e8 100644
--- a/src/store/migrations.test.ts
+++ b/src/store/migrations.test.ts
@@ -2,6 +2,9 @@ import { test, expect, describe } from "bun:test";
 import { SCHEMA_VERSION, createSeedDataset } from "../domain/seed.ts";
 import { migrate, UnsupportedSchemaError } from "./migrations.ts";
 import { figuresFor, foldBalances } from "../domain/fold.ts";
+import { parseDatasetJson } from "../export/json.ts";
+import { budgetTree } from "../domain/budgetTree.ts";
+import { monthView } from "../domain/views.ts";
 
 describe("migrate", () => {
   test("passes a current-version dataset through unchanged", () => {
@@ -507,22 +510,77 @@ test("v7 migration preserves records and assigns mixed order", () => {
   expect(migrated.posts.map((post) => [post.id, post.order, post.folderId])).toEqual([
     ["later", 1, null], ["first", 0, null],
   ]);
-  expect(migrated.recurring.map((bill) => [bill.id, bill.order, bill.folderId])).toEqual([
-    ["bill-later", 3, null], ["bill-first", 2, null],
+  expect(migrated.recurring.map((bill) => [bill.id, bill.order, bill.folderId, bill.parentPostId])).toEqual([
+    ["bill-later", 0, null, "first"], ["bill-first", 0, null, "later"],
   ]);
-  expect(new Set([...migrated.posts, ...migrated.recurring].map((item) => item.order)).size).toBe(4);
+  expect(new Set(migrated.posts.map((item) => item.order)).size).toBe(2);
   expect(migrated.posts[0]!.rules).toEqual(before.posts[0].rules);
   expect(migrated.recurring.map((bill) => bill.splits)).toEqual(before.recurring.map((bill: any) => bill.splits));
   expect(migrated.purchases).toEqual(before.purchases);
 });
 
-test("v8 migration preserves existing purchase and bill locations", () => {
+test("v8 migration preserves existing purchase and post data", () => {
   const data = createSeedDataset("2026-09");
   data.settings.schemaVersion = 8;
   const before = structuredClone(data);
   const migrated = migrate(data);
-  expect(migrated.settings.schemaVersion).toBe(9);
+  expect(migrated.settings.schemaVersion).toBe(10);
   expect(migrated.posts).toEqual(before.posts);
   expect(migrated.purchases).toEqual(before.purchases);
   expect(migrated.recurring).toEqual(before.recurring);
 });
+
+for (const oldVersion of [8, 9]) test(`v${oldVersion} single-post unfiled bills become children of their posts`, () => {
+  const data = createSeedDataset("2026-09");
+  data.settings.schemaVersion = oldVersion;
+  const games = data.posts[0]!;
+  data.recurring = ["Star Rail Pass", "Genshin Pass"].map((name, index) => ({
+    id: `bill-${index}`, name, order: 3 + index, folderId: null, archived: false,
+    amount: { amount: 35, currency: "DKK" }, startDate: "2026-10",
+    recurrence: { kind: "everyNMonths" as const, n: 1 }, anchoring: "calendar" as const,
+    splitMode: "percent" as const,
+    splits: [{ postId: games.id, value: 100, absorbsRemainder: true }],
+  }));
+  const migrated = migrate(data);
+  expect(migrated.recurring.map(bill => [bill.name, bill.parentPostId, bill.order])).toEqual([
+    ["Star Rail Pass", games.id, 0], ["Genshin Pass", games.id, 1],
+  ]);
+  expect(migrated.recurring.every(bill => bill.folderId === null)).toBe(true);
+  const imported = parseDatasetJson(JSON.stringify(data));
+  const gamesRow = budgetTree(imported, "2026-10", monthView(imported, "2026-10").rows)
+    .unfiled.find(node => node.kind === "post" && node.row.post.id === games.id);
+  expect(gamesRow?.kind).toBe("post");
+  if (gamesRow?.kind === "post") expect(gamesRow.children.map(node => node.kind === "bill" ? node.cost.name : "other"))
+    .toEqual(["Star Rail Pass", "Genshin Pass"]);
+});
+
+test("v9 migration keeps explicitly filed and multi-post bills where they are", () => {
+  const data = createSeedDataset("2026-09");
+  data.settings.schemaVersion = 9;
+  data.folders = [{ id: "filed", name: "Bills", parentId: null, order: 3 }];
+  const base = { archived: false, amount: { amount: 20, currency: "DKK" }, startDate: "2026-09", recurrence: { kind: "everyNMonths" as const, n: 1 }, anchoring: "calendar" as const, splitMode: "percent" as const };
+  data.recurring = [
+    { ...base, id: "filed-bill", name: "Filed", folderId: "filed", order: 0, splits: [{ postId: data.posts[0]!.id, value: 100, absorbsRemainder: true }] },
+    { ...base, id: "shared-bill", name: "Shared", folderId: null, order: 4, splits: [{ postId: data.posts[0]!.id, value: 50, absorbsRemainder: true }, { postId: data.posts[1]!.id, value: 50, absorbsRemainder: false }] },
+  ];
+  const migrated = migrate(data);
+  expect(migrated.recurring.map(bill => [bill.parentPostId, bill.folderId, bill.order])).toEqual([
+    [undefined, "filed", 0], [undefined, null, 4],
+  ]);
+});
+
+test("v9 migration appends old flat bills after already nested bills", () => {
+  const data = createSeedDataset("2026-09");
+  data.settings.schemaVersion = 9;
+  const postId = data.posts[0]!.id;
+  const base = { archived: false, folderId: null, amount: { amount: 35, currency: "DKK" }, startDate: "2026-09", recurrence: { kind: "everyNMonths" as const, n: 1 }, anchoring: "calendar" as const, splitMode: "percent" as const, splits: [{ postId, value: 100, absorbsRemainder: true }] };
+  data.recurring = [
+    { ...base, id: "new", name: "Already nested", order: 0, parentPostId: postId },
+    { ...base, id: "old", name: "Old flat", order: 3 },
+  ];
+  const migrated = migrate(data);
+  expect(migrated.recurring.map(bill => [bill.parentPostId, bill.order])).toEqual([
+    [postId, 0], [postId, 1],
+  ]);
+  expect(() => parseDatasetJson(JSON.stringify(data))).not.toThrow();
+});
diff --git a/src/store/migrations.ts b/src/store/migrations.ts
index 91c75f1..939e52f 100644
--- a/src/store/migrations.ts
+++ b/src/store/migrations.ts
@@ -216,6 +216,30 @@ const MIGRATIONS: Array<(data: any) => any> = [
   },
   // 8 -> 9: placement fields are optional, so existing rows stay where they are.
   (data: any) => ({ ...data, settings: { ...data.settings, schemaVersion: 9 } }),
+
+  // 9 -> 10: existing unfiled bills with one destination gain the same default
+  // nesting as newly created bills. Splits and occurrence identity are untouched.
+  (data: any) => {
+    const postIds = new Set((data.posts ?? []).map((post: any) => post.id));
+    const nextOrder = new Map<string, number>();
+    const recurring = [...(data.recurring ?? [])].sort((a: any, b: any) => a.order - b.order);
+    for (const bill of recurring) {
+      if (bill.parentPostId) nextOrder.set(bill.parentPostId, Math.max(nextOrder.get(bill.parentPostId) ?? 0, bill.order + 1));
+    }
+    const nested = new Map(recurring.map((bill: any) => {
+      const postId = bill.folderId === null && !bill.parentPostId && bill.splits?.length === 1
+        ? bill.splits[0].postId : undefined;
+      if (!postId || !postIds.has(postId)) return [bill, bill];
+      const order = nextOrder.get(postId) ?? 0;
+      nextOrder.set(postId, order + 1);
+      return [bill, { ...bill, parentPostId: postId, order }];
+    }));
+    return {
+      ...data,
+      settings: { ...data.settings, schemaVersion: 10 },
+      recurring: (data.recurring ?? []).map((bill: any) => nested.get(bill)),
+    };
+  },
 ];
 
 export function migrate(raw: unknown): Dataset {
diff --git a/src/ui/buildVersion.test.ts b/src/ui/buildVersion.test.ts
index b3ade9a..b978504 100644
--- a/src/ui/buildVersion.test.ts
+++ b/src/ui/buildVersion.test.ts
@@ -1,5 +1,15 @@
 import { test, expect } from "bun:test";
-import { describeBuild, readBuildVersionEnv } from "./buildVersion.ts";
+import { commitHref, describeBuild, readBuildVersionEnv } from "./buildVersion.ts";
+
+test("a full commit SHA links to the exact source revision", () => {
+  expect(commitHref("61e7093c36f9a0111a5f1c8776aba4894c88ebc4"))
+    .toBe("https://github.com/StereotypicalCat/budget2.0/commit/61e7093c36f9a0111a5f1c8776aba4894c88ebc4");
+  expect(commitHref("61e7093c36f9a0111a5f1c8776aba4894c88ebc4", "https://gitea.lucaswinther.info/lucasw89/budget2.0"))
+    .toBe("https://gitea.lucaswinther.info/lucasw89/budget2.0/commit/61e7093c36f9a0111a5f1c8776aba4894c88ebc4");
+  expect(commitHref("1788307200000")).toBeUndefined();
+  expect(commitHref("v1.4.0")).toBeUndefined();
+  expect(commitHref("61e7093c36f9a0111a5f1c8776aba4894c88ebc4-dirty")).toBeUndefined();
+});
 
 test("an absent stamp reads as development, not as a blank or a lie", () => {
   expect(describeBuild(undefined)).toBe("development");
@@ -20,6 +30,11 @@ test("a commit sha is shortened the way git shortens one", () => {
   expect(describeBuild("61e7093")).toBe("61e7093");
 });
 
+test("a local build with uncommitted changes is marked as such", () => {
+  expect(describeBuild("61e7093c36f9a0111a5f1c8776aba4894c88ebc4-dirty"))
+    .toBe("61e7093-dirty");
+});
+
 test("a version someone chose is printed as given", () => {
   // A sha, a tag and a release number must survive untouched: guessing at a
   // format the builder did not ask for is worse than showing their string.
diff --git a/src/ui/buildVersion.ts b/src/ui/buildVersion.ts
index 6971a3c..594d391 100644
--- a/src/ui/buildVersion.ts
+++ b/src/ui/buildVersion.ts
@@ -20,7 +20,7 @@ export function readBuildVersionEnv(): string | undefined {
   }
 }
 
-/** A millisecond epoch, which is what build.ts falls back to. */
+/** A millisecond epoch, used when no Git revision was supplied or available. */
 const EPOCH_MS = /^\d{10,}$/;
 
 /**
@@ -34,7 +34,7 @@ const LONG_SHA = /^(?=.*[a-f])[0-9a-f]{12,}$/i;
  * `BUILD_VERSION` may be anything the person building chose — a git sha, a tag,
  * a release number — so an unrecognised value is printed as given rather than
  * reformatted into something it is not. The one shape worth translating is
- * build.ts's own default, a `Date.now()` timestamp, because "1756809600000"
+ * build.ts's source-archive fallback, a `Date.now()` timestamp, because "1756809600000"
  * tells a reader nothing and "2026-09-02" tells them what they wanted to know.
  *
  * ISO rather than a locale format: this string appears in bug reports against
@@ -46,8 +46,29 @@ export function describeBuild(raw: string | undefined): string {
     const at = new Date(Number(raw));
     if (!Number.isNaN(at.getTime())) return at.toISOString().slice(0, 10);
   }
+  if (LONG_SHA.test(raw.replace(/-dirty$/, "")) && raw.endsWith("-dirty")) return `${raw.slice(0, 7)}-dirty`;
   if (LONG_SHA.test(raw)) return raw.slice(0, 7);
   return raw;
 }
 
 export const BUILD_VERSION = describeBuild(readBuildVersionEnv());
+
+/** The build injects its source origin; dev mode uses the public mirror. */
+export function readSourceRepositoryEnv(): string | undefined {
+  try {
+    return process.env.BUN_PUBLIC_SOURCE_REPOSITORY;
+  } catch {
+    return undefined;
+  }
+}
+
+export const SOURCE_REPOSITORY = readSourceRepositoryEnv() ?? "https://github.com/StereotypicalCat/budget2.0";
+
+/** A build with an exact revision can link directly to its source. */
+export function commitHref(raw: string | undefined, repository = SOURCE_REPOSITORY): string | undefined {
+  return raw && /^(?:[0-9a-f]{40}|[0-9a-f]{64})$/i.test(raw)
+    ? `${repository}/commit/${raw}`
+    : undefined;
+}
+
+export const COMMIT_HREF = commitHref(readBuildVersionEnv());
diff --git a/src/ui/components/BudgetTree.test.tsx b/src/ui/components/BudgetTree.test.tsx
index c98681d..8700314 100644
--- a/src/ui/components/BudgetTree.test.tsx
+++ b/src/ui/components/BudgetTree.test.tsx
@@ -6,7 +6,7 @@ import { act } from "react";
 import { createRoot } from "react-dom/client";
 import { MemoryRouter } from "react-router";
 import { createSeedDataset } from "../../domain/seed.ts";
-import { addBudgetFolder, addRecurringCost, confirmOccurrence } from "../../store/actions.ts";
+import { addBudgetFolder, addRecurringCost, confirmOccurrence, placeRecurringUnderPost } from "../../store/actions.ts";
 import { monthView } from "../../domain/views.ts";
 import { store } from "../../store/index.ts";
 import { PostTableLegend } from "./PostTable.tsx";
@@ -57,3 +57,27 @@ test("legend scopes base currency to post figures and identifies bill currencies
   expect(legend.textContent).toContain("Projected subtracts bills not yet confirmed.");
   expect(legend.textContent).not.toContain("All figures");
 }));
+
+test("bills beneath a post are hidden until its post is expanded", () => {
+  const data = createSeedDataset("2026-09");
+  const games = data.posts[0]!;
+  const bill = addRecurringCost(data, { name: "Star Rail Pass", folderId: null, archived: false, amount: { amount: 35, currency: "DKK" }, startDate: "2026-09", recurrence: { kind: "everyNMonths", n: 1 }, anchoring: "calendar", splitMode: "percent", splits: [{ postId: games.id, value: 100, absorbsRemainder: true }] });
+  placeRecurringUnderPost(data, bill.id, games.id);
+  const original = { get: store.get, subscribe: store.subscribe };
+  store.get = () => data;
+  store.subscribe = () => () => {};
+  const container = document.createElement("div"); document.body.append(container);
+  const root = createRoot(container);
+  try {
+    act(() => root.render(<MemoryRouter><BudgetTree monthId="2026-09" rows={monthView(data, "2026-09").rows} /></MemoryRouter>));
+    const controls = Array.from(container.querySelectorAll(`button[aria-label="Bills under ${games.name}"]`)) as HTMLButtonElement[];
+    expect(controls).toHaveLength(2);
+    expect(controls[0]!.getAttribute("aria-expanded")).toBe("false");
+    expect(container.querySelector(`[data-budget-item="${bill.id}"]`)).toBeNull();
+    act(() => controls[0]!.click());
+    expect(controls[0]!.getAttribute("aria-expanded")).toBe("true");
+    expect(container.querySelectorAll(`[data-budget-item="${bill.id}"]`)).toHaveLength(2);
+  } finally {
+    act(() => root.unmount()); container.remove(); Object.assign(store, original);
+  }
+});
diff --git a/src/ui/components/BudgetTree.tsx b/src/ui/components/BudgetTree.tsx
index 2ce1241..6898cf0 100644
--- a/src/ui/components/BudgetTree.tsx
+++ b/src/ui/components/BudgetTree.tsx
@@ -37,7 +37,10 @@ export function BudgetTree({ monthId, rows, onChangeRule }: { monthId: MonthId;
   const render = (nodes: BudgetNode[], mobile: boolean, depth = 0): ReactNode[] => nodes.flatMap(node => {
     const indent = Math.min(depth, 4) * 16;
     const id = node.kind === "folder" ? node.folder.id : node.kind === "post" ? node.row.post.id : node.kind === "purchase" ? node.purchase.id : node.cost.id;
-    if (node.kind === "post") return [mobile ? <MobilePostRow key={id} row={node.row} indent={indent} monthId={monthId} onChangeRule={onChangeRule} /> : <DesktopPostBody key={id} row={node.row} indent={indent} monthId={monthId} onChangeRule={onChangeRule} />, ...render(node.children, mobile, depth + 1)];
+    if (node.kind === "post") {
+      const rowProps = { row: node.row, indent, monthId, onChangeRule, ...(node.children.length ? { childrenExpanded: expanded.has(id), onToggleChildren: () => toggle(id) } : {}) };
+      return [mobile ? <MobilePostRow key={id} {...rowProps} /> : <DesktopPostBody key={id} {...rowProps} />, ...(expanded.has(id) ? render(node.children, mobile, depth + 1) : [])];
+    }
     const name = node.kind === "folder" ? node.folder.name : node.kind === "purchase" ? node.purchase.description : node.cost.name;
     const content = node.kind === "folder" ? folderHeading(node) : node.kind === "purchase" ? purchaseContent(node) : billContent(node);
     const style = { paddingInlineStart: `${indent}px` };
diff --git a/src/ui/components/PostTable.tsx b/src/ui/components/PostTable.tsx
index 1b6114c..8fc96a5 100644
--- a/src/ui/components/PostTable.tsx
+++ b/src/ui/components/PostTable.tsx
@@ -1,4 +1,5 @@
 import { Link } from "react-router";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { useMoneyFormat, type MoneyFormat } from "../hooks/useMoneyFormat.ts";
 import { ruleAt } from "../../domain/allocation.ts";
@@ -211,14 +212,20 @@ export function PostTable({ monthId, rows, onChangeRule }: Props) {
   );
 }
 
-interface PostRowProps { row: MonthPostRow; monthId: MonthId; onChangeRule?: (postId: string) => void; indent?: number; }
+interface PostRowProps { row: MonthPostRow; monthId: MonthId; onChangeRule?: (postId: string) => void; indent?: number; childrenExpanded?: boolean; onToggleChildren?: () => void; }
 
-export function DesktopPostBody({ row, monthId, onChangeRule, indent = 0 }: PostRowProps) {
+function PostChildrenToggle({ postName, expanded, onToggle }: { postName: string; expanded: boolean; onToggle: () => void }) {
+  const Icon = expanded ? ChevronDown : ChevronRight;
+  return <button type="button" aria-label={`Bills under ${postName}`} aria-expanded={expanded} onClick={onToggle} className="mr-1 inline-flex size-6 align-middle items-center justify-center rounded-sm text-budget-ink-muted hover:text-budget-accent focus-visible:outline-2 focus-visible:outline-ring"><Icon size={16} aria-hidden="true" /></button>;
+}
+
+export function DesktopPostBody({ row, monthId, onChangeRule, indent = 0, childrenExpanded, onToggleChildren }: PostRowProps) {
   const cells = postRowCells(row, useMoneyFormat());
   return (
               <tbody data-budget-item={row.post.id} data-budget-name={row.post.name} className="group">
                 <tr className="transition-colors group-hover:bg-accent/60">
                   <td className="pb-0 pt-3" style={{ paddingInlineStart: indent }}>
+                    {onToggleChildren && <PostChildrenToggle postName={row.post.name} expanded={!!childrenExpanded} onToggle={onToggleChildren} />}
                     <PostName row={row} monthId={monthId} />
                     {onChangeRule && (
                       <ChangeRuleButton
@@ -257,12 +264,13 @@ export function DesktopPostBody({ row, monthId, onChangeRule, indent = 0 }: Post
   );
 }
 
-export function MobilePostRow({ row, monthId, onChangeRule, indent = 0 }: PostRowProps) {
+export function MobilePostRow({ row, monthId, onChangeRule, indent = 0, childrenExpanded, onToggleChildren }: PostRowProps) {
   const cells = postRowCells(row, useMoneyFormat());
   return (
             <li data-budget-item={row.post.id} data-budget-name={row.post.name} className="space-y-1.5" style={{ paddingInlineStart: indent }}>
               <div className="flex items-baseline justify-between gap-3 text-sm">
                 <span className="min-w-0">
+                  {onToggleChildren && <PostChildrenToggle postName={row.post.name} expanded={!!childrenExpanded} onToggle={onToggleChildren} />}
                   <PostName row={row} monthId={monthId} />
                 </span>
                 <span
diff --git a/src/ui/routes/settings/ColophonSection.tsx b/src/ui/routes/settings/ColophonSection.tsx
index 1fa4bde..d144149 100644
--- a/src/ui/routes/settings/ColophonSection.tsx
+++ b/src/ui/routes/settings/ColophonSection.tsx
@@ -1,9 +1,9 @@
 import type { ReactNode } from "react";
 import { useDataset } from "../../hooks/useDataset.ts";
-import { BUILD_VERSION } from "../../buildVersion.ts";
+import { BUILD_VERSION, COMMIT_HREF, SOURCE_REPOSITORY } from "../../buildVersion.ts";
 import { Section } from "../../components/Section.tsx";
 
-const REPO = "github.com/StereotypicalCat/budget2.0";
+const REPO = SOURCE_REPOSITORY.replace(/^https?:\/\//, "");
 
 /**
  * Production notes, in the old sense of the word: where this came from, what it
@@ -29,7 +29,7 @@ export function ColophonSection() {
               whole position is that the data never leaves the browser should
               not hand this page's URL to another origin on the way out. */}
           <a
-            href={`https://${REPO}`}
+            href={SOURCE_REPOSITORY}
             target="_blank"
             rel="noopener noreferrer"
             className="text-budget-accent underline underline-offset-2 hover:no-underline"
@@ -51,7 +51,7 @@ export function ColophonSection() {
           <span className="font-money">{dataset.settings.schemaVersion}</span>
         </Entry>
         <Entry label="Build">
-          <span className="font-money">{BUILD_VERSION}</span>
+          {COMMIT_HREF ? <a href={COMMIT_HREF} target="_blank" rel="noopener noreferrer" className="font-money text-budget-accent underline underline-offset-2 hover:no-underline">{BUILD_VERSION}</a> : <span className="font-money">{BUILD_VERSION}</span>}
         </Entry>
       </dl>
     </Section>

From dfbe584874747a9a9ed5384282b61d3f7468106f Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 30 Sep 2026 16:35:44 +0200
Subject: [PATCH 27/27] fix: keep unassigned purchases visible in budget

---
 docs/ARCHITECTURE.md                  |  5 ++++-
 src/domain/budgetTree.test.ts         | 13 +++++++++++++
 src/domain/budgetTree.ts              |  9 +++++++--
 src/store/actions.test.ts             | 12 ++++++++++++
 src/store/actions.ts                  | 10 ++++++++++
 src/ui/components/BudgetTree.test.tsx | 23 ++++++++++++++++++++++-
 src/ui/components/BudgetTree.tsx      | 11 +++++++++--
 src/ui/components/PurchaseDialog.tsx  |  5 +++--
 8 files changed, 80 insertions(+), 8 deletions(-)

diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index bb792e3..6021800 100755
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -160,7 +160,10 @@ test — and charges a fixed "2000 to Video Games" in full on every slice.
 A purchase with no post has an empty `splits` array. Its dated amount counts in
 monthly, yearly and summary Spent totals, but charges no envelope and changes no
 rollover balance. Recurring bills still require a destination post. JSON import
-and ODS export preserve these unassigned purchases.
+and ODS export preserve these unassigned purchases. In the month Budget tree,
+they appear in the permanent, derived Unassigned section for each month their
+purchase or finance plan touches. Creating a post from one assigns its full
+amount to the new post without changing the purchase total or schedule.
 
 A post with no applicable allocation rule has no overspend status, even if its
 balance is negative. The balance remains visible and carries normally. An
diff --git a/src/domain/budgetTree.test.ts b/src/domain/budgetTree.test.ts
index 691aaf8..6dea63a 100644
--- a/src/domain/budgetTree.test.ts
+++ b/src/domain/budgetTree.test.ts
@@ -135,6 +135,19 @@ test("a placed purchase is its own row while its post still carries the charge",
   expect(tree(data, "2026-10").roots[0]).toMatchObject({ kind: "folder", children: [{ kind: "post" }] });
 });
 
+test("unassigned purchases appear in one Budget group for their slice month", () => {
+  const data = dataset();
+  data.folders = [folder("housing", null)];
+  data.purchases = [
+    { id: "loose", date: "2026-09", description: "Loose", total: { amount: 25, currency: "DKK" }, splitMode: "percent", splits: [], schedule: null },
+    { id: "placed", date: "2026-09", description: "Placed", total: { amount: 40, currency: "DKK" }, splitMode: "percent", splits: [], schedule: null, placement: { folderId: "housing", order: 0 } },
+  ];
+  const september = tree(data);
+  expect(september.unassigned.map(node => node.kind === "purchase" ? node.purchase.id : "other")).toEqual(["loose", "placed"]);
+  expect(september.roots[0]).toMatchObject({ kind: "folder", children: [] });
+  expect(tree(data, "2026-10").unassigned).toEqual([]);
+});
+
 test("a bill nested under its post follows that post into another folder", () => {
   const data = dataset();
   data.folders = [folder("housing", null), folder("other", null, 1)];
diff --git a/src/domain/budgetTree.ts b/src/domain/budgetTree.ts
index f82258a..6b6c567 100644
--- a/src/domain/budgetTree.ts
+++ b/src/domain/budgetTree.ts
@@ -18,6 +18,7 @@ export type BudgetNode =
 export interface BudgetTreeView {
   roots: BudgetNode[];
   unfiled: BudgetNode[];
+  unassigned: BudgetNode[];
 }
 
 /** Pure month-specific placement and scheduled bill prices. */
@@ -63,10 +64,13 @@ export function budgetTree(
       postBills.set(cost.parentPostId, children);
     } else add(cost.folderId, cost.order, node);
   }
+  const unassigned: BudgetNode[] = [];
   for (const purchase of dataset.purchases) {
-    if (!purchase.placement) continue;
     const amount = sliceAmountForMonth(purchase, monthId);
-    if (amount) add(purchase.placement.folderId, purchase.placement.order, { kind: "purchase", purchase, amount });
+    if (!amount) continue;
+    const node: BudgetNode = { kind: "purchase", purchase, amount };
+    if (purchase.splits.length === 0) unassigned.push(node);
+    else if (purchase.placement) add(purchase.placement.folderId, purchase.placement.order, node);
   }
 
   const digits = dataset.settings.digits;
@@ -102,5 +106,6 @@ export function budgetTree(
   return {
     roots: rootItems.filter(node => node.kind === "folder"),
     unfiled: rootItems.filter(node => node.kind !== "folder"),
+    unassigned,
   };
 }
diff --git a/src/store/actions.test.ts b/src/store/actions.test.ts
index 26ee444..3ad42dc 100644
--- a/src/store/actions.test.ts
+++ b/src/store/actions.test.ts
@@ -16,6 +16,18 @@ const billInput = (postId: string, folderId: string | null = null) => ({
 });
 
 describe("budget folder placement", () => {
+  test("an unassigned purchase can create and charge its own post", () => {
+    const data = createSeedDataset("2026-09");
+    const folder = actions.addBudgetFolder(data, "Trips", null);
+    data.fxRates.push({ currency: "EUR", baseUnitsPerOne: 7.5, updatedAt: "2026-09-01", source: "manual" });
+    const purchase = actions.addPurchase(data, { date: "2026-09", description: "Train ticket", total: { amount: 50, currency: "EUR" }, splitMode: "percent", splits: [], schedule: null });
+    actions.placePurchase(data, purchase.id, folder.id);
+    const post = actions.createPostForPurchase(data, purchase.id);
+    expect(post).toMatchObject({ name: "Train ticket", currency: "EUR", folderId: folder.id });
+    expect(purchase.splits).toEqual([{ postId: post.id, value: 100, absorbsRemainder: true }]);
+    expect(monthView(data, "2026-09").looseCharges).toBe(0);
+    expect(() => actions.createPostForPurchase(data, purchase.id)).toThrow(/already assigned/i);
+  });
   test("editing a purchase can place it in a folder without changing its charge", () => {
     const data = createSeedDataset("2026-09");
     const folder = actions.addBudgetFolder(data, "Trips", null);
diff --git a/src/store/actions.ts b/src/store/actions.ts
index c01fea1..b3cdaa7 100755
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -292,6 +292,16 @@ export function addPost(draft: Dataset, name: string, currency: Currency, folder
   return post;
 }
 
+/** Give a loose purchase an envelope without changing its amount or schedule. */
+export function createPostForPurchase(draft: Dataset, purchaseId: PurchaseId): Post {
+  const purchase = requirePurchase(draft, purchaseId);
+  if (purchase.splits.length > 0) throw new Error("Purchase is already assigned to a post");
+  const post = addPost(draft, purchase.description.trim() || "Purchase", purchase.total.currency, purchase.placement?.folderId ?? null);
+  purchase.splits = [{ postId: post.id, value: 100, absorbsRemainder: true }];
+  purchase.splitMode = "percent";
+  return post;
+}
+
 export function updatePost(
   draft: Dataset,
   postId: PostId,
diff --git a/src/ui/components/BudgetTree.test.tsx b/src/ui/components/BudgetTree.test.tsx
index 8700314..14d4404 100644
--- a/src/ui/components/BudgetTree.test.tsx
+++ b/src/ui/components/BudgetTree.test.tsx
@@ -6,7 +6,7 @@ import { act } from "react";
 import { createRoot } from "react-dom/client";
 import { MemoryRouter } from "react-router";
 import { createSeedDataset } from "../../domain/seed.ts";
-import { addBudgetFolder, addRecurringCost, confirmOccurrence, placeRecurringUnderPost } from "../../store/actions.ts";
+import { addBudgetFolder, addPurchase, addRecurringCost, confirmOccurrence, placeRecurringUnderPost } from "../../store/actions.ts";
 import { monthView } from "../../domain/views.ts";
 import { store } from "../../store/index.ts";
 import { PostTableLegend } from "./PostTable.tsx";
@@ -81,3 +81,24 @@ test("bills beneath a post are hidden until its post is expanded", () => {
     act(() => root.unmount()); container.remove(); Object.assign(store, original);
   }
 });
+
+test("Unassigned is a permanent Budget section with a create-post action", () => {
+  const data = createSeedDataset("2026-09");
+  const purchase = addPurchase(data, { date: "2026-09", description: "Train ticket", total: { amount: 50, currency: "DKK" }, splitMode: "percent", splits: [], schedule: null });
+  const original = { get: store.get, subscribe: store.subscribe };
+  store.get = () => data;
+  store.subscribe = () => () => {};
+  const container = document.createElement("div"); document.body.append(container);
+  const root = createRoot(container);
+  try {
+    act(() => root.render(<MemoryRouter><BudgetTree monthId="2026-09" rows={monthView(data, "2026-09").rows} /></MemoryRouter>));
+    for (const scope of [container.querySelector("table")!, container.querySelector("ul")!]) {
+      expect(scope.textContent).toContain("Unassigned");
+      const row = scope.querySelector(`[data-budget-item="${purchase.id}"]`)!;
+      expect(row.textContent).toContain("Train ticket");
+      expect(row.querySelector("button[aria-label='Create post for Train ticket']")).not.toBeNull();
+    }
+  } finally {
+    act(() => root.unmount()); container.remove(); Object.assign(store, original);
+  }
+});
diff --git a/src/ui/components/BudgetTree.tsx b/src/ui/components/BudgetTree.tsx
index 6898cf0..fad7cb2 100644
--- a/src/ui/components/BudgetTree.tsx
+++ b/src/ui/components/BudgetTree.tsx
@@ -2,10 +2,12 @@ import { useState, type ReactNode } from "react";
 import { Link } from "react-router";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { budgetTree, type BudgetNode } from "../../domain/budgetTree.ts";
+import { createPostForPurchase } from "../../store/actions.ts";
 import type { MonthId, Recurrence } from "../../domain/types.ts";
 import type { MonthPostRow } from "../../domain/views.ts";
 import { useDataset } from "../hooks/useDataset.ts";
 import { useMoneyFormat } from "../hooks/useMoneyFormat.ts";
+import { useMutate } from "../hooks/useMutate.ts";
 import { DesktopPostBody, MobilePostRow } from "./PostTable.tsx";
 import { PurchaseDialog } from "./PurchaseDialog.tsx";
 
@@ -18,6 +20,7 @@ function cadence(rule: Recurrence) {
 export function BudgetTree({ monthId, rows, onChangeRule }: { monthId: MonthId; rows: MonthPostRow[]; onChangeRule?: (postId: string) => void }) {
   const dataset = useDataset();
   const fmt = useMoneyFormat();
+  const { mutate, error } = useMutate();
   const tree = budgetTree(dataset, monthId, rows);
   const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
   const toggle = (id: string) => setExpanded(previous => { const next = new Set(previous); if (next.has(id)) next.delete(id); else next.add(id); return next; });
@@ -33,7 +36,7 @@ export function BudgetTree({ monthId, rows, onChangeRule }: { monthId: MonthId;
     <div className="flex flex-wrap items-baseline justify-between gap-2"><span className="font-medium">{node.cost.name} <span className="ml-2 font-money font-normal">{fmt.money(node.cost.amount.amount, node.cost.amount.currency)}</span></span><Link className="text-xs underline underline-offset-2 hover:text-budget-accent" to={`/settings#bill-${node.cost.id}`}>Edit</Link></div>
     <p className="text-xs text-budget-ink-muted">{cadence(node.cost.recurrence)} · Assigned to {node.cost.splits.map(split => dataset.posts.find(post => post.id === split.postId)?.name).join(", ")} · {node.nextOccurrence ? `Next ${node.nextOccurrence.date}` : "Ended"}</p>
   </div>;
-  const purchaseContent = (node: Extract<BudgetNode, { kind: "purchase" }>) => <div className="flex flex-wrap items-center justify-between gap-2 py-3 text-sm"><span>{node.purchase.description} <span className="ml-2 font-money">{fmt.money(node.amount.amount, node.amount.currency)}</span></span><PurchaseDialog monthId={monthId} purchase={node.purchase} trigger={<button type="button" className="text-xs underline underline-offset-2 hover:text-budget-accent">Edit</button>} /></div>;
+  const purchaseContent = (node: Extract<BudgetNode, { kind: "purchase" }>) => <div className="flex flex-wrap items-center justify-between gap-2 py-3 text-sm"><span>{node.purchase.description} <span className="ml-2 font-money">{fmt.money(node.amount.amount, node.amount.currency)}</span></span><span className="flex items-center gap-3">{node.purchase.splits.length === 0 && <button type="button" aria-label={`Create post for ${node.purchase.description}`} className="text-xs underline underline-offset-2 hover:text-budget-accent" onClick={() => void mutate(draft => createPostForPurchase(draft, node.purchase.id))}>Create post</button>}<PurchaseDialog monthId={monthId} purchase={node.purchase} trigger={<button type="button" className="text-xs underline underline-offset-2 hover:text-budget-accent">Edit</button>} /></span></div>;
   const render = (nodes: BudgetNode[], mobile: boolean, depth = 0): ReactNode[] => nodes.flatMap(node => {
     const indent = Math.min(depth, 4) * 16;
     const id = node.kind === "folder" ? node.folder.id : node.kind === "post" ? node.row.post.id : node.kind === "purchase" ? node.purchase.id : node.cost.id;
@@ -48,10 +51,14 @@ export function BudgetTree({ monthId, rows, onChangeRule }: { monthId: MonthId;
     return [item, ...(node.kind === "folder" && expanded.has(id) ? render(node.children, mobile, depth + 1) : [])];
   });
   return <>
+    {error && <p role="alert" className="mb-3 text-sm text-destructive">Could not save: {error}</p>}
     <div className="hidden overflow-x-auto sm:block"><table className="w-full text-sm"><thead className="text-left"><tr className="border-b border-budget-rule text-[0.6875rem] uppercase tracking-wider text-budget-ink-muted">{["Budget item", "Carried in", "Allocated", "Spent", "Remaining", "Projected"].map((label, index) => <th key={label} className={`py-2 font-medium ${index ? "pl-6 text-right" : ""}`}>{label}</th>)}</tr></thead>
       {render(tree.roots, false)}
       {tree.unfiled.length > 0 && <tbody><tr><th colSpan={6} className="border-b border-budget-rule pb-2 pt-5 text-left font-medium">Unfiled</th></tr></tbody>}{render(tree.unfiled, false)}
+      <tbody><tr><th colSpan={6} className="border-b border-budget-rule pb-2 pt-5 text-left font-medium">Unassigned</th></tr></tbody>
+      {render(tree.unassigned, false, 1)}
+      {tree.unassigned.length === 0 && <tbody><tr><td colSpan={6} className="py-3 text-sm text-budget-ink-muted">No unassigned purchases this month.</td></tr></tbody>}
     </table></div>
-    <ul className="space-y-3 sm:hidden">{render(tree.roots, true)}{tree.unfiled.length > 0 && <li className="border-b border-budget-rule pb-2 pt-4 font-medium">Unfiled</li>}{render(tree.unfiled, true)}</ul>
+    <ul className="space-y-3 sm:hidden">{render(tree.roots, true)}{tree.unfiled.length > 0 && <li className="border-b border-budget-rule pb-2 pt-4 font-medium">Unfiled</li>}{render(tree.unfiled, true)}<li className="border-b border-budget-rule pb-2 pt-4 font-medium">Unassigned</li>{render(tree.unassigned, true, 1)}{tree.unassigned.length === 0 && <li className="py-2 text-sm text-budget-ink-muted">No unassigned purchases this month.</li>}</ul>
   </>;
 }
diff --git a/src/ui/components/PurchaseDialog.tsx b/src/ui/components/PurchaseDialog.tsx
index b3e31c5..dc040bf 100644
--- a/src/ui/components/PurchaseDialog.tsx
+++ b/src/ui/components/PurchaseDialog.tsx
@@ -98,7 +98,7 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
           ...toPurchase(draft),
           ...(detachBill ? { source: undefined } : {}),
         });
-        const destination = placement === "__ledger" ? undefined : placement === "__unfiled" ? null : placement;
+        const destination = draft.splits.length === 0 || placement === "__ledger" ? undefined : placement === "__unfiled" ? null : placement;
         if (destination !== purchase.placement?.folderId || (destination === undefined) !== (purchase.placement === undefined)) placePurchase(data, purchase.id, destination);
       }
       else addPurchase(data, toPurchase(draft));
@@ -315,7 +315,8 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
 
           <SplitEditor draft={draft} posts={purchase ? editablePosts : activePosts} onChange={setDraft} />
 
-          {purchase && <div className="space-y-1">
+          {purchase && draft.splits.length === 0 && <p className="text-xs text-budget-ink-muted">This purchase appears under Unassigned in Budget.</p>}
+          {purchase && draft.splits.length > 0 && <div className="space-y-1">
             <Label htmlFor="purchase-placement">Budget listing</Label>
             <NativeSelect id="purchase-placement" value={placement} onChange={event => setPlacement(event.target.value)}>
               <option value="__ledger">Monthly purchases only</option>