mirror of
https://github.com/AgentSeal/codeburn.git
synced 2026-08-22 15:05:16 +00:00
6e3729cfa9
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`.
26 lines
603 B
TypeScript
26 lines
603 B
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
export type StatTone = 'info' | 'bad' | 'hot' | 'ok'
|
|
|
|
/** A `.panel.stat` metric card: label strip + big value + tinted delta line. */
|
|
export function Stat({
|
|
label,
|
|
value,
|
|
delta,
|
|
tone,
|
|
}: {
|
|
label: ReactNode
|
|
value: ReactNode
|
|
delta?: ReactNode
|
|
tone?: StatTone
|
|
}) {
|
|
return (
|
|
<div className="panel stat">
|
|
<div className="phead"><b>{label}</b></div>
|
|
<div className="pbody">
|
|
<div className="v">{value}</div>
|
|
{delta !== undefined && <div className={tone ? `d ${tone}` : 'd'}>{delta}</div>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|