{/* Breadcrumb */}
/
{project.name}
{/* ── Hero header ─────────────────────────────────── */}
{project.name.charAt(0).toUpperCase()}
{project.name}
/{project.slug}
{project.client}
·
Created {created}
·
Active
this period · {fmtUSD(project.spend * GBP_TO_USD, 2)}
.haltonrc
auto-tagging enabled
{/* Inline KPI strip */}
{totals.latency}ms} sub="P95 1,840ms" icon="clock" border/>
{/* ── Tabs ───────────────────────────────────────── */}
{[
{ id:"overview", label:"Overview" },
{ id:"requests", label:"Requests", count: project.requests },
{ id:"comparison", label:"Cross-provider" },
{ id:"reports", label:"Reports" },
].map(t => {
const active = tab === t.id;
return (
);
})}
{tab === "overview" && (
{/* ── Main column ─────────────────────────────── */}
{/* ── Sidebar ────────────────────────────────── */}
)}
{tab === "requests" && (
)}
{tab === "comparison" &&
}
{tab === "reports" && }
{project.requests.toLocaleString()} requests · period: May 2026 (partial)
{opts.map(o => {
const active = value === o.id;
return (
);
})}
);
}
// ── Spend over time chart (project-scoped, stacked by model) ──────
function ProjectSpendChart({ project, totals }){
const ref = useRef(null);
const w = useWidth(ref);
const [hover, setHover] = useState(null);
const h = 240;
const padL = 50, padR = 18, padT = 16, padB = 32;
const innerW = Math.max(100, w - padL - padR);
const innerH = h - padT - padB;
// Build 30-day series shaped by project.shape, decomposed into model layers
const n = 30;
const base = makeSeries(project.spend, n, project.shape);
const data = base.map((v, i) => ({
d: i + 1,
primary: v * 0.92,
sonnet: v * 0.05,
haiku: v * 0.025,
gemini: v * 0.005,
total: v,
}));
const layers = [
{ id:"primary", color: PROVIDERS[MODELS[project.primaryModel].provider].color, label: MODELS[project.primaryModel].short },
{ id:"sonnet", color: PROVIDERS.anthropic.color, label:"Sonnet 4.6", opacity:0.55 },
{ id:"haiku", color: PROVIDERS.anthropic.color, label:"Haiku 4.5", opacity:0.35 },
{ id:"gemini", color: PROVIDERS.google.color, label:"Gemini 3" },
];
const maxCost = Math.max(...data.map(d=>d.total), 1) * 1.18;
const x = i => (i/(n-1))*innerW;
const y = v => innerH - (v/maxCost)*innerH;
// Stacked paths
function stackPath(layerIdx){
const upper = data.map((d,i) => {
const top = layers.slice(0, layerIdx+1).reduce((s,L) => s + (d[L.id] || 0), 0);
return [x(i), y(top)];
});
const lower = data.map((d,i) => {
const bot = layers.slice(0, layerIdx).reduce((s,L) => s + (d[L.id] || 0), 0);
return [x(i), y(bot)];
}).reverse();
const all = [...upper, ...lower];
return "M" + all.map(([px,py]) => `${px.toFixed(1)},${py.toFixed(1)}`).join(" L") + " Z";
}
const yTicks = [0, 0.25, 0.5, 0.75, 1].map(t => ({ v: t*maxCost, y: y(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; }
setHover(Math.max(0, Math.min(n-1, Math.round((px/innerW)*(n-1)))));
}
return (