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

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

@@ -0,0 +1,85 @@
+import type { Story } from "@ladle/react";
+
+import { BarList } from "../components/bar-list";
+import { ChartCard } from "../components/chart-card";
+import { GridFx } from "../components/grid-fx";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Bar List" };
+
+const TOP_TOOLS = [
+  { tool: "search_codebase", calls: 18420 },
+  { tool: "read_file", calls: 14110 },
+  { tool: "run_command", calls: 9870 },
+  { tool: "edit_file", calls: 8240 },
+  { tool: "list_dir", calls: 5130 },
+  { tool: "grep", calls: 3960 },
+  { tool: "web_fetch", calls: 2210 },
+];
+
+const TOP_CLIENTS = [
+  { client: "ChatGPT", sessions: 16222 },
+  { client: "Claude Code", sessions: 9502 },
+  { client: "Claude", sessions: 6859 },
+  { client: "Anthropic", sessions: 4664 },
+  { client: "Goose", sessions: 3389 },
+  { client: "VS Code", sessions: 2771 },
+];
+
+const TOP_ROUTES = [
+  { route: "POST /v1/messages", hits: 482000 },
+  { route: "GET /v1/models", hits: 211400 },
+  { route: "POST /v1/embeddings", hits: 98700 },
+  { route: "GET /v1/usage", hits: 64200 },
+  { route: "POST /v1/files", hits: 41900 },
+  { route: "GET /v1/health", hits: 28800 },
+  { route: "DELETE /v1/files", hits: 12400 },
+  { route: "POST /v1/batches", hits: 8600 },
+  { route: "GET /v1/batches", hits: 5300 },
+  { route: "POST /v1/moderations", hits: 2100 },
+];
+
+const nf = (value: number) => value.toLocaleString("en-US");
+const fmtK = (value: number) => {
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(2)}M`;
+  }
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}k`;
+  }
+  return `${value}`;
+};
+
+const toolCallsTotal = TOP_TOOLS.reduce((sum, row) => sum + row.calls, 0);
+
+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" kicker="Last 7d" title="Top tools" description="Ranked · magenta ramp">
+        <Stat value={fmtK(toolCallsTotal)} unit="calls" delta={{ value: 12.4, direction: "up" }} />
+        <BarList data={TOP_TOOLS} index="tool" dataKey="calls" valueFormatter={fmtK} />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 7d" title="Top clients" description="Ranked · cyan ramp">
+        <BarList data={TOP_CLIENTS} index="client" dataKey="sessions" valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Top routes" description="Long list · capped to 6">
+        <BarList data={TOP_ROUTES} index="route" dataKey="hits" maxItems={6} valueFormatter={fmtK} />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 24h" title="Top routes" description="Full list · cyan ramp">
+        <BarList data={TOP_ROUTES} index="route" dataKey="hits" valueFormatter={fmtK} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Loading" description="Mono spinner placeholder">
+        <BarList data={[]} index="tool" dataKey="calls" loading />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
+        <BarList data={[]} index="tool" dataKey="calls" />
+      </ChartCard>
+    </div>
+  </div>
+);

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

@@ -0,0 +1,112 @@
+import type { Story } from "@ladle/react";
+
+import { ChartCard } from "../components/chart-card";
+import { DonutChart } from "../components/donut-chart";
+import { GridFx } from "../components/grid-fx";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Donut 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 genClients = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return CLIENTS.map((client, clientIndex) => ({
+    client,
+    sessions: Math.round(48000 * (WEIGHTS[clientIndex] ?? 0) * (0.8 + rnd() * 0.4)),
+  }));
+};
+
+const MODELS = [
+  "claude-opus-4-8",
+  "claude-sonnet-4-6",
+  "claude-haiku-4-5",
+  "gpt-5.2",
+  "gpt-5.2-mini",
+  "gemini-3-pro",
+  "gemini-3-flash",
+  "llama-4-405b",
+  "mistral-large-3",
+  "command-r-plus",
+  "qwen-3-72b",
+  "deepseek-v4",
+];
+
+const genModels = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return MODELS.map((model) => ({ model, tokens: Math.round(40000 + rnd() * 920000) }));
+};
+
+const genStatus = (seed: number) => {
+  const rnd = mulberry32(seed);
+  return [
+    { state: "Success", count: Math.round(8200 + rnd() * 600) },
+    { state: "Errored", count: Math.round(180 + rnd() * 90) },
+    { state: "Timed out", count: Math.round(60 + rnd() * 40) },
+  ];
+};
+
+const clients = genClients(7);
+const models = genModels(23);
+const status = genStatus(41);
+
+const nf = (value: number) => value.toLocaleString("en-US");
+const fmtK = (value: number) => {
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(2)}M`;
+  }
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}k`;
+  }
+  return `${value}`;
+};
+
+const clientsTotal = clients.reduce((sum, row) => sum + row.sessions, 0);
+
+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" kicker="Last 7d" title="Sessions by client" description="Donut · share readout">
+        <Stat value={fmtK(clientsTotal)} unit="sessions" delta={{ value: 6.2, direction: "up" }} />
+        <DonutChart
+          data={clients}
+          index="client"
+          dataKey="sessions"
+          legend
+          centerLabel="sessions"
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 7d" title="Tokens by model" description="Many slices · scrollable table">
+        <DonutChart data={models} index="model" dataKey="tokens" legend centerLabel="tokens" valueFormatter={fmtK} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Request outcome" description="Ring · prominent total">
+        <DonutChart data={status} index="state" dataKey="count" variant="ring" legend valueFormatter={nf} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 7d" title="Tokens by model" description="Ring only · no readout">
+        <DonutChart data={models} index="model" dataKey="tokens" centerLabel="tokens" valueFormatter={fmtK} />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="State" title="Loading" description="Mono spinner placeholder">
+        <DonutChart data={[]} index="client" dataKey="sessions" loading />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
+        <DonutChart data={[]} index="client" dataKey="sessions" legend />
+      </ChartCard>
+    </div>
+  </div>
+);

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

@@ -0,0 +1,107 @@
+import type { Story } from "@ladle/react";
+
+import { ChartCard } from "../components/chart-card";
+import { GridFx } from "../components/grid-fx";
+import { HeatmapChart } from "../components/heatmap-chart";
+
+export default { title: "Charts/Heatmap" };
+
+const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+
+function mulberry32(seed: number) {
+  let state = seed;
+  return () => {
+    state |= 0;
+    state = (state + 0x6d2b79f5) | 0;
+    let mixed = Math.imul(state ^ (state >>> 15), 1 | state);
+    mixed = (mixed + Math.imul(mixed ^ (mixed >>> 7), 61 | mixed)) ^ mixed;
+    return ((mixed ^ (mixed >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+// Long-format activity rows: one record per (day, hour) with a working-hours hump.
+const ACTIVITY = (() => {
+  const random = mulberry32(99);
+  const rows: Array<{ day: string; hour: string; sessions: number }> = [];
+  DAYS.forEach((day, dayIndex) => {
+    const weekend = dayIndex >= 5;
+    for (let hour = 0; hour < 24; hour += 1) {
+      const work = Math.exp(-((hour - 14) ** 2) / 26) * (weekend ? 0.45 : 1);
+      const evening = Math.exp(-((hour - 21) ** 2) / 10) * 0.5;
+      const intensity = Math.max(0.02, Math.min(1, work + evening + random() * 0.28));
+      rows.push({ day, hour: String(hour).padStart(2, "0"), sessions: Math.round(intensity * 320) });
+    }
+  });
+  return rows;
+})();
+
+const HOURS = Array.from({ length: 24 }, (_, hour) => String(hour).padStart(2, "0"));
+
+const nf = (value: number) => value.toLocaleString("en-US");
+
+export const AllVariants: Story = () => (
+  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
+    <GridFx />
+    <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
+      <ChartCard palette="magenta" accent="left" kicker="Last 7d" title="Activity" description="Square · hour × day">
+        <HeatmapChart
+          data={ACTIVITY}
+          xKey="hour"
+          yKey="day"
+          dataKey="sessions"
+          variant="square"
+          xLabels={HOURS}
+          yLabels={DAYS}
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" accent="left" kicker="Last 7d" title="Activity" description="Dots · hour × day">
+        <HeatmapChart
+          data={ACTIVITY}
+          xKey="hour"
+          yKey="day"
+          dataKey="sessions"
+          variant="dot"
+          xLabels={HOURS}
+          yLabels={DAYS}
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" accent="left" kicker="Last 7d" title="Activity" description="Square · cyan ramp">
+        <HeatmapChart
+          data={ACTIVITY}
+          xKey="hour"
+          yKey="day"
+          dataKey="sessions"
+          variant="square"
+          xLabels={HOURS}
+          yLabels={DAYS}
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" accent="left" kicker="Last 7d" title="Activity" description="Dots · magenta ramp">
+        <HeatmapChart
+          data={ACTIVITY}
+          xKey="hour"
+          yKey="day"
+          dataKey="sessions"
+          variant="dot"
+          xLabels={HOURS}
+          yLabels={DAYS}
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" accent="left" kicker="State" title="Loading" description="Mono spinner placeholder">
+        <HeatmapChart data={[]} xKey="hour" yKey="day" dataKey="sessions" loading />
+      </ChartCard>
+
+      <ChartCard palette="magenta" accent="left" kicker="State" title="Empty" description="No data in range">
+        <HeatmapChart data={[]} xKey="hour" yKey="day" dataKey="sessions" />
+      </ChartCard>
+    </div>
+  </div>
+);

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

@@ -0,0 +1,146 @@
+import type { Story } from "@ladle/react";
+
+import { ChartCard } from "../components/chart-card";
+import { GridFx } from "../components/grid-fx";
+import { LineChart } from "../components/line-chart";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Line 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 hourLabel = (index: number, length: number) =>
+  `${String(Math.round((index / (length - 1)) * 24)).padStart(2, "0")}:00`;
+
+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 genCompare = (seed: number) => {
+  const rnd = mulberry32(seed);
+  const length = 30;
+  let claude = 60;
+  let chatgpt = 80;
+  return Array.from({ length }, (_, index) => {
+    claude = Math.max(20, claude + (rnd() - 0.42) * 14);
+    chatgpt = Math.max(20, chatgpt + (rnd() - 0.5) * 12);
+    return { t: hourLabel(index, length), claude: Math.round(claude), chatgpt: Math.round(chatgpt) };
+  });
+};
+
+const tokens = genSeries(11, 84000);
+const latency = genLatency(31);
+const compare = genCompare(23);
+
+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 tokensSpark = tokens.map((row) => row.v);
+const latencyPeak = latency.reduce((best, row) => (row.p95 > best.p95 ? 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="cyan"
+        accent="left"
+        kicker="Last 24h"
+        title="Sessions"
+        description="Full-width · left accent"
+        className="md:col-span-2 xl:col-span-3"
+      >
+        <LineChart
+          data={compare}
+          index="t"
+          series={[
+            { key: "claude", name: "Claude" },
+            { key: "chatgpt", name: "ChatGPT" },
+          ]}
+          lastValueLabel
+          legend
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Output tokens" description="Single series · value flags">
+        <Stat value="1.4M" unit="tokens" delta={{ value: 8.1, direction: "up" }} sparkline={tokensSpark} />
+        <LineChart data={tokens} index="t" series={[{ key: "v", name: "tokens" }]} 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 }} />
+        <LineChart
+          data={latency}
+          index="t"
+          series={[
+            { key: "p50", name: "p50" },
+            { key: "p95", name: "p95", dashed: true, color: "#9b5de5" },
+          ]}
+          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="cyan" kicker="Last 24h" title="Sessions" description="Claude vs ChatGPT · last values">
+        <LineChart
+          data={compare}
+          index="t"
+          series={[
+            { key: "claude", name: "Claude" },
+            { key: "chatgpt", name: "ChatGPT" },
+          ]}
+          lastValueLabel
+          legend
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 24h" title="Throughput" description="Dots · stepped curve">
+        <LineChart
+          data={tokens}
+          index="t"
+          series={[{ key: "v", name: "tokens" }]}
+          curve="step"
+          dots
+          valueFormatter={fmtK}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Loading" description="Mono spinner placeholder">
+        <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} loading />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
+        <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} />
+      </ChartCard>
+    </div>
+  </div>
+);

package/src/stories/stat.stories.tsx

@@ -0,0 +1,64 @@
+import type { Story } from "@ladle/react";
+
+import { ChartContainer } from "../components/chart-container";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Stat" };
+
+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 spark = (seed: number, length = 24) => {
+  const rnd = mulberry32(seed);
+  let value = 40;
+  return Array.from({ length }, () => {
+    value = Math.max(8, value + (rnd() - 0.45) * 16);
+    return Math.round(value);
+  });
+};
+
+const Row = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <div className="flex flex-col gap-1.5">
+    <p className="type-text-xs font-medium text-subtle-foreground">{label}</p>
+    {children}
+  </div>
+);
+
+export const AllVariants: Story = () => (
+  <div className="grid max-w-3xl grid-cols-2 gap-8">
+    <Row label="Value + unit">
+      <Stat value="48,231" unit="sessions · 24h" />
+    </Row>
+
+    <Row label="Positive delta (up = good)">
+      <Stat value="1.4M" unit="tokens · 24h" delta={{ value: 8.1, direction: "up" }} />
+    </Row>
+
+    <Row label="Negative delta (down = bad)">
+      <Stat value="312" unit="errors · 24h" delta={{ value: 14.2, direction: "up", invert: true }} />
+    </Row>
+
+    <Row label="Inverted: latency down = good">
+      <Stat value="240ms" unit="p50 · current" delta={{ value: 4.2, direction: "down", invert: true }} />
+    </Row>
+
+    <Row label="With sparkline">
+      <Stat value="48,231" unit="sessions · 24h" delta={{ value: 12.4, direction: "up" }} sparkline={spark(7)} />
+    </Row>
+
+    <Row label="Custom delta label">
+      <Stat value="312" unit="errors · 24h" delta={{ value: 0, direction: "up", invert: true, label: "burst 16:00" }} />
+    </Row>
+
+    <Row label="Cyan palette (sparkline lead)">
+      <ChartContainer palette="cyan">
+        <Stat value="9,204" unit="tasks · 24h" delta={{ value: 22, direction: "up" }} sparkline={spark(53)} />
+      </ChartContainer>
+    </Row>
+  </div>
+);

package/src/styles/tokens.css

@@ -4,6 +4,7 @@
   --font-sans: "Inter", system-ui, sans-serif;
   --font-display: "Inter", sans-serif;
   --font-body: "Inter", sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 
   --color-background: #ffffff; /* Figma: bg-primary */
   --color-foreground: #121e1e; /* Figma: fg-primary */
@@ -446,6 +447,68 @@
   }
 }
 
+/* ─── Chart canvas — control-room atmosphere for analytics surfaces ───────────
+   Apply `.chart-canvas` to a dashboard/page container holding chart cards: a
+   dotted grid faded from the top, plus a dual brand glow in dark mode. The grid
+   is masked away so it never bleeds into the cards stacked above it. */
+
+.chart-canvas {
+  position: relative;
+  isolation: isolate;
+}
+
+.chart-canvas::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image:
+    linear-gradient(var(--color-sidebar-border) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-sidebar-border) 1px, transparent 1px);
+  background-size:
+    46px 46px,
+    46px 46px;
+  opacity: 0.65;
+  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
+  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
+}
+
+.dark .chart-canvas::before {
+  background-image:
+    radial-gradient(
+      900px 480px at 78% -8%,
+      color-mix(in oklab, var(--color-cta-accent) 12%, transparent),
+      transparent 60%
+    ),
+    radial-gradient(820px 520px at 8% 4%, color-mix(in oklab, var(--color-primary) 12%, transparent), transparent 60%),
+    linear-gradient(var(--color-sidebar-border) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-sidebar-border) 1px, transparent 1px);
+  background-size:
+    100% 100%,
+    100% 100%,
+    46px 46px,
+    46px 46px;
+  opacity: 0.6;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .chart-rise {
+    animation: chart-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+  }
+}
+
+@keyframes chart-rise {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 /* ─── Typography ──────────────────────────────────────────────────────────── */
 
 :root {