fix(reports): stop the Spending tab crowning its own data-quality gaps

[KenTaniguchi-R]

The information design third of #147, built to your Spending tab mock. Completes the issue.

Stacked on #153 → #152 → #151 → #150.

The summary bar celebrated the wrong things

Total Spent · Categories · Top: X. "Categories: 18" is a number no decision turns on, and topCategory = data[0] took the largest row blindly — so whenever Uncategorized was largest, which is the usual case, the page put a crown on the spending it had failed to identify.

Three tiles replace it, per the mock:

Total spent · Jun 2 – Sep 2	the figure, split into ● Categorized / ● Uncategorized
Compared with	Mar 2 – Jun 2 · the preceding period, same length
Share of income	73.8% of $23,100.00 received

The split states the unaccounted-for share instead of decorating it.

Uncategorized was the loudest colour on the page

It drew CHART_COLORS[0], the most saturated blue. It takes --chart-neutral now — the treatment the synthetic "Other" slice already had — in the chart and in the table's category tile. Uncategorized is not a category, it's the absence of one, and shouldn't look like the hero.

Bar is the default view. Nine categories spanning three orders of magnitude is a size comparison; bars read it directly.

A blank Change cell meant two different things

prevTotal defaulted to 0 for a category with no baseline row, and ComparisonBadge rendered nothing for zero — so "this category is new" and "this category didn't move" were the same empty cell.

prevTotal is number | null now (null when there's no baseline row, and null throughout when no comparison period was requested), and the badge renders New. The MCP tool reports null rather than 0 for the same reason: a consumer shouldn't be able to compute a change against a period the category wasn't in.

The resolved range appeared nowhere

The chip said "Last 3 months" and the actual dates were on no part of the page. It prints them: Date: Last 3 months Jun 2 – Sep 2.

Also added a % of total column, so a row's share is readable without dividing by the headline.

Tests

• src/lib/comparison-state.test.ts — 7 tests: a null baseline is new, a zero baseline is new, up / down / flat, the half-percent boundary, and a category that spent nothing against a real baseline (−100%, not "new").
• tests/integration/report-drill-down.test.ts — 2 added: a category absent from the baseline reports null while one present reports its figure; with no comparison period nothing claims a previous figure.

Full suite: 1095 passed, 1 failed — the pre-existing investment-queries date rot.

Verification

Inserted a temporary uncategorized charge and a charge in a category with no baseline, then read the live page:

• Uncategorized — $3,200.00 · 18.8% · New, bar fill var(--chart-neutral)
• Property Tax — $450.00 · 2.6% · New
• Headline — $17,055.33, split $13,855.33 categorized / $3,200.00 uncategorized, 73.8% of $23,100.00

Rows removed afterwards.

Not built

The mock also proposes a "Data issues in this range" panel (uncategorized count with a link to categorize, categories that net positive and so vanish from spending, transfers miscategorized as spending). That's a new feature rather than information design and sits outside what #147 lists — worth its own issue if you want it.

🤖 Generated with Claude Code