@iloveagents/foundry-web-ui 0.22.0 → 0.24.0

package/dist/chart.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The chart subpath — `@iloveagents/foundry-web-ui/chart`.
+ *
+ * Charts are an optional tier: recharts is a real dependency, and a host
+ * that never draws one should not carry it into its module graph. The
+ * root barrel therefore does not re-export this file (same reasoning as
+ * `@iloveagents/foundry-agent/msal`); import from the subpath.
+ */
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, useChart, compactAxisTick, type ChartContainerProps, type ChartTooltipContentProps, type ChartLegendContentProps, } from "./components/chart/chart.js";
+export { FOLD_COLOR, OTHER_LABEL, categoryColorResolver, chartSlotColor, chartStyleVars, foldCategoryTail, formatBucketLabel, formatCompactNumber, seriesColor, seriesLabel, seriesVar, seriesVarName, CHART_SLOT_COUNT, type ChartConfig, type ChartSeriesConfig, } from "./components/chart/chart-config.js";
+export { StatCard, type StatCardProps } from "./components/chart/stat-card.js";
+export { ChartCard, DashboardGrid, DashboardTile, type ChartCardProps, type DashboardGridProps, type DashboardTileProps, } from "./components/chart/chart-card.js";
+export { TimeSeriesChart, type TimeSeriesChartProps, } from "./components/chart/time-series-chart.js";
+export { CategoryBarChart, type CategoryBarChartProps, } from "./components/chart/category-bar-chart.js";
+export { DonutChart, type DonutChartProps } from "./components/chart/donut-chart.js";

package/dist/chart.js

@@ -0,0 +1,15 @@
+/**
+ * The chart subpath — `@iloveagents/foundry-web-ui/chart`.
+ *
+ * Charts are an optional tier: recharts is a real dependency, and a host
+ * that never draws one should not carry it into its module graph. The
+ * root barrel therefore does not re-export this file (same reasoning as
+ * `@iloveagents/foundry-agent/msal`); import from the subpath.
+ */
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, useChart, compactAxisTick, } from "./components/chart/chart.js";
+export { FOLD_COLOR, OTHER_LABEL, categoryColorResolver, chartSlotColor, chartStyleVars, foldCategoryTail, formatBucketLabel, formatCompactNumber, seriesColor, seriesLabel, seriesVar, seriesVarName, CHART_SLOT_COUNT, } from "./components/chart/chart-config.js";
+export { StatCard } from "./components/chart/stat-card.js";
+export { ChartCard, DashboardGrid, DashboardTile, } from "./components/chart/chart-card.js";
+export { TimeSeriesChart, } from "./components/chart/time-series-chart.js";
+export { CategoryBarChart, } from "./components/chart/category-bar-chart.js";
+export { DonutChart } from "./components/chart/donut-chart.js";

package/dist/components/chart/category-bar-chart.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { type ChartConfig } from "./chart-config.js";
+/**
+ * A ranked categorical breakdown ("tokens per department", "runs per
+ * workflow"). Horizontal by default — category names read best on the y
+ * axis. One measure = ONE hue (this is a magnitude comparison, not an
+ * identity chart); `colorByCategory` switches to per-category slot colors
+ * for the identity case, and `maxBars` folds the tail into "Other" instead
+ * of inventing a sixth color.
+ */
+export interface CategoryBarChartProps {
+    data: Array<Record<string, unknown>>;
+    categoryKey: string;
+    valueKey: string;
+    /** Labels/colors. The `valueKey` entry names the measure in the tooltip. */
+    config?: ChartConfig;
+    /** Horizontal bars (default). Set false for vertical columns. */
+    horizontal?: boolean;
+    /** Fold rows beyond this count into an "Other" bar. */
+    maxBars?: number;
+    /** Give each category its own theme slot color (identity, not magnitude). */
+    colorByCategory?: boolean;
+    height?: number;
+    /** Fixed pixel width opts out of responsive measurement (tests, embeds). */
+    width?: number;
+    valueFormatter?: (value: number) => React.ReactNode;
+    /** Renders a category's axis/tooltip label. Defaults to the raw value. */
+    categoryFormatter?: (value: unknown) => string;
+    className?: string;
+}
+export declare function CategoryBarChart({ data, categoryKey, valueKey, config, horizontal, maxBars, colorByCategory, height, width, valueFormatter, categoryFormatter, className, }: CategoryBarChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/chart/category-bar-chart.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, compactAxisTick } from "./chart.js";
+import { CHART_SLOT_COUNT, categoryColorResolver, foldCategoryTail, seriesColor, } from "./chart-config.js";
+const EMPTY_CONFIG = {};
+export function CategoryBarChart({ data, categoryKey, valueKey, config = EMPTY_CONFIG, horizontal = true, maxBars, colorByCategory = false, height, width, valueFormatter, categoryFormatter, className, }) {
+    // Identity coloring caps at the palette (5 + Other); a single-hue ranked
+    // list caps at what stays readable. Both fold rather than overflow.
+    const barDefault = colorByCategory ? CHART_SLOT_COUNT : 12;
+    // A non-finite cap keeps THIS chart's default, not the palette-wide one.
+    const effectiveMax = Number.isFinite(maxBars) ? maxBars : barDefault;
+    const rows = React.useMemo(() => {
+        // This is a RANKED breakdown by contract, and the fold keeps the head —
+        // rank first so an unsorted input never folds its biggest categories.
+        const ranked = [...data].sort((a, b) => (Number(b[valueKey]) || 0) - (Number(a[valueKey]) || 0));
+        return foldCategoryTail(ranked, { categoryKey, valueKey, max: effectiveMax });
+    }, [data, categoryKey, valueKey, effectiveMax]);
+    // Identity resolved from the ORIGINAL categories, with the measure's own
+    // config entry excluded — it labels the value column, it is not a
+    // category and must not shift the order.
+    const categoryColor = React.useMemo(() => categoryColorResolver(config, rows.map((row) => String(row[categoryKey] ?? "")), { exclude: valueKey }), [config, rows, categoryKey, valueKey]);
+    const fixed = width !== undefined;
+    const resolvedHeight = height ?? (horizontal ? Math.max(160, rows.length * 36 + 24) : 240);
+    const formatCategory = categoryFormatter ?? ((v) => String(v ?? ""));
+    return (_jsx(ChartContainer, { config: config, responsive: !fixed, className: className, style: fixed ? undefined : { height: resolvedHeight, aspectRatio: "auto" }, children: _jsxs(RechartsPrimitive.BarChart, { data: rows, layout: horizontal ? "vertical" : "horizontal", width: width, height: fixed ? resolvedHeight : undefined, margin: { top: 4, right: 12, bottom: 0, left: 0 }, children: [horizontal ? (_jsxs(_Fragment, { children: [_jsx(RechartsPrimitive.XAxis, { type: "number", tickLine: false, axisLine: false, tickFormatter: compactAxisTick }), _jsx(RechartsPrimitive.YAxis, { type: "category", dataKey: categoryKey, width: 140, tickLine: false, axisLine: false, tickFormatter: formatCategory })] })) : (_jsxs(_Fragment, { children: [_jsx(RechartsPrimitive.CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(RechartsPrimitive.XAxis, { dataKey: categoryKey, tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: formatCategory }), _jsx(RechartsPrimitive.YAxis, { width: 48, tickLine: false, axisLine: false, tickFormatter: compactAxisTick })] })), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { labelFormatter: (label) => formatCategory(label), valueFormatter: valueFormatter, indicatorColor: colorByCategory ? (_key, label) => categoryColor(String(label)) : undefined }) }), _jsx(RechartsPrimitive.Bar, { dataKey: valueKey, fill: seriesColor(config, valueKey), maxBarSize: 28, radius: horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0], isAnimationActive: false, children: colorByCategory &&
+                        rows.map((row, i) => {
+                            const category = String(row[categoryKey] ?? i);
+                            return (_jsx(RechartsPrimitive.Cell, { fill: categoryColor(category) }, `${i}-${category}`));
+                        }) })] }) }));
+}

package/dist/components/chart/chart-card.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+/**
+ * The frame every dashboard chart sits in, and the bento grid that lays the
+ * frames out. A shared frame is what makes a dashboard read as one surface:
+ * the same header anatomy, the same padding, the same border on every tile,
+ * so only the DATA differs from card to card.
+ */
+export interface ChartCardProps extends Omit<React.ComponentProps<"div">, "title"> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Right-aligned header slot (a select, a toggle, a menu). */
+    action?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const ChartCard: React.ForwardRefExoticComponent<Omit<ChartCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DashboardGridProps extends React.ComponentProps<"div"> {
+    /** Columns at the desktop breakpoint (1–4). Tiles span via `DashboardTile`. */
+    columns?: 1 | 2 | 3 | 4;
+}
+/** Mobile-first: one column on small screens, `columns` from `lg:` up. */
+declare const DashboardGrid: React.ForwardRefExoticComponent<Omit<DashboardGridProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DashboardTileProps extends React.ComponentProps<"div"> {
+    /** How many grid columns this tile spans at the desktop breakpoint. */
+    span?: 1 | 2 | 3 | 4;
+}
+declare const DashboardTile: React.ForwardRefExoticComponent<Omit<DashboardTileProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ChartCard, DashboardGrid, DashboardTile };

package/dist/components/chart/chart-card.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+const ChartCard = React.forwardRef(({ title, description, action, footer, className, children, ...props }, ref) => (_jsxs("div", { ref: ref, "data-chart-card": "", className: cn("flex flex-col rounded-xl border border-border bg-card p-4 text-card-foreground", className), ...props, children: [_jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "truncate text-sm font-semibold", children: title }), description && _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })] }), action && _jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: action })] }), _jsx("div", { className: "min-h-0 flex-1", children: children }), footer && (_jsx("div", { className: "mt-3 border-t border-border pt-2 text-xs text-muted-foreground", children: footer }))] })));
+ChartCard.displayName = "ChartCard";
+const GRID_COLUMNS = {
+    1: "lg:grid-cols-1",
+    2: "lg:grid-cols-2",
+    3: "lg:grid-cols-3",
+    4: "lg:grid-cols-4",
+};
+/** Mobile-first: one column on small screens, `columns` from `lg:` up. */
+const DashboardGrid = React.forwardRef(({ columns = 3, className, ...props }, ref) => (_jsx("div", { ref: ref, "data-dashboard-grid": "", className: cn("grid grid-cols-1 gap-4", GRID_COLUMNS[columns], className), ...props })));
+DashboardGrid.displayName = "DashboardGrid";
+const TILE_SPANS = {
+    1: "lg:col-span-1",
+    2: "lg:col-span-2",
+    3: "lg:col-span-3",
+    4: "lg:col-span-4",
+};
+const DashboardTile = React.forwardRef(({ span = 1, className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("min-w-0", TILE_SPANS[span], className), ...props })));
+DashboardTile.displayName = "DashboardTile";
+export { ChartCard, DashboardGrid, DashboardTile };

package/dist/components/chart/chart-config.d.ts

@@ -0,0 +1,119 @@
+import type * as React from "react";
+/**
+ * Chart semantics — series → label/color resolution and shared formatting.
+ *
+ * Mirrors the data-table split (`facets.ts` vs `data-table.tsx`): this file
+ * owns MEANING — what a series is called, which color identifies it, how a
+ * number reads — while `chart.tsx` owns what is drawn. Keeping semantics out
+ * of the render tree lets hosts (and agent-written renderers) reason about a
+ * chart's contents without rendering it.
+ */
+export interface ChartSeriesConfig {
+    /** Human label shown in legends and tooltips. Falls back to the key. */
+    label?: React.ReactNode;
+    /**
+     * Explicit color — any CSS color, including a theme token reference such
+     * as `var(--chart-3)`. When omitted, the series takes the theme's
+     * categorical slot for its DECLARED position (see {@link chartSlotColor}).
+     */
+    color?: string;
+}
+/**
+ * One entry per series/category key. The declaration ORDER is the identity
+ * order: colors are assigned by position in this object, so a series keeps
+ * its color when a filter removes its neighbours — color follows the entity,
+ * never its rank.
+ */
+export type ChartConfig = Record<string, ChartSeriesConfig>;
+/** The theme defines exactly five categorical slots (`--chart-1..5`). */
+export declare const CHART_SLOT_COUNT = 5;
+/**
+ * The theme's categorical palette, assigned in fixed order. More than five
+ * series is a design smell, not a palette problem: fold the tail into
+ * "Other" (DonutChart does this via `maxSlices`) or split into small
+ * multiples. The modulo below only keeps an overflowing series defined —
+ * it is not an invitation to cycle.
+ */
+export declare function chartSlotColor(index: number): string;
+/** Resolved color for a series: explicit config first, theme slot second. */
+export declare function seriesColor(config: ChartConfig, key: string): string;
+/** The label a folded tail wears, and the muted color that marks it. */
+export declare const OTHER_LABEL = "Other";
+export declare const FOLD_COLOR = "var(--muted-foreground)";
+/**
+ * The color resolver for a CATEGORICAL chart, where every category is an
+ * identity rather than a series.
+ *
+ * Two requirements pull against each other, and both are real:
+ *   - a DECLARED category must keep its color when a filter removes its
+ *     neighbours (identity follows the entity, never its rank), and
+ *   - a DRAWN category must never take the muted past-the-palette color
+ *     just because the config also names categories this chart does not
+ *     draw.
+ *
+ * Resolved by giving each side its own claim on the palette. A declared
+ * key OWNS its declared index — reserved whether or not it is drawn, which
+ * is what makes it stable — and undeclared drawn categories fill the slots
+ * no declaration claimed, in drawn order. Past the palette, or with every
+ * slot spoken for, a category takes the muted fold color rather than
+ * wrapping modulo five onto a color another category already owns.
+ *
+ * So: declare the categories whose colors must not move, and the rest sort
+ * themselves out.
+ *
+ * `exclude` drops the measure's own config entry (a bar chart labels its
+ * value column there); it is not a category and must not shift the order.
+ */
+export declare function categoryColorResolver(config: ChartConfig, categories: Iterable<string>, options?: {
+    exclude?: string;
+    otherLabel?: string;
+}): (category: string) => string;
+/** Resolved label for a series: explicit config first, the key itself second. */
+export declare function seriesLabel(config: ChartConfig, key: string): React.ReactNode;
+/**
+ * Series keys are data-column names, which allow characters a CSS custom
+ * ident does not (`metrics.tokens`, `model name`). Everything that writes
+ * or reads a per-series variable goes through this one sanitizer, so the
+ * two sides can never disagree.
+ */
+export declare function seriesVarName(key: string): string;
+/**
+ * The `var()` reference marks use for their series color.
+ *
+ * A key with no configured series resolves to an UNDEFINED custom property,
+ * which makes `fill` fall back to black and `stroke` to none — a silent
+ * black band. The fallback keeps an undeclared series visible.
+ */
+export declare function seriesVar(key: string, fallback?: string): string;
+/**
+ * The per-series CSS custom properties a `ChartContainer` injects, so chart
+ * marks can reference {@link seriesVar} and pick up theme changes live.
+ */
+export declare function chartStyleVars(config: ChartConfig): Record<string, string>;
+/** 1029562 → "1M", 63093480 → "63.1M". For axes and stat tiles. */
+export declare function formatCompactNumber(value: number): string;
+/**
+ * Axis label for a time bucket as the usage/statistics APIs emit them:
+ * `"2026-08-26"` → localized "Aug 26", an ISO datetime (hour grain) →
+ * localized "14:00". Anything else passes through unchanged, so categorical
+ * x-axes can share the same formatter.
+ */
+export declare function formatBucketLabel(bucket: unknown): string;
+/**
+ * Fold a category list's tail into a single "Other" row once it exceeds
+ * `max` rows — the discipline for categorical charts: a 9th slice is never
+ * a 9th color.
+ *
+ * Ranks by value FIRST. The fold keeps the head, so on an unranked list it
+ * would swallow whatever happened to be sorted late — a donut of six
+ * equal-ish categories plus one dominant one at the end rendered as four
+ * slivers and an unlabeled 96% "Other". Ranking here rather than trusting
+ * callers makes that unreachable, including for charts a builder agent
+ * writes.
+ */
+export declare function foldCategoryTail<T extends Record<string, unknown>>(rows: T[], options: {
+    categoryKey: keyof T & string;
+    valueKey: keyof T & string;
+    max?: number;
+    otherLabel?: string;
+}): T[];

package/dist/components/chart/chart-config.js

@@ -0,0 +1,187 @@
+/** The theme defines exactly five categorical slots (`--chart-1..5`). */
+export const CHART_SLOT_COUNT = 5;
+/**
+ * The theme's categorical palette, assigned in fixed order. More than five
+ * series is a design smell, not a palette problem: fold the tail into
+ * "Other" (DonutChart does this via `maxSlices`) or split into small
+ * multiples. The modulo below only keeps an overflowing series defined —
+ * it is not an invitation to cycle.
+ */
+export function chartSlotColor(index) {
+    return `var(--chart-${(Math.max(0, index) % CHART_SLOT_COUNT) + 1})`;
+}
+/** Resolved color for a series: explicit config first, theme slot second. */
+export function seriesColor(config, key) {
+    const explicit = config[key]?.color;
+    if (explicit)
+        return explicit;
+    const declaredIndex = Object.keys(config).indexOf(key);
+    return chartSlotColor(declaredIndex === -1 ? 0 : declaredIndex);
+}
+/** The label a folded tail wears, and the muted color that marks it. */
+export const OTHER_LABEL = "Other";
+export const FOLD_COLOR = "var(--muted-foreground)";
+/**
+ * The color resolver for a CATEGORICAL chart, where every category is an
+ * identity rather than a series.
+ *
+ * Two requirements pull against each other, and both are real:
+ *   - a DECLARED category must keep its color when a filter removes its
+ *     neighbours (identity follows the entity, never its rank), and
+ *   - a DRAWN category must never take the muted past-the-palette color
+ *     just because the config also names categories this chart does not
+ *     draw.
+ *
+ * Resolved by giving each side its own claim on the palette. A declared
+ * key OWNS its declared index — reserved whether or not it is drawn, which
+ * is what makes it stable — and undeclared drawn categories fill the slots
+ * no declaration claimed, in drawn order. Past the palette, or with every
+ * slot spoken for, a category takes the muted fold color rather than
+ * wrapping modulo five onto a color another category already owns.
+ *
+ * So: declare the categories whose colors must not move, and the rest sort
+ * themselves out.
+ *
+ * `exclude` drops the measure's own config entry (a bar chart labels its
+ * value column there); it is not a category and must not shift the order.
+ */
+export function categoryColorResolver(config, categories, options = {}) {
+    const { exclude, otherLabel = OTHER_LABEL } = options;
+    const declared = Object.keys(config).filter((key) => key !== exclude && key !== otherLabel);
+    const slotOf = new Map();
+    declared.forEach((key, i) => slotOf.set(key, i));
+    // Whatever the declarations did not claim is free for the rest.
+    const claimed = new Set(slotOf.values());
+    const free = [];
+    for (let slot = 0; slot < CHART_SLOT_COUNT; slot++) {
+        if (!claimed.has(slot))
+            free.push(slot);
+    }
+    let next = 0;
+    for (const category of categories) {
+        if (category === otherLabel || slotOf.has(category))
+            continue;
+        const slot = free[next++];
+        slotOf.set(category, slot === undefined ? CHART_SLOT_COUNT : slot);
+    }
+    return (category) => {
+        const explicit = config[category]?.color;
+        if (explicit)
+            return explicit;
+        if (category === otherLabel)
+            return FOLD_COLOR;
+        const slot = slotOf.get(category);
+        if (slot === undefined || slot >= CHART_SLOT_COUNT)
+            return FOLD_COLOR;
+        return chartSlotColor(slot);
+    };
+}
+/** Resolved label for a series: explicit config first, the key itself second. */
+export function seriesLabel(config, key) {
+    return config[key]?.label ?? key;
+}
+/**
+ * Series keys are data-column names, which allow characters a CSS custom
+ * ident does not (`metrics.tokens`, `model name`). Everything that writes
+ * or reads a per-series variable goes through this one sanitizer, so the
+ * two sides can never disagree.
+ */
+export function seriesVarName(key) {
+    const safe = key.replace(/[^a-zA-Z0-9_-]/g, "-");
+    if (safe === key)
+        return `--chart-color-${key}`;
+    // Two keys may sanitize to the same ident ("metrics.tokens" vs
+    // "metrics tokens") — a short stable hash of the RAW key keeps them
+    // apart without leaking invalid characters.
+    let hash = 5381;
+    for (let i = 0; i < key.length; i++)
+        hash = ((hash << 5) + hash + key.charCodeAt(i)) | 0;
+    return `--chart-color-${safe}-${(hash >>> 0).toString(36)}`;
+}
+/**
+ * The `var()` reference marks use for their series color.
+ *
+ * A key with no configured series resolves to an UNDEFINED custom property,
+ * which makes `fill` fall back to black and `stroke` to none — a silent
+ * black band. The fallback keeps an undeclared series visible.
+ */
+export function seriesVar(key, fallback = chartSlotColor(0)) {
+    return `var(${seriesVarName(key)}, ${fallback})`;
+}
+/**
+ * The per-series CSS custom properties a `ChartContainer` injects, so chart
+ * marks can reference {@link seriesVar} and pick up theme changes live.
+ */
+export function chartStyleVars(config) {
+    const vars = {};
+    for (const key of Object.keys(config)) {
+        vars[seriesVarName(key)] = seriesColor(config, key);
+    }
+    return vars;
+}
+const compactFormatter = new Intl.NumberFormat(undefined, {
+    notation: "compact",
+    maximumFractionDigits: 1,
+});
+/** 1029562 → "1M", 63093480 → "63.1M". For axes and stat tiles. */
+export function formatCompactNumber(value) {
+    if (!Number.isFinite(value))
+        return "–";
+    return compactFormatter.format(value);
+}
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+/**
+ * Axis label for a time bucket as the usage/statistics APIs emit them:
+ * `"2026-08-26"` → localized "Aug 26", an ISO datetime (hour grain) →
+ * localized "14:00". Anything else passes through unchanged, so categorical
+ * x-axes can share the same formatter.
+ */
+export function formatBucketLabel(bucket) {
+    if (typeof bucket !== "string")
+        return String(bucket ?? "");
+    if (DATE_ONLY.test(bucket)) {
+        const d = new Date(`${bucket}T00:00:00`);
+        if (!Number.isNaN(d.getTime())) {
+            return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+        }
+    }
+    const asDate = new Date(bucket);
+    if (bucket.includes("T") && !Number.isNaN(asDate.getTime())) {
+        return asDate.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+    }
+    return bucket;
+}
+/**
+ * Fold a category list's tail into a single "Other" row once it exceeds
+ * `max` rows — the discipline for categorical charts: a 9th slice is never
+ * a 9th color.
+ *
+ * Ranks by value FIRST. The fold keeps the head, so on an unranked list it
+ * would swallow whatever happened to be sorted late — a donut of six
+ * equal-ish categories plus one dominant one at the end rendered as four
+ * slivers and an unlabeled 96% "Other". Ranking here rather than trusting
+ * callers makes that unreachable, including for charts a builder agent
+ * writes.
+ */
+export function foldCategoryTail(rows, options) {
+    const { categoryKey, valueKey, otherLabel = OTHER_LABEL } = options;
+    // A cap below 2 cannot hold a fold (one real row + "Other" is the floor);
+    // a non-finite cap would fold everything into a single bucket.
+    const requested = options.max ?? CHART_SLOT_COUNT;
+    const max = Math.max(2, Number.isFinite(requested) ? requested : CHART_SLOT_COUNT);
+    if (rows.length <= max)
+        return rows;
+    const ranked = [...rows].sort((a, b) => (Number(b[valueKey]) || 0) - (Number(a[valueKey]) || 0));
+    // A pre-existing "Other" row always joins the fold, so set it aside
+    // BEFORE taking the head: leaving it there would cost a real category
+    // its place for a row that gets folded away anyway.
+    const existingOther = ranked.filter((row) => String(row[categoryKey]) === otherLabel);
+    const real = ranked.filter((row) => String(row[categoryKey]) !== otherLabel);
+    const kept = real.slice(0, max - 1);
+    const folded = [...existingOther, ...real.slice(max - 1)];
+    if (!folded.length)
+        return kept;
+    const otherTotal = folded.reduce((sum, row) => sum + (Number(row[valueKey]) || 0), 0);
+    const other = { ...folded[0], [categoryKey]: otherLabel, [valueKey]: otherTotal };
+    return [...kept, other];
+}

package/dist/components/chart/chart.d.ts

@@ -0,0 +1,77 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { type ChartConfig } from "./chart-config.js";
+/**
+ * The shadcn-style chart layer over recharts: `ChartContainer` injects one
+ * `--chart-color-<key>` CSS variable per configured series (resolved from the
+ * theme's `--chart-1..5` slots unless overridden), so every mark inside can
+ * reference its series color with `seriesVar(key)` and follow theme
+ * changes — light/dark and tenant themes alike — without re-rendering logic.
+ *
+ * Tooltip and legend CONTENT components read the same config through
+ * context, so a series is named once and every surface agrees.
+ */
+interface ChartContextValue {
+    config: ChartConfig;
+}
+export declare function useChart(): ChartContextValue;
+export interface ChartContainerProps extends React.ComponentProps<"div"> {
+    config: ChartConfig;
+    /**
+     * When false, children render without a ResponsiveContainer — for fixed
+     * pixel sizes (the chart element then carries width/height itself), and
+     * for test environments where layout measurement never settles.
+     */
+    responsive?: boolean;
+    /** Exactly one chart element — ResponsiveContainer accepts a single child. */
+    children: React.ReactElement;
+}
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Recharts' Tooltip/Legend, re-exported so hosts never import recharts. */
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+type TooltipPayloadEntry = {
+    dataKey?: string | number;
+    name?: string | number;
+    value?: number | string;
+    color?: string;
+    payload?: Record<string, unknown>;
+};
+export interface ChartTooltipContentProps {
+    active?: boolean;
+    label?: unknown;
+    payload?: TooltipPayloadEntry[];
+    className?: string;
+    /** Format the header (usually the x value). Defaults to `String(label)`. */
+    labelFormatter?: (label: unknown) => React.ReactNode;
+    /** Format each row's value. Defaults to `toLocaleString`. */
+    valueFormatter?: (value: number) => React.ReactNode;
+    /** Hide the color indicator squares. */
+    hideIndicator?: boolean;
+    /** Drop the header row entirely (a donut names its slice on the row). */
+    hideLabel?: boolean;
+    /**
+     * Override the indicator color per row — for charts whose CELLS recolor
+     * the marks (colorByCategory) while the payload still carries the parent
+     * series color.
+     */
+    indicatorColor?: (entryKey: string, label: unknown) => string | undefined;
+}
+/**
+ * The hover layer's content. Rows are named from the chart config (the
+ * series key is a data column name — never show it raw when a label exists).
+ */
+declare function ChartTooltipContent({ active, label, payload, className, labelFormatter, valueFormatter, hideIndicator, hideLabel, indicatorColor, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+export interface ChartLegendContentProps {
+    payload?: Array<{
+        dataKey?: string | number;
+        value?: unknown;
+        color?: string;
+    }>;
+    className?: string;
+}
+/** Legend rows named from the chart config, color chips from the payload. */
+declare function ChartLegendContent({ payload, className }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
+/** Compact y-axis tick formatter shared by the chart wrappers. */
+export declare function compactAxisTick(value: unknown): string;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent };

package/dist/components/chart/chart.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { chartStyleVars, formatCompactNumber, seriesLabel, seriesVar, } from "./chart-config.js";
+const ChartContext = React.createContext(null);
+export function useChart() {
+    const ctx = React.useContext(ChartContext);
+    if (!ctx) {
+        throw new Error("useChart must be used inside a <ChartContainer>");
+    }
+    return ctx;
+}
+const ChartContainer = React.forwardRef(({ config, responsive = true, className, children, style, ...props }, ref) => {
+    const vars = React.useMemo(() => chartStyleVars(config), [config]);
+    const contextValue = React.useMemo(() => ({ config }), [config]);
+    return (_jsx(ChartContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, "data-chart": "", className: cn("flex w-full justify-center text-xs", 
+            // A fixed-size chart carries its own dimensions; forcing 16:9
+            // on it would fight them.
+            responsive && "aspect-video", "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground", "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/60", "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border", "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/50", "[&_.recharts-reference-line_line]:stroke-border", "[&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", "[&_.recharts-layer]:outline-none", className), style: { ...vars, ...style }, ...props, children: responsive ? (_jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height: "100%", children: children })) : (children) }) }));
+});
+ChartContainer.displayName = "ChartContainer";
+/** Recharts' Tooltip/Legend, re-exported so hosts never import recharts. */
+const ChartTooltip = RechartsPrimitive.Tooltip;
+const ChartLegend = RechartsPrimitive.Legend;
+/**
+ * The hover layer's content. Rows are named from the chart config (the
+ * series key is a data column name — never show it raw when a label exists).
+ */
+function ChartTooltipContent({ active, label, payload, className, labelFormatter, valueFormatter, hideIndicator = false, hideLabel = false, indicatorColor, }) {
+    const { config } = useChart();
+    if (!active || !payload?.length)
+        return null;
+    return (_jsxs("div", { className: cn("min-w-[9rem] rounded-lg border border-border bg-popover px-3 py-2 text-xs shadow-md", className), children: [!hideLabel && (_jsx("div", { className: "mb-1.5 font-medium text-foreground", children: labelFormatter ? labelFormatter(label) : String(label ?? "") })), _jsx("div", { className: "grid gap-1", children: payload.map((entry, i) => {
+                    // `name` first: a Pie names entries by its nameKey (the category),
+                    // while its dataKey is the measure column — the one label a donut
+                    // row must NOT wear. Series charts set name = dataKey, so nothing
+                    // changes for them.
+                    const key = String(entry.name ?? entry.dataKey ?? i);
+                    const numeric = typeof entry.value === "number" ? entry.value : Number(entry.value);
+                    const finite = Number.isFinite(numeric);
+                    return (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [!hideIndicator && (_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px]", style: {
+                                            background: indicatorColor?.(key, label) ?? entry.color ?? seriesVar(key),
+                                        } })), _jsx("span", { children: seriesLabel(config, key) })] }), _jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: finite && valueFormatter
+                                    ? valueFormatter(numeric)
+                                    : finite
+                                        ? numeric.toLocaleString()
+                                        : String(entry.value ?? "") })] }, `${i}-${key}`));
+                }) })] }));
+}
+/** Legend rows named from the chart config, color chips from the payload. */
+function ChartLegendContent({ payload, className }) {
+    const { config } = useChart();
+    if (!payload?.length)
+        return null;
+    return (_jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3", className), children: payload.map((entry, i) => {
+            const key = String(entry.dataKey ?? entry.value ?? i);
+            return (_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px]", style: { background: entry.color ?? seriesVar(key) } }), _jsx("span", { children: seriesLabel(config, key) })] }, `${i}-${key}`));
+        }) }));
+}
+/** Compact y-axis tick formatter shared by the chart wrappers. */
+export function compactAxisTick(value) {
+    const n = typeof value === "number" ? value : Number(value);
+    return Number.isFinite(n) ? formatCompactNumber(n) : String(value ?? "");
+}
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent };

package/dist/components/chart/donut-chart.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { type ChartConfig } from "./chart-config.js";
+/**
+ * Share of a whole ("tokens per model"). Slices are identities, so each
+ * takes a theme slot resolved over the DRAWN slices — declared config keys
+ * first, the rest in drawn order — and there are only five slots,
+ * so `maxSlices` folds the tail into a muted "Other" (ranked first, so the
+ * fold can never swallow the largest slice) instead of inventing colors.
+ * The center carries the headline total; the legend carries names + shares,
+ * so the hover layer is confirmation, not the only way to read the chart.
+ */
+export interface DonutChartProps {
+    data: Array<Record<string, unknown>>;
+    categoryKey: string;
+    valueKey: string;
+    /** Per-category label/color overrides, keyed by category value. */
+    config?: ChartConfig;
+    /** Fold categories beyond this count into "Other". Default 5. */
+    maxSlices?: number;
+    centerLabel?: React.ReactNode;
+    /** Defaults to the compact-formatted sum of all slices. */
+    centerValue?: React.ReactNode;
+    height?: number;
+    /** Fixed pixel width opts out of responsive measurement (tests, embeds). */
+    width?: number;
+    valueFormatter?: (value: number) => React.ReactNode;
+    showLegend?: boolean;
+    className?: string;
+}
+export declare function DonutChart({ data, categoryKey, valueKey, config, maxSlices, centerLabel, centerValue, height, width, valueFormatter, showLegend, className, }: DonutChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/chart/donut-chart.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { CHART_SLOT_COUNT, categoryColorResolver, foldCategoryTail, formatCompactNumber, } from "./chart-config.js";
+const EMPTY_CONFIG = {};
+export function DonutChart({ data, categoryKey, valueKey, config = EMPTY_CONFIG, maxSlices = 5, centerLabel, centerValue, height = 240, width, valueFormatter, showLegend = true, className, }) {
+    // The donut's slices are identities and the palette has five slots —
+    // a cap above that would wrap colors modulo five.
+    const cappedSlices = Math.min(CHART_SLOT_COUNT, maxSlices);
+    // One expression for "this row's category", so the color resolver and
+    // the rendered cell can never disagree about a missing value.
+    const categoryOf = React.useCallback((row, i) => String(row[categoryKey] ?? i), [categoryKey]);
+    const rows = React.useMemo(() => foldCategoryTail(data, { categoryKey, valueKey, max: cappedSlices }), [data, categoryKey, valueKey, cappedSlices]);
+    const total = React.useMemo(() => rows.reduce((sum, row) => {
+        const value = Number(row[valueKey]);
+        return sum + (Number.isFinite(value) ? value : 0);
+    }, 0), [rows, valueKey]);
+    // Identity resolved over the DRAWN slices: the fold ranks, so a category
+    // late in the input can be promoted, and resolving from input order would
+    // paint that visible slice the muted past-the-palette grey.
+    const sliceColor = React.useMemo(() => categoryColorResolver(config, rows.map((row) => String(row[categoryKey] ?? ""))), [config, rows, categoryOf]);
+    const fixed = width !== undefined;
+    const sliceLabel = (category) => config[category]?.label ?? category;
+    return (_jsxs("div", { className: cn("flex flex-col", className), children: [_jsxs("div", { className: "relative", children: [_jsx(ChartContainer, { config: config, responsive: !fixed, style: fixed ? undefined : { height, aspectRatio: "auto" }, children: _jsxs(RechartsPrimitive.PieChart, { width: width, height: fixed ? height : undefined, children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { hideLabel: true, valueFormatter: valueFormatter }) }), _jsx(RechartsPrimitive.Pie, { data: rows, dataKey: valueKey, nameKey: categoryKey, innerRadius: "62%", outerRadius: "88%", paddingAngle: 2, strokeWidth: 0, isAnimationActive: false, children: rows.map((row, i) => {
+                                        const category = String(row[categoryKey] ?? i);
+                                        return (_jsx(RechartsPrimitive.Cell, { fill: sliceColor(category) }, `${i}-${category}`));
+                                    }) })] }) }), _jsxs("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: [_jsx("span", { className: "text-xl font-semibold tabular-nums", "data-donut-center": "", children: centerValue ?? formatCompactNumber(total) }), centerLabel && _jsx("span", { className: "text-[11px] text-muted-foreground", children: centerLabel })] })] }), showLegend && (_jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3", children: rows.map((row, i) => {
+                    const category = String(row[categoryKey] ?? i);
+                    const raw = Number(row[valueKey]);
+                    const value = Number.isFinite(raw) ? raw : 0;
+                    const pct = total > 0 ? (value / total) * 100 : 0;
+                    // A real slice must never read as absent: below 1% says so.
+                    const share = pct > 0 && pct < 1 ? "<1" : String(Math.round(pct));
+                    return (_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px]", style: { background: sliceColor(category) } }), _jsx("span", { children: sliceLabel(category) }), _jsxs("span", { className: "tabular-nums", children: [share, "%"] })] }, `${i}-${category}`));
+                }) }))] }));
+}

package/dist/components/chart/stat-card.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+/**
+ * The KPI tile: one number that matters, with its trend. Dashboards lead
+ * with a row of these — the primary figure top-left, everything else
+ * subordinate — so the card keeps its own hierarchy strict: label small and
+ * muted, value dominant, delta as a badge that carries the ONLY color.
+ */
+export interface StatCardProps extends Omit<React.ComponentProps<"div">, "children"> {
+    label: React.ReactNode;
+    /** The number itself. Strings render verbatim (pre-formatted values). */
+    value: number | string | null | undefined;
+    /** "compact" → 1.03M; "plain" → 1,029,562. Ignored for string values. */
+    format?: "compact" | "plain";
+    /**
+     * Percent change vs the comparison period, e.g. +12.4. Sign picks the
+     * badge color; `invertDelta` flips which sign reads as good (error rates,
+     * costs). Omit when there is no meaningful comparison — a fabricated
+     * trend is worse than none.
+     */
+    delta?: number;
+    /** What the delta compares against, e.g. "vs previous 30 days". */
+    deltaLabel?: React.ReactNode;
+    /** Lower-is-better metrics: a negative delta renders as good. */
+    invertDelta?: boolean;
+    /** Small print under the value (e.g. "63.1 MB across 11 files"). */
+    hint?: React.ReactNode;
+    icon?: React.ReactNode;
+    /** Render a loading skeleton instead of the value. */
+    loading?: boolean;
+}
+declare const StatCard: React.ForwardRefExoticComponent<Omit<StatCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { StatCard };

package/dist/components/chart/stat-card.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { formatCompactNumber } from "./chart-config.js";
+function formatValue(value, format) {
+    if (value === null || value === undefined)
+        return "–";
+    if (typeof value === "string")
+        return value;
+    // Both branches take the same guard: a NaN must not render as "NaN" in
+    // one format and "–" in the other.
+    if (!Number.isFinite(value))
+        return "–";
+    return format === "plain" ? value.toLocaleString() : formatCompactNumber(value);
+}
+const StatCard = React.forwardRef(({ label, value, format = "compact", delta, deltaLabel, invertDelta = false, hint, icon, loading = false, className, ...props }, ref) => {
+    // A delta of Infinity is the natural result of dividing by a zero
+    // previous period, and "▲ ∞%" styled as GOOD is worse than no badge.
+    const hasDelta = delta !== undefined && Number.isFinite(delta);
+    const direction = !hasDelta || delta === 0 ? "flat" : delta > 0 ? "up" : "down";
+    const good = delta !== undefined && delta !== 0 && (invertDelta ? delta < 0 : delta > 0);
+    return (_jsxs("div", { ref: ref, "data-stat-card": "", className: cn("rounded-xl border border-border bg-card p-4 text-card-foreground", className), ...props, children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "truncate text-xs font-medium text-muted-foreground", children: label }), icon && _jsx("span", { className: "shrink-0 text-muted-foreground [&_svg]:size-4", children: icon })] }), _jsxs("div", { className: "mt-2 flex items-baseline gap-2", children: [loading ? (_jsx("span", { className: "h-7 w-20 animate-pulse rounded-md bg-muted", "data-stat-skeleton": "" })) : (_jsx("span", { className: "text-2xl font-semibold tabular-nums tracking-tight", "data-stat-value": "", children: formatValue(value, format) })), !loading && hasDelta && (_jsxs("span", { "data-stat-delta": direction === "flat" ? "flat" : good ? "good" : "bad", className: cn("inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-[11px] font-medium tabular-nums", direction === "flat"
+                            ? "bg-muted text-muted-foreground"
+                            : good
+                                ? "bg-success/10 text-success"
+                                : "bg-destructive/10 text-destructive"), children: [direction !== "flat" && _jsx("span", { "aria-hidden": true, children: direction === "up" ? "▲" : "▼" }), _jsxs("span", { className: "sr-only", children: [direction === "flat" ? "unchanged" : direction, " "] }), Math.abs(delta).toLocaleString(undefined, { maximumFractionDigits: 1 }), "%"] }))] }), (hint || deltaLabel) && (_jsxs("div", { className: "mt-1 truncate text-[11px] text-muted-foreground", children: [hint, hint && deltaLabel ? " · " : null, deltaLabel] }))] }));
+});
+StatCard.displayName = "StatCard";
+export { StatCard };

package/dist/components/chart/time-series-chart.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { type ChartConfig } from "./chart-config.js";
+/**
+ * Change over time — the dashboard's workhorse. Declarative enough that a
+ * renderer (or the builder agent) states WHAT to plot and nothing else:
+ *
+ *   <TimeSeriesChart
+ *     data={rows} xKey="bucket"
+ *     config={{ chat: { label: "Chat" }, workflow: { label: "Workflows" } }}
+ *     kind="area" stacked
+ *   />
+ *
+ * Series colors come from the theme's categorical slots in config order;
+ * the hover layer (crosshair + tooltip) is on by default; one y-axis, ever.
+ */
+export interface TimeSeriesChartProps {
+    data: Array<Record<string, unknown>>;
+    /** Series semantics — keys must match data columns. Order = color order. */
+    config: ChartConfig;
+    /** The x column. Defaults to `"bucket"` (the usage APIs' column). */
+    xKey?: string;
+    /** Which config keys to draw. Defaults to every key in `config`. */
+    series?: string[];
+    kind?: "area" | "line" | "bar";
+    /**
+     * Stack the series (area/bar). A LINE chart has no stacked form —
+     * recharts' Line does not stack — so for `kind="line"` this prop is
+     * ignored; use `kind="area"` when the total matters.
+     */
+    stacked?: boolean;
+    /** Pixel height of the plot (the container spans full width). */
+    height?: number;
+    /** Fixed pixel width opts out of responsive measurement (tests, embeds). */
+    width?: number;
+    valueFormatter?: (value: number) => React.ReactNode;
+    /** X tick + tooltip header formatter. Defaults to bucket-aware dates. */
+    xTickFormatter?: (value: unknown) => string;
+    /** Defaults to true when more than one series is drawn. */
+    showLegend?: boolean;
+    className?: string;
+}
+export declare function TimeSeriesChart({ data, config, xKey, series, kind, stacked, height, width, valueFormatter, xTickFormatter, showLegend, className, }: TimeSeriesChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/chart/time-series-chart.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RechartsPrimitive from "recharts";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, compactAxisTick, } from "./chart.js";
+import { chartSlotColor, formatBucketLabel, seriesVar } from "./chart-config.js";
+export function TimeSeriesChart({ data, config, xKey = "bucket", series, kind = "area", stacked = false, height = 240, width, valueFormatter, xTickFormatter = formatBucketLabel, showLegend, className, }) {
+    const keys = series ?? Object.keys(config);
+    // A drawn key with no config takes the next slot AFTER the configured
+    // ones — the rendered index would collide with a configured series when
+    // an undeclared key is drawn first.
+    const configured = Object.keys(config);
+    const fallbackSlot = (key) => {
+        const declared = configured.indexOf(key);
+        if (declared !== -1)
+            return declared;
+        const undeclared = keys.filter((k) => !configured.includes(k)).indexOf(key);
+        return configured.length + Math.max(0, undeclared);
+    };
+    const legend = showLegend ?? keys.length > 1;
+    const fixed = width !== undefined;
+    const ChartRoot = kind === "line"
+        ? RechartsPrimitive.LineChart
+        : kind === "bar"
+            ? RechartsPrimitive.BarChart
+            : RechartsPrimitive.AreaChart;
+    return (_jsx(ChartContainer, { config: config, responsive: !fixed, className: className, style: fixed ? undefined : { height, aspectRatio: "auto" }, children: _jsxs(ChartRoot, { data: data, width: width, height: fixed ? height : undefined, margin: { top: 4, right: 8, bottom: 0, left: 0 }, children: [_jsx(RechartsPrimitive.CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(RechartsPrimitive.XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 24, tickFormatter: xTickFormatter }), _jsx(RechartsPrimitive.YAxis, { width: 48, tickLine: false, axisLine: false, tickFormatter: compactAxisTick }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { labelFormatter: xTickFormatter, valueFormatter: valueFormatter }) }), legend && _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), keys.map((key) => kind === "line" ? (_jsx(RechartsPrimitive.Line, { type: "monotone", dataKey: key, stroke: seriesVar(key, chartSlotColor(fallbackSlot(key))), strokeWidth: 2, dot: data.length <= 3 ? { r: 3 } : false, isAnimationActive: false }, key)) : kind === "bar" ? (_jsx(RechartsPrimitive.Bar, { dataKey: key, stackId: stacked ? "stack" : undefined, fill: seriesVar(key, chartSlotColor(fallbackSlot(key))), maxBarSize: 48, radius: stacked ? 0 : [4, 4, 0, 0], isAnimationActive: false }, key)) : (_jsx(RechartsPrimitive.Area, { type: "monotone", dataKey: key, stackId: stacked ? "stack" : undefined, stroke: seriesVar(key, chartSlotColor(fallbackSlot(key))), fill: seriesVar(key, chartSlotColor(fallbackSlot(key))), fillOpacity: 0.25, strokeWidth: 2, 
+                    // A one-or-two point window would otherwise draw a floating
+                    // speck; dots make sparse data read as sparse, not broken.
+                    dot: data.length <= 3 ? { r: 3 } : false, isAnimationActive: false }, key)))] }) }));
+}

package/dist/components/theme-runtime-provider.js

@@ -47,8 +47,8 @@ function currentlyOurs(root, name) {
     const written = rootThemeWritten.get(name);
     if (written === undefined)
         return true;
-    return (root.style.getPropertyValue(name) === written.value
-        && root.style.getPropertyPriority(name) === written.priority);
+    return (root.style.getPropertyValue(name) === written.value &&
+        root.style.getPropertyPriority(name) === written.priority);
 }
 function rememberWrite(root, name) {
     // Read back rather than storing what we passed: the browser normalises the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "license": "MIT",
   "description": "React agent UI core for Foundry UI — chat, composer, AG-UI adapter for assistant-ui, tool cards, panels, sidebar, theme runtime, and UI stores.",
   "keywords": [
@@ -27,6 +27,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./chart": {
+      "types": "./dist/chart.d.ts",
+      "import": "./dist/chart.js"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "files": [
@@ -38,16 +42,16 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router": "^7.0.0",
-    "@assistant-ui/react": "^0.15.1",
     "@ag-ui/client": "^0.0.52",
     "@ag-ui/core": "^0.0.52",
-    "zustand": "^5.0.0",
-    "lucide-react": ">=0.400.0",
+    "@assistant-ui/react": "^0.15.1",
     "@azure/msal-browser": "^5.0.0",
-    "@azure/msal-react": "^5.0.0"
+    "@azure/msal-react": "^5.0.0",
+    "lucide-react": ">=0.400.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.0.0",
+    "zustand": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "@azure/msal-browser": {
@@ -69,10 +73,11 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "react-markdown": "^10.0.0",
+    "recharts": "^3.10.1",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^3.5.0",
-    "@iloveagents/foundry-agent": "^0.22.0",
-    "@iloveagents/foundry-web-primitives": "^0.22.0"
+    "@iloveagents/foundry-agent": "^0.24.0",
+    "@iloveagents/foundry-web-primitives": "^0.24.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",