@page-speed/agent-everywhere 0.7.0 → 0.9.0

package/dist/index.js

@@ -2,11 +2,11 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React4 from 'react';
-import { createContext, forwardRef, useRef, useImperativeHandle, useCallback, useLayoutEffect, useState, useEffect, useReducer, useMemo, useContext } from 'react';
+import { createContext, forwardRef, useRef, useImperativeHandle, useCallback, useLayoutEffect, useState, useEffect, useReducer, useMemo, useContext, useId, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'motion/react';
 import { Markdown } from '@page-speed/markdown-to-jsx';
-import { SendIcon, PaperclipIcon, FileTextIcon, MicIcon, ImageIcon, XIcon, SearchIcon, UploadIcon, FileIcon, UserCircleIcon, CheckIcon, SparklesIcon, BookmarkIcon, InfoIcon, CheckCircle2Icon, AlertTriangleIcon, LightbulbIcon, BrainIcon, ChevronDownIcon, ZapIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon, BotIcon, UserIcon, DownloadIcon, MinusIcon, TrendingDownIcon, TrendingUpIcon, ChevronUpIcon, ArrowUpDownIcon, LinkIcon, PlayIcon, ExternalLinkIcon, WandIcon, LayoutGridIcon, Grid3X3Icon, ArrowUpRightIcon, ShuffleIcon, SkipForwardIcon, ChevronLeftIcon, ChevronRightIcon, XCircleIcon, HelpCircleIcon, Minimize2Icon, Maximize2Icon, RotateCcwIcon, MessageSquareIcon, GripVerticalIcon, PanelLeftOpenIcon, PanelLeftCloseIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon, ClipboardListIcon, ArrowLeftIcon, MoreVerticalIcon, Loader2, ArrowUp, PanelLeft, PanelRight, Sparkles, RotateCcw, ChevronDown, MessageSquare, Paperclip, Loader2Icon, ArrowRightIcon, AlignLeftIcon, ListIcon, HashIcon, TypeIcon, ClockIcon, CoinsIcon, ActivityIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
+import { SendIcon, PaperclipIcon, FileTextIcon, MicIcon, ImageIcon, XIcon, SearchIcon, UploadIcon, FileIcon, UserCircleIcon, CheckIcon, SparklesIcon, BookmarkIcon, InfoIcon, CheckCircle2Icon, AlertTriangleIcon, LightbulbIcon, BrainIcon, ChevronDownIcon, ZapIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon, BotIcon, UserIcon, DownloadIcon, MinusIcon, TrendingDownIcon, TrendingUpIcon, ChevronUpIcon, ArrowUpDownIcon, LinkIcon, PlayIcon, ExternalLinkIcon, WandIcon, LayoutGridIcon, Grid3X3Icon, ArrowUpRightIcon, ShuffleIcon, SkipForwardIcon, ChevronLeftIcon, ChevronRightIcon, XCircleIcon, HelpCircleIcon, Minimize2Icon, Maximize2Icon, RotateCcwIcon, MessageSquareIcon, GripVerticalIcon, PanelLeftOpenIcon, PanelLeftCloseIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon, ClipboardListIcon, ArrowLeftIcon, MoreVerticalIcon, Loader2, ArrowUp, PanelLeft, PanelRight, RotateCcw, ChevronDown, Sparkles, MessageSquare, Paperclip, Loader2Icon, ArrowRightIcon, AlignLeftIcon, ListIcon, HashIcon, TypeIcon, ClockIcon, CoinsIcon, ActivityIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -7670,17 +7670,2281 @@ function MessageActions({
     children
   ] }) });
 }
-function DataPayloadView({ payload, className }) {
-  if (payload.type === "chart" && payload.chart) {
-    return /* @__PURE__ */ jsx(ChartContainer, { data: payload.chart, className });
+function CardShell({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-2xl border bg-card text-card-foreground shadow-sm", className), children });
+}
+var DELTA_GLYPH = {
+  up: "\u25B2",
+  down: "\u25BC",
+  flat: "\u2014"
+};
+var DELTA_DIRECTION_CLASSES = {
+  up: "bg-emerald-50 text-emerald-600",
+  down: "bg-red-50 text-red-600",
+  flat: "bg-slate-100 text-slate-500"
+};
+var DELTA_TONE_CLASSES = {
+  positive: "bg-emerald-50 text-emerald-600",
+  negative: "bg-red-50 text-red-600",
+  warning: "bg-amber-50 text-amber-600",
+  info: "bg-blue-50 text-blue-600",
+  neutral: "bg-slate-100 text-slate-500",
+  muted: "bg-slate-100 text-slate-400",
+  default: "bg-slate-100 text-slate-500"
+};
+function DeltaPill({
+  value,
+  text,
+  direction,
+  tone,
+  hideArrow,
+  className
+}) {
+  const label = value ?? text ?? "";
+  const colorClass = (tone && DELTA_TONE_CLASSES[tone]) ?? DELTA_DIRECTION_CLASSES[direction];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-medium text-xs tabular-nums",
+        colorClass,
+        className
+      ),
+      children: [
+        !hideArrow && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-[0.625rem] leading-none", children: DELTA_GLYPH[direction] }),
+        label
+      ]
+    }
+  );
+}
+var STATUS_DOT_COLORS = {
+  healthy: "#10B981",
+  warning: "#F59E0B",
+  critical: "#EF4444"
+};
+function StatusDot({
+  status = "healthy",
+  color,
+  label,
+  size = 12,
+  className
+}) {
+  const fill = color ?? STATUS_DOT_COLORS[status];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-status-dot": "",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      title: label,
+      className: cn("inline-block shrink-0 rounded-full", className),
+      style: { width: size, height: size, backgroundColor: fill }
+    }
+  );
+}
+var TONE_TEXT_CLASSES = {
+  default: "text-slate-800",
+  positive: "text-emerald-600",
+  negative: "text-red-600",
+  neutral: "text-slate-500",
+  warning: "text-amber-600",
+  info: "text-blue-600",
+  muted: "text-slate-400"
+};
+function toneTextColor(tone) {
+  if (!tone) return TONE_TEXT_CLASSES.default;
+  return TONE_TEXT_CLASSES[tone] ?? TONE_TEXT_CLASSES.default;
+}
+function toAlpha(n, upper) {
+  let out = "";
+  let value = n;
+  while (value > 0) {
+    const rem = (value - 1) % 26;
+    out = String.fromCharCode(97 + rem) + out;
+    value = Math.floor((value - 1) / 26);
+  }
+  return upper ? out.toUpperCase() : out;
+}
+var ROMAN_NUMERALS = [
+  [1e3, "m"],
+  [900, "cm"],
+  [500, "d"],
+  [400, "cd"],
+  [100, "c"],
+  [90, "xc"],
+  [50, "l"],
+  [40, "xl"],
+  [10, "x"],
+  [9, "ix"],
+  [5, "v"],
+  [4, "iv"],
+  [1, "i"]
+];
+function toRoman(n) {
+  if (n <= 0) return String(n);
+  let value = n;
+  let out = "";
+  for (const [num, sym] of ROMAN_NUMERALS) {
+    while (value >= num) {
+      out += sym;
+      value -= num;
+    }
+  }
+  return out;
+}
+function formatMarker(index, style, start = 1) {
+  const n = index + start;
+  switch (style) {
+    case "lower-alpha":
+      return toAlpha(n, false);
+    case "upper-alpha":
+      return toAlpha(n, true);
+    case "lower-roman":
+      return toRoman(n);
+    default:
+      return String(n);
+  }
+}
+var DEFAULT_COLOR = "#10B981";
+var DEFAULT_WIDTH = 100;
+var DEFAULT_HEIGHT = 32;
+function normalizeSeries(data, w, h, pad = 2) {
+  const n = data.length;
+  if (n === 0) return [];
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const flat = max === min;
+  const span = flat ? 1 : max - min;
+  const inner = h - pad * 2;
+  return data.map((v, i) => {
+    const x = n === 1 ? w / 2 : i / (n - 1) * w;
+    const y = flat ? h / 2 : h - pad - (v - min) / span * inner;
+    return { x, y };
+  });
+}
+function buildLinePath(pts, smooth = false) {
+  if (pts.length < 2) return "";
+  if (!smooth) {
+    const [first, ...rest] = pts;
+    return `M ${fmt(first.x)} ${fmt(first.y)}` + rest.map((p) => ` L ${fmt(p.x)} ${fmt(p.y)}`).join("");
+  }
+  let d = `M ${fmt(pts[0].x)} ${fmt(pts[0].y)}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] ?? pts[i];
+    const p1 = pts[i];
+    const p2 = pts[i + 1];
+    const p3 = pts[i + 2] ?? p2;
+    const c1x = p1.x + (p2.x - p0.x) / 6;
+    const c1y = p1.y + (p2.y - p0.y) / 6;
+    const c2x = p2.x - (p3.x - p1.x) / 6;
+    const c2y = p2.y - (p3.y - p1.y) / 6;
+    d += ` C ${fmt(c1x)} ${fmt(c1y)}, ${fmt(c2x)} ${fmt(c2y)}, ${fmt(p2.x)} ${fmt(p2.y)}`;
+  }
+  return d;
+}
+function buildAreaPath(pts, h, smooth = false) {
+  if (pts.length < 2) return "";
+  const line = buildLinePath(pts, smooth);
+  if (!line) return "";
+  const last = pts[pts.length - 1];
+  const first = pts[0];
+  return `${line} L ${fmt(last.x)} ${fmt(h)} L ${fmt(first.x)} ${fmt(h)} Z`;
+}
+function fmt(n) {
+  return Number.isInteger(n) ? String(n) : String(Math.round(n * 1e3) / 1e3);
+}
+function Sparkline({
+  data,
+  color = DEFAULT_COLOR,
+  showArea = false,
+  smooth = false,
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  pad = 2,
+  strokeWidth = 2,
+  className
+}) {
+  const gradientId = useId();
+  if (data.length < 2) return null;
+  const points = normalizeSeries(data, width, height, pad);
+  const linePath = buildLinePath(points, smooth);
+  const areaPath = showArea ? buildAreaPath(points, height, smooth) : "";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("block", className),
+      viewBox: `0 0 ${width} ${height}`,
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        showArea && areaPath && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.18 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx("path", { d: areaPath, fill: `url(#${gradientId})`, stroke: "none" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: linePath,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            style: { vectorEffect: "non-scaling-stroke" }
+          }
+        )
+      ]
+    }
+  );
+}
+var DEFAULT_SERIES_COLOR = "#3B82F6";
+var DEFAULT_PILL_COLOR = "#3B6FE0";
+var BASELINE_COLOR = "#EEF1F5";
+var CHART_WIDTH = 900;
+var CHART_HEIGHT = 240;
+function hexToRgba(hex, alpha) {
+  const match = /^#?([\da-f]{6})$/i.exec(hex.trim());
+  if (!match) return hex;
+  const int = parseInt(match[1], 16);
+  const r = int >> 16 & 255;
+  const g = int >> 8 & 255;
+  const b = int & 255;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function splitTickLabel(label) {
+  const match = /^(.*?)[\s\u00a0]+(\S+)$/.exec(label.trim());
+  if (!match) return [label];
+  return [match[1], match[2]];
+}
+function KpiCardWithChart({
+  title,
+  rangeLabel,
+  data,
+  xAxisLabels,
+  value,
+  delta,
+  seriesColor = DEFAULT_SERIES_COLOR,
+  pillColor = DEFAULT_PILL_COLOR,
+  showBaseline = true,
+  valuePrefix,
+  valueSuffix,
+  className
+}) {
+  const series = data?.map((point) => point.value) ?? [];
+  const hasChart = series.length >= 2;
+  const hasData = series.length > 0;
+  const formattedValue = value === void 0 || value === null ? null : `${valuePrefix ?? ""}${value}${valueSuffix ?? ""}`;
+  const sparklineProps = {
+    data: series,
+    color: seriesColor,
+    showArea: true,
+    smooth: true,
+    width: CHART_WIDTH,
+    height: CHART_HEIGHT,
+    pad: 12,
+    strokeWidth: 2.5
+  };
+  return /* @__PURE__ */ jsxs(CardShell, { className: cn("w-full overflow-hidden bg-white p-7 sm:p-8", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h3", { className: "truncate font-bold text-[1.4rem] text-slate-900 leading-tight tracking-tight", children: title }),
+        formattedValue !== null && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-bold text-2xl text-slate-900 tabular-nums", children: formattedValue }),
+          delta && /* @__PURE__ */ jsx(DeltaPill, { value: delta.value, direction: delta.direction })
+        ] })
+      ] }),
+      rangeLabel && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "shrink-0 rounded-full px-4 py-1.5 font-semibold text-sm",
+          style: {
+            color: pillColor,
+            backgroundColor: hexToRgba(pillColor, 0.12)
+          },
+          children: rangeLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-6", children: hasChart ? /* @__PURE__ */ jsxs("div", { className: "relative h-[180px] w-full", children: [
+      showBaseline && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-x-0 top-1/2 h-px",
+          style: { backgroundColor: BASELINE_COLOR }
+        }
+      ),
+      /* @__PURE__ */ jsx(Sparkline, { ...sparklineProps, className: "h-full w-full" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "flex h-[180px] w-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-400 text-sm", children: hasData ? "Not enough data" : "No data" }) }) }),
+    hasChart && xAxisLabels && xAxisLabels.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 flex items-start justify-between", children: xAxisLabels.map((label, index) => {
+      const [lead, trailing] = splitTickLabel(label);
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "flex flex-col text-slate-400 text-sm leading-tight",
+          children: [
+            /* @__PURE__ */ jsx("span", { children: lead }),
+            trailing !== void 0 && /* @__PURE__ */ jsx("span", { children: trailing })
+          ]
+        },
+        `${label}-${index}`
+      );
+    }) })
+  ] });
+}
+
+// src/components/data-display/primitives/arc.tsx
+function clamp(n, min, max) {
+  return Math.min(Math.max(n, min), max);
+}
+function arcLength(r) {
+  return Math.PI * r;
+}
+function halfCircleArcPath(cx, cy, r) {
+  const startX = cx - r;
+  const endX = cx + r;
+  return `M ${startX} ${cy} A ${r} ${r} 0 0 1 ${endX} ${cy}`;
+}
+function dashOffsetForFraction(arcLen, fraction) {
+  return arcLen * (1 - clamp(fraction, 0, 1));
+}
+function segmentDashArray(value, total, circumference, gap = 0) {
+  const safeTotal = total > 0 ? total : 0;
+  const fraction = safeTotal > 0 ? value / safeTotal : 0;
+  const rawLength = fraction * circumference;
+  const visible = Math.max(0, rawLength - gap);
+  const remainder = Math.max(0, circumference - visible);
+  return {
+    dasharray: `${visible} ${remainder}`,
+    dashoffset: 0
+  };
+}
+var DEFAULT_PALETTE = [
+  "#1f2d4d",
+  // navy
+  "#3b82f6",
+  // blue
+  "#f59e0b",
+  // amber
+  "#10b981",
+  // emerald
+  "#8b5cf6",
+  // violet
+  "#ec4899",
+  // pink
+  "#14b8a6",
+  // teal
+  "#f97316"
+  // orange
+];
+var EMPTY_RING_COLOR = "#e5e7eb";
+var VIEWBOX = 100;
+var CENTER = VIEWBOX / 2;
+var RADIUS = 38;
+var STROKE_WIDTH = 18;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+var SEGMENT_GAP = 1.5;
+function segmentColor(segment, index) {
+  return segment.color ?? DEFAULT_PALETTE[index % DEFAULT_PALETTE.length];
+}
+function legendValue(segment, total, valueFormat) {
+  if (segment.displayValue != null) return segment.displayValue;
+  if (valueFormat === "none") return null;
+  if (valueFormat === "value") return String(segment.value);
+  if (total <= 0) return "0%";
+  const pct = segment.value / total * 100;
+  const rounded = Math.round(pct * 10) / 10;
+  return `${Number.isInteger(rounded) ? rounded : rounded.toFixed(1)}%`;
+}
+function PieChartArtifact({
+  title,
+  centerLabel,
+  centerSublabel,
+  segments,
+  valueFormat = "percent",
+  className
+}) {
+  const safeSegments = segments ?? [];
+  const total = safeSegments.reduce((sum, s) => sum + (s.value > 0 ? s.value : 0), 0);
+  const isEmpty = safeSegments.length === 0 || total <= 0;
+  let runningOffset = 0;
+  return /* @__PURE__ */ jsxs(CardShell, { className: cn("w-full p-6", className), children: [
+    title ? /* @__PURE__ */ jsx("h3", { className: "font-bold text-base text-slate-900 leading-tight", children: title }) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center gap-6 sm:flex-row sm:items-center sm:gap-8",
+          title && "mt-5"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", style: { width: 150, height: 150 }, children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
+                width: "100%",
+                height: "100%",
+                role: "img",
+                "aria-label": title ?? "Donut chart",
+                children: /* @__PURE__ */ jsx("g", { transform: `rotate(-90 ${CENTER} ${CENTER})`, fill: "none", children: isEmpty ? /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: CENTER,
+                    cy: CENTER,
+                    r: RADIUS,
+                    stroke: EMPTY_RING_COLOR,
+                    strokeWidth: STROKE_WIDTH
+                  }
+                ) : safeSegments.map((segment, index) => {
+                  const value = segment.value > 0 ? segment.value : 0;
+                  const { dasharray } = segmentDashArray(
+                    value,
+                    total,
+                    CIRCUMFERENCE,
+                    SEGMENT_GAP
+                  );
+                  const dashoffset = -runningOffset;
+                  runningOffset += value / total * CIRCUMFERENCE;
+                  if (value <= 0) return null;
+                  return /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: CENTER,
+                      cy: CENTER,
+                      r: RADIUS,
+                      stroke: segmentColor(segment, index),
+                      strokeWidth: STROKE_WIDTH,
+                      strokeDasharray: dasharray,
+                      strokeDashoffset: dashoffset
+                    },
+                    segment.label + index
+                  );
+                }) })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center", children: isEmpty ? /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-400 text-sm", children: "No data" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              centerLabel ? /* @__PURE__ */ jsx("span", { className: "font-bold text-base text-slate-900 leading-none", children: centerLabel }) : null,
+              centerSublabel ? /* @__PURE__ */ jsx("span", { className: "mt-1 text-slate-500 text-xs leading-none", children: centerSublabel }) : null
+            ] }) })
+          ] }),
+          !isEmpty ? /* @__PURE__ */ jsx("ul", { className: "flex w-full min-w-0 flex-col gap-3.5", children: safeSegments.map((segment, index) => {
+            const value = legendValue(segment, total, valueFormat);
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "flex items-center justify-between gap-4",
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "inline-block size-3 shrink-0 rounded-sm",
+                        style: { backgroundColor: segmentColor(segment, index) }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-slate-600 text-sm", children: segment.label })
+                  ] }),
+                  value != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-bold text-slate-900 text-sm tabular-nums", children: value }) : null
+                ]
+              },
+              segment.label + index
+            );
+          }) }) : null
+        ]
+      }
+    )
+  ] });
+}
+var TREND_COLORS = {
+  up: "#22C55E",
+  down: "#3B82F6",
+  flat: "#9CA3AF"
+};
+var PALETTE = ["#22C55E", "#3B82F6", "#F59E0B", "#8B5CF6", "#EF4444"];
+function resolveColor(row, index) {
+  if (row.color) return row.color;
+  if (row.trend) return TREND_COLORS[row.trend];
+  return PALETTE[index % PALETTE.length];
+}
+function StackedSparklines({ rows, className }) {
+  const safeRows = Array.isArray(rows) ? rows : [];
+  return /* @__PURE__ */ jsx(CardShell, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsx("div", { className: "px-6", children: safeRows.map((row, index) => {
+    const color = resolveColor(row, index);
+    const hasData = Array.isArray(row.data) && row.data.length >= 2;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between gap-6 py-5",
+          // Hairline divider on every row except the first.
+          index > 0 && "border-slate-200 border-t"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-[15px] text-slate-500 leading-tight", children: row.label }),
+            /* @__PURE__ */ jsx("span", { className: "font-bold text-3xl text-slate-900 leading-tight tracking-tight tabular-nums", children: row.value })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "h-9 w-[28%] min-w-[88px] shrink-0", children: hasData ? /* @__PURE__ */ jsx(
+            Sparkline,
+            {
+              data: row.data,
+              color,
+              width: 110,
+              height: 36,
+              pad: 4,
+              strokeWidth: 2.5,
+              className: "h-full w-full"
+            }
+          ) : (
+            // Empty/edge state: data length < 2 → blank area, no crash.
+            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "h-full w-full" })
+          ) })
+        ]
+      },
+      `${row.label}-${index}`
+    );
+  }) }) });
+}
+var DEFAULT_MIN = 0;
+var DEFAULT_MAX = 100;
+var DEFAULT_FILL_COLOR = "#22c55e";
+var DEFAULT_TRACK_COLOR = "#eef0f2";
+var DEFAULT_VALUE_COLOR = "#0f172a";
+var DEFAULT_MIN_LABEL_COLOR = "#94a3b8";
+var DEFAULT_TITLE_COLOR = "#0f172a";
+var VIEW_W = 240;
+var VIEW_H = 130;
+var CX = 120;
+var CY = 110;
+var RADIUS2 = 100;
+var STROKE_WIDTH2 = 18;
+function clamp01(n) {
+  if (Number.isNaN(n)) return 0;
+  return Math.min(Math.max(n, 0), 1);
+}
+function StatCardHalfCircle({
+  title,
+  value,
+  displayValue,
+  min = DEFAULT_MIN,
+  max = DEFAULT_MAX,
+  minLabel,
+  maxLabel,
+  fillColor = DEFAULT_FILL_COLOR,
+  trackColor = DEFAULT_TRACK_COLOR,
+  valueColor = DEFAULT_VALUE_COLOR,
+  minLabelColor = DEFAULT_MIN_LABEL_COLOR,
+  // maxLabel color defaults to the fill color so a positive reading reads as one accent.
+  maxLabelColor,
+  titleColor = DEFAULT_TITLE_COLOR,
+  className
+}) {
+  const span = max - min;
+  const fraction = span > 0 ? clamp01((value - min) / span) : 0;
+  const arcPath = halfCircleArcPath(CX, CY, RADIUS2);
+  const len = arcLength(RADIUS2);
+  const fillDashOffset = dashOffsetForFraction(len, fraction);
+  const readout = displayValue ?? String(value);
+  const resolvedMaxLabelColor = maxLabelColor ?? fillColor;
+  return /* @__PURE__ */ jsxs(CardShell, { className: cn("w-full max-w-[440px] p-5 sm:p-6", className), children: [
+    /* @__PURE__ */ jsx(
+      "h3",
+      {
+        className: "font-semibold text-lg leading-tight",
+        style: { color: titleColor },
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative mx-auto mt-4 w-full max-w-[280px]", children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: `0 0 ${VIEW_W} ${VIEW_H}`,
+          className: "block w-full",
+          role: "img",
+          "aria-label": `${title}: ${readout}`,
+          preserveAspectRatio: "xMidYMid meet",
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: arcPath,
+                fill: "none",
+                stroke: trackColor,
+                strokeWidth: STROKE_WIDTH2,
+                strokeLinecap: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: arcPath,
+                fill: "none",
+                stroke: fillColor,
+                strokeWidth: STROKE_WIDTH2,
+                strokeLinecap: "round",
+                strokeDasharray: len,
+                strokeDashoffset: fillDashOffset
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-center pb-1",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "font-bold text-5xl leading-none tabular-nums",
+              style: { color: valueColor },
+              children: readout
+            }
+          )
+        }
+      )
+    ] }),
+    (minLabel || maxLabel) && /* @__PURE__ */ jsxs("div", { className: "mx-auto mt-3 flex w-full max-w-[280px] items-baseline justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", style: { color: minLabelColor }, children: minLabel }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "font-semibold text-sm",
+          style: { color: resolvedMaxLabelColor },
+          children: maxLabel
+        }
+      )
+    ] })
+  ] });
+}
+var TONE_TEXT_COLOR = {
+  default: "",
+  neutral: "",
+  positive: "text-emerald-600",
+  negative: "text-rose-600",
+  warning: "text-amber-600",
+  info: "text-blue-600",
+  muted: "text-slate-400"
+};
+function toneTextColor2(tone, toneMap = {}) {
+  if (!tone) return "";
+  const override = toneMap[tone];
+  if (override !== void 0) return override;
+  return TONE_TEXT_COLOR[tone] ?? "";
+}
+function parseBoldString(s) {
+  const segments = [];
+  if (!s) return segments;
+  const regex = /\*\*([\s\S]+?)\*\*/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(s)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ text: s.slice(lastIndex, match.index) });
+    }
+    segments.push({ text: match[1], bold: true });
+    lastIndex = regex.lastIndex;
+  }
+  if (lastIndex < s.length) {
+    segments.push({ text: s.slice(lastIndex) });
+  }
+  return segments;
+}
+function normalizeRich(content) {
+  return typeof content === "string" ? parseBoldString(content) : content;
+}
+function renderRich(content, toneMap = {}) {
+  const segments = normalizeRich(content);
+  return segments.map((segment, index) => {
+    const colorClass = toneTextColor2(segment.tone, toneMap);
+    if (segment.code) {
+      return /* @__PURE__ */ jsx(
+        "code",
+        {
+          className: cn(
+            "rounded bg-slate-100 px-1 py-0.5 font-mono text-[0.85em] text-slate-700",
+            colorClass
+          ),
+          children: segment.text
+        },
+        index
+      );
+    }
+    if (segment.bold) {
+      return /* @__PURE__ */ jsx("strong", { className: cn("font-bold", colorClass), children: segment.text }, index);
+    }
+    if (colorClass) {
+      return /* @__PURE__ */ jsx("span", { className: colorClass, children: segment.text }, index);
+    }
+    return /* @__PURE__ */ jsx(Fragment$1, { children: segment.text }, index);
+  });
+}
+var VIEW_W2 = 800;
+var VIEW_H2 = 300;
+var PAD_LEFT = 8;
+var PAD_RIGHT = 8;
+var PAD_TOP = 16;
+var PAD_BOTTOM = 16;
+var PLOT_W = VIEW_W2 - PAD_LEFT - PAD_RIGHT;
+var PLOT_H = VIEW_H2 - PAD_TOP - PAD_BOTTOM;
+var GRID_COLOR = "#e2e8f0";
+var AXIS_LABEL_COLOR = "#94a3b8";
+var BAND_FILL = "#94a3b8";
+var TABLE_HEADER_BG = "#f8fafc";
+var TABLE_HEADER_TEXT = "#64748b";
+var TABLE_ROW_BORDER = "#f1f5f9";
+var FIRST_COL_TEXT = "#0f172a";
+var SUMMARY_TEXT_COLOR = "#475569";
+function niceMax(value) {
+  if (value <= 0) return 1;
+  const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
+  const normalized = value / magnitude;
+  let nice;
+  if (normalized <= 1) nice = 1;
+  else if (normalized <= 2) nice = 2;
+  else if (normalized <= 5) nice = 5;
+  else nice = 10;
+  return nice * magnitude;
+}
+function yFor(value, yMax) {
+  const span = yMax || 1;
+  return PAD_TOP + PLOT_H - value / span * PLOT_H;
+}
+function xFor(i, n) {
+  if (n <= 1) return PAD_LEFT + PLOT_W / 2;
+  return PAD_LEFT + i / (n - 1) * PLOT_W;
+}
+var ALIGN_CLASS = {
+  left: "text-left",
+  right: "text-right",
+  center: "text-center"
+};
+function deltaDirection(d) {
+  return d ?? "flat";
+}
+function TableListArtifact({
+  chartTitle,
+  series,
+  xAxisLabels,
+  yAxisTicks,
+  chartType = "area",
+  tableColumns,
+  tableRows,
+  summaryText,
+  className
+}) {
+  const gradientId = useId();
+  const hasSeries = Array.isArray(series) && series.length > 0 && series.some((s) => Array.isArray(s.data) && s.data.length > 0);
+  const dataMax = hasSeries ? Math.max(
+    0,
+    ...series.flatMap((s) => Array.isArray(s.data) ? s.data : [])
+  ) : 0;
+  const ticks = yAxisTicks && yAxisTicks.length > 0 ? [...yAxisTicks].sort((a, b) => b.value - a.value) : null;
+  const yMax = ticks ? Math.max(...ticks.map((t) => t.value), dataMax) : niceMax(dataMax);
+  const seriesPoints = hasSeries ? series.map((s) => {
+    const data = Array.isArray(s.data) ? s.data : [];
+    const n = data.length;
+    const pts = data.map((v, i) => ({ x: xFor(i, n), y: yFor(v, yMax) }));
+    return { color: s.color, pts };
+  }) : [];
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsxs(CardShell, { className: "border-[#e5e7eb] p-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-bold text-[1.125rem] text-slate-800 leading-snug", children: chartTitle }),
+        hasSeries && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center gap-x-4 gap-y-1", children: series.map((s) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "flex items-center gap-2 text-slate-600 text-sm",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "inline-block size-2 shrink-0 rounded-full",
+                  style: { backgroundColor: s.color }
+                }
+              ),
+              s.name
+            ]
+          },
+          s.name
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-5", children: [
+        hasSeries ? /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "block h-[300px] w-full",
+            viewBox: `0 0 ${VIEW_W2} ${VIEW_H2}`,
+            preserveAspectRatio: "none",
+            role: "img",
+            "aria-label": chartTitle,
+            children: [
+              ticks?.map((tick) => {
+                const y = yFor(tick.value, yMax);
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: PAD_LEFT,
+                      y1: y,
+                      x2: VIEW_W2 - PAD_RIGHT,
+                      y2: y,
+                      stroke: GRID_COLOR,
+                      strokeWidth: 1,
+                      style: { vectorEffect: "non-scaling-stroke" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: PAD_LEFT,
+                      y: y - 6,
+                      fill: AXIS_LABEL_COLOR,
+                      fontSize: 13,
+                      textAnchor: "start",
+                      children: tick.label
+                    }
+                  )
+                ] }, tick.label);
+              }),
+              chartType === "area" && seriesPoints.length >= 2 && seriesPoints[0].pts.length > 1 && seriesPoints[1].pts.length > 1 && /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: bandPath(seriesPoints[0].pts, seriesPoints[1].pts),
+                  fill: BAND_FILL,
+                  fillOpacity: 0.12,
+                  stroke: "none"
+                }
+              ),
+              chartType === "area" && seriesPoints.length > 0 && (() => {
+                const bottom = seriesPoints[seriesPoints.length - 1];
+                const area = buildAreaPath(bottom.pts, VIEW_H2 - PAD_BOTTOM);
+                if (!area) return null;
+                return /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+                    "linearGradient",
+                    {
+                      id: gradientId,
+                      x1: "0",
+                      y1: "0",
+                      x2: "0",
+                      y2: "1",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "stop",
+                          {
+                            offset: "0%",
+                            stopColor: bottom.color,
+                            stopOpacity: 0.14
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "stop",
+                          {
+                            offset: "100%",
+                            stopColor: bottom.color,
+                            stopOpacity: 0
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: area,
+                      fill: `url(#${gradientId})`,
+                      stroke: "none"
+                    }
+                  )
+                ] });
+              })(),
+              seriesPoints.map((sp, idx) => {
+                const d = buildLinePath(sp.pts, true);
+                if (!d) return null;
+                return /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d,
+                    fill: "none",
+                    stroke: sp.color,
+                    strokeWidth: 3,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    style: { vectorEffect: "non-scaling-stroke" }
+                  },
+                  series[idx].name
+                );
+              })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex h-[160px] items-center justify-center text-slate-400 text-sm", children: "No data" }),
+        hasSeries && xAxisLabels && xAxisLabels.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex justify-between px-1", children: xAxisLabels.map((label, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-slate-400 text-sm",
+            style: { color: AXIS_LABEL_COLOR },
+            children: label
+          },
+          `${label}-${i}`
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardShell, { className: "overflow-hidden border-[#e5e7eb] p-0", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { style: { backgroundColor: TABLE_HEADER_BG }, children: tableColumns.map((col) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          scope: "col",
+          className: cn(
+            "px-6 py-4 font-semibold text-[0.75rem] uppercase tracking-wider",
+            ALIGN_CLASS[col.align ?? "left"]
+          ),
+          style: { color: TABLE_HEADER_TEXT },
+          children: col.label
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: tableRows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          style: {
+            borderTop: rowIndex === 0 ? void 0 : `1px solid ${TABLE_ROW_BORDER}`
+          },
+          children: tableColumns.map((col, colIndex) => {
+            const align = col.align ?? (colIndex === 0 ? "left" : "right");
+            if (colIndex === 0) {
+              return /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: cn(
+                    "px-6 py-5 font-bold text-[1.0625rem]",
+                    ALIGN_CLASS[align]
+                  ),
+                  style: { color: FIRST_COL_TEXT },
+                  children: row.label
+                },
+                col.key
+              );
+            }
+            if (colIndex === 1) {
+              return /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: cn(
+                    "px-6 py-5 text-[1.0625rem] text-slate-700 tabular-nums",
+                    ALIGN_CLASS[align]
+                  ),
+                  children: row.value
+                },
+                col.key
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: cn("px-6 py-5", ALIGN_CLASS[align]),
+                children: row.delta ? /* @__PURE__ */ jsx(
+                  DeltaPill,
+                  {
+                    value: row.delta.text,
+                    direction: deltaDirection(row.delta.direction),
+                    hideArrow: true,
+                    className: "bg-transparent px-0 py-0 font-semibold text-sm"
+                  }
+                ) : null
+              },
+              col.key
+            );
+          })
+        },
+        `${row.label}-${rowIndex}`
+      )) })
+    ] }) }),
+    summaryText && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "text-[1rem] leading-relaxed",
+        style: { color: SUMMARY_TEXT_COLOR },
+        children: renderRich(summaryText)
+      }
+    )
+  ] });
+}
+function bandPath(top, bottom) {
+  if (top.length === 0 || bottom.length === 0) return "";
+  const fmt2 = (n) => Number.isInteger(n) ? String(n) : String(Math.round(n * 1e3) / 1e3);
+  const forward = top.map((p, i) => `${i === 0 ? "M" : "L"} ${fmt2(p.x)} ${fmt2(p.y)}`).join(" ");
+  const back = [...bottom].reverse().map((p) => `L ${fmt2(p.x)} ${fmt2(p.y)}`).join(" ");
+  return `${forward} ${back} Z`;
+}
+var DEFAULT_ICON_CHIP_BG = "#F1F5F9";
+var DEFAULT_ICON_CHIP_FG = "#334155";
+var DEFAULT_VALUE_COLOR2 = "#0F172A";
+var DEFAULT_SPARKLINE_COLOR = "#10B981";
+function KpiCardWithSparklines({
+  label,
+  value,
+  delta,
+  caption,
+  icon,
+  iconChipBg,
+  iconChipFg,
+  sparkline,
+  accentColor,
+  valueColor,
+  className,
+  onClick
+}) {
+  const sparklineColor = sparkline?.color ?? accentColor ?? DEFAULT_SPARKLINE_COLOR;
+  const sparkData = sparkline?.data ?? [];
+  const hasSparkline = sparkData.length >= 2;
+  const interactive = typeof onClick === "function";
+  const body = /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium text-base text-slate-500 leading-snug", children: label }),
+      icon != null && icon !== "" && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg font-semibold text-lg",
+          style: {
+            backgroundColor: iconChipBg ?? DEFAULT_ICON_CHIP_BG,
+            color: iconChipFg ?? DEFAULT_ICON_CHIP_FG
+          },
+          children: icon
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-end gap-x-3 gap-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "font-extrabold text-5xl leading-none tracking-tight tabular-nums",
+          style: { color: valueColor ?? DEFAULT_VALUE_COLOR2 },
+          children: value
+        }
+      ),
+      delta && /* @__PURE__ */ jsx(
+        DeltaPill,
+        {
+          value: delta.value,
+          direction: delta.direction,
+          tone: delta.tone,
+          className: "mb-1 px-2.5 py-1 text-sm"
+        }
+      )
+    ] }),
+    caption && /* @__PURE__ */ jsx("p", { className: "mt-1 text-slate-400 text-xs", children: caption }),
+    hasSparkline && /* @__PURE__ */ jsx("div", { className: "-mx-6 -mb-6 mt-5", children: /* @__PURE__ */ jsx(
+      Sparkline,
+      {
+        data: sparkData,
+        color: sparklineColor,
+        showArea: sparkline?.showArea ?? true,
+        smooth: sparkline?.smooth ?? false,
+        className: "h-24 w-full"
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ jsx(
+    CardShell,
+    {
+      className: cn(
+        "overflow-hidden",
+        interactive && "cursor-pointer transition-shadow hover:shadow-md",
+        className
+      ),
+      children: interactive ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick,
+          onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              onClick?.();
+            }
+          },
+          className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: body
+        }
+      ) : body
+    }
+  );
+}
+var DEFAULT_LOCATION_LABEL = "Location";
+var DEFAULT_REVENUE_LABEL = "Rev";
+var DEFAULT_STATUS_LABEL = "Status";
+var GRID_TEMPLATE = "grid grid-cols-[1fr_auto_3rem] items-center gap-x-4 px-6";
+function LocationTableRow({ row }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(GRID_TEMPLATE, "py-5"), role: "row", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "cell",
+        className: "truncate font-semibold text-[1.0625rem] text-slate-800",
+        children: row.name
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "cell",
+        className: "text-right text-[1.0625rem] text-slate-700 tabular-nums",
+        children: row.revenue
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { role: "cell", className: "flex justify-end", children: /* @__PURE__ */ jsx(
+      StatusDot,
+      {
+        status: row.status,
+        color: row.statusColor,
+        label: row.statusLabel,
+        size: 13
+      }
+    ) })
+  ] });
+}
+function LocationsRevenueCard({
+  locationColumnLabel = DEFAULT_LOCATION_LABEL,
+  revenueColumnLabel = DEFAULT_REVENUE_LABEL,
+  statusColumnLabel = DEFAULT_STATUS_LABEL,
+  rows,
+  className
+}) {
+  const hasRows = Array.isArray(rows) && rows.length > 0;
+  return /* @__PURE__ */ jsx(CardShell, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsxs("div", { role: "table", "aria-label": locationColumnLabel, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "row",
+        className: cn(
+          GRID_TEMPLATE,
+          "border-b bg-slate-50 py-4 font-semibold text-[0.75rem] text-slate-400 uppercase tracking-wider"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { role: "columnheader", className: "text-left", children: locationColumnLabel }),
+          /* @__PURE__ */ jsx("span", { role: "columnheader", className: "text-right", children: revenueColumnLabel }),
+          /* @__PURE__ */ jsx("span", { role: "columnheader", className: "text-right", children: statusColumnLabel })
+        ]
+      }
+    ),
+    hasRows ? /* @__PURE__ */ jsx("div", { className: "divide-y", children: rows.map((row, index) => /* @__PURE__ */ jsx(LocationTableRow, { row }, row.id ?? `${row.name}-${index}`)) }) : /* @__PURE__ */ jsx("div", { className: "px-6 py-8 text-center text-slate-400 text-sm", children: "No locations" })
+  ] }) });
+}
+var DENSITY_CELL_PADDING = {
+  comfortable: "px-6 py-4",
+  compact: "px-6 py-3"
+};
+function RowBasedDataList({
+  rows,
+  title,
+  labelColumnWidth = "30%",
+  density = "comfortable",
+  className
+}) {
+  const cellPadding = DENSITY_CELL_PADDING[density] ?? DENSITY_CELL_PADDING.comfortable;
+  const hasRows = Array.isArray(rows) && rows.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    title && /* @__PURE__ */ jsx("p", { className: "mb-2 font-medium text-slate-700 text-sm", children: title }),
+    /* @__PURE__ */ jsx(CardShell, { className: "overflow-hidden rounded-xl border-slate-200 shadow-none", children: hasRows ? /* @__PURE__ */ jsx(
+      "dl",
+      {
+        className: "grid",
+        style: { gridTemplateColumns: `${labelColumnWidth} 1fr` },
+        children: rows.map((row, index) => {
+          const isLast = index === rows.length - 1;
+          return /* @__PURE__ */ jsx(
+            RowPair,
+            {
+              row,
+              isLast,
+              cellPadding
+            },
+            `${row.label}-${index}`
+          );
+        })
+      }
+    ) : /* @__PURE__ */ jsx("p", { className: "px-6 py-5 text-slate-400 text-sm", children: "No details available" }) })
+  ] });
+}
+function RowPair({ row, isLast, cellPadding }) {
+  const valueColorClass = toneTextColor(row.valueColor);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "dt",
+      {
+        className: cn(
+          "min-w-0 break-words bg-slate-50/70 font-normal text-slate-500 text-[0.9375rem] leading-snug",
+          cellPadding,
+          !isLast && "border-slate-100 border-b"
+        ),
+        children: row.label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "dd",
+      {
+        className: cn(
+          "min-w-0 break-words border-slate-100 border-l font-medium text-[0.9375rem] leading-snug",
+          valueColorClass,
+          cellPadding,
+          !isLast && "border-b"
+        ),
+        children: row.href ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: row.href,
+            target: "_blank",
+            rel: "noreferrer noopener",
+            className: "underline decoration-slate-300 underline-offset-2 hover:decoration-current",
+            children: row.value
+          }
+        ) : row.value
+      }
+    )
+  ] });
+}
+var TONE_STYLES = {
+  green: { bg: "#E7F6EC", text: "#16A34A" },
+  blue: { bg: "#E8EDFB", text: "#3B5BDB" },
+  amber: { bg: "#FBEFD3", text: "#B45309" },
+  red: { bg: "#FCE4E7", text: "#DC2626" },
+  gray: { bg: "#F4F5F7", text: "#374151" },
+  neutral: { bg: "#F4F5F7", text: "#374151" }
+};
+var TAG_BG = "#F4F5F7";
+var TAG_BORDER = "#E5E7EB";
+var TAG_TEXT = "#374151";
+var DEFAULT_TONE = "neutral";
+function tintFromColor(color) {
+  const hex = /^#([0-9a-fA-F]{6})$/.exec(color);
+  if (!hex) return color;
+  return `#${hex[1]}24`;
+}
+function resolveSolidStyle(badge) {
+  if (badge.color) {
+    return { bg: tintFromColor(badge.color), text: badge.color };
+  }
+  const tone = badge.tone ?? DEFAULT_TONE;
+  return TONE_STYLES[tone] ?? TONE_STYLES[DEFAULT_TONE];
+}
+function resolveDotColor(badge) {
+  if (badge.dotColor) return badge.dotColor;
+  if (badge.color) return badge.color;
+  const tone = badge.tone ?? DEFAULT_TONE;
+  return TONE_STYLES[tone]?.text ?? TONE_STYLES[DEFAULT_TONE].text;
+}
+function BadgePill({ badge, groupStyle }) {
+  const style = badge.style ?? groupStyle;
+  const baseClass = "inline-flex items-center rounded-full px-4 py-1.5 font-medium text-sm whitespace-nowrap";
+  if (style === "outline") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(baseClass, "border"),
+        style: {
+          backgroundColor: TAG_BG,
+          borderColor: TAG_BORDER,
+          color: TAG_TEXT
+        },
+        children: [
+          badge.dot && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "mr-2 inline-block size-2 shrink-0 rounded-full",
+              style: { backgroundColor: resolveDotColor(badge) }
+            }
+          ),
+          badge.label
+        ]
+      }
+    );
+  }
+  const solid = resolveSolidStyle(badge);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: baseClass,
+      style: { backgroundColor: solid.bg, color: solid.text },
+      children: [
+        badge.dot && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mr-2 inline-block size-2 shrink-0 rounded-full",
+            style: { backgroundColor: resolveDotColor(badge) }
+          }
+        ),
+        badge.label
+      ]
+    }
+  );
+}
+function BadgeGroupBlock({ group }) {
+  const badges = group.badges ?? [];
+  if (badges.length === 0) return null;
+  const groupStyle = group.variant === "tag" ? "outline" : "solid";
+  return /* @__PURE__ */ jsxs("div", { children: [
+    group.label && /* @__PURE__ */ jsx("span", { className: "mb-2 block font-medium text-[11px] text-gray-400 uppercase tracking-wider", children: group.label }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-3", children: badges.map((badge, i) => {
+      if (!badge?.label) return null;
+      return /* @__PURE__ */ jsx(
+        BadgePill,
+        {
+          badge,
+          groupStyle
+        },
+        `${badge.label}-${i}`
+      );
+    }) })
+  ] });
+}
+function BadgesArtifact({ groups, className }) {
+  const safeGroups = groups ?? [];
+  if (safeGroups.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-6", className), children: safeGroups.map((group, i) => /* @__PURE__ */ jsx(BadgeGroupBlock, { group }, group.label ?? `group-${i}`)) });
+}
+var BADGE_TONE_CLASSES = {
+  default: "bg-slate-100 text-slate-600",
+  positive: "bg-emerald-50 text-emerald-700",
+  negative: "bg-rose-50 text-rose-700",
+  muted: "bg-slate-50 text-slate-400",
+  info: "bg-blue-50 text-blue-700"
+};
+function badgeToneClass(tone) {
+  if (!tone) return BADGE_TONE_CLASSES.default;
+  return BADGE_TONE_CLASSES[tone] ?? BADGE_TONE_CLASSES.default;
+}
+function OrderedListArtifact({
+  title,
+  intro,
+  items,
+  startIndex = 1,
+  markerStyle = "number",
+  className
+}) {
+  const safeItems = Array.isArray(items) ? items : [];
+  return /* @__PURE__ */ jsxs("section", { className: cn("text-left", className), children: [
+    title ? /* @__PURE__ */ jsx("h3", { className: "font-bold text-slate-900 text-xl leading-snug", children: title }) : null,
+    intro ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "text-slate-500 text-[16px] leading-relaxed",
+          title && "mt-4"
+        ),
+        children: renderRich(intro)
+      }
+    ) : null,
+    safeItems.length > 0 ? /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: cn(
+          "flex list-none flex-col gap-3.5",
+          (title || intro) && "mt-5"
+        ),
+        children: safeItems.map((item, index) => {
+          const marker = item.marker ?? formatMarker(index, markerStyle, startIndex);
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex items-start gap-3.5",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "flex h-7 w-7 shrink-0 items-center justify-center rounded-md font-medium text-sm tabular-nums",
+                      badgeToneClass(item.tone)
+                    ),
+                    children: marker
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "flex-1 pt-0.5 text-slate-900 text-[16px] leading-relaxed", children: renderRich(item.content) })
+              ]
+            },
+            index
+          );
+        })
+      }
+    ) : null
+  ] });
+}
+var COMPLETE_BG = "#E6F4EC";
+var COMPLETE_ACCENT = "#16A34A";
+var ACTIVE_COLOR = "#F59E0B";
+var PENDING_STROKE = "#CBD5E1";
+var ERROR_BG = "#FEE2E2";
+var ERROR_COLOR = "#DC2626";
+var SPIN_CLASS = "ae-spin";
+var SPIN_STYLE_ID = "ae-spin-keyframes";
+function ensureSpinKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(SPIN_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = SPIN_STYLE_ID;
+  style.textContent = `@keyframes ${SPIN_CLASS}{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){.${SPIN_CLASS}{animation:${SPIN_CLASS} 0.8s linear infinite;transform-origin:center}}`;
+  document.head.appendChild(style);
+}
+function resolveSize(size) {
+  if (typeof size === "number") return size;
+  switch (size) {
+    case "sm":
+      return 24;
+    case "lg":
+      return 48;
+    case "md":
+    default:
+      return 34;
+  }
+}
+function normalizeStatus(status) {
+  switch (status) {
+    case "completed":
+      return "complete";
+    case "in_progress":
+      return "active";
+    case "active":
+    case "pending":
+    case "error":
+    case "complete":
+      return status;
+    default:
+      return "complete";
+  }
+}
+function CheckIcon8({
+  color = COMPLETE_ACCENT,
+  className,
+  style,
+  strokeWidth = 2.25
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      style,
+      children: /* @__PURE__ */ jsx("path", { d: "M5 12l4 4 8-9" })
+    }
+  );
+}
+function ClockIcon2({
+  color = "#64748B",
+  className,
+  strokeWidth = 1.75
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })
+      ]
+    }
+  );
+}
+function XIcon7({
+  color = ERROR_COLOR,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: 2.25,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      style,
+      children: /* @__PURE__ */ jsx("path", { d: "M7 7l10 10M17 7L7 17" })
+    }
+  );
+}
+function StatusNode({ status, size, accentColor, className }) {
+  const resolved = normalizeStatus(status);
+  const px = resolveSize(size);
+  const accent = accentColor ?? COMPLETE_ACCENT;
+  if (resolved === "active") ensureSpinKeyframes();
+  const base = cn(
+    "inline-flex shrink-0 items-center justify-center rounded-full",
+    className
+  );
+  const dimensions = { width: px, height: px };
+  const glyphPx = Math.round(px * 0.5);
+  if (resolved === "complete") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: base,
+        style: { ...dimensions, backgroundColor: COMPLETE_BG },
+        "data-status": "complete",
+        children: /* @__PURE__ */ jsx(CheckIcon8, { color: accent, className: "block", style: { width: glyphPx, height: glyphPx } })
+      }
+    );
+  }
+  if (resolved === "error") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: base,
+        style: { ...dimensions, backgroundColor: ERROR_BG },
+        "data-status": "error",
+        children: /* @__PURE__ */ jsx(XIcon7, { color: ERROR_COLOR, className: "block", style: { width: glyphPx, height: glyphPx } })
+      }
+    );
+  }
+  if (resolved === "active") {
+    const ringColor = accentColor ?? ACTIVE_COLOR;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: base,
+        style: dimensions,
+        "data-status": "active",
+        role: "status",
+        "aria-label": "In progress",
+        "aria-live": "polite",
+        children: /* @__PURE__ */ jsx("span", { className: cn(SPIN_CLASS, "block"), style: { width: px, height: px }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className: "block size-full", children: /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            fill: "none",
+            stroke: ringColor,
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeDasharray: "47 16"
+          }
+        ) }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { className: base, style: dimensions, "data-status": "pending", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className: "block size-full", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "none", stroke: PENDING_STROKE, strokeWidth: "1.75" }) }) });
+}
+var DEFAULT_TASK_LABEL = "RESEARCH TASK";
+var DEFAULT_FINDINGS_LABEL = "EMERGING FINDINGS";
+function stepLabelClass(status) {
+  switch (status) {
+    case "completed":
+      return "font-normal text-slate-700";
+    case "in_progress":
+      return "font-bold text-slate-900";
+    case "pending":
+    default:
+      return "font-normal text-slate-400";
+  }
+}
+function hasRichContent(findings) {
+  if (findings == null) return false;
+  if (typeof findings === "string") return findings.trim().length > 0;
+  return findings.some((segment) => segment.text.trim().length > 0);
+}
+function DeepResearchProgress({
+  taskLabel = DEFAULT_TASK_LABEL,
+  taskDescription,
+  steps,
+  findingsLabel = DEFAULT_FINDINGS_LABEL,
+  findings,
+  showFindings,
+  className
+}) {
+  const safeSteps = Array.isArray(steps) ? steps : [];
+  const findingsHasContent = hasRichContent(findings);
+  const findingsVisible = findingsHasContent && showFindings !== false;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-6 text-left", className), children: [
+    /* @__PURE__ */ jsxs(CardShell, { className: "rounded-xl border-slate-200/80 bg-slate-50/70 px-5 py-4 shadow-none", children: [
+      taskLabel ? /* @__PURE__ */ jsx("p", { className: "font-medium text-[11px] text-slate-400 uppercase tracking-wider", children: taskLabel }) : null,
+      /* @__PURE__ */ jsx("p", { className: "mt-2 text-[16px] text-slate-700 leading-relaxed", children: taskDescription })
+    ] }),
+    safeSteps.length > 0 ? /* @__PURE__ */ jsx("ol", { className: "flex list-none flex-col gap-5", children: safeSteps.map((step, index) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex items-center gap-4",
+        "data-status": step.status,
+        children: [
+          /* @__PURE__ */ jsx(StatusNode, { status: step.status, size: "md" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-[17px] leading-snug",
+                stepLabelClass(step.status)
+              ),
+              children: step.label
+            }
+          )
+        ]
+      },
+      step.id ?? index
+    )) }) : null,
+    findingsVisible ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx("hr", { className: "border-slate-200 border-t" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        findingsLabel ? /* @__PURE__ */ jsx("p", { className: "font-medium text-[11px] text-slate-400 uppercase tracking-wider", children: findingsLabel }) : null,
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-[16px] text-slate-700 leading-relaxed [&_strong]:text-slate-900", children: renderRich(findings) })
+      ] })
+    ] }) : null
+  ] });
+}
+var NODE_SIZE = 48;
+var NODE_COLUMN_WIDTH = NODE_SIZE;
+var DEFAULT_ACCENT = "#16A34A";
+var FOOTER_SEPARATOR = " \xB7 ";
+function resolveFooterItems(footer) {
+  if (!footer) return [];
+  if (Array.isArray(footer.items) && footer.items.length > 0) {
+    return footer.items.filter((item) => item != null && item !== "");
   }
-  if (payload.type === "metrics" && payload.metrics) {
-    return /* @__PURE__ */ jsx(MetricsGrid, { metrics: payload.metrics, className });
+  const parts = [];
+  if (footer.thinkingLabel) parts.push(footer.thinkingLabel);
+  if (footer.sourcesLabel) parts.push(footer.sourcesLabel);
+  return parts;
+}
+function TimelineStep({
+  step,
+  isLast,
+  accentColor
+}) {
+  return /* @__PURE__ */ jsxs("li", { className: "relative flex gap-4", "data-status": step.status ?? "complete", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative flex shrink-0 justify-center",
+        style: { width: NODE_COLUMN_WIDTH },
+        children: [
+          !isLast && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-1/2 bottom-0 w-0.5 bg-slate-200",
+              style: { top: NODE_SIZE / 2, height: `calc(100% - ${NODE_SIZE / 2}px)` }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StatusNode,
+            {
+              status: step.status ?? "complete",
+              size: NODE_SIZE,
+              accentColor,
+              className: "relative z-10"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 pt-1.5 pb-8", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-semibold text-[1.0625rem] text-slate-900 leading-snug", children: step.title }),
+      step.description ? /* @__PURE__ */ jsx("p", { className: "text-[0.9375rem] text-slate-500 leading-snug", children: step.description }) : null
+    ] })
+  ] });
+}
+function Tracker({
+  steps,
+  footer,
+  showFooterIcon = true,
+  accentColor = DEFAULT_ACCENT,
+  className
+}) {
+  const hasSteps = Array.isArray(steps) && steps.length > 0;
+  const footerItems = resolveFooterItems(footer);
+  const hasFooter = footerItems.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full bg-card pl-2", className), children: [
+    hasSteps ? /* @__PURE__ */ jsx("ol", { className: "flex flex-col", children: steps.map((step, index) => /* @__PURE__ */ jsx(
+      TimelineStep,
+      {
+        step,
+        isLast: index === steps.length - 1,
+        accentColor
+      },
+      step.id ?? `${step.title}-${index}`
+    )) }) : /* @__PURE__ */ jsx("p", { className: "py-6 text-slate-400 text-sm", children: "No steps" }),
+    hasFooter ? /* @__PURE__ */ jsx("div", { className: "mt-2 border-slate-200 border-t pt-5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[0.9375rem] text-slate-500", children: [
+      showFooterIcon ? /* @__PURE__ */ jsx(ClockIcon2, { className: "size-4 shrink-0" }) : null,
+      /* @__PURE__ */ jsx("span", { children: footerItems.join(FOOTER_SEPARATOR) })
+    ] }) }) : null
+  ] });
+}
+var DEFAULTS = {
+  /** Selected row background — emerald-50. */
+  selectedBg: "#ECFDF5",
+  /** Selected row border — emerald-200. */
+  selectedBorder: "#A7F3D0",
+  /** Selected radio circle fill — emerald-500. */
+  selectedCircle: "#10B981",
+  /** Selected label text — slate-900. */
+  selectedLabel: "#0F172A",
+  /** Unselected row border — slate-200. */
+  unselectedBorder: "#E2E8F0",
+  /** Unselected radio ring — slate-300. */
+  unselectedRing: "#CBD5E1",
+  /** Unselected label text — slate-500. */
+  unselectedLabel: "#64748B",
+  /** Progress pill background — indigo-50. */
+  pillBg: "#EEF2FF",
+  /** Progress pill text — indigo-600. */
+  pillText: "#4F46E5",
+  /** Category label text — slate-400. */
+  categoryText: "#94A3B8",
+  /** Question title text — slate-900. */
+  titleColor: "#0F172A"
+};
+function resolveProgressLabel(progressLabel, questionIndex, questionTotal) {
+  if (progressLabel) return progressLabel;
+  if (typeof questionIndex === "number" && typeof questionTotal === "number" && questionTotal > 0) {
+    return `Question ${questionIndex} of ${questionTotal}`;
   }
-  if (payload.type === "table" && payload.table) {
-    return /* @__PURE__ */ jsx(DataTable, { data: payload.table, className });
+  return void 0;
+}
+function CheckIcon9() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      width: "14",
+      height: "14",
+      fill: "none",
+      stroke: "#FFFFFF",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
+    }
+  );
+}
+function OptionRow({
+  option,
+  selected,
+  submitted,
+  isTabStop,
+  colors,
+  customAnswer,
+  customAnswerPlaceholder,
+  onSelect,
+  onMove,
+  onCustomChange,
+  onCustomCommit
+}) {
+  const isOtherExpanded = !!option.isOther && selected;
+  const handleKeyDown = (e) => {
+    if (submitted) return;
+    switch (e.key) {
+      case " ":
+      case "Enter":
+        e.preventDefault();
+        onSelect();
+        break;
+      // WAI-ARIA radiogroup pattern: arrow keys move focus to the adjacent
+      // radio and check it. Down/Right advance, Up/Left retreat.
+      case "ArrowDown":
+      case "ArrowRight":
+        e.preventDefault();
+        onMove(1);
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        e.preventDefault();
+        onMove(-1);
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "radio",
+      "aria-checked": selected,
+      tabIndex: submitted ? -1 : isTabStop ? 0 : -1,
+      "data-option-id": option.id,
+      onClick: submitted ? void 0 : onSelect,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "flex items-start gap-3 rounded-xl border px-4 py-4 text-left transition-colors",
+        !submitted && "cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/60",
+        selected ? "font-medium" : "font-normal"
+      ),
+      style: {
+        backgroundColor: selected ? colors.selectedBg : "transparent",
+        borderColor: selected ? colors.selectedBorder : colors.unselectedBorder
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full",
+            style: selected ? { backgroundColor: colors.selectedCircle } : {
+              backgroundColor: "transparent",
+              border: `2px solid ${colors.unselectedRing}`
+            },
+            children: selected && /* @__PURE__ */ jsx(CheckIcon9, {})
+          }
+        ),
+        isOtherExpanded ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: customAnswer,
+            placeholder: customAnswerPlaceholder,
+            disabled: submitted,
+            autoComplete: "off",
+            onClick: (e) => e.stopPropagation(),
+            onChange: (e) => onCustomChange(e.target.value),
+            onBlur: onCustomCommit,
+            onKeyDown: (e) => {
+              e.stopPropagation();
+              if (e.key === "Enter") {
+                e.preventDefault();
+                onCustomCommit();
+              }
+            },
+            className: "flex-1 border-0 bg-transparent p-0 text-base leading-snug outline-none placeholder:text-slate-400",
+            style: { color: colors.selectedLabel }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "flex-1 text-base leading-snug",
+            style: { color: selected ? colors.selectedLabel : colors.unselectedLabel },
+            children: option.label
+          }
+        )
+      ]
+    }
+  );
+}
+function BuiltInQuestions(props) {
+  const {
+    question,
+    options,
+    selectedOptionId,
+    customAnswer,
+    customAnswerPlaceholder,
+    progressLabel,
+    categoryLabel,
+    questionIndex,
+    questionTotal,
+    submitted = false,
+    onSelect,
+    onCustomAnswerChange,
+    onAnswer,
+    colors: colorOverrides,
+    className
+  } = props;
+  const colors = {
+    ...DEFAULTS,
+    ...colorOverrides
+  };
+  const safeOptions = (options ?? []).filter(
+    (option) => !!option?.id
+  );
+  const radioGroupRef = useRef(null);
+  const isControlled = typeof onSelect === "function";
+  const [internalSelected, setInternalSelected] = useState(
+    selectedOptionId ?? null
+  );
+  const [internalCustom, setInternalCustom] = useState(customAnswer ?? "");
+  const activeSelected = isControlled ? selectedOptionId ?? null : internalSelected;
+  const activeCustom = isControlled ? customAnswer ?? "" : internalCustom;
+  const resolvedProgress = resolveProgressLabel(
+    progressLabel,
+    questionIndex,
+    questionTotal
+  );
+  const hasHeader = !!resolvedProgress || !!categoryLabel;
+  const handleSelect = (option) => {
+    if (submitted) return;
+    if (isControlled) {
+      onSelect?.(option.id);
+    } else {
+      setInternalSelected(option.id);
+    }
+    if (!option.isOther) {
+      onAnswer?.({ optionId: option.id });
+    }
+  };
+  const handleMove = (fromIndex, delta) => {
+    if (submitted) return;
+    const count = safeOptions.length;
+    if (count === 0) return;
+    const nextIndex = (fromIndex + delta + count) % count;
+    const nextOption = safeOptions[nextIndex];
+    if (!nextOption) return;
+    handleSelect(nextOption);
+    const group = radioGroupRef.current;
+    if (group) {
+      const target = group.querySelector(
+        `[data-option-id="${CSS.escape(nextOption.id)}"]`
+      );
+      target?.focus();
+    }
+  };
+  const handleCustomChange = (value) => {
+    if (isControlled) {
+      onCustomAnswerChange?.(value);
+    } else {
+      setInternalCustom(value);
+    }
+  };
+  const handleCustomCommit = (optionId) => {
+    onAnswer?.({ optionId, customAnswer: activeCustom });
+  };
+  return /* @__PURE__ */ jsxs(CardShell, { className: cn("p-6 sm:p-7", className), children: [
+    hasHeader && /* @__PURE__ */ jsxs("div", { className: "mb-5 flex items-center justify-between gap-3", children: [
+      resolvedProgress ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "inline-flex items-center rounded-lg px-3 py-1 font-semibold text-[13px]",
+          style: { backgroundColor: colors.pillBg, color: colors.pillText },
+          children: resolvedProgress
+        }
+      ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+      categoryLabel && /* @__PURE__ */ jsx("span", { className: "text-sm", style: { color: colors.categoryText }, children: categoryLabel })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "h3",
+      {
+        className: "font-bold text-2xl leading-snug",
+        style: { color: colors.titleColor },
+        children: question
+      }
+    ),
+    safeOptions.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: radioGroupRef,
+        role: "radiogroup",
+        "aria-label": question,
+        className: "mt-7 flex flex-col gap-3",
+        children: (() => {
+          const selectedIndex = safeOptions.findIndex(
+            (option) => option.id === activeSelected
+          );
+          const tabStopIndex = selectedIndex === -1 ? 0 : selectedIndex;
+          return safeOptions.map((option, i) => {
+            const selected = activeSelected === option.id;
+            return /* @__PURE__ */ jsx(
+              OptionRow,
+              {
+                option,
+                selected,
+                submitted,
+                isTabStop: i === tabStopIndex,
+                colors,
+                customAnswer: activeCustom,
+                customAnswerPlaceholder,
+                onSelect: () => handleSelect(option),
+                onMove: (delta) => handleMove(i, delta),
+                onCustomChange: handleCustomChange,
+                onCustomCommit: () => handleCustomCommit(option.id)
+              },
+              option.id
+            );
+          });
+        })()
+      }
+    )
+  ] });
+}
+var DEFAULT_ACCENT_COLOR = "#1e2a44";
+var DEFAULT_INACTIVE_COLOR = "#dfe3ea";
+var DEFAULT_ACTIVE_CHAPTER_BG = "#f4f6fa";
+var DEFAULT_MUTED_TEXT_COLOR = "#94a3b8";
+var DEFAULT_WAVEFORM = [
+  0.4,
+  0.45,
+  0.95,
+  0.6,
+  1,
+  0.85,
+  0.4,
+  0.55,
+  0.7,
+  0.45,
+  0.6,
+  0.45,
+  0.4,
+  0.7,
+  0.5,
+  0.45,
+  0.55,
+  0.4
+];
+function formatTime2(totalSeconds) {
+  const safe = Number.isFinite(totalSeconds) && totalSeconds > 0 ? totalSeconds : 0;
+  const whole = Math.floor(safe);
+  const minutes = Math.floor(whole / 60);
+  const seconds = whole % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+function AudioPlayer({
+  title,
+  src,
+  durationSeconds = 0,
+  currentTimeSeconds = 0,
+  isPlaying = false,
+  waveform,
+  chapters,
+  accentColor,
+  inactiveColor,
+  activeChapterBg,
+  mutedTextColor,
+  className,
+  onTogglePlay,
+  onSeek
+}) {
+  const accent = accentColor ?? DEFAULT_ACCENT_COLOR;
+  const inactive = inactiveColor ?? DEFAULT_INACTIVE_COLOR;
+  const activeBg = activeChapterBg ?? DEFAULT_ACTIVE_CHAPTER_BG;
+  const mutedText = mutedTextColor ?? DEFAULT_MUTED_TEXT_COLOR;
+  const bars = waveform && waveform.length > 0 ? waveform : DEFAULT_WAVEFORM;
+  const chapterList = chapters ?? [];
+  const hasSrc = typeof src === "string" && src.length > 0;
+  const audioRef = useRef(null);
+  const [currentTime, setCurrentTime] = useState(currentTimeSeconds);
+  const [duration, setDuration] = useState(durationSeconds);
+  const [playing, setPlaying] = useState(isPlaying);
+  useEffect(() => {
+    setCurrentTime(currentTimeSeconds);
+  }, [currentTimeSeconds]);
+  useEffect(() => {
+    setDuration(durationSeconds);
+  }, [durationSeconds]);
+  useEffect(() => {
+    setPlaying(isPlaying);
+  }, [isPlaying]);
+  const lastChapterStart = chapterList.reduce(
+    (max, c) => c.startSeconds > max ? c.startSeconds : max,
+    0
+  );
+  const effectiveDuration = duration > 0 ? duration : durationSeconds > 0 ? durationSeconds : lastChapterStart;
+  const progress = effectiveDuration > 0 ? Math.min(Math.max(currentTime / effectiveDuration, 0), 1) : 0;
+  const handleLoadedMetadata = useCallback(() => {
+    const el = audioRef.current;
+    if (el && Number.isFinite(el.duration)) setDuration(el.duration);
+  }, []);
+  const handleTimeUpdate = useCallback(() => {
+    const el = audioRef.current;
+    if (el) setCurrentTime(el.currentTime);
+  }, []);
+  const handleEnded = useCallback(() => {
+    setPlaying(false);
+    onTogglePlay?.(false);
+  }, [onTogglePlay]);
+  const seekTo = useCallback(
+    (seconds) => {
+      const clamped = effectiveDuration > 0 ? Math.min(Math.max(seconds, 0), effectiveDuration) : Math.max(seconds, 0);
+      setCurrentTime(clamped);
+      const el = audioRef.current;
+      if (el) {
+        try {
+          el.currentTime = clamped;
+        } catch {
+        }
+      }
+      onSeek?.(clamped);
+    },
+    [effectiveDuration, onSeek]
+  );
+  const togglePlay = useCallback(() => {
+    const next = !playing;
+    setPlaying(next);
+    const el = audioRef.current;
+    if (el) {
+      try {
+        if (next) {
+          const maybePromise = el.play();
+          if (maybePromise && typeof maybePromise.catch === "function") {
+            maybePromise.catch(() => {
+            });
+          }
+        } else {
+          el.pause();
+        }
+      } catch {
+      }
+    }
+    onTogglePlay?.(next);
+  }, [playing, onTogglePlay]);
+  const handleWaveformSeek = useCallback(
+    (event) => {
+      const rect = event.currentTarget.getBoundingClientRect();
+      const ratio = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0;
+      const clampedRatio = Math.min(Math.max(ratio, 0), 1);
+      seekTo(clampedRatio * effectiveDuration);
+    },
+    [effectiveDuration, seekTo]
+  );
+  let activeChapterIndex = -1;
+  for (let i = 0; i < chapterList.length; i += 1) {
+    if (chapterList[i].startSeconds <= currentTime) activeChapterIndex = i;
   }
-  return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    hasSrc && /* @__PURE__ */ jsx(
+      "audio",
+      {
+        ref: audioRef,
+        src,
+        preload: "metadata",
+        className: "hidden",
+        "aria-label": title,
+        onLoadedMetadata: handleLoadedMetadata,
+        onTimeUpdate: handleTimeUpdate,
+        onEnded: handleEnded,
+        children: /* @__PURE__ */ jsx("track", { kind: "captions" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: togglePlay,
+          "aria-label": playing ? "Pause" : "Play",
+          "aria-pressed": playing,
+          className: "flex h-24 w-24 shrink-0 items-center justify-center rounded-full text-white transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          style: { backgroundColor: accent },
+          children: playing ? (
+            // Pause glyph: two rounded bars.
+            /* @__PURE__ */ jsxs("svg", { width: "34", height: "34", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1.5", fill: "currentColor" }),
+              /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1.5", fill: "currentColor" })
+            ] })
+          ) : (
+            // Play glyph: a single triangle nudged right for optical centering.
+            /* @__PURE__ */ jsx("svg", { width: "34", height: "34", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8 5.5l11 6.5-11 6.5z", fill: "currentColor" }) })
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleWaveformSeek,
+          "aria-label": "Seek",
+          className: "flex h-[88px] flex-1 cursor-pointer items-center gap-[6px] rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: bars.map((rawHeight, index) => {
+            const height = Math.min(Math.max(rawHeight, 0), 1);
+            const barRatio = bars.length > 1 ? index / (bars.length - 1) : 0;
+            const played = barRatio <= progress;
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "flex-1 rounded-[3px]",
+                style: {
+                  height: `${Math.max(height * 100, 8)}%`,
+                  backgroundColor: played ? accent : inactive
+                }
+              },
+              index
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "shrink-0 font-mono text-lg tabular-nums",
+          style: { color: mutedText },
+          children: [
+            formatTime2(currentTime),
+            " / ",
+            formatTime2(effectiveDuration)
+          ]
+        }
+      )
+    ] }),
+    chapterList.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-6 flex flex-col gap-1", children: chapterList.map((chapter, index) => {
+      const isActive = index === activeChapterIndex;
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => seekTo(chapter.startSeconds),
+          "aria-current": isActive ? "true" : void 0,
+          className: cn(
+            "flex w-full items-center gap-5 rounded-xl px-3 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          ),
+          style: isActive ? { backgroundColor: activeBg } : void 0,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "shrink-0 font-mono text-sm tabular-nums",
+                style: { color: mutedText },
+                children: formatTime2(chapter.startSeconds)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-base",
+                  isActive ? "font-semibold text-slate-900" : "font-normal text-slate-500"
+                ),
+                children: chapter.label
+              }
+            )
+          ]
+        }
+      ) }, chapter.startSeconds + "-" + chapter.label);
+    }) })
+  ] });
+}
+var ARTIFACT_REGISTRY = {
+  chart: ({ payload, className }) => payload.chart ? /* @__PURE__ */ jsx(ChartContainer, { data: payload.chart, className }) : null,
+  metrics: ({ payload, className }) => payload.metrics ? /* @__PURE__ */ jsx(MetricsGrid, { metrics: payload.metrics, className }) : null,
+  table: ({ payload, className }) => payload.table ? /* @__PURE__ */ jsx(DataTable, { data: payload.table, className }) : null,
+  "kpi-card-with-chart": ({ payload, className }) => payload.kpiCardWithChart ? /* @__PURE__ */ jsx(KpiCardWithChart, { ...payload.kpiCardWithChart, className }) : null,
+  "pie-chart": ({ payload, className }) => payload.pieChart ? /* @__PURE__ */ jsx(PieChartArtifact, { ...payload.pieChart, className }) : null,
+  "stacked-sparklines": ({ payload, className }) => payload.stackedSparklines ? /* @__PURE__ */ jsx(StackedSparklines, { ...payload.stackedSparklines, className }) : null,
+  "stat-card-half-circle": ({ payload, className }) => payload.statCardHalfCircle ? /* @__PURE__ */ jsx(StatCardHalfCircle, { ...payload.statCardHalfCircle, className }) : null,
+  "table-list": ({ payload, className }) => payload.tableList ? /* @__PURE__ */ jsx(TableListArtifact, { ...payload.tableList, className }) : null,
+  "kpi-card-with-sparklines": ({ payload, className }) => payload.kpiCardWithSparklines ? /* @__PURE__ */ jsx(KpiCardWithSparklines, { ...payload.kpiCardWithSparklines, className }) : null,
+  "locations-revenue-card": ({ payload, className }) => payload.locationsRevenue ? /* @__PURE__ */ jsx(LocationsRevenueCard, { ...payload.locationsRevenue, className }) : null,
+  "row-based-data-list": ({ payload, className }) => payload.rowBasedDataList ? /* @__PURE__ */ jsx(RowBasedDataList, { ...payload.rowBasedDataList, className }) : null,
+  badges: ({ payload, className }) => payload.badges ? /* @__PURE__ */ jsx(BadgesArtifact, { ...payload.badges, className }) : null,
+  "ordered-list": ({ payload, className }) => payload.orderedList ? /* @__PURE__ */ jsx(OrderedListArtifact, { ...payload.orderedList, className }) : null,
+  "deep-research-progress": ({ payload, className }) => payload.deepResearchProgress ? /* @__PURE__ */ jsx(DeepResearchProgress, { ...payload.deepResearchProgress, className }) : null,
+  tracker: ({ payload, className }) => payload.tracker ? /* @__PURE__ */ jsx(Tracker, { ...payload.tracker, className }) : null,
+  "built-in-questions": ({ payload, className }) => payload.builtInQuestions ? /* @__PURE__ */ jsx(BuiltInQuestions, { ...payload.builtInQuestions, className }) : null,
+  "audio-player": ({ payload, className }) => payload.audioPlayer ? /* @__PURE__ */ jsx(AudioPlayer, { ...payload.audioPlayer, className }) : null
+};
+function DataPayloadView({ payload, className }) {
+  const render = ARTIFACT_REGISTRY[payload.type];
+  return render ? /* @__PURE__ */ jsx(Fragment, { children: render({ payload, className }) }) : null;
 }
 function ReportView({ report, className }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
@@ -7771,25 +10035,34 @@ function MessageList({
     const hasSteps = message.role === "assistant" && !!message.steps && message.steps.length > 0;
     const hasAttachments = !!message.attachments && message.attachments.length > 0;
     return /* @__PURE__ */ jsxs(MessageContainer, { role: message.role, children: [
-      showAvatars && /* @__PURE__ */ jsx(AgentAvatar, { role: message.role, size: "sm" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
-        hasReasoning && /* @__PURE__ */ jsx(MessageWithReasoning, { steps: message.reasoning }),
-        hasSteps && /* @__PURE__ */ jsx(MessageWithSteps, { steps: message.steps }),
-        message.content && /* @__PURE__ */ jsx(MessageBubble, { role: message.role, children: /* @__PURE__ */ jsx(MessageContent, { children: message.content }) }),
-        hasAttachments && /* @__PURE__ */ jsx(MessageWithAttachments, { attachments: message.attachments }),
-        message.data && /* @__PURE__ */ jsx(DataPayloadView, { payload: message.data }),
-        message.confirmation && /* @__PURE__ */ jsx(
-          ConfirmationPanel,
-          {
-            title: message.confirmation.title,
-            summary: message.confirmation.summary,
-            body: message.confirmation.body,
-            markdown: message.confirmation.markdown,
-            actions: message.confirmation.actions,
-            onAction: (actionId) => onConfirmAction?.(message.id, actionId)
-          }
-        )
-      ] })
+      showAvatars && /* @__PURE__ */ jsx(AgentAvatar, { role: message.role, size: "md" }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 flex-col gap-2",
+            message.role === "user" && "items-end"
+          ),
+          children: [
+            hasReasoning && /* @__PURE__ */ jsx(MessageWithReasoning, { steps: message.reasoning }),
+            hasSteps && /* @__PURE__ */ jsx(MessageWithSteps, { steps: message.steps }),
+            message.content && /* @__PURE__ */ jsx(MessageBubble, { role: message.role, children: /* @__PURE__ */ jsx(MessageContent, { children: message.content }) }),
+            hasAttachments && /* @__PURE__ */ jsx(MessageWithAttachments, { attachments: message.attachments }),
+            message.data && /* @__PURE__ */ jsx(DataPayloadView, { payload: message.data }),
+            message.confirmation && /* @__PURE__ */ jsx(
+              ConfirmationPanel,
+              {
+                title: message.confirmation.title,
+                summary: message.confirmation.summary,
+                body: message.confirmation.body,
+                markdown: message.confirmation.markdown,
+                actions: message.confirmation.actions,
+                onAction: (actionId) => onConfirmAction?.(message.id, actionId)
+              }
+            )
+          ]
+        }
+      )
     ] }, message.id);
   }) });
 }
@@ -8715,13 +10988,31 @@ function useOpenState(controlled, defaultOpen, onChange) {
   );
   return [open, setOpen];
 }
+function useIsDesktop() {
+  const read = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(min-width: 1024px)").matches : true;
+  const [isDesktop, setIsDesktop] = useState(read);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+      return;
+    const mql = window.matchMedia("(min-width: 1024px)");
+    const update = () => setIsDesktop(mql.matches);
+    update();
+    if (mql.addEventListener) {
+      mql.addEventListener("change", update);
+      return () => mql.removeEventListener("change", update);
+    }
+    mql.addListener(update);
+    return () => mql.removeListener(update);
+  }, []);
+  return isDesktop;
+}
 function AgentWorkspace({
   children,
   leftPanel,
   rightPanel,
   leftPanelWidth = 320,
   rightPanelWidth = 460,
-  defaultLeftPanelOpen = true,
+  defaultLeftPanelOpen,
   defaultRightPanelOpen = true,
   leftPanelOpen: leftPanelOpenProp,
   rightPanelOpen: rightPanelOpenProp,
@@ -8731,6 +11022,7 @@ function AgentWorkspace({
   showHeader,
   showConversationHeader,
   headerActions,
+  headerControlsPlacement = "before",
   headerStatus,
   conversation,
   conversationOpen: conversationOpenProp,
@@ -8750,9 +11042,11 @@ function AgentWorkspace({
   const agent = useNativeAgentOptional();
   const hasLeftPanel = leftPanel !== void 0 && leftPanel !== null;
   const hasRightPanel = rightPanel !== void 0 && rightPanel !== null;
+  const isDesktop = useIsDesktop();
+  const resolvedLeftDefault = defaultLeftPanelOpen ?? (leftPanelOpenProp === void 0 ? isDesktop : true);
   const [leftOpen, setLeftOpen] = useOpenState(
     leftPanelOpenProp,
-    defaultLeftPanelOpen,
+    resolvedLeftDefault,
     onLeftPanelOpenChange
   );
   const [rightOpen, setRightOpen] = useOpenState(
@@ -8809,6 +11103,39 @@ function AgentWorkspace({
   ) : composer;
   const headerVisible = showHeader ?? showConversationHeader ?? true;
   const statusLine = headerStatus ?? (agent ? agent.error ?? agent.statusLabel : null);
+  const builtInControls = /* @__PURE__ */ jsxs(Fragment, { children: [
+    agent && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => agent.reset(),
+        "aria-label": "Start a new conversation",
+        title: "New conversation",
+        className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+        children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setConversationOpen(!conversationOpen),
+        "aria-label": conversationOpen ? "Hide conversation" : "Show conversation",
+        title: conversationOpen ? "Hide conversation" : "Show conversation",
+        className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+        children: /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            className: cn(
+              "size-4 transition-transform duration-200",
+              !conversationOpen && "rotate-180"
+            )
+          }
+        )
+      }
+    ),
+    hasRightPanel && /* @__PURE__ */ jsx(AgentWorkspacePanelToggle, { side: "right", className: "hidden md:flex" })
+  ] });
   return /* @__PURE__ */ jsx(AgentWorkspaceContext.Provider, { value, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -8824,7 +11151,7 @@ function AgentWorkspace({
             "data-state": leftOpen ? "open" : "collapsed",
             "aria-hidden": !leftOpen || void 0,
             className: cn(
-              "relative hidden h-full shrink-0 overflow-hidden border-r border-border transition-[width] duration-300 ease-in-out lg:block",
+              "relative hidden h-full shrink-0 overflow-hidden border-r border-border transition-[width] duration-300 ease-in-out md:block",
               !leftOpen && "border-r-0",
               leftPanelClassName
             ),
@@ -8833,14 +11160,14 @@ function AgentWorkspace({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "relative flex h-full min-w-0 grow flex-col", children: [
-          showPanelToggles && hasLeftPanel && /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-3 z-30 hidden lg:block", children: /* @__PURE__ */ jsx(
+          showPanelToggles && hasLeftPanel && /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-3 z-30 hidden md:block", children: /* @__PURE__ */ jsx(
             AgentWorkspacePanelToggle,
             {
               side: "left",
               className: "border border-border/60 bg-background/80 shadow-sm backdrop-blur"
             }
           ) }),
-          showPanelToggles && hasRightPanel && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-3 z-30 hidden lg:block", children: /* @__PURE__ */ jsx(
+          showPanelToggles && hasRightPanel && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-3 z-30 hidden md:block", children: /* @__PURE__ */ jsx(
             AgentWorkspacePanelToggle,
             {
               side: "right",
@@ -8858,7 +11185,7 @@ function AgentWorkspace({
                     AgentWorkspacePanelToggle,
                     {
                       side: "left",
-                      className: "hidden lg:flex"
+                      className: "hidden md:flex"
                     }
                   ),
                   /* @__PURE__ */ jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Sparkles, { className: "size-3.5" }) }),
@@ -8867,46 +11194,13 @@ function AgentWorkspace({
                     statusLine && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: statusLine })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: headerControlsPlacement === "before" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  builtInControls,
+                  headerActions
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                   headerActions,
-                  agent && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => agent.reset(),
-                      "aria-label": "Start a new conversation",
-                      title: "New conversation",
-                      className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
-                      children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setConversationOpen(!conversationOpen),
-                      "aria-label": conversationOpen ? "Hide conversation" : "Show conversation",
-                      title: conversationOpen ? "Hide conversation" : "Show conversation",
-                      className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
-                      children: /* @__PURE__ */ jsx(
-                        ChevronDown,
-                        {
-                          className: cn(
-                            "size-4 transition-transform duration-200",
-                            !conversationOpen && "rotate-180"
-                          )
-                        }
-                      )
-                    }
-                  ),
-                  hasRightPanel && /* @__PURE__ */ jsx(
-                    AgentWorkspacePanelToggle,
-                    {
-                      side: "right",
-                      className: "hidden lg:flex"
-                    }
-                  )
-                ] })
+                  builtInControls
+                ] }) })
               ]
             }
           ),
@@ -8973,7 +11267,7 @@ function AgentWorkspace({
             "data-state": rightOpen ? "open" : "collapsed",
             "aria-hidden": !rightOpen || void 0,
             className: cn(
-              "relative hidden h-full shrink-0 overflow-hidden border-l border-border transition-[width] duration-300 ease-in-out lg:block",
+              "relative hidden h-full shrink-0 overflow-hidden border-l border-border transition-[width] duration-300 ease-in-out md:block",
               !rightOpen && "border-l-0",
               rightPanelClassName
             ),
@@ -8985,7 +11279,97 @@ function AgentWorkspace({
     }
   ) });
 }
+var Pulse = ({ className }) => /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted", className) });
+var PanelSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between px-4 pb-2 pt-4", children: [
+    /* @__PURE__ */ jsx(Pulse, { className: "h-5 w-28" }),
+    /* @__PURE__ */ jsx(Pulse, { className: "size-8 rounded-lg" })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "min-h-0 grow space-y-4 overflow-hidden px-4 py-3", children: [3, 6].map((rows, section) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(Pulse, { className: "h-3 w-24" }),
+    Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Pulse, { className: "size-4 shrink-0 rounded-full" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 grow space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Pulse, { className: "h-3.5 w-3/4" }),
+        /* @__PURE__ */ jsx(Pulse, { className: "h-3 w-1/2" })
+      ] })
+    ] }, i))
+  ] }, section)) }),
+  /* @__PURE__ */ jsxs("div", { className: "shrink-0 space-y-2 border-t border-border px-4 py-3", children: [
+    /* @__PURE__ */ jsx(Pulse, { className: "h-3 w-full" }),
+    /* @__PURE__ */ jsx(Pulse, { className: "h-3 w-2/3" })
+  ] })
+] });
+var DefaultContentSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-6", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(Pulse, { className: "h-8 w-40" }),
+    /* @__PURE__ */ jsx(Pulse, { className: "h-8 w-28" }),
+    /* @__PURE__ */ jsx(Pulse, { className: "ml-auto h-8 w-20" })
+  ] }),
+  Array.from({ length: 9 }, (_, i) => /* @__PURE__ */ jsx(Pulse, { className: "h-10 w-full" }, i))
+] });
+function AgentWorkspaceSkeleton({
+  leftPanel = true,
+  rightPanel = true,
+  leftPanelWidth = 320,
+  rightPanelWidth = 460,
+  showHeader = true,
+  composer = true,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-workspace-skeleton": "",
+      className: cn(
+        "flex h-full w-full overflow-hidden bg-background text-foreground",
+        className
+      ),
+      children: [
+        leftPanel && /* @__PURE__ */ jsx(
+          "aside",
+          {
+            "aria-hidden": true,
+            className: "hidden h-full shrink-0 overflow-hidden border-r border-border lg:block",
+            style: { width: leftPanelWidth },
+            children: /* @__PURE__ */ jsx(PanelSkeleton, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex h-full min-w-0 grow flex-col", children: [
+          showHeader && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border px-3 py-2.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+              /* @__PURE__ */ jsx(Pulse, { className: "hidden size-8 rounded-lg lg:block" }),
+              /* @__PURE__ */ jsx(Pulse, { className: "size-7 rounded-md" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ jsx(Pulse, { className: "h-4 w-36" }),
+                /* @__PURE__ */ jsx(Pulse, { className: "h-3 w-20" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(Pulse, { className: "h-8 w-20 rounded-md" }),
+              /* @__PURE__ */ jsx(Pulse, { className: "size-8 rounded-lg" }),
+              /* @__PURE__ */ jsx(Pulse, { className: "size-8 rounded-lg" }),
+              /* @__PURE__ */ jsx(Pulse, { className: "hidden size-8 rounded-lg lg:block" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 grow overflow-hidden", children: children ?? /* @__PURE__ */ jsx(DefaultContentSkeleton, {}) }),
+          composer && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border px-4 py-3", children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-3xl", children: /* @__PURE__ */ jsx(Pulse, { className: "h-[52px] w-full rounded-2xl" }) }) })
+        ] }),
+        rightPanel && /* @__PURE__ */ jsx(
+          "aside",
+          {
+            "aria-hidden": true,
+            className: "hidden h-full shrink-0 overflow-hidden border-l border-border lg:block",
+            style: { width: rightPanelWidth },
+            children: /* @__PURE__ */ jsx(PanelSkeleton, {})
+          }
+        )
+      ]
+    }
+  );
+}
 
-export { AgentAvatar, AgentComposer, AgentConversation, AgentHandoff, AgentProvider, AgentSurface, AgentWorkspace, AgentWorkspaceComposer, AgentWorkspacePanelToggle, AllocationBreakdown, AnalyticsDashboard, Avatar, AvatarFallback, AvatarImage, Badge, Button, ChartContainer, ChatPanel, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmationPanel, ControlGrid, ConversationAnalytics, ConversationArtifact, DataPayloadView, DataTable, DynamicRenderer, EntityCard, FileDropZone, FloatingWidget, FullBleedSurface, FullscreenDashboard, GuidedLessonFlow, ImageGenerator, InlineSuggestionsInput, Input, ListingFeed, MediaEditorCanvas, MediaGallery, MessageActions, MessageBubble, MessageContainer, MessageContent, MessageList, MessageWithAttachments, MessageWithFeedback, MessageWithReasoning, MessageWithSteps, MetricsGrid, MobileShell, MultimodalInput, NativeAgentProvider, NativeSurface, OnboardingWizard, OptionCards, OverlayModal, PerformanceMetrics, PersonaSelector, Progress, ProgressTracker, PromptInput, PromptLibrary, QuickReplies, QuizCard, RecommendationCards, ReportView, ScheduleTimeline, ScrollArea, ScrollBar, SemanticBuilderSocketClient, SentimentDisplay, SettingsPanel, SlotRenderer, SplitView, StatusBadge, SystemMessage, TemplateSelector, Textarea, Timestamp, Tooltip4 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypingIndicator, WritingAssistant, badgeVariants, buildSocketUrl, buttonVariants, calculatePercentage, cn, componentManifest, componentMap, componentRegistry, copyToClipboard, createMockBackend, debounce, delay, findComponentsByCapability, findComponentsByCategory, findComponentsBySurface, formatBytes, formatCurrency, formatNumber, formatRelativeTime, formatTime, generateId, getInitials, getManifestEntry, getSentimentBgColor, getSentimentColor, isBrowser, isInIframe, normalizeWebsiteId, parseTextWithBold, registerAllComponents, truncate, useAgent, useAgentBackend, useAgentInput, useAgentLayout, useAgentMessages, useAgentWorkspace, useAgentWorkspaceOptional, useNativeAgent, useNativeAgentOptional, useSemanticBuilder };
+export { AgentAvatar, AgentComposer, AgentConversation, AgentHandoff, AgentProvider, AgentSurface, AgentWorkspace, AgentWorkspaceComposer, AgentWorkspacePanelToggle, AgentWorkspaceSkeleton, AllocationBreakdown, AnalyticsDashboard, AudioPlayer, Avatar, AvatarFallback, AvatarImage, Badge, BadgesArtifact, BuiltInQuestions, Button, ChartContainer, ChatPanel, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmationPanel, ControlGrid, ConversationAnalytics, ConversationArtifact, DataPayloadView, DataTable, DeepResearchProgress, DynamicRenderer, EntityCard, FileDropZone, FloatingWidget, FullBleedSurface, FullscreenDashboard, GuidedLessonFlow, ImageGenerator, InlineSuggestionsInput, Input, KpiCardWithChart, KpiCardWithSparklines, ListingFeed, LocationsRevenueCard, MediaEditorCanvas, MediaGallery, MessageActions, MessageBubble, MessageContainer, MessageContent, MessageList, MessageWithAttachments, MessageWithFeedback, MessageWithReasoning, MessageWithSteps, MetricsGrid, MobileShell, MultimodalInput, NativeAgentProvider, NativeSurface, OnboardingWizard, OptionCards, OrderedListArtifact, OverlayModal, PerformanceMetrics, PersonaSelector, PieChartArtifact, Progress, ProgressTracker, PromptInput, PromptLibrary, QuickReplies, QuizCard, RecommendationCards, ReportView, RowBasedDataList, ScheduleTimeline, ScrollArea, ScrollBar, SemanticBuilderSocketClient, SentimentDisplay, SettingsPanel, SlotRenderer, SplitView, StackedSparklines, StatCardHalfCircle, StatusBadge, SystemMessage, TableListArtifact, TemplateSelector, Textarea, Timestamp, Tooltip4 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tracker, TypingIndicator, WritingAssistant, badgeVariants, buildSocketUrl, buttonVariants, calculatePercentage, cn, componentManifest, componentMap, componentRegistry, copyToClipboard, createMockBackend, debounce, delay, findComponentsByCapability, findComponentsByCategory, findComponentsBySurface, formatBytes, formatCurrency, formatNumber, formatRelativeTime, formatTime, generateId, getInitials, getManifestEntry, getSentimentBgColor, getSentimentColor, isBrowser, isInIframe, normalizeWebsiteId, parseTextWithBold, registerAllComponents, truncate, useAgent, useAgentBackend, useAgentInput, useAgentLayout, useAgentMessages, useAgentWorkspace, useAgentWorkspaceOptional, useNativeAgent, useNativeAgentOptional, useSemanticBuilder };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map