// Polished Overview screen function Overview({ setScreen, setProject }){ return (
{/* ── Page header ───────────────────────────────────── */}
Workspace overview

May 2026

Day {PERIOD.daysElapsed} of {PERIOD.daysTotal} · {PROJECTS.filter(p=>p.status==="active").length} active projects · last sync 14:32:08 UTC
{/* ── Hero summary band ─────────────────────────────── */} {/* ── Where spend went + Provider mix ───────────────── */}
{/* ── Daily trend (combo) ───────────────────────────── */} {/* ── Models + Insights ─────────────────────────────── */}
{/* ── Top projects ───────────────────────────────────── */} {/* ── Trust strip + quick actions ───────────────────── */}
Data as of today · 14:32 UTC
); } // ── Hero summary band ───────────────────────────────────── function HeroBand(){ const trajectory = PERIOD.totalGBP / PERIOD.daysElapsed * PERIOD.daysTotal; const dayPct = PERIOD.daysElapsed / PERIOD.daysTotal; const spendShape = DAILY.map(d => d.cost); return (
{/* Left — primary metric */}
Total spend
≈ {fmtUSD(PERIOD.totalUSD, 2)}
vs April ({fmtGBP(PERIOD.previousTotalGBP)})
1 Maytoday
{/* Days progress + trajectory */}
Pace: {fmtGBP(trajectory)} projected by month-end {(dayPct*100).toFixed(0)}% of period elapsed
{/* Right — 2×2 grid of richer secondary metrics */}
{Math.round(PERIOD.requests/PERIOD.daysElapsed)}/day · 4 errors} icon="activity" spark={DAILY.map(d=>d.reqs)} sparkColor="var(--p-google)" borderL /> 6,723 Opus · 12 other} icon="coins" spark={DAILY.map(d=>d.cost/d.reqs)} sparkColor="var(--accent)" borderL borderT={false} /> 8.4M in · 32.8M out} icon="tokens" spark={DAILY.map(d=>d.cost*0.6 + d.reqs*0.02)} sparkColor="var(--fg-2)" borderL borderT /> saved ≈ £121 this period} icon="chip" progress={0.38} progressColor="var(--pos)" borderL borderT />
); } function MiniKPI({ label, value, sub, delta, icon, borderL, borderT, spark, sparkColor, progress, progressColor }){ return (
{label}
{value} {delta != null && }
{sub}
{spark && (
)} {progress != null && (
)}
); } // ── Where the spend went — Pareto with sparkline trends ─── function SpendDistribution(){ const total = PROJECTS.reduce((s,p)=>s+p.spend, 0); const top = [...PROJECTS].sort((a,b)=>b.spend-a.spend).slice(0,6); const max = top[0].spend; let cum = 0; return (
All projects } />
{top.map(p => { cum += p.spend; const share = p.spend/total; const cumShare = cum/total; const series = makeSeries(p.spend, 11, p.shape); return (
{p.name} /{p.slug}
{(share*100).toFixed(1)}% {(cumShare*100).toFixed(0)}% cum
); })}
); } // ── Provider mix — donut + risk insight when 1 dominant ──── function ProviderMix(){ const totals = PROVIDER_TOTALS; const total = Object.values(totals).reduce((s,v)=>s+v.cost, 0); return (
{Object.entries(totals).sort((a,b)=>b[1].cost-a[1].cost).map(([k,v]) => (
{PROVIDERS[k].name} {fmtUSD(v.cost, v.cost<1 ? 4 : 2)}
{(v.cost/total*100).toFixed(1)}%
{v.requests.toLocaleString()} reqs
))}
{/* Concentration insight */}
Diversified across 7 providers
60.6% Anthropic · 19.0% OpenAI · routing reduces blast radius and improves negotiating leverage.
); } function ConcentricDonut({ totals, size }){ const total = Object.values(totals).reduce((s,v)=>s+v.cost, 0) || 1; const r = size/2 - 14; const cx = size/2, cy = size/2; const stroke = 16; let acc = 0; const arcs = Object.entries(totals).filter(([,v])=>v.cost>0).map(([k,v]) => { const start = acc / total; const end = (acc + v.cost) / total; acc += v.cost; return { provider:k, value:v.cost, start, end }; }); function arcPath({ start, end }){ if (end - start >= 0.999) { // full circle — draw two arcs return `M ${cx-r} ${cy} A ${r} ${r} 0 1 1 ${cx+r} ${cy} A ${r} ${r} 0 1 1 ${cx-r} ${cy}`; } const a0 = start * 2 * Math.PI - Math.PI/2; const a1 = end * 2 * Math.PI - Math.PI/2; const large = end - start > 0.5 ? 1 : 0; const x0 = cx + r*Math.cos(a0), y0 = cy + r*Math.sin(a0); const x1 = cx + r*Math.cos(a1), y1 = cy + r*Math.sin(a1); return `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1}`; } return ( {arcs.map(a => ( ))} Total ${total.toFixed(2)} ); } // ── Daily trend — combo (cost area + request bars) ───────── function DailyTrend(){ const ref = useRef(null); const w = useWidth(ref); const [hover, setHover] = useState(null); const h = 220; const padL = 48, padR = 44, padT = 14, padB = 32; const innerW = Math.max(100, w - padL - padR); const innerH = h - padT - padB; const n = DAILY.length; const maxCost = Math.max(...DAILY.map(d=>d.cost), 1) * 1.18; const maxReq = Math.max(...DAILY.map(d=>d.reqs), 1) * 1.18; const xC = i => (i/(n-1))*innerW; const yCost = v => innerH - (v/maxCost)*innerH; const yReq = v => innerH - (v/maxReq)*innerH; const areaPts = DAILY.map((d,i)=>`${xC(i)},${yCost(d.cost)}`).join(" L"); const areaPath = `M0,${innerH} L${areaPts} L${innerW},${innerH} Z`; const linePath = `M${areaPts}`; const barW = (innerW/n) * 0.32; const yTicks = [0, 0.25, 0.5, 0.75, 1].map(t => ({ v: t*maxCost, y: yCost(t*maxCost) })); function onMove(e){ const rect = ref.current.getBoundingClientRect(); const px = e.clientX - rect.left - padL; if (px < 0 || px > innerW) { setHover(null); return; } const i = Math.max(0, Math.min(n-1, Math.round((px/innerW)*(n-1)))); setHover(i); } // Spike annotation: max cost day const spikeIdx = DAILY.reduce((mi,d,i,arr)=> arr[mi].cost > d.cost ? mi : i, 0); return (
Cost Requests
} />
setHover(null)}> {/* Y grid */} {yTicks.map((t,i) => ( £{t.v.toFixed(0)} ))} {/* Right axis (requests) */} {yTicks.map((t,i) => ( {Math.round(t.v/maxCost*maxReq)} ))} {/* Request bars */} {DAILY.map((d,i) => { const bh = innerH - yReq(d.reqs); return ; })} {/* Cost area + line */} {/* Cost dots */} {DAILY.map((d,i) => ( ))} {/* Hover crosshair */} {hover != null && } {/* Spike annotation */} peak £{DAILY[spikeIdx].cost} {/* X axis labels */} {DAILY.map((d,i) => (i===0 || i===n-1 || i%2===0) && ( {d.d} May ))} {/* Axis labels */} GBP REQS {hover != null && (
{DAILY[hover].d} May 2026
Cost
Requests {DAILY[hover].reqs.toLocaleString()}
Cost/req {fmtGBP(DAILY[hover].cost/DAILY[hover].reqs, 4)}
)}
); } // ── Models used — horizontal stacked bars with efficiency ─── function ModelsCard(){ const totalCost = MODEL_USE.reduce((s,m)=>s+m.cost, 0); const max = Math.max(...MODEL_USE.map(m=>m.cost)); return (
{MODEL_USE.length} models} />
{MODEL_USE.map(m => { const cpr = m.requests > 0 ? m.cost/m.requests : 0; const meta = MODELS[m.id] || MODELS.unknown; const provider = PROVIDERS[meta.provider]; return (
{meta.short}
0.3?"#fff":"var(--fg-2)", fontWeight:500 }} className="mono"> {m.requests.toLocaleString()} reqs · {cpr<0.01? fmtUSD(cpr,6) : fmtUSD(cpr,4)}/req
{fmtUSD(m.cost, m.cost<1?4:2)} {(m.cost/totalCost*100).toFixed(m.cost/totalCost<0.001?2:1)}%
); })}
); } // ── Insights ─────────────────────────────────────────────── function InsightsCard(){ return (
auto} />
{INSIGHTS.map((it,i) => { const palette = it.tone==="warn" ? { fg:"var(--warn)", bg:"var(--warn-soft)", border:"rgba(185,113,13,0.22)" } : it.tone==="accent" ? { fg:"var(--accent)", bg:"var(--accent-soft)", border:"var(--accent-line)" } : { fg:"var(--fg-2)", bg:"var(--bg-3)", border:"var(--line-1)" }; const icon = it.tone==="warn" ? "alert" : it.tone==="accent" ? "bolt" : "info"; return (
{it.title}
{it.body}
); })}
); } // ── Top projects table ───────────────────────────────────── function TopProjectsTable({ setScreen, setProject }){ const top = [...PROJECTS].sort((a,b)=>b.spend-a.spend).slice(0,7); return (

Top projects

Highest spend · May 2026
{top.map(p => { const cpr = p.requests > 0 ? p.spend/p.requests : 0; const series = makeSeries(p.spend, 11, p.shape); return ( { setProject && setProject(p.slug); setScreen && setScreen("project-detail"); }}> ); })}
Project Period spend Requests Cost / req Trend Primary model Last active
{p.name} /{p.slug}
{p.requests.toLocaleString()} {fmtGBP(cpr, 4)} {p.lastActive}
); } // ── Bottom strip — reconciliation + quick actions ───────── function BottomStrip(){ return (
{/* Reconciliation */}
Reconciliation perfect 0.30% variance
Logged: £277.88 · Anthropic billed: £277.04 · last synced just now
{/* Quick actions */}
Quick actions for this period
); } Object.assign(window, { Overview });