The KPI strip duplicated the hero (Spend = hero total, Calls/Sessions =
hero subline). Drop the strip; fold the unique KPIs — One-shot, Cache
hit, Saved — into the hero as a secondary row (keeps the a11y label).
- Models table: vertical + horizontal grid lines, sticky header, and a
244px max-height with an internal scrollbar for long model lists.
- Tightened Overview padding/gaps (not fonts) and widened content cap to
1180px so the layout uses the window rather than floating narrow.
.body is a flex column; its children defaulted to flex-shrink:1, so they
compressed to fit (no scroll, 'window gets smaller'). Pin .body > * to
flex-shrink:0 so content keeps its natural height and overflow-y scrolls.
Also cap children to max-width 940px (centered) so wide windows don't
stretch the layout edge-to-edge.
- Hero now reflects the SELECTED period (current.cost + current.label +
calls/sessions), not just today — 30D no longer shows today's number.
- New Models table: per-model Input/Output tokens + Cost + Calls,
aggregated from history.daily[].topModels[] (real per-day data),
rebuilt with a robust bar → left-name → right-numbers layout (fixes
the offset/misaligned columns).
- Daily chart: weekly date ticks (MMM d), Avg/Peak/Yesterday chips, and
the hover tooltip now portals to document.body (position:fixed,
edge-clamped) so it is never clipped.
- Removed the meaningless decorative sparklines. Empty fuel-ring card no
longer reserves a tall empty box.
- typecheck clean, 87 vitest pass.
- Period seg now uses the 5 real CLI periods (Today/7D/30D/Month/6M);
6M maps to 'all' (matches the menubar).
- Provider control is a real dropdown listing only DETECTED providers
(accumulated from current.providers so it never shrinks) + All.
- New RangeCalendar: month grid with click-and-drag range selection
(+ two-click fallback, future-date disabling) behind a calendar button;
commits a custom {from,to} threaded to Overview/Spend/Models/Optimize
via new --from/--to CLI args (Plans/Settings stay period-only).
- typecheck clean, 87 vitest pass.
Flame logo + orange CodeBurn wordmark, an outline icon on every nav item
(active icon in accent), and an About + GitHub/Discord/X/YouTube social
footer replacing the price status line (per the approved design). Bundles
the flame asset. typecheck + 82 tests green.
macOS uses titleBarStyle hiddenInset so the traffic lights float over
the sidebar (Linear/Hermes-style), with the sidebar top inset to clear
them and the top chrome marked -webkit-app-region: drag (interactive
controls stay no-drag). Windows/Linux keep their native frame + controls.
Exposes process.platform through the bridge and tags <html data-platform>
so CSS adapts per OS. typecheck + 82 tests green.
- Daily-spend chart always shows a contiguous >=30 calendar-day trend
(backfilling gaps with zero bars) instead of collapsing to the period
selector (e.g. a single bar on Today).
- Real app shell: viewport-height window with an internally scrolling
.body (was clipped/unscrollable).
- Drop the wireframe's fake traffic-light dots; rely on the real OS
window controls. Window background follows the system theme.
- Update Overview test to assert the 30-day chart window.
Install an app menu without the CmdOrCtrl+R reload accelerator so ⌘R reaches the renderer for
in-place refresh (keeps Edit/Window roles + dev DevTools). Model labels are now family-level
("Opus"/"Sonnet"/"Haiku"/"GPT / Codex") and the Sankey shows the real model id instead of the
wireframe's sample version names. Optimize retains last-good yield across 30s revalidation (no
flicker to "—"). Removed hints for unimplemented ⌘K/⌘E/esc; fixed stale TopBar comment.
Implemented by Codex gpt-5.5 (high); committed by Fable (git blocked in Codex sandbox).
Settings rail (Devices active) with This device (getIdentity), Discovered nearby
(new getDevicesScan bridge → `codeburn devices scan --format json`), and Paired
(getDevices perDevice). Pairing/approve/pull/visibility/combine are M1 visual
affordances (mutations = M2); share status is process-local so not shown as
authoritative. Settings uses a title-only bar (no period/provider).
Implemented by Codex gpt-5.5 (high); committed by Fable (git blocked in Codex sandbox).
Review fix: periodEnd is exclusive (next reset), so the cycle end now renders periodEnd-1 day
with totalDays=diff (was Jul 15/31, now Jul 14/30); dates format in local time (not UTC);
test mock re-derived from the real emitter. Minor: en/em dashes, CLI provider order, non-
contradictory near-status copy, +near-status and plan-singular tests.
Implemented by Codex gpt-5.5 (high); committed by Fable (git blocked in Codex sandbox).
One track per plan from getPlans() (StatusJson/JsonPlanSummary): fill = percentUsed, red
`.over` past 100% with overage shown, amber `.pace.hot` when over/near pace vs mint `.ok`.
Cycle caption from the plan period; pay-as-you-go rows use `.mut`. Add plan… is M2 (visual).
Honest empty state when no plan is configured.
Implemented by Codex gpt-5.5 (high); committed by Fable (git blocked in Codex sandbox).
Critical review fix: the unpriced predicate misclassified every Codex row (all have credits)
and every local saved-only model, hiding real cost/savings. Now unpriced = costUSD===0 &&
savingsUSD===0. Fixtures made realistic (codex priced, local saved-only priced, genuine proxy
dimmed); proxy token cols show "—"; sub-1M tokens use the wireframe's "0.4M" style.
Implemented by Codex gpt-5.5 (high); committed by Fable (git blocked in Codex sandbox).
Table from getModels(): calls/input/output/cache-read/cost/saved with a model-family series
dot (reuses the ListRow helper). Unpriced/proxy rows show the dim "add alias" affordance +
dashes. By-model / By-task SegTabs re-fetch (byTask). Compare… is a visual affordance (M2).
Implemented by Codex gpt-5.5 (high); committed by Fable (git blocked in Codex sandbox).
Reverts/Abandoned totals + bodies show "—" while yield is loading/errored instead of a fake
$0.00; adds positive-path Abandoned and Fixes-tab tests (guards category filtering); reverted/
abandoned costs use plain .val (mint reserved for savings); simplified FixesRows copy.
Implemented by Codex gpt-5.5 (high); committed by Fable (git blocked in Codex sandbox).
Segment tabs carry their totals (Waste=optimize.savingsUSD, Reverts/Abandoned from
getYield summary, Fixes=findingCount). Waste findings from optimize.topFindings; reverts
and abandoned lists from yield.details by category. Evidence lines + copy-fix chips are
honestly omitted (not present in MenubarPayload.optimize) — a richer `optimize --format
json` emitter is flagged as a follow-up.
Implemented by Codex gpt-5.5 (high); committed by Fable (git blocked in Codex sandbox).
Addresses T3 review: full test coverage for all lenses + empty/error states, segment
color mapping, Sankey ribbon properties, and lib/period.ts across all windows; Sankey
ribbon widths now truly proportional (removed the 28px cap) and labels are pretty/basename
+ truncated so real ids don't clip; legend reflects present models; honest "top N" project count.
Implemented by Codex gpt-5.5 (high); committed by Fable (git blocked in Codex sandbox).
Period-sliced StackedBars (history.daily[].topModels within the selected window via
a new shared lib/period.ts), the By-project list, and a Sankey rendered dynamically
from getSpendFlow (per-model hue ribbons). Lens tabs; series palette shared with the
legend. Adds a neutral .s-other class for the rollup segment.
Implemented by Codex gpt-5.5 (high); committed by Fable (git blocked in Codex sandbox).
Payload now spans a 30-day backfill so slicing is provable. Adds: chart slices
to the week window (7 bars, 23 excluded); which bar is peak/runner-up (idx
10/20); corrected Waste/wk ($5.51 @30d, $23.60 @week); deterministic MTD/
Projected/rest-of-month and "-3% vs June pace" (May days prepended to prove the
prev-calendar-month comparator); matched model-join dot+sub-line and a
same-project/day/calls collision resolving by cost ($10 opus / $2 haiku).
history.daily is unbounded CLI backfill (up to 365d, zero-days absent), not
period-scoped. Slice it to the selected period's date window before the chart
(new periodWindowStart/sliceDailyToPeriod), and normalize Waste/wk by the
selected period length (periodLengthDays), not the backfill length.
Also: pace comparator = previous calendar month only (label/math now agree);
session sub-line unit turns->calls; model-join key gains cost to avoid
same-project/day/calls collisions (sessionModelKey); Panel rightLink "See all ›"
on the sessions panel; hide fabricated $0-window gridline labels; correct the
projection comment to the active-days approximation.
Real Overview driven by usePolled(getOverview): 4 stat cards (Today, Month
to date +% vs pace, Projected month est, Waste found /wk), the daily-spend
CapsuleChart, and the most-expensive-sessions list. Every rendered number is
derived from the single MenubarPayload (formulas documented in-code, mirroring
plan-usage projectMonthEnd); topSessions' missing model is recovered from
topProjects sessionDetails. App renders <Overview/> for the overview section,
replacing the T0 smoke view; first-run/error/loading states retained. TDD
spec added (test written first, red→green).
CapsuleChart renders one .c bar per history.daily entry with the peak day
gradient-glowed (.c.hi) and runner-up plain blue (.c.hi2); axis top is the
peak day's spend. ListRow is the reusable .li row (rank, model .mdot,
title+sub, value, chevron) plus seriesColorForModel() for the palette dots.
Review of T0 (Electron scaffold) approved with one Important finding + cheap
Minors. All fixes scoped to app/.
- usePolled: replace per-call cancel closure with a generation/epoch counter so
an orphaned in-flight fetch (from refresh() or an interval tick, discarded
cancel handle) can't resolve after a newer fetch and clobber fresh data. New
TDD race test (slow deps-A resolves after fast deps-B; keeps B).
- cli: nvm resolution now scans version dirs descending and takes the first
whose bin actually contains codeburn (was lexicographic max, unverified),
matching CodeburnCLI.swift. Export nodeManagerDirs + hermetic nvm test.
- index.html: tighten CSP connect-src ws: -> ws://localhost:5173.
- preload: import type { Envelope } from main instead of redeclaring it.
- main.test: table-driven channel->argv assertion over all 9 codeburn:* channels
plus a keys check and a non-spawning cliStatus case.
Ports the wireframe window shell into React with exact markup/classes:
- Shared components: Window, Sidebar (traffic lights, gradient mark, six
nav items with ⌘ keycaps + active `on` rail, status line), TopBar
(title, scope, period SegTabs Today/7D/30D/Month/6M/Custom, ProviderPop),
Panel, Stat, SegTabs, ProviderPop, Hint.
- usePolled(fetcher, deps): generic 30s poll + loading/error state,
errors normalized to CliError.
- App.tsx: local section state switches the content outlet; the Overview
placeholder round-trips getOverview('30days','all') and renders the raw
current.cost, with an honest first-run "locate CLI" state when the
codeburn binary isn't found (never a crash).
- Sidebar.test.tsx: six nav items, click routes onNavigate, active `on`.
- main.ts: 1200x820 BrowserWindow (contextIsolation:true,
nodeIntegration:false, sandbox:true), loads the Vite dev URL or the
built index.html, registers one ipcMain.handle per CodeburnBridge
channel, and starts a 30s tick that emits `codeburn:refresh`.
createBridgeHandlers() is a pure, injectable channel→argv map so the
spawn→IPC wiring is unit-testable without a GUI (main.test.ts).
- preload.ts: exposes window.codeburn (CodeburnBridge, exactly) and
window.codeburnEvents.onRefresh via contextBridge. Handlers return an
{ok,value|error} envelope so the structured CliError kind survives the
world boundary.
- types.ts: mirrors MenubarPayload/DailyHistoryEntry/DailyModelBreakdown
and the other CLI payload types verbatim, plus the exact CodeburnBridge
interface and Period union.
- ipc.ts: typed 1:1 wrapper + normalizeCliError.
