@alpic-ai/ui 0.0.0-dev.g2338b91 → 0.0.0-dev.g23fdbf3

package/src/hooks/use-chart-theme.ts

@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+
+// Recharts draws to SVG/canvas and cannot read CSS custom properties, so resolve to hex and re-read on .dark toggle.
+export interface ChartTheme {
+  foreground: string;
+  mutedForeground: string;
+  axisForeground: string;
+  grid: string;
+  border: string;
+  card: string;
+  popover: string;
+  destructive: string;
+  warning: string;
+  success: string;
+  fontMono: string;
+  isDark: boolean;
+}
+
+const TOKEN_MAP: Record<Exclude<keyof ChartTheme, "isDark">, string> = {
+  foreground: "--color-foreground",
+  mutedForeground: "--color-muted-foreground",
+  axisForeground: "--color-quaternary-foreground",
+  grid: "--color-sidebar-border",
+  border: "--color-border",
+  card: "--color-card",
+  popover: "--color-popover",
+  destructive: "--color-destructive",
+  warning: "--color-warning",
+  success: "--color-success",
+  fontMono: "--font-mono",
+};
+
+const FALLBACK: ChartTheme = {
+  foreground: "#121e1e",
+  mutedForeground: "#3a4848",
+  axisForeground: "#6f7f7f",
+  grid: "#e3eaea",
+  border: "#acb8b8",
+  card: "#f8fafa",
+  popover: "#ffffff",
+  destructive: "#d92d20",
+  warning: "#dc6803",
+  success: "#079455",
+  fontMono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  isDark: false,
+};
+
+const readTheme = (): ChartTheme => {
+  if (typeof window === "undefined") {
+    return FALLBACK;
+  }
+  const styles = window.getComputedStyle(document.documentElement);
+  const entries = Object.entries(TOKEN_MAP).map(([key, token]) => {
+    const value = styles.getPropertyValue(token).trim();
+    return [key, value || FALLBACK[key as keyof ChartTheme]] as const;
+  });
+  const colors = Object.fromEntries(entries) as unknown as Omit<ChartTheme, "isDark">;
+  return { ...colors, isDark: document.documentElement.classList.contains("dark") };
+};
+
+export function useChartTheme() {
+  const [theme, setTheme] = React.useState<ChartTheme>(readTheme);
+
+  React.useEffect(() => {
+    const update = () => setTheme(readTheme());
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+
+  return theme;
+}

package/src/hooks/use-reduced-motion.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import * as React from "react";
+
+export function useReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+
+  React.useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+
+  return reduced;
+}

package/src/lib/chart-palette.ts

@@ -0,0 +1,110 @@
+/**
+ * Chart palettes — the locked "paired system" from the analytics-v2 design.
+ *
+ * These are charting-API color values (consumed by Recharts at draw time, which
+ * cannot read CSS custom properties), so per the design-system rules they live
+ * as documented hex constants rather than `--color-*` tokens. They are
+ * theme-independent: the same series colors read on light and dark canvases.
+ * Only the chrome (grid, axis text, tooltip surface, semantic colors) is
+ * theme-aware — see `useChartTheme`.
+ *
+ * Rules baked in:
+ *  - Pink leads (index 0) — never buried, fixing the V1 "pink last" bug.
+ *  - Adjacent dashboard cards alternate lead palette (magenta / cyan) — the
+ *    page decides which to pass; the component just receives one.
+ */
+
+export const MAGENTA_PALETTE = [
+  "#e90060",
+  "#ff7eb6",
+  "#9b5de5",
+  "#5b8def",
+  "#36c5f0",
+  "#6eece7",
+  "#d98a3d",
+  "#2bb6a3",
+] as const;
+
+export const CYAN_PALETTE = [
+  "#17b8cf",
+  "#41ddc9",
+  "#3f8ff0",
+  "#8b6cf0",
+  "#c46bf0",
+  "#ff7eb6",
+  "#e90060",
+  "#c98be0",
+] as const;
+
+export type ChartPaletteName = "magenta" | "cyan";
+
+export const CHART_PALETTES: Record<ChartPaletteName, readonly string[]> = {
+  magenta: MAGENTA_PALETTE,
+  cyan: CYAN_PALETTE,
+};
+
+export const heatRampMagenta = (empty: string) => [empty, "#5b0a31", "#a3034a", "#e90060", "#ff7eb6"];
+export const heatRampMint = (empty: string) => [empty, "#0c4a52", "#17b8cf", "#41ddc9", "#6eece7"];
+
+// Empty heat cell — the only theme-dependent charting value, so it travels as a
+// light/dark pair rather than a `--color-*` token (heatmaps draw to SVG fills).
+export const HEAT_EMPTY = { light: "#eef3f3", dark: "#102222" } as const;
+
+const HEAT_RAMPS: Record<ChartPaletteName, (empty: string) => string[]> = {
+  magenta: heatRampMagenta,
+  cyan: heatRampMint,
+};
+
+export const heatRamp = (palette: ChartPaletteName, empty: string) => HEAT_RAMPS[palette](empty);
+
+const hexToRgb = (hex: string) => {
+  const value = Number.parseInt(hex.slice(1), 16);
+  return [(value >> 16) & 255, (value >> 8) & 255, value & 255] as const;
+};
+
+export const luminance = (hex: string) => {
+  const linear = hexToRgb(hex).map((channel) => {
+    const normalized = channel / 255;
+    return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+  });
+  // biome-ignore lint/style/noNonNullAssertion: hexToRgb always yields 3 channels
+  return 0.2126 * linear[0]! + 0.7152 * linear[1]! + 0.0722 * linear[2]!;
+};
+
+export const paletteColor = (palette: readonly string[], index: number) => {
+  // biome-ignore lint/style/noNonNullAssertion: modulo guarantees a valid index
+  return palette[((index % palette.length) + palette.length) % palette.length]!;
+};
+
+const RAMP_ENDS: Record<ChartPaletteName, readonly [string, string]> = {
+  magenta: ["#e90060", "#ff7eb6"],
+  cyan: ["#17b8cf", "#6eece7"],
+};
+
+const mixHex = (from: string, to: string, fraction: number) => {
+  const [fromR, fromG, fromB] = hexToRgb(from);
+  const [toR, toG, toB] = hexToRgb(to);
+  const ratio = Math.min(1, Math.max(0, fraction));
+  const channel = (start: number, end: number) => Math.round(start + (end - start) * ratio);
+  return `#${[channel(fromR, toR), channel(fromG, toG), channel(fromB, toB)]
+    .map((value) => value.toString(16).padStart(2, "0"))
+    .join("")}`;
+};
+
+export const rampColor = (palette: ChartPaletteName, fraction: number) => {
+  const [from, to] = RAMP_ENDS[palette];
+  return mixHex(from, to, fraction);
+};
+
+/**
+ * Interpolate continuously across a multi-stop heat ramp (e.g. `heatRampMagenta`),
+ * so a normalized 0..1 value reads as a smooth single-hue gradient rather than
+ * the five discrete bands.
+ */
+export const heatColor = (stops: readonly string[], fraction: number) => {
+  const clamped = Math.min(1, Math.max(0, fraction));
+  const segment = (stops.length - 1) * clamped;
+  const lowerIndex = Math.min(stops.length - 2, Math.floor(segment));
+  // biome-ignore lint/style/noNonNullAssertion: lowerIndex is clamped to a valid pair
+  return mixHex(stops[lowerIndex]!, stops[lowerIndex + 1]!, segment - lowerIndex);
+};

package/src/lib/chart.ts

@@ -0,0 +1,56 @@
+import type { ChartTheme } from "../hooks/use-chart-theme";
+import { luminance, paletteColor } from "./chart-palette";
+
+/**
+ * Declarative description of one plotted series. The same shape drives area,
+ * line and bar charts — what differs is how each chart renders it.
+ */
+export interface ChartSeries {
+  key: string;
+  name?: string;
+  color?: string;
+  semantic?: "error" | "warning" | "success";
+  dashed?: boolean;
+}
+
+export interface ResolvedSeries extends ChartSeries {
+  name: string;
+  color: string;
+}
+
+export const formatShare = (fraction: number) => `${(fraction * 100).toFixed(fraction >= 0.1 ? 0 : 1)}%`;
+
+const semanticColor = (theme: ChartTheme, semantic: NonNullable<ChartSeries["semantic"]>) => {
+  if (semantic === "error") {
+    return theme.destructive;
+  }
+  if (semantic === "warning") {
+    return theme.warning;
+  }
+  return theme.success;
+};
+
+/**
+ * Resolve each series to a concrete color and name. Color precedence:
+ * explicit `color` → `semantic` token → palette slot by declared index (so the
+ * lead series keeps the lead color even after the bands are reordered).
+ */
+export const resolveSeries = (
+  series: readonly ChartSeries[],
+  palette: readonly string[],
+  theme: ChartTheme,
+): ResolvedSeries[] =>
+  series.map((entry, index) => ({
+    ...entry,
+    name: entry.name ?? entry.key,
+    color: entry.color ?? (entry.semantic ? semanticColor(theme, entry.semantic) : paletteColor(palette, index)),
+  }));
+
+/**
+ * Stacked bands read cleanest as a vertical gradient: darkest at the baseline,
+ * lightest at the top edge. Sorting by luminance enforces that for any palette
+ * (this is what fixed the "muddy cyan" stack in the lab). Render order maps to
+ * stack order in Recharts — first entry sits at the bottom.
+ */
+export const orderByLuminance = (series: ResolvedSeries[]) =>
+  [...series].sort((lower, upper) => luminance(lower.color) - luminance(upper.color));

package/src/stories/area-chart.stories.tsx

@@ -0,0 +1,200 @@
+import type { Story } from "@ladle/react";
+
+import { AreaChart } from "../components/area-chart";
+import { ChartCard } from "../components/chart-card";
+import { GridFx } from "../components/grid-fx";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Area Chart" };
+
+const mulberry32 = (seed: number) => () => {
+  seed |= 0;
+  seed = (seed + 0x6d2b79f5) | 0;
+  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+};
+
+const CLIENTS = ["ChatGPT", "Claude Code", "Claude", "Anthropic", "Goose", "VS Code"];
+const WEIGHTS = [0.42, 0.24, 0.12, 0.09, 0.07, 0.06];
+
+const hourLabel = (index: number, length: number) =>
+  `${String(Math.round((index / (length - 1)) * 24)).padStart(2, "0")}:00`;
+
+const genStacked = (seed: number) => {
+  const rnd = mulberry32(seed);
+  const length = 25;
+  return Array.from({ length }, (_, index) => {
+    const tide = 0.55 + 0.45 * Math.sin((index / length) * Math.PI * 1.6 - 0.4);
+    const row: Record<string, number | string> = { t: hourLabel(index, length) };
+    CLIENTS.forEach((client, clientIndex) => {
+      // biome-ignore lint/style/noNonNullAssertion: index aligned with CLIENTS
+      row[client] = Math.max(2, Math.round(120 * WEIGHTS[clientIndex]! * tide * (0.7 + rnd() * 0.6)));
+    });
+    return row;
+  });
+};
+
+const genSeries = (seed: number, scale: number) => {
+  const rnd = mulberry32(seed);
+  const length = 30;
+  let value = scale * 0.6;
+  return Array.from({ length }, (_, index) => {
+    value = Math.max(scale * 0.12, value + (rnd() - 0.46) * scale * 0.18);
+    return { t: hourLabel(index, length), v: Math.round(value * (1 + Math.sin(index / 5) * 0.16)) };
+  });
+};
+
+const genLatency = (seed: number) => {
+  const rnd = mulberry32(seed);
+  const length = 30;
+  let p50 = 240;
+  let p95 = 720;
+  return Array.from({ length }, (_, index) => {
+    p50 = Math.max(120, p50 + (rnd() - 0.48) * 40);
+    p95 = Math.max(p50 + 200, p95 + (rnd() - 0.46) * 120);
+    return { t: hourLabel(index, length), p50: Math.round(p50), p95: Math.round(p95 * (index === 19 ? 1.7 : 1)) };
+  });
+};
+
+const genErrors = (seed: number) => {
+  const rnd = mulberry32(seed);
+  const length = 30;
+  return Array.from({ length }, (_, index) => {
+    const burst = index > 14 && index < 20 ? 3.4 : 1;
+    return {
+      t: hourLabel(index, length),
+      mcp: Math.max(0, Math.round(4 * (0.3 + rnd()) * burst)),
+      tool: Math.max(0, Math.round(6 * (0.3 + rnd()) * burst)),
+    };
+  });
+};
+
+const stacked = genStacked(7);
+const tokens = genSeries(11, 84000);
+const latency = genLatency(31);
+const errors = genErrors(41);
+
+const sessionsSeries = CLIENTS.map((key) => ({ key }));
+const nf = (value: number) => value.toLocaleString("en-US");
+const fmtK = (value: number) => (value >= 1000 ? `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}k` : `${value}`);
+const ms = (value: number) => `${value}ms`;
+
+const sessionsTotal = stacked.reduce(
+  (sum, row) => sum + CLIENTS.reduce((acc, client) => acc + (row[client] as number), 0),
+  0,
+);
+const sessionsSpark = stacked.map((row) => CLIENTS.reduce((acc, client) => acc + (row[client] as number), 0));
+
+const latencyPeak = latency.reduce((best, row) => (row.p95 > best.p95 ? row : best));
+const errorsPeak = errors.reduce((best, row) => (row.mcp + row.tool > best.mcp + best.tool ? row : best));
+
+export const AllVariants: Story = () => (
+  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
+    <GridFx />
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+      <ChartCard
+        palette="magenta"
+        accent="left"
+        kicker="Last 24h"
+        title="Sessions"
+        description="Full-width · left accent"
+        className="md:col-span-2 xl:col-span-3"
+      >
+        <AreaChart data={stacked} index="t" series={sessionsSeries} variant="stacked" legend valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Sessions" description="By client">
+        <Stat
+          value={nf(sessionsTotal)}
+          unit="sessions"
+          delta={{ value: 12.4, direction: "up" }}
+          sparkline={sessionsSpark}
+        />
+        <AreaChart data={stacked} index="t" series={sessionsSeries} variant="stacked" legend valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Sessions share" description="Composition over time">
+        <AreaChart data={stacked} index="t" series={sessionsSeries} variant="expand" legend valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Sessions" description="Grouped overlay · last values">
+        <AreaChart
+          data={stacked}
+          index="t"
+          series={sessionsSeries.slice(0, 3)}
+          variant="grouped"
+          lastValueLabel
+          legend
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 24h" title="Output tokens" description="Value flags · last value">
+        <Stat value="1.4M" unit="tokens" delta={{ value: 8.1, direction: "up" }} />
+        <AreaChart
+          data={tokens}
+          index="t"
+          series={[{ key: "v", name: "tokens" }]}
+          variant="grouped"
+          lastValueLabel
+          valueFlags
+          valueFormatter={fmtK}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Request latency" description="p50 vs p95 · SLA band + peak">
+        <Stat value="240ms" unit="p50 · current" delta={{ value: 4.2, direction: "down", invert: true }} />
+        <AreaChart
+          data={latency}
+          index="t"
+          series={[
+            { key: "p50", name: "p50" },
+            { key: "p95", name: "p95", dashed: true, color: "#9b5de5" },
+          ]}
+          variant="grouped"
+          referenceLine={{ y: 1000, label: "SLA 1s", band: true }}
+          markers={[{ x: latencyPeak.t, y: latencyPeak.p95, label: "peak", color: "#9b5de5" }]}
+          legend
+          valueFormatter={ms}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Errors" description="Semantic red · palette-independent">
+        <Stat value="312" unit="errors" delta={{ value: 0, direction: "up", invert: true, label: "burst 16:00" }} />
+        <AreaChart
+          data={errors}
+          index="t"
+          series={[
+            { key: "tool", name: "Tool errors", semantic: "warning" },
+            { key: "mcp", name: "MCP errors", semantic: "error" },
+          ]}
+          variant="stacked"
+          markers={[{ x: errorsPeak.t, y: errorsPeak.mcp + errorsPeak.tool, label: "burst" }]}
+          legend
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 24h" title="Tasks" description="Hatch lead · stepped">
+        <AreaChart
+          data={tokens}
+          index="t"
+          series={[{ key: "v", name: "tokens" }]}
+          curve="step"
+          variant="grouped"
+          texture
+          valueFormatter={fmtK}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Loading" description="Mono spinner placeholder">
+        <AreaChart data={[]} index="t" series={sessionsSeries} loading />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
+        <AreaChart data={[]} index="t" series={sessionsSeries} />
+      </ChartCard>
+    </div>
+  </div>
+);

package/src/stories/bar-chart.stories.tsx

@@ -0,0 +1,169 @@
+import type { Story } from "@ladle/react";
+
+import { BarChart } from "../components/bar-chart";
+import { ChartCard } from "../components/chart-card";
+import { GridFx } from "../components/grid-fx";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Bar Chart" };
+
+const mulberry32 = (seed: number) => () => {
+  seed |= 0;
+  seed = (seed + 0x6d2b79f5) | 0;
+  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+};
+
+const CLIENTS = ["ChatGPT", "Claude Code", "Claude", "Anthropic", "Goose", "VS Code"];
+const WEIGHTS = [0.42, 0.24, 0.12, 0.09, 0.07, 0.06];
+const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+
+const genDailyStacked = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return DAYS.map((day, dayIndex) => {
+    const tide = 0.6 + 0.4 * Math.sin((dayIndex / DAYS.length) * Math.PI * 1.4);
+    const row: Record<string, number | string> = { t: day };
+    CLIENTS.forEach((client, clientIndex) => {
+      // biome-ignore lint/style/noNonNullAssertion: index aligned with CLIENTS
+      row[client] = Math.max(4, Math.round(900 * WEIGHTS[clientIndex]! * tide * (0.7 + rnd() * 0.6)));
+    });
+    return row;
+  });
+};
+
+const genDuration = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return DAYS.map((day, dayIndex) => ({
+    t: day,
+    p50: Math.round(240 + rnd() * 120),
+    p95: Math.round(820 + rnd() * 360 * (dayIndex === 4 ? 1.6 : 1)),
+  }));
+};
+
+const genErrors = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return DAYS.map((day, dayIndex) => {
+    const burst = dayIndex === 4 ? 3 : 1;
+    return {
+      t: day,
+      tool: Math.max(0, Math.round(6 * (0.4 + rnd()) * burst)),
+      mcp: Math.max(0, Math.round(4 * (0.4 + rnd()) * burst)),
+    };
+  });
+};
+
+const genThroughput = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return DAYS.map((day) => ({ t: day, v: Math.round(38000 + rnd() * 46000) }));
+};
+
+const stacked = genDailyStacked(7);
+const duration = genDuration(19);
+const errors = genErrors(41);
+const throughput = genThroughput(11);
+
+const sessionsSeries = CLIENTS.map((key) => ({ key }));
+const nf = (value: number) => value.toLocaleString("en-US");
+const fmtK = (value: number) => (value >= 1000 ? `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}k` : `${value}`);
+const ms = (value: number) => `${value}ms`;
+
+const sessionsTotal = stacked.reduce(
+  (sum, row) => sum + CLIENTS.reduce((acc, client) => acc + (row[client] as number), 0),
+  0,
+);
+const sessionsSpark = stacked.map((row) => CLIENTS.reduce((acc, client) => acc + (row[client] as number), 0));
+
+const errorsPeak = errors.reduce((best, row) => (row.mcp + row.tool > best.mcp + best.tool ? row : best));
+
+export const AllVariants: Story = () => (
+  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
+    <GridFx />
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+      <ChartCard
+        palette="magenta"
+        accent="left"
+        kicker="Last 7d"
+        title="Sessions"
+        description="Full-width · left accent"
+        className="md:col-span-2 xl:col-span-3"
+      >
+        <BarChart data={stacked} index="t" series={sessionsSeries} variant="stacked" legend valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 7d" title="Sessions" description="By client · stacked">
+        <Stat
+          value={nf(sessionsTotal)}
+          unit="sessions"
+          delta={{ value: 9.3, direction: "up" }}
+          sparkline={sessionsSpark}
+        />
+        <BarChart data={stacked} index="t" series={sessionsSeries} variant="stacked" legend valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 7d" title="Sessions share" description="Composition · 100% stacked">
+        <BarChart data={stacked} index="t" series={sessionsSeries} variant="expand" legend valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 7d" title="Request duration" description="p50 vs p95 · grouped">
+        <BarChart
+          data={duration}
+          index="t"
+          series={[
+            { key: "p50", name: "p50" },
+            { key: "p95", name: "p95", color: "#9b5de5" },
+          ]}
+          variant="grouped"
+          legend
+          valueFormatter={ms}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 7d" title="Output tokens" description="Single series · value labels">
+        <Stat value="1.4M" unit="tokens" delta={{ value: 8.1, direction: "up" }} />
+        <BarChart
+          data={throughput}
+          index="t"
+          series={[{ key: "v", name: "tokens" }]}
+          valueLabels
+          valueFormatter={fmtK}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 7d" title="Errors" description="Semantic red · burst marker">
+        <Stat value="312" unit="errors" delta={{ value: 0, direction: "up", invert: true, label: "burst Fri" }} />
+        <BarChart
+          data={errors}
+          index="t"
+          series={[
+            { key: "tool", name: "Tool errors", semantic: "warning" },
+            { key: "mcp", name: "MCP errors", semantic: "error" },
+          ]}
+          variant="stacked"
+          markers={[{ x: errorsPeak.t, y: errorsPeak.mcp + errorsPeak.tool, label: "burst" }]}
+          legend
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 7d" title="Throughput" description="Hatch lead · SLA band">
+        <BarChart
+          data={throughput}
+          index="t"
+          series={[{ key: "v", name: "tokens" }]}
+          texture
+          referenceLine={{ y: 80000, label: "capacity", band: true }}
+          valueFormatter={fmtK}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Loading" description="Mono spinner placeholder">
+        <BarChart data={[]} index="t" series={sessionsSeries} loading />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
+        <BarChart data={[]} index="t" series={sessionsSeries} />
+      </ChartCard>
+    </div>
+  </div>
+);