@timbal-ai/timbal-react 1.0.0 → 1.2.0

package/dist/{chunk-GLPOVYEA.esm.js → chunk-XDIY2WSL.esm.js}

@@ -15,10 +15,14 @@ import {
   studioIntegrationCardClass,
   studioTopbarPillHeightClass,
   toNum
-} from "./chunk-SNLXVG7H.esm.js";
+} from "./chunk-UY7AKWJL.esm.js";
+import {
+  Checkbox,
+  Skeleton
+} from "./chunk-FEYZUVBM.esm.js";
 import {
   PillSegmentedTabs
-} from "./chunk-AYHOVAMI.esm.js";
+} from "./chunk-NAMKO2MU.esm.js";
 import {
   Button,
   Dialog,
@@ -31,7 +35,7 @@ import {
   TimbalV2Button,
   cn,
   controlClass
-} from "./chunk-FOD67Z6G.esm.js";
+} from "./chunk-BMXFXLVV.esm.js";
 
 // src/design/ui-vocabulary.ts
 var SEMANTIC_COLOR_TOKENS = [
@@ -194,8 +198,8 @@ var HOUSE_RULES = [
   },
   {
     id: "no-data-gradient",
-    rule: "Gradients are reserved for chrome (composer, elevated surface, playground). Never on a data card, tile, or table.",
-    why: "Gradient stat cards are the canonical 'AI dashboard' look."
+    rule: "Gradients are reserved for chrome (composer, elevated surface, playground) and built-in chart/avatar fills \u2014 never on a data card shell, stat tile, or table row background.",
+    why: `Gradient stat cards are the canonical 'AI dashboard' look; SVG bar/pie fills and AvatarFallback variant="secondary" (Action button chrome) are kit-owned exceptions.`
   },
   {
     id: "compose-from-blocks",
@@ -241,12 +245,12 @@ Presentational groups \u2014 import from the package root, not from these paths:
 
 | Folder | Components |
 |--------|------------|
-| \`data/\` | \`MetricRow\`, \`MetricChartCard\`, \`MetricTile\`, \`DataTable\`, \`FilterBar\`, \`ChartPanel\` |
+| \`data/\` | \`MetricRow\`, \`MetricChartCard\`, \`MetricTile\`, \`DataTable\`, \`FilterBar\`, \`FilterField\`, \`ChartPanel\` |
 | \`integrations/\` | \`IntegrationCard\`, \`ConnectionRow\`, \`ConnectionRowList\`, \`IntegrationsEmptyState\`, \`PlanBadge\` |
 | \`settings/\` | \`SettingsSection\`, \`FieldRow\`, \`DangerZone\`, \`FloatingUnsavedChangesBar\` |
 | \`surfaces/\` | \`StatTile\`, \`InfoCard\`, \`ResourceCard\`, \`DescriptionList\`, \`ExpandableSection\`, \`StatusDot\`, \`StatusBadge\`, \`EmptyState\` |
 | \`layout/\` | \`AppShell\`, \`Page\`, \`Section\` |
-| \`charts\` (re-exported) | \`LineAreaChart\`, \`Sparkline\`, \`CHART_PALETTE\` |
+| \`charts\` (re-exported) | \`LineAreaChart\`, \`PieChart\`, \`RadialChart\`, \`RadarChart\`, \`Sparkline\`, \`CHART_PALETTE\` |
 
 Also re-exported: \`Button\`, \`TimbalChat\`, \`ChartArtifactView\`, \`APP_KIT_AGENT_INSTRUCTIONS\`.
 
@@ -261,7 +265,7 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 | **Context** | Do not show raw JSON context in the panel header; keep context in \`AppCopilotProvider\` only. |
 | **Theming** | Use semantic Tailwind tokens (\`bg-background\`, \`text-foreground\`, \`border-border\`, \`bg-elevated-from\`, etc.) from the host app's \`styles.css\`. To rebrand, **never hand-author OKLCH** \u2014 call \`createTimbalTheme({ brand })\` + \`themeToCss\`/\`applyTimbalTheme\`, or apply a catalog preset (\`TIMBAL_THEME_PRESETS\` / \`applyThemePreset\`). To offer styles, render \`ThemePresetGallery\`. See \`THEME_AGENT_INSTRUCTIONS\`. |
 | **Layout chrome** | \`Page\` \u2192 \`Section\` for main content hierarchy. \`AppShellTopbar\` for global actions (auth, theme). |
-| **Data** | Prefer \`DataTable\` with typed \`columns\` / \`rows\` / \`getRowKey\`; use \`ChartPanel\` with \`ChartArtifact\` for charts. |
+| **Data** | Prefer \`DataTable\` with typed \`columns\` / \`rows\` / \`getRowKey\`; use \`ChartPanel\` with a \`ChartArtifact\` for charts (set \`chartType\` + options \u2014 see the chart catalog). Chart colors come from the theme \`--chart-1..6\` tokens; pass \`series[].color\` / \`colors\` only to override, never raw hex on every series. |
 | **Modals** | Use \`AppConfirmDialog\` for destructive/export confirmations. |
 | **Metrics** | Overview KPIs \u2192 \`MetricRow\` or \`MetricChartCard\` (not four separate heavy cards). Values use **normal** font weight, not bold. |
 | **Integrations** | Catalog \u2192 \`IntegrationCard\` grid; connected list \u2192 \`ConnectionRow\` inside \`ConnectionRowList\`. Footer CTAs: \`Button variant="secondary"\`. |
@@ -304,11 +308,13 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 | \`Breadcrumbs\` | Trail: \`items: [{ label, href? }]\`. |
 | \`Button\` | Actions \u2014 \`variant="secondary"\` for catalog/secondary CTAs; \`variant="default"\` for primary. |
 | \`StatTile\` | Single KPI in its own card (grid of scattered stats). Prefer \`MetricRow\` for a unified overview strip. |
-| \`StatusBadge\` | Status pill: \`tone\` (\`success\`, \`warn\`, \u2026), children. |
-| \`FilterBar\` | Horizontal filter row (wraps \`SearchInput\`, buttons, etc.). |
+| \`StatusBadge\` | Status pill: \`tone\` (\`default\`\\|\`primary\`\\|\`success\`\\|\`warn\`\\|\`danger\`\\|\`muted\`), children. Use \`danger\` for critical/error severity. |
+| \`FilterBar\` | Horizontal filter row \u2014 bottom-aligns controls. Mix \`SearchInput\` with labeled \`FilterField\` + \`Select\` (or \`Field\` + \`Select\`); labels sit above, control baselines match. |
+| \`FilterField\` | Optional label wrapper for a filter control inside \`FilterBar\` (severity, status, \u2026). Omit \`label\` for search-only fields. |
 | \`SearchInput\` | Filter field with consistent app styling. |
-| \`DataTable\` | Sortable table: \`columns\`, \`rows\`, \`getRowKey\`, optional \`sort\` / \`onSortChange\`, \`emptyTitle\`, \`showRowCount\`, \`caption\` for screen readers. |
-| \`ChartPanel\` | Same shell as \`MetricChartCard\`: title row (\`px-4 pt-4\`), flush plot (\`pt-2\` only). Pass \`title\` + \`artifact\` (omit \`artifact.title\` to avoid duplicates) or \`children\`. |
+| \`DataTable\` | Sortable table: \`columns\`, \`rows\`, \`getRowKey\`, optional \`sort\` / \`onSortChange\`, \`emptyTitle\`, \`showRowCount\`, \`caption\`, \`truncate: true\` on columns with long text. **Scales:** \`pageSize\` (built-in client pager), \`selectable\` + \`onSelectionChange\` (checkbox column for bulk actions), \`loading\` (skeleton rows). \`onRowClick\` for row \u2192 detail (open a \`Sheet\`). |
+| \`Avatar\` / \`AvatarFallback\` | User initials: \`variant="secondary"\` (or \`primary\` / \`chart\` alias) on **both** \`Avatar\` and \`AvatarFallback\` \u2014 same chrome as catalog **Action** buttons (\`Button variant="secondary"\`: elevated gradient, \`border-border\`, \`shadow-card\`, \`text-foreground\`). Never dark primary CTA fill or raw \`bg-blue-600\`. |
+| \`ChartPanel\` | Same shell as \`MetricChartCard\`: title row (\`px-4 pt-4\`), flush plot (\`pt-2\` only) with **no axis ticks** \u2014 hover tooltips show category + value. Pass \`title\` + \`artifact\` (omit \`artifact.title\` to avoid duplicates) or \`children\`. \`loading\` renders a plot-height skeleton. |
 | \`FieldInput\`, \`FieldTextarea\`, \`FieldSelect\`, \`FieldSwitch\` | Settings-style forms with labels and hints. |
 | \`FormSection\` | Grouped form block. |
 | \`AppConfirmDialog\` | Confirm/cancel modal: \`open\`, \`onOpenChange\`, \`title\`, \`description\`, \`onConfirm\`. |
@@ -317,13 +323,18 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 
 #### Charts & metrics
 
+Charts run on **recharts** with shadcn \`ChartContainer\` / \`ChartTooltipContent\` chrome (see \`src/ui/chart.tsx\`). Series colors default to \`--chart-1..6\`; override those CSS tokens to rebrand every chart.
+
 | Component | Use for |
 |-----------|---------|
-| \`LineAreaChart\` | Chart engine. Props: \`data\`, \`xKey\`, \`series\`, \`variant\` (\`"area"\`), \`layout\` (\`"flush"\`), \`height\`, \`ariaLabel\`, \`formatX\`, \`formatValue\`. |
+| \`LineAreaChart\` | Cartesian engine (shadcn-style chrome). Bar fills use theme gradients automatically. Props: \`data\`, \`xKey\`, \`series: [{ dataKey, label?, color? }]\`, \`variant\` (\`area\`\\|\`line\`\\|\`bar\`), \`orientation\` (\`horizontal\` for horizontal bars), \`stacked\`, \`curve\`, \`dots\`, \`gridLines\`, \`tooltipIndicator\`, \`layout\` (\`flush\` \u2014 hides axes by default; category + values on hover tooltip), \`showXAxis\` / \`showYAxis\` to opt back in, \`clipTicks\` (truncates long axis labels when axes are on), \`height\`, \`showLegend\`, \`formatX\`, \`formatValue\`, \`ariaLabel\`. |
+| \`PieChart\` | Pie / donut: \`data\`, \`nameKey\`, \`dataKey\`, \`innerRadius\` (>0 = donut), \`centerValue\`/\`centerLabel\` (donut hole KPI), \`showLabels\`, \`colors\`. |
+| \`RadialChart\` | Concentric progress rings: \`data\`, \`nameKey\`, \`dataKey\`, \`maxValue\`, \`centerValue\`/\`centerLabel\`. Good for gauges / share-of-target. |
+| \`RadarChart\` | Spider chart (\u22653 axes): \`data\`, \`nameKey\`, \`series\`, \`maxValue\`. Compare a few metrics across entities. |
 | \`Sparkline\` | Tiny inline trend (table cells): \`data\`, \`color\`, \`area\`. |
 | \`MetricTile\` | Low-level KPI cell \u2014 prefer \`MetricRow\` / \`MetricChartCard\` instead of hand-wiring tiles. |
-| \`MetricRow\` | KPI strip in one elevated card (no chart). Props: \`metrics: [{ id, label, value, unit?, trend? }]\`, optional \`onMetricChange\`, \`metricsAriaLabel\`. |
-| \`MetricChartCard\` | KPI strip + flush chart; tile click swaps series. Same metrics shape + \`data\` per metric. Default chart height 300. |
+| \`MetricRow\` | KPI strip in one elevated card (no chart). Props: \`metrics: [{ id, label, value, unit?, trend?, trendTone? }]\`, optional \`onMetricChange\`, \`metricsAriaLabel\`, \`loading\` (skeleton tiles). |
+| \`MetricChartCard\` | KPI strip + flush chart; tile click swaps series. Same metrics shape + \`data\` per metric. Default chart height 300. \`loading\` renders skeleton tiles + chart. |
 
 #### Settings
 
@@ -368,6 +379,7 @@ Ready-made **section patterns** assembled from the components above. Each is a c
 - **Metrics row** \u2014 KPI strip in one elevated card. Compose \`MetricRow\` + \`MetricTile\`.
 - **Analytics card** \u2014 selectable KPI tiles driving a shared chart. Compose \`MetricChartCard\` + \`LineAreaChart\`.
 - **Charts panel** \u2014 embedded chart artifact. Compose \`ChartPanel\` + \`ChartArtifactView\`.
+- **Chart catalog** \u2014 every chart kind (stacked area, multi-line, step, bar, stacked + horizontal bar, donut, radial, radar) in \`ChartPanel\` cards. Pick a \`chartType\` + options on a \`ChartArtifact\`; theme via \`--chart-N\`.
 - **Table + filters** \u2014 \`FilterBar\` above a sortable \`DataTable\` (+ \`StatusBadge\` in cells).
 
 **Collections**
@@ -415,6 +427,7 @@ import {
   Button,
   DataTable,
   FilterBar,
+  FilterField,
 } from "@timbal-ai/timbal-react/app";
 \`\`\`
 
@@ -1313,8 +1326,8 @@ var metricCardShellClass = cn(
 );
 var metricCardHeaderClass = "flex items-start justify-between gap-3 px-4 pb-1 pt-3";
 var metricTilesRowClass = "grid w-full min-w-0";
-var metricChartRegionClass = "relative min-h-0 w-full border-t border-border/40 pt-2";
-var metricChartPlotRegionClass = "relative min-h-0 w-full border-t border-border/40 px-0 pt-5 pb-3";
+var metricChartRegionClass = "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 pt-2";
+var metricChartPlotRegionClass = "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 px-0 pt-5 pb-3";
 var metricCellDividerClass = "border-r border-border/40";
 var MetricCardHeader = ({
   title,
@@ -1504,7 +1517,7 @@ var appShellTopbarRowClass = cn(
   "flex w-full items-center justify-between gap-2"
 );
 var appShellTopbarStickyClass = cn(
-  "sticky top-0 z-20 shrink-0 bg-background pb-2",
+  "shrink-0 bg-background pb-2",
   appShellInsetTopClass
 );
 var appPageHeaderClass = cn(
@@ -1524,10 +1537,7 @@ var appStatTileClass = cn(
 );
 var appStatValueClass = "text-2xl font-normal tracking-tight text-foreground tabular-nums";
 var appStatLabelClass = "text-xs font-normal text-muted-foreground";
-var appFilterBarClass = cn(
-  "flex flex-wrap items-center gap-2",
-  studioTopbarPillHeightClass
-);
+var appFilterBarClass = "flex flex-wrap items-end gap-2";
 var appSearchInputClass = controlClass({}, "inline-flex items-center gap-2");
 var appBreadcrumbsClass = "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground";
 var appBreadcrumbLinkClass = "transition-colors hover:text-foreground";
@@ -1551,9 +1561,23 @@ function useAppShellChat() {
   return useContext(AppShellChatContext);
 }
 
+// src/app/layout/app-shell-nav-context.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var AppShellNavContext = createContext2(null);
+var AppShellNavProvider = AppShellNavContext.Provider;
+function useAppShellNav() {
+  return useContext2(AppShellNavContext) ?? {
+    open: false,
+    setOpen: () => {
+    },
+    toggle: () => {
+    }
+  };
+}
+
 // src/app/layout/AppShell.tsx
 import { motion, useReducedMotion } from "motion/react";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var floatingTriggerClass = cn(
   "aui-app-shell-chat-trigger-fixed fixed z-50 rounded-full px-5 py-2.5 text-sm font-medium shadow-card-elevated",
@@ -1620,11 +1644,29 @@ var AppShell = ({
   chatCollapsible = true,
   chatTriggerLabel = "Assistant",
   hideChatTrigger = false,
+  navOpen: navOpenProp,
+  defaultNavOpen = false,
+  onNavOpenChange,
   className,
   mainClassName
 }) => {
   const topbarContent = topbar ?? header;
   const hasChat = Boolean(chat);
+  const [uncontrolledNavOpen, setUncontrolledNavOpen] = useState(defaultNavOpen);
+  const isNavControlled = navOpenProp !== void 0;
+  const navOpen = isNavControlled ? navOpenProp : uncontrolledNavOpen;
+  const setNavOpen = useCallback(
+    (open) => {
+      if (!isNavControlled) setUncontrolledNavOpen(open);
+      onNavOpenChange?.(open);
+    },
+    [isNavControlled, onNavOpenChange]
+  );
+  const toggleNav = useCallback(() => setNavOpen(!navOpen), [navOpen, setNavOpen]);
+  const navControls = useMemo(
+    () => ({ open: navOpen, setOpen: setNavOpen, toggle: toggleNav }),
+    [navOpen, setNavOpen, toggleNav]
+  );
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultChatOpen);
   const isChatControlled = chatOpenProp !== void 0;
   const chatOpen = isChatControlled ? chatOpenProp : uncontrolledOpen;
@@ -1668,6 +1710,15 @@ var AppShell = ({
       style: studioChromeShellStyle,
       children: [
         sidebar,
+        sidebar && navOpen ? /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Close navigation",
+            onClick: () => setNavOpen(false),
+            className: "fixed inset-0 z-40 bg-foreground/30 backdrop-blur-[2px] md:hidden"
+          }
+        ) : null,
         shellBody,
         hasChat && chatOpen ? /* @__PURE__ */ jsx5(
           "div",
@@ -1695,8 +1746,9 @@ var AppShell = ({
       ]
     }
   ) });
+  const withNav = /* @__PURE__ */ jsx5(AppShellNavProvider, { value: navControls, children: tree });
   if (!hasChat) {
-    return tree;
+    return withNav;
   }
   return /* @__PURE__ */ jsx5(
     AppShellChatProvider,
@@ -1707,7 +1759,7 @@ var AppShell = ({
         toggle: toggleChat,
         collapsible: chatCollapsible
       },
-      children: tree
+      children: withNav
     }
   );
 };
@@ -1758,8 +1810,33 @@ var AppShellChatTrigger = ({
   );
 };
 
+// src/app/layout/AppShellSidebarTrigger.tsx
+import { MenuIcon } from "lucide-react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var AppShellSidebarTrigger = ({
+  label = "Open navigation",
+  className
+}) => {
+  const nav = useAppShellNav();
+  return /* @__PURE__ */ jsx8(
+    "button",
+    {
+      type: "button",
+      onClick: nav.toggle,
+      "aria-label": label,
+      "aria-expanded": nav.open,
+      className: cn(
+        "inline-flex size-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-foreground/[0.04] hover:text-foreground md:hidden",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10",
+        className
+      ),
+      children: /* @__PURE__ */ jsx8(MenuIcon, { className: "size-5", "aria-hidden": true })
+    }
+  );
+};
+
 // src/app/layout/PageHeader.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var PageHeader = ({
   title,
   description,
@@ -1768,15 +1845,15 @@ var PageHeader = ({
 }) => {
   return /* @__PURE__ */ jsxs7("header", { className: cn("aui-app-page-header", appPageHeaderClass, className), children: [
     /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx8("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
-      description ? /* @__PURE__ */ jsx8("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+      /* @__PURE__ */ jsx9("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
+      description ? /* @__PURE__ */ jsx9("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
     ] }),
-    actions ? /* @__PURE__ */ jsx8("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx9("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
   ] });
 };
 
 // src/app/layout/Page.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var Page = ({
   children,
   breadcrumbs,
@@ -1785,13 +1862,13 @@ var Page = ({
 }) => {
   return /* @__PURE__ */ jsxs8("div", { className: cn("aui-app-page", appPageColumnClass, className), children: [
     breadcrumbs,
-    /* @__PURE__ */ jsx9(PageHeader, { ...headerProps }),
+    /* @__PURE__ */ jsx10(PageHeader, { ...headerProps }),
     children
   ] });
 };
 
 // src/app/layout/Section.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var Section = ({
   title,
   description,
@@ -1799,29 +1876,29 @@ var Section = ({
   className
 }) => {
   return /* @__PURE__ */ jsxs9("section", { className: cn("aui-app-section", appSectionClass, className), children: [
-    title ? /* @__PURE__ */ jsx10("h2", { className: appSectionTitleClass, children: title }) : null,
-    description ? /* @__PURE__ */ jsx10("p", { className: appSectionDescriptionClass, children: description }) : null,
+    title ? /* @__PURE__ */ jsx11("h2", { className: appSectionTitleClass, children: title }) : null,
+    description ? /* @__PURE__ */ jsx11("p", { className: appSectionDescriptionClass, children: description }) : null,
     children
   ] });
 };
 
 // src/app/copilot/app-copilot-context.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var AppCopilotContext = createContext2(null);
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var AppCopilotContext = createContext3(null);
 var AppCopilotProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx11(AppCopilotContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx12(AppCopilotContext.Provider, { value, children });
 };
 function useAppCopilotContext() {
-  return useContext2(AppCopilotContext) ?? {};
+  return useContext3(AppCopilotContext) ?? {};
 }
 
 // src/app/chat/AppChatPanel.tsx
 import { XIcon } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var shellClass = "aui-app-chat-panel flex h-full min-h-0 flex-col overflow-hidden";
 var chromeClass = cn(
   "aui-app-chat-panel-chrome relative z-20 flex min-h-10 shrink-0 items-center justify-end px-2 pt-2"
@@ -1867,17 +1944,17 @@ var AppChatPanel = ({
 }) => {
   const shellChat = useAppShellChat();
   return /* @__PURE__ */ jsxs10("div", { className: cn(shellClass, className), children: [
-    shellChat?.collapsible ? /* @__PURE__ */ jsx12("div", { className: chromeClass, children: /* @__PURE__ */ jsx12(
+    shellChat?.collapsible ? /* @__PURE__ */ jsx13("div", { className: chromeClass, children: /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
         className: closeButtonClass,
         onClick: () => shellChat.setOpen(false),
         "aria-label": "Close assistant",
-        children: /* @__PURE__ */ jsx12(XIcon, { className: "size-4", "aria-hidden": true })
+        children: /* @__PURE__ */ jsx13(XIcon, { className: "size-4", "aria-hidden": true })
       }
     ) }) : null,
-    /* @__PURE__ */ jsx12("div", { className: bodyClass, children: /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13("div", { className: bodyClass, children: /* @__PURE__ */ jsx13(
       TimbalRuntimeProvider,
       {
         workforceId,
@@ -1887,7 +1964,7 @@ var AppChatPanel = ({
         attachmentsUploadUrl,
         attachmentsAccept,
         debug,
-        children: /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsx13(
           Thread,
           {
             variant: "panel",
@@ -1908,23 +1985,23 @@ var AppChatPanel = ({
 };
 
 // src/app/surfaces/SurfaceCard.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var SurfaceCard = ({ children, className }) => {
-  return /* @__PURE__ */ jsx13("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
+  return /* @__PURE__ */ jsx14("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
 };
 
 // src/app/surfaces/StatTile.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var StatTile = ({ label, value, hint, className }) => {
   return /* @__PURE__ */ jsxs11("div", { className: cn("aui-app-stat-tile", appStatTileClass, className), children: [
-    /* @__PURE__ */ jsx14("span", { className: appStatLabelClass, children: label }),
-    /* @__PURE__ */ jsx14("span", { className: appStatValueClass, children: value }),
-    hint ? /* @__PURE__ */ jsx14("span", { className: "text-xs text-muted-foreground", children: hint }) : null
+    /* @__PURE__ */ jsx15("span", { className: appStatLabelClass, children: label }),
+    /* @__PURE__ */ jsx15("span", { className: appStatValueClass, children: value }),
+    hint ? /* @__PURE__ */ jsx15("span", { className: "text-xs text-muted-foreground", children: hint }) : null
   ] });
 };
 
 // src/app/surfaces/EmptyState.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var EmptyState = ({
   title,
   description,
@@ -1932,19 +2009,20 @@ var EmptyState = ({
   className
 }) => {
   return /* @__PURE__ */ jsxs12("div", { className: cn("aui-app-empty-state", appEmptyStateClass, className), children: [
-    /* @__PURE__ */ jsx15("p", { className: appEmptyStateTitleClass, children: title }),
-    description ? /* @__PURE__ */ jsx15("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
+    /* @__PURE__ */ jsx16("p", { className: appEmptyStateTitleClass, children: title }),
+    description ? /* @__PURE__ */ jsx16("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
     action
   ] });
 };
 
 // src/app/surfaces/StatusBadge.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var statusBadgeToneClass = {
   default: "bg-muted text-foreground",
   primary: "bg-primary/10 text-primary",
   success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
   warn: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  danger: "bg-destructive/10 text-destructive",
   muted: "bg-muted/80 text-muted-foreground"
 };
 var StatusBadge = ({
@@ -1952,7 +2030,7 @@ var StatusBadge = ({
   tone = "default",
   className
 }) => {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "span",
     {
       className: cn(
@@ -1966,7 +2044,7 @@ var StatusBadge = ({
 };
 
 // src/app/surfaces/AppConfirmDialog.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var bodyClass2 = "flex flex-col gap-4 p-6";
 var titleClass = "pr-8";
 var actionsClass = "flex flex-wrap justify-end gap-2";
@@ -1981,15 +2059,15 @@ var AppConfirmDialog = ({
   destructive = false,
   className
 }) => {
-  return /* @__PURE__ */ jsx17(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx18(
     DialogContent,
     {
       className: cn("gap-0 p-0 sm:max-w-md", className),
       children: /* @__PURE__ */ jsxs13("div", { className: bodyClass2, children: [
-        /* @__PURE__ */ jsx17(DialogTitle, { className: titleClass, children: title }),
-        description ? /* @__PURE__ */ jsx17("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+        /* @__PURE__ */ jsx18(DialogTitle, { className: titleClass, children: title }),
+        description ? /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: description }) : null,
         /* @__PURE__ */ jsxs13("div", { className: actionsClass, children: [
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             TimbalV2Button,
             {
               type: "button",
@@ -1999,7 +2077,7 @@ var AppConfirmDialog = ({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             TimbalV2Button,
             {
               type: "button",
@@ -2019,7 +2097,7 @@ var AppConfirmDialog = ({
 };
 
 // src/app/surfaces/InfoCard.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var toneClass = {
   neutral: "border-border bg-muted/40",
   info: "border-primary/25 bg-primary/5",
@@ -2043,18 +2121,18 @@ var InfoCard = ({
       className
     ),
     children: [
-      icon ? /* @__PURE__ */ jsx18("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
+      icon ? /* @__PURE__ */ jsx19("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
       /* @__PURE__ */ jsxs14("div", { className: "min-w-0 flex-1", children: [
-        title ? /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
-        children ? /* @__PURE__ */ jsx18("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
+        title ? /* @__PURE__ */ jsx19("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
+        children ? /* @__PURE__ */ jsx19("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
       ] }),
-      action ? /* @__PURE__ */ jsx18("div", { className: "shrink-0", children: action }) : null
+      action ? /* @__PURE__ */ jsx19("div", { className: "shrink-0", children: action }) : null
     ]
   }
 );
 
 // src/app/surfaces/StatusDot.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var dotClass = {
   online: "bg-emerald-500",
   busy: "bg-amber-500",
@@ -2069,7 +2147,7 @@ var StatusDot = ({
   className
 }) => /* @__PURE__ */ jsxs15("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
   /* @__PURE__ */ jsxs15("span", { className: "relative flex size-2", children: [
-    pulse ? /* @__PURE__ */ jsx19(
+    pulse ? /* @__PURE__ */ jsx20(
       "span",
       {
         className: cn(
@@ -2078,18 +2156,18 @@ var StatusDot = ({
         )
       }
     ) : null,
-    /* @__PURE__ */ jsx19("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
+    /* @__PURE__ */ jsx20("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
   ] }),
-  label ? /* @__PURE__ */ jsx19("span", { className: "text-xs text-muted-foreground", children: label }) : null
+  label ? /* @__PURE__ */ jsx20("span", { className: "text-xs text-muted-foreground", children: label }) : null
 ] });
 
 // src/app/surfaces/DescriptionList.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var DescriptionList = ({
   items,
   stacked = false,
   className
-}) => /* @__PURE__ */ jsx20(
+}) => /* @__PURE__ */ jsx21(
   "dl",
   {
     className: cn(
@@ -2104,8 +2182,8 @@ var DescriptionList = ({
           stacked ? "flex flex-col gap-0.5" : "flex items-center justify-between gap-4"
         ),
         children: [
-          /* @__PURE__ */ jsx20("dt", { className: "text-sm text-muted-foreground", children: item.label }),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21("dt", { className: "text-sm text-muted-foreground", children: item.label }),
+          /* @__PURE__ */ jsx21(
             "dd",
             {
               className: cn(
@@ -2125,8 +2203,8 @@ var DescriptionList = ({
 // src/app/surfaces/ExpandableSection.tsx
 import { useId, useState as useState2 } from "react";
 import { AnimatePresence, motion as motion2, useReducedMotion as useReducedMotion2 } from "motion/react";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
-var Chevron = ({ open }) => /* @__PURE__ */ jsx21(
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var Chevron = ({ open }) => /* @__PURE__ */ jsx22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2140,7 +2218,7 @@ var Chevron = ({ open }) => /* @__PURE__ */ jsx21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": true,
-    children: /* @__PURE__ */ jsx21("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx22("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var ExpandableSection = ({
@@ -2172,15 +2250,15 @@ var ExpandableSection = ({
         className: "flex w-full items-center justify-between gap-3 bg-transparent px-4 py-3 text-left hover:bg-transparent active:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/10",
         children: [
           /* @__PURE__ */ jsxs17("span", { className: "flex min-w-0 items-center gap-3", children: [
-            icon ? /* @__PURE__ */ jsx21("span", { className: "flex size-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", children: icon }) : null,
-            /* @__PURE__ */ jsx21("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
-            count != null ? /* @__PURE__ */ jsx21("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }) : null
+            icon ? /* @__PURE__ */ jsx22("span", { className: "flex size-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", children: icon }) : null,
+            /* @__PURE__ */ jsx22("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
+            count != null ? /* @__PURE__ */ jsx22("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }) : null
           ] }),
-          /* @__PURE__ */ jsx21(Chevron, { open })
+          /* @__PURE__ */ jsx22(Chevron, { open })
         ]
       }
     ),
-    /* @__PURE__ */ jsx21(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx22(
       motion2.div,
       {
         id: panelId,
@@ -2189,7 +2267,7 @@ var ExpandableSection = ({
         exit: reduceMotion ? void 0 : { height: 0, opacity: 0 },
         transition: { duration: 0.2, ease: "easeOut" },
         className: "overflow-hidden",
-        children: /* @__PURE__ */ jsx21("div", { className: "bg-muted/20", children })
+        children: /* @__PURE__ */ jsx22("div", { className: "bg-muted/20", children })
       },
       "body"
     ) : null })
@@ -2197,7 +2275,7 @@ var ExpandableSection = ({
 };
 
 // src/app/surfaces/ResourceCard.tsx
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var resourceCardShellClass = cn(
   "flex min-h-[8.5rem] flex-col rounded-2xl p-4 text-left font-normal",
   TIMBAL_V2_ELEVATED_SURFACE
@@ -2224,33 +2302,33 @@ var ResourceCard = ({
 }) => {
   const body = /* @__PURE__ */ jsxs18(Fragment3, { children: [
     /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-3", children: [
-      media ? /* @__PURE__ */ jsx22("span", { className: mediaShellClass, children: media }) : null,
+      media ? /* @__PURE__ */ jsx23("span", { className: mediaShellClass, children: media }) : null,
       /* @__PURE__ */ jsxs18("div", { className: "min-w-0 flex-1 pt-0.5", children: [
-        /* @__PURE__ */ jsx22("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
-        subtitle ? /* @__PURE__ */ jsx22("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
+        /* @__PURE__ */ jsx23("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
+        subtitle ? /* @__PURE__ */ jsx23("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
       ] }),
-      badge ? /* @__PURE__ */ jsx22("span", { className: "shrink-0 pt-0.5", children: badge }) : null
+      badge ? /* @__PURE__ */ jsx23("span", { className: "shrink-0 pt-0.5", children: badge }) : null
     ] }),
     footer || action ? /* @__PURE__ */ jsxs18("div", { className: "mt-auto flex items-center justify-between gap-3 border-t border-border/40 pt-3 text-xs font-normal text-muted-foreground", children: [
-      /* @__PURE__ */ jsx22("span", { className: "min-w-0 truncate", children: footer }),
-      action ? /* @__PURE__ */ jsx22("span", { className: "shrink-0 opacity-80", children: action }) : null
+      /* @__PURE__ */ jsx23("span", { className: "min-w-0 truncate", children: footer }),
+      action ? /* @__PURE__ */ jsx23("span", { className: "shrink-0 opacity-80", children: action }) : null
     ] }) : null
   ] });
   if (onClick) {
-    return /* @__PURE__ */ jsx22("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
+    return /* @__PURE__ */ jsx23("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
   }
-  return /* @__PURE__ */ jsx22("article", { className: cn(resourceCardShellClass, className), children: body });
+  return /* @__PURE__ */ jsx23("article", { className: cn(resourceCardShellClass, className), children: body });
 };
 
 // src/app/settings/SettingsSection.tsx
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var SettingsSectionHeader = ({
   title,
   description,
   className
 }) => /* @__PURE__ */ jsxs19("div", { className: cn("flex flex-col", className), children: [
-  /* @__PURE__ */ jsx23("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
-  description ? /* @__PURE__ */ jsx23("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+  /* @__PURE__ */ jsx24("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
+  description ? /* @__PURE__ */ jsx24("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
 ] });
 var SettingsSection = ({
   title,
@@ -2269,17 +2347,17 @@ var SettingsSection = ({
     ),
     children: [
       /* @__PURE__ */ jsxs19("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx23("h2", { className: "text-sm font-medium text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx23("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
-        descriptionFooter ? /* @__PURE__ */ jsx23("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
+        /* @__PURE__ */ jsx24("h2", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx24("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
+        descriptionFooter ? /* @__PURE__ */ jsx24("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
       ] }),
-      /* @__PURE__ */ jsx23("div", { className: "min-w-0 space-y-3", children })
+      /* @__PURE__ */ jsx24("div", { className: "min-w-0 space-y-3", children })
     ]
   }
 );
 
 // src/app/settings/FieldRow.tsx
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var FieldRow = ({
   label,
   children,
@@ -2298,7 +2376,7 @@ var FieldRow = ({
         ),
         children: [
           /* @__PURE__ */ jsxs20("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx25(
               "label",
               {
                 htmlFor,
@@ -2306,17 +2384,17 @@ var FieldRow = ({
                 children: label
               }
             ),
-            description ? /* @__PURE__ */ jsx24("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
+            description ? /* @__PURE__ */ jsx25("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
           ] }),
-          /* @__PURE__ */ jsx24("div", { className: "shrink-0", children })
+          /* @__PURE__ */ jsx25("div", { className: "shrink-0", children })
         ]
       }
     );
   }
   return /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-col gap-1.5", className), children: [
-    /* @__PURE__ */ jsx24("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsx25("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
     children,
-    description ? /* @__PURE__ */ jsx24("p", { className: "text-xs text-muted-foreground", children: description }) : null
+    description ? /* @__PURE__ */ jsx25("p", { className: "text-xs text-muted-foreground", children: description }) : null
   ] });
 };
 
@@ -2324,7 +2402,7 @@ var FieldRow = ({
 import { useEffect, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import { AnimatePresence as AnimatePresence2, motion as motion3, useReducedMotion as useReducedMotion3 } from "motion/react";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 var FloatingUnsavedChangesBar = ({
   visible,
   message = "Unsaved changes",
@@ -2342,7 +2420,7 @@ var FloatingUnsavedChangesBar = ({
   useEffect(() => setMounted(true), []);
   if (!mounted || typeof document === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx25(AnimatePresence2, { children: visible ? /* @__PURE__ */ jsx25("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsx26(AnimatePresence2, { children: visible ? /* @__PURE__ */ jsx26("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ jsxs21(
       motion3.div,
       {
         role: "region",
@@ -2356,10 +2434,10 @@ var FloatingUnsavedChangesBar = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: message }),
+          /* @__PURE__ */ jsx26("span", { className: "text-sm text-muted-foreground", children: message }),
           /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx25(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
-            /* @__PURE__ */ jsx25(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
+            /* @__PURE__ */ jsx26(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
+            /* @__PURE__ */ jsx26(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
           ] })
         ]
       }
@@ -2369,7 +2447,7 @@ var FloatingUnsavedChangesBar = ({
 };
 
 // src/app/settings/DangerZone.tsx
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 var DangerZoneAction = ({
   title,
   description,
@@ -2384,10 +2462,10 @@ var DangerZoneAction = ({
     ),
     children: [
       /* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx26("p", { className: "text-sm font-medium text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx26("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+        /* @__PURE__ */ jsx27("p", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx27("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx26("div", { className: "shrink-0", children: action })
+      /* @__PURE__ */ jsx27("div", { className: "shrink-0", children: action })
     ]
   }
 );
@@ -2405,17 +2483,17 @@ var DangerZone = ({
     ),
     children: [
       (title || description) && /* @__PURE__ */ jsxs22("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
-        title ? /* @__PURE__ */ jsx26("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
-        description ? /* @__PURE__ */ jsx26("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+        title ? /* @__PURE__ */ jsx27("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
+        description ? /* @__PURE__ */ jsx27("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx26("div", { className: "divide-y divide-border bg-card", children })
+      /* @__PURE__ */ jsx27("div", { className: "divide-y divide-border bg-card", children })
     ]
   }
 );
 
 // src/app/integrations/IntegrationCard.tsx
 import { useId as useId2 } from "react";
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var INTEGRATION_CATALOG_CARD_HEIGHT_CLASS = "h-[12.25rem] min-h-[12.25rem] max-h-[12.25rem]";
 var statusLabel = {
   available: null,
@@ -2458,10 +2536,10 @@ var IntegrationCard = ({
   const dimmed = status === "disabled" || locked;
   const body = /* @__PURE__ */ jsxs23("div", { className: "flex h-full min-h-0 flex-col", children: [
     /* @__PURE__ */ jsxs23("div", { className: "flex shrink-0 items-start gap-3 pr-2", children: [
-      logo ? /* @__PURE__ */ jsx27("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
-      /* @__PURE__ */ jsx27("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ jsxs23("div", { className: "flex items-start justify-between gap-2", children: [
+      logo ? /* @__PURE__ */ jsx28("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
+      /* @__PURE__ */ jsx28("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ jsxs23("div", { className: "flex items-start justify-between gap-2", children: [
         /* @__PURE__ */ jsxs23("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "h4",
             {
               id: onClick && !action ? void 0 : titleId,
@@ -2469,12 +2547,12 @@ var IntegrationCard = ({
               children: name
             }
           ),
-          statusLabel[status] ? /* @__PURE__ */ jsx27("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
+          statusLabel[status] ? /* @__PURE__ */ jsx28("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
         ] }),
-        badge ? /* @__PURE__ */ jsx27("span", { className: "shrink-0", children: badge }) : null
+        badge ? /* @__PURE__ */ jsx28("span", { className: "shrink-0", children: badge }) : null
       ] }) })
     ] }),
-    description ? /* @__PURE__ */ jsx27(
+    description ? /* @__PURE__ */ jsx28(
       "p",
       {
         className: cn(
@@ -2485,8 +2563,8 @@ var IntegrationCard = ({
       }
     ) : null,
     action ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
-      /* @__PURE__ */ jsx27("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
-      /* @__PURE__ */ jsx27("div", { className: "relative mt-3 shrink-0", children: action })
+      /* @__PURE__ */ jsx28("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
+      /* @__PURE__ */ jsx28("div", { className: "relative mt-3 shrink-0", children: action })
     ] }) : null
   ] });
   const shellClass3 = cn(
@@ -2496,7 +2574,7 @@ var IntegrationCard = ({
     className
   );
   if (onClick && !action) {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       "button",
       {
         type: "button",
@@ -2513,12 +2591,12 @@ var IntegrationCard = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx27("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
+  return /* @__PURE__ */ jsx28("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
 };
 
 // src/app/integrations/IntegrationsEmptyState.tsx
 import { useId as useId3 } from "react";
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 var IntegrationsEmptyState = ({
   title = "No integrations yet",
   description = "Connect a provider to start syncing data and powering your workforce.",
@@ -2537,7 +2615,7 @@ var IntegrationsEmptyState = ({
       ),
       "aria-labelledby": titleId,
       children: [
-        icon ? /* @__PURE__ */ jsx28(
+        icon ? /* @__PURE__ */ jsx29(
           "span",
           {
             className: cn(
@@ -2549,21 +2627,21 @@ var IntegrationsEmptyState = ({
             children: icon
           }
         ) : null,
-        /* @__PURE__ */ jsx28("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx28("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
-        action ? /* @__PURE__ */ jsx28("div", { className: "mt-1", children: action }) : null
+        /* @__PURE__ */ jsx29("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx29("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
+        action ? /* @__PURE__ */ jsx29("div", { className: "mt-1", children: action }) : null
       ]
     }
   );
 };
 
 // src/app/integrations/PlanBadge.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var planBadgeClass = "inline-flex h-5 max-w-full shrink-0 items-center rounded-md border border-border bg-muted/90 px-2 text-[11px] font-normal text-muted-foreground dark:border-white/10 dark:bg-white/5 dark:text-muted-foreground";
-var PlanBadge = ({ children, className }) => /* @__PURE__ */ jsx29("span", { className: cn(planBadgeClass, className), children });
+var PlanBadge = ({ children, className }) => /* @__PURE__ */ jsx30("span", { className: cn(planBadgeClass, className), children });
 
 // src/app/integrations/ConnectionRow.tsx
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var logoShellClass2 = cn(
   "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg",
   TIMBAL_V2_LOGO_TILE
@@ -2579,13 +2657,13 @@ var ConnectionRow = ({
   className
 }) => {
   const inner = /* @__PURE__ */ jsxs25(Fragment5, { children: [
-    logo ? /* @__PURE__ */ jsx30("span", { className: logoShellClass2, children: logo }) : null,
+    logo ? /* @__PURE__ */ jsx31("span", { className: logoShellClass2, children: logo }) : null,
     /* @__PURE__ */ jsxs25("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx30("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
-      meta ? /* @__PURE__ */ jsx30("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
+      /* @__PURE__ */ jsx31("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
+      meta ? /* @__PURE__ */ jsx31("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
     ] }),
-    badge ? /* @__PURE__ */ jsx30("span", { className: "shrink-0", children: badge }) : null,
-    action ? /* @__PURE__ */ jsx30("span", { className: "shrink-0", children: action }) : null
+    badge ? /* @__PURE__ */ jsx31("span", { className: "shrink-0", children: badge }) : null,
+    action ? /* @__PURE__ */ jsx31("span", { className: "shrink-0", children: action }) : null
   ] });
   const rowClass2 = cn(
     "flex w-full items-center gap-3 px-4 py-3 text-left",
@@ -2593,7 +2671,7 @@ var ConnectionRow = ({
     className
   );
   if (onClick) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       "button",
       {
         type: "button",
@@ -2605,7 +2683,7 @@ var ConnectionRow = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx30("div", { role: "listitem", className: rowClass2, children: inner });
+  return /* @__PURE__ */ jsx31("div", { role: "listitem", className: rowClass2, children: inner });
 };
 var connectionRowListClass = cn(
   "overflow-hidden rounded-2xl",
@@ -2613,12 +2691,12 @@ var connectionRowListClass = cn(
 );
 
 // src/app/integrations/ConnectionRowList.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var ConnectionRowList = ({
   children,
   "aria-label": ariaLabel = "Connected integrations",
   className
-}) => /* @__PURE__ */ jsx31(
+}) => /* @__PURE__ */ jsx32(
   "div",
   {
     role: "list",
@@ -2629,7 +2707,7 @@ var ConnectionRowList = ({
 );
 
 // src/app/navigation/SubNav.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var SubNav = ({
   items,
   activeId,
@@ -2638,7 +2716,7 @@ var SubNav = ({
   "aria-label": ariaLabel = "Section navigation",
   layoutId
 }) => {
-  return /* @__PURE__ */ jsx32("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx33(
     PillSegmentedTabs,
     {
       value: activeId,
@@ -2652,13 +2730,13 @@ var SubNav = ({
 };
 
 // src/app/navigation/Breadcrumbs.tsx
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 var Breadcrumbs = ({ items, className }) => {
-  return /* @__PURE__ */ jsx33("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx33("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx34("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx34("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs26("li", { className: "inline-flex items-center gap-1.5", children: [
-      index > 0 ? /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
-      isLast ? /* @__PURE__ */ jsx33("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx33("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ jsx33(
+      index > 0 ? /* @__PURE__ */ jsx34("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
+      isLast ? /* @__PURE__ */ jsx34("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx34("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ jsx34(
         "button",
         {
           type: "button",
@@ -2672,7 +2750,7 @@ var Breadcrumbs = ({ items, className }) => {
 };
 
 // src/app/forms/Field.tsx
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 var Field = ({
   label,
   hint,
@@ -2682,10 +2760,10 @@ var Field = ({
   htmlFor
 }) => {
   return /* @__PURE__ */ jsxs27("div", { className: cn("aui-app-field", appFieldClass, className), children: [
-    /* @__PURE__ */ jsx34("label", { className: appFieldLabelClass, htmlFor, children: label }),
+    /* @__PURE__ */ jsx35("label", { className: appFieldLabelClass, htmlFor, children: label }),
     children,
-    hint && !error ? /* @__PURE__ */ jsx34("p", { className: appFieldHintClass, children: hint }) : null,
-    error ? /* @__PURE__ */ jsx34("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
+    hint && !error ? /* @__PURE__ */ jsx35("p", { className: appFieldHintClass, children: hint }) : null,
+    error ? /* @__PURE__ */ jsx35("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
   ] });
 };
 var FieldInput = ({
@@ -2698,7 +2776,7 @@ var FieldInput = ({
   ...inputProps
 }) => {
   const inputId = id ?? inputProps.name;
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     Field,
     {
       label,
@@ -2706,7 +2784,7 @@ var FieldInput = ({
       error,
       htmlFor: inputId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx35(
         "input",
         {
           id: inputId,
@@ -2720,7 +2798,7 @@ var FieldInput = ({
 };
 
 // src/app/forms/FieldTextarea.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var textareaClass = cn(
   appInputClass,
   "min-h-[5.5rem] resize-y py-2.5 leading-relaxed"
@@ -2735,7 +2813,7 @@ var FieldTextarea = ({
   ...props
 }) => {
   const textareaId = id ?? props.name;
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     Field,
     {
       label,
@@ -2743,7 +2821,7 @@ var FieldTextarea = ({
       error,
       htmlFor: textareaId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsx36(
         "textarea",
         {
           id: textareaId,
@@ -2758,7 +2836,7 @@ var FieldTextarea = ({
 
 // src/app/forms/FieldSelect.tsx
 import { ChevronDownIcon } from "lucide-react";
-import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
 var selectWrapClass = "relative";
 var selectClass = cn(
   appInputClass,
@@ -2775,7 +2853,7 @@ var FieldSelect = ({
   ...props
 }) => {
   const selectId = id ?? props.name;
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Field,
     {
       label,
@@ -2784,7 +2862,7 @@ var FieldSelect = ({
       htmlFor: selectId,
       className: fieldClassName,
       children: /* @__PURE__ */ jsxs28("div", { className: selectWrapClass, children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "select",
           {
             id: selectId,
@@ -2794,7 +2872,7 @@ var FieldSelect = ({
             children
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           ChevronDownIcon,
           {
             className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground",
@@ -2807,7 +2885,7 @@ var FieldSelect = ({
 };
 
 // src/app/forms/FieldSwitch.tsx
-import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
 var trackClass = cn(
   "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-[background,box-shadow,border-color] duration-200",
   "peer-focus-visible:ring-2 peer-focus-visible:ring-foreground/10",
@@ -2838,7 +2916,7 @@ var FieldSwitch = ({
       htmlFor: inputId,
       children: [
         /* @__PURE__ */ jsxs29("span", { className: "relative mt-0.5", children: [
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             "input",
             {
               id: inputId,
@@ -2848,11 +2926,11 @@ var FieldSwitch = ({
               ...props
             }
           ),
-          /* @__PURE__ */ jsx37("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ jsx37("span", { className: thumbClass }) })
+          /* @__PURE__ */ jsx38("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ jsx38("span", { className: thumbClass }) })
         ] }),
         /* @__PURE__ */ jsxs29("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx37("span", { className: "text-sm font-medium text-foreground", children: label }),
-          description ? /* @__PURE__ */ jsx37("span", { className: "text-xs text-muted-foreground", children: description }) : null
+          /* @__PURE__ */ jsx38("span", { className: "text-sm font-medium text-foreground", children: label }),
+          description ? /* @__PURE__ */ jsx38("span", { className: "text-xs text-muted-foreground", children: description }) : null
         ] })
       ]
     }
@@ -2861,7 +2939,7 @@ var FieldSwitch = ({
 
 // src/app/forms/SearchInput.tsx
 import { SearchIcon } from "lucide-react";
-import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 var SearchInput = ({
   className,
   placeholder = "Search\u2026",
@@ -2876,8 +2954,8 @@ var SearchInput = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx38(SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx39(
           "input",
           {
             type: "search",
@@ -2892,18 +2970,18 @@ var SearchInput = ({
 };
 
 // src/app/forms/FormSection.tsx
-import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
 var FormSection = ({ title, children, className }) => {
   return /* @__PURE__ */ jsxs31("fieldset", { className: cn("aui-app-form-section", appSectionClass, "border-0 p-0", className), children: [
-    title ? /* @__PURE__ */ jsx39("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
-    /* @__PURE__ */ jsx39("div", { className: "flex flex-col gap-4", children })
+    title ? /* @__PURE__ */ jsx40("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
+    /* @__PURE__ */ jsx40("div", { className: "flex flex-col gap-4", children })
   ] });
 };
 
 // src/app/data/FilterBar.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var FilterBar = ({ children, className }) => {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       className: cn("aui-app-filter-bar", appFilterBarClass, className),
@@ -2914,20 +2992,41 @@ var FilterBar = ({ children, className }) => {
   );
 };
 
+// src/app/data/FilterField.tsx
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+var FilterField = ({
+  label,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs32("div", { className: cn("aui-app-filter-field", appFieldClass, className), children: [
+    label ? /* @__PURE__ */ jsx42("span", { className: appFieldLabelClass, children: label }) : null,
+    children
+  ] });
+};
+
 // src/app/data/DataTable.tsx
-import { useMemo, useState as useState4 } from "react";
-import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState4 } from "react";
+import {
+  ArrowDownIcon,
+  ArrowUpDownIcon,
+  ArrowUpIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon
+} from "lucide-react";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var shellClass2 = "overflow-hidden rounded-xl border border-border bg-card shadow-card";
 var tableClass = "w-full border-collapse bg-transparent text-sm";
 var headCellClass = "border-b border-border/60 bg-transparent px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide text-muted-foreground";
 var bodyCellClass = "border-b border-border/40 bg-transparent px-4 py-2.5 text-foreground";
-var rowClass = "bg-transparent transition-colors hover:bg-foreground/[0.03] data-[clickable=true]:cursor-pointer";
+var rowClass = "bg-transparent transition-colors hover:bg-foreground/[0.03] data-[clickable=true]:cursor-pointer data-[selected=true]:bg-primary/[0.04]";
 var footCellClass = "border-t border-border/60 bg-transparent px-4 py-2.5 text-xs text-muted-foreground";
 var footInnerClass = "flex flex-wrap items-center gap-2";
 var emptyCellClass = "bg-transparent px-4 py-10 text-center text-sm text-muted-foreground";
 var sortButtonClass = "group inline-flex min-w-0 items-center gap-1.5 rounded-md -mx-1 px-1 py-0.5 text-left font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10";
 var stickyHeadClass = "sticky top-0 z-[1] bg-card/95 shadow-[0_1px_0_0_hsl(var(--border)/0.5)] backdrop-blur-sm [&_th]:bg-card/95";
+var selectCellClass = "w-10 px-4 py-2.5 align-middle";
+var pagerButtonClass = "inline-flex size-7 items-center justify-center rounded-md border border-border bg-transparent text-muted-foreground transition-colors hover:bg-foreground/[0.04] hover:text-foreground disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10";
 var alignClass = {
   left: "text-left",
   center: "text-center",
@@ -2957,12 +3056,12 @@ function SortIndicator({
 }) {
   const iconClass = "size-3.5 shrink-0 opacity-60 group-hover:opacity-100";
   if (!active) {
-    return /* @__PURE__ */ jsx41(ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ jsx43(ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
   }
   if (direction === "desc") {
-    return /* @__PURE__ */ jsx41(ArrowDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ jsx43(ArrowDownIcon, { className: iconClass, "aria-hidden": true });
   }
-  return /* @__PURE__ */ jsx41(ArrowUpIcon, { className: iconClass, "aria-hidden": true });
+  return /* @__PURE__ */ jsx43(ArrowUpIcon, { className: iconClass, "aria-hidden": true });
 }
 function DataTable({
   columns,
@@ -2981,7 +3080,18 @@ function DataTable({
   onRowClick,
   stickyHeader = false,
   dense = false,
-  caption
+  caption,
+  loading = false,
+  loadingRows,
+  selectable = false,
+  selectedKeys: selectedKeysProp,
+  defaultSelectedKeys,
+  onSelectionChange,
+  selectAllAriaLabel = "Select all rows",
+  pageSize,
+  pageIndex: pageIndexProp,
+  defaultPageIndex = 0,
+  onPageChange
 }) {
   const [uncontrolledSort, setUncontrolledSort] = useState4(
     defaultSort
@@ -2994,7 +3104,28 @@ function DataTable({
     }
     onSortChange?.(next);
   };
-  const sortedRows = useMemo(() => {
+  const [uncontrolledSelected, setUncontrolledSelected] = useState4(
+    defaultSelectedKeys ?? []
+  );
+  const isSelectionControlled = selectedKeysProp !== void 0;
+  const selectedKeys = isSelectionControlled ? selectedKeysProp : uncontrolledSelected;
+  const selectedSet = useMemo2(() => new Set(selectedKeys), [selectedKeys]);
+  const setSelected = (next) => {
+    if (!isSelectionControlled) {
+      setUncontrolledSelected(next);
+    }
+    onSelectionChange?.(next);
+  };
+  const [uncontrolledPage, setUncontrolledPage] = useState4(defaultPageIndex);
+  const isPageControlled = pageIndexProp !== void 0;
+  const rawPageIndex = isPageControlled ? pageIndexProp : uncontrolledPage;
+  const setPage = (next) => {
+    if (!isPageControlled) {
+      setUncontrolledPage(next);
+    }
+    onPageChange?.(next);
+  };
+  const sortedRows = useMemo2(() => {
     if (!sort) return rows;
     const column = columns.find((col) => col.id === sort.columnId);
     if (!column?.sortable) return rows;
@@ -3010,89 +3141,219 @@ function DataTable({
       return sort.direction === "asc" ? cmp : -cmp;
     });
   }, [columns, rows, sort]);
+  const paginated = typeof pageSize === "number" && pageSize > 0;
+  const pageCount = paginated ? Math.max(1, Math.ceil(sortedRows.length / pageSize)) : 1;
+  const pageIndex = Math.min(Math.max(0, rawPageIndex), pageCount - 1);
+  useEffect2(() => {
+    if (!paginated || isPageControlled) return;
+    if (uncontrolledPage > pageCount - 1) {
+      setUncontrolledPage(pageCount - 1);
+    }
+  }, [paginated, isPageControlled, uncontrolledPage, pageCount]);
+  const visibleRows = useMemo2(() => {
+    if (!paginated) return sortedRows;
+    const start = pageIndex * pageSize;
+    return sortedRows.slice(start, start + pageSize);
+  }, [paginated, sortedRows, pageIndex, pageSize]);
   const cellPad = dense ? "px-3 py-2" : void 0;
   const headPad = dense ? "px-3 py-2" : void 0;
-  if (rows.length === 0 && emptyMode === "replace") {
-    return /* @__PURE__ */ jsx41(EmptyState, { title: emptyTitle, description: emptyDescription, className });
+  const colSpan = columns.length + (selectable ? 1 : 0);
+  if (!loading && rows.length === 0 && emptyMode === "replace") {
+    return /* @__PURE__ */ jsx43(EmptyState, { title: emptyTitle, description: emptyDescription, className });
   }
+  const allKeys = sortedRows.map(getRowKey);
+  const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));
+  const headerCheckedState = allSelected ? true : selectedSet.size > 0 ? "indeterminate" : false;
+  const toggleAll = () => {
+    if (allSelected) {
+      setSelected([]);
+    } else {
+      setSelected(allKeys);
+    }
+  };
+  const toggleRow = (key) => {
+    const next = new Set(selectedSet);
+    if (next.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+    setSelected([...next]);
+  };
   const rowCountText = rowCountLabel?.(sortedRows.length) ?? `${sortedRows.length} row${sortedRows.length === 1 ? "" : "s"}`;
-  const hasFoot = Boolean((showRowCount || footer) && sortedRows.length > 0);
-  return /* @__PURE__ */ jsx41("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ jsx41("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs32("table", { className: tableClass, children: [
-    caption ? /* @__PURE__ */ jsx41("caption", { className: "sr-only", children: caption }) : null,
-    /* @__PURE__ */ jsx41("thead", { className: cn(stickyHeader && stickyHeadClass), children: /* @__PURE__ */ jsx41("tr", { children: columns.map((col) => {
-      const isSorted = sort?.columnId === col.id;
-      const ariaSort = col.sortable ? isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none" : void 0;
-      const headerContent = col.sortable ? /* @__PURE__ */ jsxs32(
-        "button",
+  const hasPager = paginated && !loading && sortedRows.length > 0;
+  const hasFoot = (showRowCount || footer || hasPager) && (loading || sortedRows.length > 0);
+  const skeletonCount = loadingRows ?? pageSize ?? 5;
+  return /* @__PURE__ */ jsx43("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ jsx43("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs33("table", { className: tableClass, children: [
+    caption ? /* @__PURE__ */ jsx43("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ jsx43("thead", { className: cn(stickyHeader && stickyHeadClass), children: /* @__PURE__ */ jsxs33("tr", { children: [
+      selectable ? /* @__PURE__ */ jsx43("th", { scope: "col", className: cn(selectCellClass, headPad), children: /* @__PURE__ */ jsx43(
+        Checkbox,
         {
-          type: "button",
-          className: sortButtonClass,
-          onClick: () => setSort(nextSort(sort, col.id)),
-          children: [
-            /* @__PURE__ */ jsx41("span", { className: "truncate", children: col.header }),
-            /* @__PURE__ */ jsx41(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
-          ]
+          checked: headerCheckedState,
+          onCheckedChange: toggleAll,
+          "aria-label": selectAllAriaLabel,
+          disabled: loading || allKeys.length === 0
         }
-      ) : col.header;
-      return /* @__PURE__ */ jsx41(
-        "th",
-        {
-          scope: "col",
-          "aria-sort": ariaSort,
-          className: cn(
-            headCellClass,
-            headPad,
-            col.align && alignClass[col.align],
-            col.headerClassName
-          ),
-          children: headerContent
-        },
-        col.id
-      );
-    }) }) }),
-    /* @__PURE__ */ jsx41("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: sortedRows.length === 0 ? /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41("td", { colSpan: columns.length, className: emptyCellClass, children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col items-center gap-1", children: [
-      /* @__PURE__ */ jsx41("p", { className: "font-medium text-foreground", children: emptyTitle }),
-      emptyDescription ? /* @__PURE__ */ jsx41("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
-    ] }) }) }) : sortedRows.map((row) => /* @__PURE__ */ jsx41(
-      "tr",
-      {
-        className: rowClass,
-        "data-clickable": onRowClick ? "true" : void 0,
-        onClick: onRowClick ? () => onRowClick(row) : void 0,
-        onKeyDown: onRowClick ? (event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            onRowClick(row);
+      ) }) : null,
+      columns.map((col) => {
+        const isSorted = sort?.columnId === col.id;
+        const ariaSort = col.sortable ? isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none" : void 0;
+        const headerContent = col.sortable ? /* @__PURE__ */ jsxs33(
+          "button",
+          {
+            type: "button",
+            className: sortButtonClass,
+            onClick: () => setSort(nextSort(sort, col.id)),
+            children: [
+              /* @__PURE__ */ jsx43("span", { className: "truncate", children: col.header }),
+              /* @__PURE__ */ jsx43(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
+            ]
           }
-        } : void 0,
-        tabIndex: onRowClick ? 0 : void 0,
-        role: onRowClick ? "button" : void 0,
-        children: columns.map((col) => /* @__PURE__ */ jsx41(
-          "td",
+        ) : col.header;
+        return /* @__PURE__ */ jsx43(
+          "th",
           {
+            scope: "col",
+            "aria-sort": ariaSort,
             className: cn(
-              bodyCellClass,
-              cellPad,
+              headCellClass,
+              headPad,
               col.align && alignClass[col.align],
-              col.className
+              col.headerClassName
             ),
-            children: col.cell(row)
+            children: headerContent
           },
           col.id
-        ))
-      },
-      getRowKey(row)
-    )) }),
-    hasFoot ? /* @__PURE__ */ jsx41("tfoot", { children: /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41("td", { colSpan: columns.length, className: footCellClass, children: /* @__PURE__ */ jsxs32(
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ jsx43("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: loading ? Array.from({ length: skeletonCount }).map((_, rowIdx) => /* @__PURE__ */ jsxs33("tr", { className: rowClass, "aria-hidden": true, children: [
+      selectable ? /* @__PURE__ */ jsx43("td", { className: cn(selectCellClass, cellPad), children: /* @__PURE__ */ jsx43(Skeleton, { className: "size-4 rounded-[4px]" }) }) : null,
+      columns.map((col) => /* @__PURE__ */ jsx43(
+        "td",
+        {
+          className: cn(
+            bodyCellClass,
+            cellPad,
+            col.align && alignClass[col.align],
+            col.className
+          ),
+          children: /* @__PURE__ */ jsx43(Skeleton, { className: "h-4 w-[60%]" })
+        },
+        col.id
+      ))
+    ] }, `skeleton-${rowIdx}`)) : visibleRows.length === 0 ? /* @__PURE__ */ jsx43("tr", { children: /* @__PURE__ */ jsx43("td", { colSpan, className: emptyCellClass, children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx43("p", { className: "font-medium text-foreground", children: emptyTitle }),
+      emptyDescription ? /* @__PURE__ */ jsx43("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
+    ] }) }) }) : visibleRows.map((row) => {
+      const key = getRowKey(row);
+      const isSelected = selectedSet.has(key);
+      return /* @__PURE__ */ jsxs33(
+        "tr",
+        {
+          className: rowClass,
+          "data-clickable": onRowClick ? "true" : void 0,
+          "data-selected": isSelected ? "true" : void 0,
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          onKeyDown: onRowClick ? (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              onRowClick(row);
+            }
+          } : void 0,
+          tabIndex: onRowClick ? 0 : void 0,
+          role: onRowClick ? "button" : void 0,
+          children: [
+            selectable ? /* @__PURE__ */ jsx43(
+              "td",
+              {
+                className: cn(selectCellClass, cellPad),
+                onClick: (event) => event.stopPropagation(),
+                children: /* @__PURE__ */ jsx43(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onCheckedChange: () => toggleRow(key),
+                    "aria-label": `Select row`
+                  }
+                )
+              }
+            ) : null,
+            columns.map((col) => /* @__PURE__ */ jsx43(
+              "td",
+              {
+                className: cn(
+                  bodyCellClass,
+                  cellPad,
+                  col.truncate && "max-w-0",
+                  col.align && alignClass[col.align],
+                  col.className
+                ),
+                children: col.truncate ? /* @__PURE__ */ jsx43("div", { className: "truncate", children: col.cell(row) }) : col.cell(row)
+              },
+              col.id
+            ))
+          ]
+        },
+        key
+      );
+    }) }),
+    hasFoot ? /* @__PURE__ */ jsx43("tfoot", { children: /* @__PURE__ */ jsx43("tr", { children: /* @__PURE__ */ jsx43("td", { colSpan, className: footCellClass, children: /* @__PURE__ */ jsxs33(
       "div",
       {
         className: cn(
           footInnerClass,
-          showRowCount && footer ? "justify-between" : "justify-start"
+          (showRowCount || footer || hasPager) && "justify-between"
         ),
         children: [
-          showRowCount ? /* @__PURE__ */ jsx41("span", { children: rowCountText }) : null,
-          footer
+          /* @__PURE__ */ jsxs33("div", { className: footInnerClass, children: [
+            showRowCount ? /* @__PURE__ */ jsxs33("span", { children: [
+              rowCountText,
+              selectable && selectedSet.size > 0 ? ` \xB7 ${selectedSet.size} selected` : null
+            ] }) : selectable && selectedSet.size > 0 ? /* @__PURE__ */ jsxs33("span", { children: [
+              selectedSet.size,
+              " selected"
+            ] }) : null,
+            footer
+          ] }),
+          hasPager ? /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs33("span", { className: "tabular-nums", children: [
+              pageIndex * pageSize + 1,
+              "\u2013",
+              Math.min(
+                (pageIndex + 1) * pageSize,
+                sortedRows.length
+              ),
+              " ",
+              "of ",
+              sortedRows.length
+            ] }),
+            /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx43(
+                "button",
+                {
+                  type: "button",
+                  className: pagerButtonClass,
+                  onClick: () => setPage(pageIndex - 1),
+                  disabled: pageIndex <= 0,
+                  "aria-label": "Previous page",
+                  children: /* @__PURE__ */ jsx43(ChevronLeftIcon, { className: "size-4", "aria-hidden": true })
+                }
+              ),
+              /* @__PURE__ */ jsx43(
+                "button",
+                {
+                  type: "button",
+                  className: pagerButtonClass,
+                  onClick: () => setPage(pageIndex + 1),
+                  disabled: pageIndex >= pageCount - 1,
+                  "aria-label": "Next page",
+                  children: /* @__PURE__ */ jsx43(ChevronRightIcon, { className: "size-4", "aria-hidden": true })
+                }
+              )
+            ] })
+          ] }) : null
         ]
       }
     ) }) }) }) : null
@@ -3101,7 +3362,7 @@ function DataTable({
 
 // src/app/data/ChartPanel.tsx
 import { useId as useId4 } from "react";
-import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var ChartPanel = ({
   title,
   description,
@@ -3109,19 +3370,20 @@ var ChartPanel = ({
   children,
   actions,
   height = 300,
+  loading = false,
   className
 }) => {
   const titleId = useId4();
   const resolvedTitle = title ?? artifact?.title;
   const hasHeader = Boolean(resolvedTitle || description || actions);
-  const body = children ?? (artifact ? /* @__PURE__ */ jsx42(ChartArtifactView, { artifact, embedded: true, height }) : null);
-  return /* @__PURE__ */ jsxs33(
+  const body = loading ? /* @__PURE__ */ jsx44(Skeleton, { className: "w-full rounded-lg", style: { height }, "aria-hidden": true }) : children ?? (artifact ? /* @__PURE__ */ jsx44(ChartArtifactView, { artifact, embedded: true, height }) : null);
+  return /* @__PURE__ */ jsxs34(
     "section",
     {
       className: cn(metricCardShellClass, "aui-app-chart-panel", className),
       "aria-labelledby": resolvedTitle ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx44(
           MetricCardHeader,
           {
             title: resolvedTitle,
@@ -3130,14 +3392,14 @@ var ChartPanel = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx44(
           "div",
           {
             className: cn(
               "relative min-h-0 w-full",
               hasHeader ? metricChartPlotRegionClass : "pt-2 pb-3"
             ),
-            children: body ?? /* @__PURE__ */ jsx42(
+            children: body ?? /* @__PURE__ */ jsx44(
               "div",
               {
                 className: "flex items-center justify-center text-sm font-normal text-muted-foreground",
@@ -3155,7 +3417,7 @@ var ChartPanel = ({
 
 // src/app/data/MetricRow.tsx
 import { useId as useId5, useState as useState5 } from "react";
-import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var MetricRow = ({
   title,
   description,
@@ -3165,6 +3427,7 @@ var MetricRow = ({
   defaultActiveMetricId,
   onMetricChange,
   metricsAriaLabel = "Metrics",
+  loading = false,
   className
 }) => {
   const titleId = useId5();
@@ -3177,13 +3440,13 @@ var MetricRow = ({
     if (activeMetricId == null) setInternalId(id);
     onMetricChange?.(id);
   };
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45(
           MetricCardHeader,
           {
             title,
@@ -3192,17 +3455,29 @@ var MetricRow = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45(
           "div",
           {
             role: selectable ? "group" : void 0,
             "aria-label": selectable ? metricsAriaLabel : void 0,
+            "aria-busy": loading || void 0,
             className: cn(
               metricTilesRowClass,
-              metricTilesGridColsClass(metrics.length),
+              metricTilesGridColsClass(loading ? metrics.length || 4 : metrics.length),
               (title || description || actions) && "mt-3"
             ),
-            children: metrics.map((m, index) => /* @__PURE__ */ jsx43(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ jsxs35(
+              "div",
+              {
+                className: "flex min-w-0 flex-1 flex-col gap-2 px-4 py-3",
+                "aria-hidden": true,
+                children: [
+                  /* @__PURE__ */ jsx45(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ jsx45(Skeleton, { className: "h-7 w-24" })
+                ]
+              },
+              `skeleton-${index}`
+            )) : metrics.map((m, index) => /* @__PURE__ */ jsx45(
               MetricTile,
               {
                 label: m.label,
@@ -3225,7 +3500,7 @@ var MetricRow = ({
 
 // src/app/data/MetricChartCard.tsx
 import { useId as useId6, useState as useState6 } from "react";
-import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var MetricChartCard = ({
   title,
   description,
@@ -3241,6 +3516,7 @@ var MetricChartCard = ({
   formatValue,
   emptyLabel = "No data yet",
   metricsAriaLabel = "Metrics",
+  loading = false,
   className
 }) => {
   const titleId = useId6();
@@ -3255,13 +3531,13 @@ var MetricChartCard = ({
   };
   const hasHeader = Boolean(title || description || actions);
   const chartAriaLabel = typeof active?.label === "string" ? `${active.label} over time` : "Metric chart";
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx46(
           MetricCardHeader,
           {
             title,
@@ -3270,17 +3546,29 @@ var MetricChartCard = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             role: "group",
             "aria-label": metricsAriaLabel,
+            "aria-busy": loading || void 0,
             className: cn(
               metricTilesRowClass,
-              metricTilesGridColsClass(metrics.length),
+              metricTilesGridColsClass(loading ? metrics.length || 4 : metrics.length),
               hasHeader && "mt-3"
             ),
-            children: metrics.map((m, index) => /* @__PURE__ */ jsx44(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ jsxs36(
+              "div",
+              {
+                className: "flex min-w-0 flex-1 flex-col gap-2 px-4 py-3",
+                "aria-hidden": true,
+                children: [
+                  /* @__PURE__ */ jsx46(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ jsx46(Skeleton, { className: "h-7 w-24" })
+                ]
+              },
+              `skeleton-${index}`
+            )) : metrics.map((m, index) => /* @__PURE__ */ jsx46(
               MetricTile,
               {
                 label: m.label,
@@ -3296,7 +3584,14 @@ var MetricChartCard = ({
             ))
           }
         ),
-        /* @__PURE__ */ jsx44("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: active?.data && active.data.length > 0 ? /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx46("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: loading ? /* @__PURE__ */ jsx46(
+          Skeleton,
+          {
+            className: "w-full rounded-lg",
+            style: { height },
+            "aria-hidden": true
+          }
+        ) : active?.data && active.data.length > 0 ? /* @__PURE__ */ jsx46(
           LineAreaChart,
           {
             data: active.data,
@@ -3316,7 +3611,7 @@ var MetricChartCard = ({
             ariaLabel: chartAriaLabel
           },
           active.id
-        ) : /* @__PURE__ */ jsx44(
+        ) : /* @__PURE__ */ jsx46(
           "div",
           {
             className: "flex w-full items-center justify-center text-sm font-normal text-muted-foreground",
@@ -3330,9 +3625,99 @@ var MetricChartCard = ({
   );
 };
 
+// src/hooks/use-live-query.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useRef, useState as useState7 } from "react";
+function useInterval(callback, delayMs) {
+  const saved = useRef(callback);
+  useEffect3(() => {
+    saved.current = callback;
+  }, [callback]);
+  useEffect3(() => {
+    if (delayMs === null) return;
+    const id = setInterval(() => saved.current(), delayMs);
+    return () => clearInterval(id);
+  }, [delayMs]);
+}
+function useLiveQuery(fetcher, options = {}) {
+  const {
+    intervalMs = null,
+    enabled = true,
+    immediate = true,
+    refetchOnFocus = true
+  } = options;
+  const [data, setData] = useState7(void 0);
+  const [error, setError] = useState7(void 0);
+  const [loading, setLoading] = useState7(enabled);
+  const [refreshing, setRefreshing] = useState7(false);
+  const [lastUpdated, setLastUpdated] = useState7(null);
+  const fetcherRef = useRef(fetcher);
+  useEffect3(() => {
+    fetcherRef.current = fetcher;
+  }, [fetcher]);
+  const mounted = useRef(true);
+  const requestId = useRef(0);
+  const hasData = useRef(false);
+  useEffect3(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const run = useCallback2(() => {
+    const id = ++requestId.current;
+    if (hasData.current) {
+      setRefreshing(true);
+    } else {
+      setLoading(true);
+    }
+    fetcherRef.current().then((result) => {
+      if (!mounted.current || id !== requestId.current) return;
+      setData(result);
+      setError(void 0);
+      setLastUpdated(Date.now());
+      hasData.current = true;
+    }).catch((err) => {
+      if (!mounted.current || id !== requestId.current) return;
+      setError(err);
+    }).finally(() => {
+      if (!mounted.current || id !== requestId.current) return;
+      setLoading(false);
+      setRefreshing(false);
+    });
+  }, []);
+  const refetch = useCallback2(() => {
+    if (!enabled) return;
+    run();
+  }, [enabled, run]);
+  useEffect3(() => {
+    if (!enabled) return;
+    if (immediate) run();
+  }, [enabled, immediate, run]);
+  useEffect3(() => {
+    if (!enabled || intervalMs === null) return;
+    const tick = () => {
+      if (refetchOnFocus && typeof document !== "undefined" && document.visibilityState === "hidden") {
+        return;
+      }
+      run();
+    };
+    const handle = setInterval(tick, intervalMs);
+    return () => clearInterval(handle);
+  }, [enabled, intervalMs, refetchOnFocus, run]);
+  useEffect3(() => {
+    if (!enabled || !refetchOnFocus || typeof document === "undefined") return;
+    const onVisible = () => {
+      if (document.visibilityState === "visible") run();
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    return () => document.removeEventListener("visibilitychange", onVisible);
+  }, [enabled, refetchOnFocus, run]);
+  return { data, error, loading, refreshing, lastUpdated, refetch };
+}
+
 // src/charts/sparkline.tsx
 import { useId as useId7 } from "react";
-import { Fragment as Fragment6, jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 var Sparkline = ({
   data,
   dataKey = "value",
@@ -3347,7 +3732,7 @@ var Sparkline = ({
   const uid = useId7();
   const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
   if (values.length === 0) {
-    return /* @__PURE__ */ jsx45("span", { className: cn("inline-block", className), style: { width, height } });
+    return /* @__PURE__ */ jsx47("span", { className: cn("inline-block", className), style: { width, height } });
   }
   const pad = strokeWidth + 1;
   const min = Math.min(...values);
@@ -3359,7 +3744,7 @@ var Sparkline = ({
     x: pad + (values.length > 1 ? i / (values.length - 1) * innerW : innerW / 2),
     y: pad + innerH - (v - min) / range * innerH
   }));
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "svg",
     {
       width,
@@ -3370,14 +3755,14 @@ var Sparkline = ({
       "aria-label": ariaLabel,
       preserveAspectRatio: "none",
       children: [
-        area && /* @__PURE__ */ jsxs36(Fragment6, { children: [
-          /* @__PURE__ */ jsx45("defs", { children: /* @__PURE__ */ jsxs36("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-            /* @__PURE__ */ jsx45("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
-            /* @__PURE__ */ jsx45("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
+        area && /* @__PURE__ */ jsxs37(Fragment6, { children: [
+          /* @__PURE__ */ jsx47("defs", { children: /* @__PURE__ */ jsxs37("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx47("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
+            /* @__PURE__ */ jsx47("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
           ] }) }),
-          /* @__PURE__ */ jsx45("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
+          /* @__PURE__ */ jsx47("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
         ] }),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx47(
           "path",
           {
             d: monotoneLinePath(points),
@@ -3426,9 +3811,11 @@ export {
   appFilterBarClass,
   appSearchInputClass,
   useAppShellChat,
+  useAppShellNav,
   AppShell,
   AppShellTopbar,
   AppShellChatTrigger,
+  AppShellSidebarTrigger,
   PageHeader,
   Page,
   Section,
@@ -3468,9 +3855,12 @@ export {
   SearchInput,
   FormSection,
   FilterBar,
+  FilterField,
   DataTable,
   ChartPanel,
   MetricRow,
   MetricChartCard,
+  useInterval,
+  useLiveQuery,
   Sparkline
 };