@actioneer/ads 1.0.9 → 1.0.10

package/components/sidebar.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import * as n from "react";
+import * as o from "react";
 import { MotionConfig as j, motion as _ } from "motion/react";
 import { User as E, PanelLeft as H } from "../lib/icons.js";
-import { cn as o } from "../lib/cn.js";
+import { cn as n } from "../lib/cn.js";
 import { springSidebar as I } from "../lib/motion.js";
 import { Tooltip as L } from "./tooltip.js";
 import { Avatar as M } from "./avatar.js";
-const z = n.createContext({
+const z = o.createContext({
   collapsed: !1,
   toggle: () => {
   },
@@ -15,9 +15,9 @@ const z = n.createContext({
   }
 });
 function W() {
-  return n.useContext(z);
+  return o.useContext(z);
 }
-const K = n.forwardRef(
+const K = o.forwardRef(
   ({
     className: a,
     collapsed: e,
@@ -27,27 +27,27 @@ const K = n.forwardRef(
     keyboardToggle: d = !0,
     ...l
   }, b) => {
-    const [g, y] = n.useState(i), f = e !== void 0, u = f ? e : g, m = n.useCallback(
+    const [g, y] = o.useState(i), f = e !== void 0, u = f ? e : g, m = o.useCallback(
       (p) => {
         f || y(p), t == null || t(p);
       },
       [f, t]
-    ), x = n.useCallback(
+    ), v = o.useCallback(
       () => m(!u),
       [u, m]
     );
-    n.useEffect(() => {
+    o.useEffect(() => {
       if (!d) return;
       const p = (h) => {
-        (h.metaKey || h.ctrlKey) && h.key.toLowerCase() === "b" && (h.preventDefault(), x());
+        (h.metaKey || h.ctrlKey) && h.key.toLowerCase() === "b" && (h.preventDefault(), v());
       };
       return document.addEventListener("keydown", p), () => document.removeEventListener("keydown", p);
-    }, [d, x]);
-    const v = n.useMemo(
-      () => ({ collapsed: u, toggle: x, setCollapsed: m }),
-      [u, x, m]
+    }, [d, v]);
+    const x = o.useMemo(
+      () => ({ collapsed: u, toggle: v, setCollapsed: m }),
+      [u, v, m]
     );
-    return /* @__PURE__ */ r(z.Provider, { value: v, children: /* @__PURE__ */ r(j, { reducedMotion: "user", children: /* @__PURE__ */ r(
+    return /* @__PURE__ */ r(z.Provider, { value: x, children: /* @__PURE__ */ r(j, { reducedMotion: "user", children: /* @__PURE__ */ r(
       _.aside,
       {
         ref: b,
@@ -63,7 +63,7 @@ const K = n.forwardRef(
           opacity: 1
         },
         transition: I,
-        className: o(
+        className: n(
           "group/sidebar flex h-full shrink-0 flex-col bg-background",
           a
         ),
@@ -103,7 +103,7 @@ function k({
           onClick: (l) => {
             e == null || e(l), d();
           },
-          className: o(
+          className: n(
             "inline-flex size-(--sidebar-item) shrink-0 items-center justify-center rounded-sm border border-transparent text-muted-foreground",
             "transition-colors hover:border-border hover:bg-elevated hover:text-foreground",
             "outline-none focus-visible:ring-3 focus-visible:ring-ring",
@@ -126,8 +126,8 @@ function Z({
   className: d,
   ...l
 }) {
-  const b = n.isValidElement(a) && a.type === R, g = o(
-    b ? "flex min-w-0 items-center rounded-m outline-none focus-visible:ring-3 focus-visible:ring-ring" : o(
+  const b = o.isValidElement(a) && a.type === R, g = n(
+    b ? "flex min-w-0 items-center rounded-m outline-none focus-visible:ring-3 focus-visible:ring-ring" : n(
       // 20px mark centered in a 32px square — the same box as every other rail icon.
       // group/brand lets a BrandMark logo play its blip loop on hover.
       "group/brand flex size-(--sidebar-item) items-center justify-center",
@@ -141,7 +141,7 @@ function Z({
   return /* @__PURE__ */ c(
     "div",
     {
-      className: o(
+      className: n(
         "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-4",
         "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
         d
@@ -158,14 +158,14 @@ function Z({
     }
   );
 }
-const R = n.forwardRef(
+const R = o.forwardRef(
   ({ className: a, name: e, logoSrc: i, showName: t = !0, ...s }, d) => {
     const l = e.trim().charAt(0).toUpperCase();
     return /* @__PURE__ */ c(
       "span",
       {
         ref: d,
-        className: o("flex min-w-0 items-center gap-2.5", a),
+        className: n("flex min-w-0 items-center gap-2.5", a),
         ...s,
         children: [
           i ? /* @__PURE__ */ r(
@@ -192,12 +192,12 @@ const R = n.forwardRef(
   }
 );
 R.displayName = "SidebarWorkspace";
-const q = n.forwardRef(
+const q = o.forwardRef(
   ({ className: a, ...e }, i) => /* @__PURE__ */ r(
     "div",
     {
       ref: i,
-      className: o(
+      className: n(
         "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-3",
         "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
         a
@@ -207,31 +207,31 @@ const q = n.forwardRef(
   )
 );
 q.displayName = "SidebarHeader";
-const A = n.forwardRef(
-  ({ className: a, ...e }, i) => /* @__PURE__ */ r("nav", { ref: i, className: o("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", a), ...e })
+const A = o.forwardRef(
+  ({ className: a, ...e }, i) => /* @__PURE__ */ r("nav", { ref: i, className: n("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", a), ...e })
 );
 A.displayName = "SidebarNav";
-const B = n.forwardRef(
+const B = o.forwardRef(
   ({ className: a, label: e, children: i, ...t }, s) => /* @__PURE__ */ c("div", { ref: s, className: a, ...t, children: [
     e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s font-normal uppercase leading-4 tracking-wider text-tertiary group-data-[collapsed=true]/sidebar:hidden", children: e }),
     /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5 group-data-[collapsed=true]/sidebar:gap-2", children: i })
   ] })
 );
 B.displayName = "SidebarSection";
-const D = n.forwardRef(
+const D = o.forwardRef(
   ({ className: a, icon: e, isActive: i, endContent: t, children: s, title: d, ...l }, b) => /* @__PURE__ */ c(
     "a",
     {
       ref: b,
       "aria-current": i ? "page" : void 0,
       title: d ?? (typeof s == "string" ? s : void 0),
-      className: o(
+      className: n(
         "group/sidebar-item flex h-9 items-center gap-2.5 rounded-md border border-transparent px-3 text-m leading-[var(--text-m--line-height)] font-normal text-sidebar-foreground",
-        "transition-[background-color,border-color,color] duration-150 ease-out motion-reduce:transition-none",
+        "transition-[background-color,border-color,color,box-shadow] duration-150 ease-out motion-reduce:transition-none",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         // Collapsed: a centered square (--sidebar-item) so every rail item lines up.
         "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:p-0",
-        i ? "bg-sidebar-accent text-sidebar-accent-foreground" : "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
+        i ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-nav-active" : "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
         a
       ),
       ...l,
@@ -241,7 +241,7 @@ const D = n.forwardRef(
           {
             "aria-hidden": !0,
             className: "flex shrink-0 items-center justify-center transition-transform duration-150 ease-out group-hover/sidebar-item:scale-110 motion-reduce:transition-none motion-reduce:group-hover/sidebar-item:scale-100 [&_svg]:size-4 [&_svg]:shrink-0",
-            children: i && n.isValidElement(e) ? n.cloneElement(e, { weight: "fill" }) : e
+            children: i && o.isValidElement(e) ? o.cloneElement(e, { weight: "fill" }) : e
           }
         ),
         /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: s }),
@@ -251,24 +251,24 @@ const D = n.forwardRef(
   )
 );
 D.displayName = "SidebarItem";
-const F = n.forwardRef(
+const F = o.forwardRef(
   ({ className: a, ...e }, i) => /* @__PURE__ */ r(
     "div",
     {
       ref: i,
-      className: o("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", a),
+      className: n("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", a),
       ...e
     }
   )
 );
 F.displayName = "SidebarFooter";
-const U = n.forwardRef(
+const U = o.forwardRef(
   ({ className: a, icon: e, children: i, ...t }, s) => /* @__PURE__ */ r("div", { className: "px-3 pb-0.5 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
     "button",
     {
       ref: s,
       type: "button",
-      className: o(
+      className: n(
         "flex h-9 w-full items-center justify-start gap-2 rounded-md px-3",
         "text-m leading-[var(--text-m--line-height)] font-normal text-sidebar-foreground",
         // Reads as a normal nav item: transparent at rest, the shared White
@@ -289,12 +289,12 @@ const U = n.forwardRef(
   ) })
 );
 U.displayName = "SidebarAction";
-const V = n.forwardRef(
+const V = o.forwardRef(
   ({ className: a, label: e, children: i, ...t }, s) => /* @__PURE__ */ c(
     "div",
     {
       ref: s,
-      className: o("group-data-[collapsed=true]/sidebar:hidden", a),
+      className: n("group-data-[collapsed=true]/sidebar:hidden", a),
       ...t,
       children: [
         e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s font-normal uppercase leading-4 tracking-wider text-tertiary", children: e }),
@@ -304,27 +304,27 @@ const V = n.forwardRef(
   )
 );
 V.displayName = "SidebarHistory";
-const $ = n.forwardRef(({ className: a, children: e, title: i, action: t, isActive: s, icon: d, ...l }, b) => {
-  const g = n.useRef(null), y = n.useRef(null), [f, u] = n.useState(0);
-  n.useLayoutEffect(() => {
-    const v = g.current, p = y.current;
-    if (!v || !p) return;
+const $ = o.forwardRef(({ className: a, children: e, title: i, action: t, isActive: s, icon: d, ...l }, b) => {
+  const g = o.useRef(null), y = o.useRef(null), [f, u] = o.useState(0);
+  o.useLayoutEffect(() => {
+    const x = g.current, p = y.current;
+    if (!x || !p) return;
     const h = () => {
-      const w = p.scrollWidth - v.clientWidth;
+      const w = p.scrollWidth - x.clientWidth;
       u(w > 0 ? w + (t ? 32 : 0) : 0);
     };
     h();
     const N = new ResizeObserver(h);
-    return N.observe(v), N.observe(p), () => N.disconnect();
+    return N.observe(x), N.observe(p), () => N.disconnect();
   }, [e, t]);
-  const m = f > 0, x = Math.max(500, Math.round(f * 18));
+  const m = f > 0, v = Math.max(500, Math.round(f * 18));
   return /* @__PURE__ */ c(
     "div",
     {
-      className: o(
+      className: n(
         "group/hist relative flex items-center rounded-md transition-colors",
         "text-sidebar-foreground",
-        s ? "bg-sidebar-accent text-sidebar-accent-foreground" : "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground"
+        s ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-nav-active" : "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground"
       ),
       children: [
         d && /* @__PURE__ */ r(
@@ -340,7 +340,7 @@ const $ = n.forwardRef(({ className: a, children: e, title: i, action: t, isActi
           {
             ref: b,
             title: i ?? (typeof e == "string" ? e : void 0),
-            className: o(
+            className: n(
               // Left pad matches a SidebarItem's text column (px-3 + icon size-4 +
               // gap-2.5 = 2.375rem) so history titles line up under the nav labels.
               "block min-w-0 flex-1 rounded-md py-1.5 pr-3 ps-(--sidebar-text-indent) text-m leading-[var(--text-m--line-height)] font-normal",
@@ -352,7 +352,7 @@ const $ = n.forwardRef(({ className: a, children: e, title: i, action: t, isActi
               "span",
               {
                 ref: g,
-                className: o(
+                className: n(
                   "block overflow-hidden",
                   // Rest: fade the right edge (no ellipsis). Hover: the title scrolls,
                   // so fade the LEFT edge where it exits; the action backdrop (or the
@@ -364,14 +364,14 @@ const $ = n.forwardRef(({ className: a, children: e, title: i, action: t, isActi
                   "span",
                   {
                     ref: y,
-                    className: o(
+                    className: n(
                       "block w-max whitespace-nowrap transition-transform ease-linear",
                       m && "group-hover/hist:[transform:translateX(var(--mq-x))]",
                       "motion-reduce:transition-none motion-reduce:group-hover/hist:[transform:none]"
                     ),
                     style: {
                       "--mq-x": `-${f}px`,
-                      transitionDuration: `${x}ms`
+                      transitionDuration: `${v}ms`
                     },
                     children: e
                   }
@@ -383,7 +383,7 @@ const $ = n.forwardRef(({ className: a, children: e, title: i, action: t, isActi
         t && /* @__PURE__ */ r(
           "span",
           {
-            className: o(
+            className: n(
               // Rounded end matches the row's radius so the backdrop doesn't
               // square off the highlight's right corners.
               "absolute inset-y-0 right-0 flex items-center rounded-e-md pl-8 pr-1",
@@ -401,12 +401,12 @@ const $ = n.forwardRef(({ className: a, children: e, title: i, action: t, isActi
   );
 });
 $.displayName = "SidebarHistoryItem";
-const O = n.forwardRef(
+const O = o.forwardRef(
   ({ className: a, name: e, role: i, src: t, hideAvatar: s, ...d }, l) => /* @__PURE__ */ c(
     "a",
     {
       ref: l,
-      className: o(
+      className: n(
         "flex items-center gap-2.5 rounded-md border border-transparent p-2 transition-colors hover:border-wg10",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:p-0",

package/components/sparkline.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+/**
+ * Sparkline — a tiny, axis-less trend line for a stat card (principle
+ * `analytics-surfaces`, user-mandated 2026-11-14).
+ *
+ * It draws one series in a chart-palette colour: a 2px line, a wash under it
+ * that fades top-to-bottom from 20% of the colour to nothing (the same wash
+ * `LineChart` carries), and a dot on the latest value. There are no axes,
+ * gridlines, labels or tooltip — the stat card's number is the value; the
+ * sparkline only says which way it has been moving. It fills its container's
+ * width; give it a height.
+ *
+ * Use it inside a resting stat card, beside the number, or in a table's
+ * "Last 7 days" column at `height={28}` with `dot={false}` (principle
+ * `collection-screens`). For a trend people read values from, use `LineChart`.
+ */
+export type SparklineColor = 1 | 2 | 3 | 4 | 5 | 6;
+export interface SparklineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+    /** The series, oldest first. Needs at least two values to draw. */
+    data: number[];
+    /** Which `chart-1…6` series colour to draw in. @default 1 */
+    color?: SparklineColor;
+    /** Height in px. @default 48 */
+    height?: number;
+    /** Mark the latest value with a round dot. Turn off in table cells. @default true */
+    dot?: boolean;
+    /** Accessible summary of the trend, e.g. "Calls analysed rising over 7 days". */
+    label: string;
+}
+export declare const Sparkline: React.ForwardRefExoticComponent<SparklineProps & React.RefAttributes<HTMLDivElement>>;

package/components/sparkline.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import * as u from "react";
+import { cn as j } from "../lib/cn.js";
+const r = 100, m = 4, z = u.forwardRef(
+  ({ className: $, data: k, color: h = 1, height: e = 48, dot: v = !0, label: x, style: b, ...y }, g) => {
+    const d = u.useId().replace(/[^a-zA-Z0-9]/g, ""), n = `var(--color-chart-${h})`, s = k.filter((a) => Number.isFinite(a)), p = Math.min(...s), w = Math.max(...s) - p || 1, t = s.map((a, i) => [
+      s.length > 1 ? i / (s.length - 1) * r : r,
+      m + (e - 2 * m) * (1 - (a - p) / w)
+    ]), f = t.map(([a, i], N) => `${N === 0 ? "M" : "L"}${a.toFixed(2)},${i.toFixed(2)}`).join(" "), L = t.length > 1 ? `${f} L${r},${e} L0,${e} Z` : "", l = t[t.length - 1];
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: g,
+        "data-slot": "sparkline",
+        role: "img",
+        "aria-label": x,
+        className: j("relative w-full", $),
+        style: { height: e, ...b },
+        ...y,
+        children: [
+          t.length > 1 && /* @__PURE__ */ c(
+            "svg",
+            {
+              "aria-hidden": !0,
+              className: "absolute inset-0 size-full overflow-visible",
+              viewBox: `0 0 ${r} ${e}`,
+              preserveAspectRatio: "none",
+              children: [
+                /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ c("linearGradient", { id: `${d}-wash`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ o("stop", { offset: "0%", stopColor: n, stopOpacity: 0.2 }),
+                  /* @__PURE__ */ o("stop", { offset: "100%", stopColor: n, stopOpacity: 0 })
+                ] }) }),
+                /* @__PURE__ */ o("path", { "data-slot": "sparkline-area", d: L, fill: `url(#${d}-wash)`, stroke: "none" }),
+                /* @__PURE__ */ o(
+                  "path",
+                  {
+                    "data-slot": "sparkline-line",
+                    d: f,
+                    fill: "none",
+                    stroke: n,
+                    strokeWidth: 2,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    vectorEffect: "non-scaling-stroke"
+                  }
+                )
+              ]
+            }
+          ),
+          v && l && t.length > 1 && // The end dot is HTML so it stays round while the SVG stretches.
+          /* @__PURE__ */ o(
+            "span",
+            {
+              "aria-hidden": !0,
+              "data-slot": "sparkline-dot",
+              className: "absolute size-2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-card",
+              style: { left: `${l[0] / r * 100}%`, top: `${l[1] / e * 100}%`, background: n }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+z.displayName = "Sparkline";
+export {
+  z as Sparkline
+};

package/demo/components/add-to-artifact.js

@@ -36,6 +36,7 @@ import "../../components/autocomplete.js";
 import "../../components/slider.js";
 import "../../components/segmented.js";
 import "../../components/filters.js";
+import "../../components/filter-bar.js";
 import { Modal as q, ModalHeader as J, ModalTitle as Q, ModalBody as x, ModalFooter as g } from "../../components/modal.js";
 import "../../components/drawer.js";
 import "../../components/popover.js";
@@ -56,6 +57,8 @@ import "../../components/avatar.js";
 import "../../components/badge.js";
 import "../../components/chip.js";
 import "../../components/timeline.js";
+import "../../components/detail-list.js";
+import "../../components/sparkline.js";
 import "../../components/alert.js";
 import "../../components/surface-loader.js";
 import "../../components/pixel-blast-svg.js";
@@ -107,7 +110,7 @@ import "../../components/assistant-ui/quote.js";
 import "../../components/assistant-ui/sources.js";
 import "../../components/assistant-ui/tool-fallback.js";
 import "../../components/assistant-ui/tool-group.js";
-function ii({
+function ni({
   block: i,
   trigger: v = "button",
   className: A,
@@ -359,5 +362,5 @@ function ii({
   ] });
 }
 export {
-  ii as AddToArtifact
+  ni as AddToArtifact
 };

package/examples/README.md

@@ -13,8 +13,10 @@ root in `MotionConfig`, `ToastProvider` and `TooltipProvider`.
 | `agents-screen.tsx` | `AgentsScreen` | A full list page: `PageHeader` with a primary action, a summary strip, `Tabs` with counts leading a `SearchDisclosure`, a filter `Dropdown`, a sortable `Table` with clickable rows and a pinned action column, per-row actions with `Tooltip`s, and filtered `EmptyState`s. |
 | `settings-screen.tsx` | `SettingsScreen` | A settings card: `Card` header with a status `Badge`, an `InputField`, a `SettingList` of `SettingRow`s with `Switch` and `Button` controls, and one primary action. |
 | `workspace-header.tsx` | `WorkspaceHeaderScreen` | A page header with a status `Badge` and trailing actions, then `Tabs` with counts whose panels hold `Card`s. |
-| `campaigns-screen.tsx` | `CampaignsScreen` | The collection-screen recipe: `BodyPageHeader` with one primary action, counted `Tabs` leading `SearchDisclosure` + `Filters`, a multi-select `Table` (hover-revealed checkboxes, cohort child rows, `isActive` open row) whose page size fills the panel with `Pagination` at the bottom, a shell-level `Drawer` with status under the title and Performance / Details sections, and the fixed-height New campaign `Modal`. |
-| `campaign-analysis-screen.tsx` | `CampaignAnalysisScreen` | The record-analytics recipe: a 16px `Breadcrumbs` title with the primary action on the same row, record `Tabs`, outlined stat cards with `Progress`, and outlined `BarChart` / `LineChart` cards with header legends and printed values. |
+| `campaigns-screen.tsx` | `CampaignsScreen` | The collection-screen recipe: `BodyPageHeader` with one primary action, counted `Tabs` leading `SearchDisclosure` + `Filters`, a multi-select `Table` (hover-revealed checkboxes, cohort child rows, `isActive` open row) whose page size fills the panel with `Pagination` at the bottom, a shell-level `Drawer` with status under the title and Performance / Details sections, and the fixed-height New campaign `Modal` (`NewCampaignModal`: `Field info` for optional guidance, `Field actions` for the source switch, inline `FileDropzone`, single-select `Table` of saved audiences). |
+| `call-logs-screen.tsx` | `CallLogsScreen`, `CallPanel` | The record-call-logs recipe: a campaign's Call logs tab titled by `Breadcrumbs` (status in `meta`, Test call + Launch in `actions`), a `Table` of calls (Number · plain-chip Status · Outcome · Duration) that fills the panel, and a footer-less call panel — grounded `DrawerHeader`, scrolling `DrawerSection`s (Summary, Recording, Transcript, Follow-ups, CRM write-back, Captured fields) with `DetailList` attributes and a collapsed Call metadata. |
+| `guardrails-settings-screen.tsx` | `GuardrailsSettingsScreen` | The settings-screen recipe: `BodyPageHeader` with one save action and full-width setting groups (16px title over a `SettingList` of `SettingRow`s with Switch / value Button / Badge controls). |
+| `campaign-analysis-screen.tsx` | `CampaignAnalysisScreen` | The record-analytics recipe: an 18px `Breadcrumbs` title with the primary action on the same row, record `Tabs`, outlined stat cards with `Progress`, and outlined `BarChart` / `LineChart` cards with header legends and printed values. |
 
 ```tsx
 // app/agents/page.tsx