Build a personal finance dashboard as a static web app in this directory: index.html, s…

claude-codeclaude-fable-5 · 77 steps · 13m 51s · 8 filessession a217294b-d60@patrick-toulme

Build a personal finance dashboard as a static web app in this directory: index.html, style.css, app.js, data.js, charts.js. Transactions table with add/edit/delete + localStorage, monthly budget bars, a canvas spending-over-time chart, category filters, CSV import/export, dark theme, keyboard shortcuts, and a self-test page (tests.html) that exercises the core logic. Run your tests with a headless check (node) and fix what fails.

same matchclaude-code · 77 steps codex · 49 steps opencode · 44 steps pi · 28 steps antigravity · 28 steps

compare in arena

step 22 / 77

index.htmlchange 1/1

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ledger — Personal Finance</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="app">
    <header class="app-header">
      <div class="brand">
        <span class="brand-mark" aria-hidden="true"></span>
        <h1>Ledger</h1>
      </div>
      <div class="header-actions">
        <button id="btn-import" class="btn-ghost" title="Import CSV (i)">Import CSV</button>
        <button id="btn-export" class="btn-ghost" title="Export CSV (e)">Export CSV</button>
        <button id="btn-new" class="btn-primary" title="New transaction (n)">+ New transaction</button>
        <button id="btn-help" class="btn-ghost btn-icon" title="Keyboard shortcuts (?)" aria-label="Keyboard shortcuts">?</button>
      </div>
    </header>
 
    <section class="stat-row" aria-label="This month at a glance">
      <div class="stat-tile stat-hero">
        <span class="stat-label">Spent in <span id="stat-month-label">this month</span></span>
        <span class="stat-value" id="stat-spent">$0.00</span>
      </div>
      <div class="stat-tile">
        <span class="stat-label">Income</span>
        <span class="stat-value stat-value-sm" id="stat-income">$0.00</span>
      </div>
      <div class="stat-tile">
        <span class="stat-label">Net</span>
        <span class="stat-value stat-value-sm" id="stat-net">$0.00</span>
      </div>
    </section>
 
    <section class="grid-2">
      <div class="card">
        <div class="card-head">
          <h2>Spending over time</h2>
          <span class="card-sub">Monthly spend, last 12 months</span>
        </div>
        <div class="chart-wrap">
          <canvas id="spending-chart" role="img" aria-label="Line chart of monthly spending over the last 12 months"></canvas>
          <div id="chart-tooltip" class="chart-tooltip" hidden></div>
        </div>
      </div>
 
      <div class="card">
        <div class="card-head">
          <h2>Budgets</h2>
          <div class="month-nav">
            <button id="budget-prev" class="btn-ghost btn-icon" title="Previous month ([)" aria-label="Previous month">&#8249;</button>
            <span id="budget-month-label" class="month-nav-label">Month</span>
            <button id="budget-next" class="btn-ghost btn-icon" title="Next month (])" aria-label="Next month">&#8250;</button>
          </div>
        </div>
        <div id="budget-list" class="budget-list"></div>
        <p class="card-foot">Click a budget to change its monthly limit.</p>
      </div>
    </section>
 
    <section class="card">
      <div class="card-head">
        <h2>Transactions</h2>
        <span id="tx-count" class="card-sub">0 transactions</span>
      </div>
      <div class="filter-row">
        <input type="search" id="filter-search" placeholder="Search descriptions… ( / )" aria-label="Search transactions">
        <select id="filter-category" aria-label="Filter by category"></select>
        <select id="filter-month" aria-label="Filter by month"></select>
      </div>
      <div class="table-wrap">
        <table class="tx-table">
          <thead>
            <tr>
              <th scope="col" class="col-date">Date</th>
              <th scope="col">Description</th>
              <th scope="col">Category</th>
              <th scope="col" class="col-amount">Amount</th>
              <th scope="col" class="col-actions"><span class="visually-hidden">Actions</span></th>
            </tr>
          </thead>
          <tbody id="tx-body"></tbody>
        </table>
      </div>
    </section>
 
    <footer class="app-footer">
      <span><kbd>n</kbd> new · <kbd>/</kbd> search · <kbd>e</kbd> export · <kbd>i</kbd> import · <kbd>[</kbd><kbd>]</kbd> budget month · <kbd>?</kbd> all shortcuts</span>
      <a href="tests.html">Self-tests</a>
    </footer>
  </div>
 
  <!-- transaction form -->
  <div id="form-panel" class="overlay" hidden>
    <form id="tx-form" class="panel-card" autocomplete="off">
      <h2 id="form-title">New transaction</h2>
      <p id="form-error" class="form-error" hidden></p>
      <label>
        <span>Date</span>
        <input type="date" id="f-date" required>
      </label>
      <label>
        <span>Description</span>
        <input type="text" id="f-desc" placeholder="e.g. Fresh Mart" required>
      </label>
      <label>
        <span>Category</span>
        <select id="f-category"></select>
      </label>
      <label>
        <span>Amount</span>
        <input type="number" id="f-amount" min="0.01" step="0.01" placeholder="0.00" required>
        <small>Enter a positive amount — the “Income” category counts as money in; everything else counts as spending.</small>
      </label>
      <div class="panel-actions">
        <button type="button" id="btn-cancel" class="btn-ghost">Cancel</button>
        <button type="submit" class="btn-primary">Save</button>
      </div>
    </form>
  </div>
 
  <!-- keyboard help -->
  <div id="help-overlay" class="overlay" hidden>
    <div class="panel-card">
      <h2>Keyboard shortcuts</h2>
      <dl class="shortcut-list">
        <div><dt><kbd>n</kbd></dt><dd>New transaction</dd></div>
        <div><dt><kbd>/</kbd></dt><dd>Focus search</dd></div>
        <div><dt><kbd>e</kbd></dt><dd>Export CSV</dd></div>
        <div><dt><kbd>i</kbd></dt><dd>Import CSV</dd></div>
        <div><dt><kbd>[</kbd> / <kbd>]</kbd></dt><dd>Previous / next budget month</dd></div>
        <div><dt><kbd>Esc</kbd></dt><dd>Close dialog / leave search</dd></div>
        <div><dt><kbd>?</kbd></dt><dd>Toggle this help</dd></div>
      </dl>
      <div class="panel-actions">
        <button id="btn-close-help" class="btn-primary">Close</button>
      </div>
    </div>
  </div>
 
  <div id="toast" class="toast" role="status" aria-live="polite"></div>
  <input type="file" id="file-input" accept=".csv,text/csv" hidden>
 
  <script src="data.js"></script>
  <script src="charts.js"></script>
  <script src="app.js"></script>
</body>
</html>
 

153 lineshtml

Writes …/index.html

Files at this step

drag the rail to scrub

Discussion

1 comment on this trajectory. Recorded by @patrick-toulme.

@patrick-toulme7/28/2026, 5:09:30 PM

Dogfood iteration 2 — first true 5-way head-to-head, uploaded after fixing the capture-scaffolding leak, the 4-session cap, and the live agent badges. All five harnesses, same prompt, exact captures. Safe to delete.

#claude #claude-code #claude-fable-5 #css #graphics #html #javascript #medium #skills #subagents #testing

i2-r1-claude

← all sessions