@page-speed/agent-everywhere 0.8.0 → 1.0.0

package/dist/index.cjs

@@ -7696,17 +7696,2281 @@ function MessageActions({
     children
   ] }) });
 }
-function DataPayloadView({ payload, className }) {
-  if (payload.type === "chart" && payload.chart) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { data: payload.chart, className });
+function CardShell({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = React4.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__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: cn("block", className),
+      viewBox: `0 0 ${width} ${height}`,
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        showArea && areaPath && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.18 }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: areaPath, fill: `url(#${gradientId})`, stroke: "none" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardShell, { className: cn("w-full overflow-hidden bg-white p-7 sm:p-8", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "truncate font-bold text-base text-slate-900 leading-tight tracking-tight", children: title }),
+        formattedValue !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-2xl text-slate-900 tabular-nums", children: formattedValue }),
+          delta && /* @__PURE__ */ jsxRuntime.jsx(DeltaPill, { value: delta.value, direction: delta.direction })
+        ] })
+      ] }),
+      rangeLabel && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "shrink-0 rounded-full px-4 py-1.5 font-semibold text-xs",
+          style: {
+            color: pillColor,
+            backgroundColor: hexToRgba(pillColor, 0.12)
+          },
+          children: rangeLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: hasChart ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[180px] w-full", children: [
+      showBaseline && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-x-0 top-1/2 h-px",
+          style: { backgroundColor: BASELINE_COLOR }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Sparkline, { ...sparklineProps, className: "h-full w-full" })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[180px] w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-slate-400 text-sm", children: hasData ? "Not enough data" : "No data" }) }) }),
+    hasChart && xAxisLabels && xAxisLabels.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex items-start justify-between", children: xAxisLabels.map((label, index) => {
+      const [lead, trailing] = splitTickLabel(label);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: "flex flex-col text-slate-400 text-xs leading-tight",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: lead }),
+            trailing !== void 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardShell, { className: cn("w-full p-6", className), children: [
+    title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-bold text-base text-slate-900 leading-tight", children: title }) : null,
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", style: { width: 150, height: 150 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
+                width: "100%",
+                height: "100%",
+                role: "img",
+                "aria-label": title ?? "Donut chart",
+                children: /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `rotate(-90 ${CENTER} ${CENTER})`, fill: "none", children: isEmpty ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      cx: CENTER,
+                      cy: CENTER,
+                      r: RADIUS,
+                      stroke: segmentColor(segment, index),
+                      strokeWidth: STROKE_WIDTH,
+                      strokeDasharray: dasharray,
+                      strokeDashoffset: dashoffset
+                    },
+                    segment.label + index
+                  );
+                }) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center", children: isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-slate-400 text-sm", children: "No data" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              centerLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-base text-slate-900 leading-none", children: centerLabel }) : null,
+              centerSublabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 text-slate-500 text-xs leading-none", children: centerSublabel }) : null
+            ] }) })
+          ] }),
+          !isEmpty ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+              "li",
+              {
+                className: "flex items-center justify-between gap-4",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "inline-block size-3 shrink-0 rounded-sm",
+                        style: { backgroundColor: segmentColor(segment, index) }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-slate-600 text-sm", children: segment.label })
+                  ] }),
+                  value != null ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CardShell, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-slate-500 leading-tight", children: row.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-2xl text-slate-900 leading-tight tracking-tight tabular-nums", children: row.value })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-9 w-[28%] min-w-[88px] shrink-0", children: hasData ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardShell, { className: cn("w-full max-w-[440px] p-5 sm:p-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h3",
+      {
+        className: "font-semibold text-base leading-tight",
+        style: { color: titleColor },
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mx-auto mt-4 w-full max-w-[280px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          viewBox: `0 0 ${VIEW_W} ${VIEW_H}`,
+          className: "block w-full",
+          role: "img",
+          "aria-label": `${title}: ${readout}`,
+          preserveAspectRatio: "xMidYMid meet",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: arcPath,
+                fill: "none",
+                stroke: trackColor,
+                strokeWidth: STROKE_WIDTH2,
+                strokeLinecap: "round"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: arcPath,
+                fill: "none",
+                stroke: fillColor,
+                strokeWidth: STROKE_WIDTH2,
+                strokeLinecap: "round",
+                strokeDasharray: len,
+                strokeDashoffset: fillDashOffset
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-center pb-1",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "font-bold text-2xl leading-none tabular-nums",
+              style: { color: valueColor },
+              children: readout
+            }
+          )
+        }
+      )
+    ] }),
+    (minLabel || maxLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto mt-3 flex w-full max-w-[280px] items-baseline justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-xs", style: { color: minLabelColor }, children: minLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "font-semibold text-xs",
+          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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("strong", { className: cn("font-bold", colorClass), children: segment.text }, index);
+    }
+    if (colorClass) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: colorClass, children: segment.text }, index);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(React4.Fragment, { 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 = React4.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__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardShell, { className: "border-[#e5e7eb] p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-bold text-base text-slate-800 leading-snug", children: chartTitle }),
+        hasSeries && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap items-center gap-x-4 gap-y-1", children: series.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "li",
+          {
+            className: "flex items-center gap-2 text-slate-600 text-sm",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "inline-block size-2 shrink-0 rounded-full",
+                  style: { backgroundColor: s.color }
+                }
+              ),
+              s.name
+            ]
+          },
+          s.name
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
+        hasSeries ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "linearGradient",
+                    {
+                      id: gradientId,
+                      x1: "0",
+                      y1: "0",
+                      x2: "0",
+                      y2: "1",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "stop",
+                          {
+                            offset: "0%",
+                            stopColor: bottom.color,
+                            stopOpacity: 0.14
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "stop",
+                          {
+                            offset: "100%",
+                            stopColor: bottom.color,
+                            stopOpacity: 0
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d,
+                    fill: "none",
+                    stroke: sp.color,
+                    strokeWidth: 3,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    style: { vectorEffect: "non-scaling-stroke" }
+                  },
+                  series[idx].name
+                );
+              })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[160px] items-center justify-center text-slate-400 text-sm", children: "No data" }),
+        hasSeries && xAxisLabels && xAxisLabels.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex justify-between px-1", children: xAxisLabels.map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "text-slate-400 text-xs",
+            style: { color: AXIS_LABEL_COLOR },
+            children: label
+          },
+          `${label}-${i}`
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardShell, { className: "overflow-hidden border-[#e5e7eb] p-0", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { style: { backgroundColor: TABLE_HEADER_BG }, children: tableColumns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+        "th",
+        {
+          scope: "col",
+          className: cn(
+            "px-6 py-4 font-semibold text-xs uppercase tracking-wider",
+            ALIGN_CLASS[col.align ?? "left"]
+          ),
+          style: { color: TABLE_HEADER_TEXT },
+          children: col.label
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: tableRows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "td",
+                {
+                  className: cn(
+                    "px-6 py-5 font-bold text-sm",
+                    ALIGN_CLASS[align]
+                  ),
+                  style: { color: FIRST_COL_TEXT },
+                  children: row.label
+                },
+                col.key
+              );
+            }
+            if (colIndex === 1) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "td",
+                {
+                  className: cn(
+                    "px-6 py-5 text-sm text-slate-700 tabular-nums",
+                    ALIGN_CLASS[align]
+                  ),
+                  children: row.value
+                },
+                col.key
+              );
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                className: cn("px-6 py-5", ALIGN_CLASS[align]),
+                children: row.delta ? /* @__PURE__ */ jsxRuntime.jsx(
+                  DeltaPill,
+                  {
+                    value: row.delta.text,
+                    direction: deltaDirection(row.delta.direction),
+                    hideArrow: true,
+                    className: "bg-transparent px-0 py-0 font-semibold text-xs"
+                  }
+                ) : null
+              },
+              col.key
+            );
+          })
+        },
+        `${row.label}-${rowIndex}`
+      )) })
+    ] }) }),
+    summaryText && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "text-sm 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__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-xs text-slate-500 leading-snug", children: label }),
+      icon != null && icon !== "" && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg font-semibold text-base",
+          style: {
+            backgroundColor: iconChipBg ?? DEFAULT_ICON_CHIP_BG,
+            color: iconChipFg ?? DEFAULT_ICON_CHIP_FG
+          },
+          children: icon
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex flex-wrap items-end gap-x-3 gap-y-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "font-extrabold text-2xl leading-none tracking-tight tabular-nums",
+          style: { color: valueColor ?? DEFAULT_VALUE_COLOR2 },
+          children: value
+        }
+      ),
+      delta && /* @__PURE__ */ jsxRuntime.jsx(
+        DeltaPill,
+        {
+          value: delta.value,
+          direction: delta.direction,
+          tone: delta.tone,
+          className: "mb-1 px-2.5 py-1 text-xs"
+        }
+      )
+    ] }),
+    caption && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-slate-400 text-xs", children: caption }),
+    hasSparkline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-6 -mb-6 mt-5", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Sparkline,
+      {
+        data: sparkData,
+        color: sparklineColor,
+        showArea: sparkline?.showArea ?? true,
+        smooth: sparkline?.smooth ?? false,
+        className: "h-24 w-full"
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CardShell,
+    {
+      className: cn(
+        "overflow-hidden",
+        interactive && "cursor-pointer transition-shadow hover:shadow-md",
+        className
+      ),
+      children: interactive ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn(GRID_TEMPLATE, "py-5"), role: "row", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        role: "cell",
+        className: "truncate font-semibold text-sm text-slate-800",
+        children: row.name
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        role: "cell",
+        className: "text-right text-sm text-slate-700 tabular-nums",
+        children: row.revenue
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { role: "cell", className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CardShell, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "table", "aria-label": locationColumnLabel, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "row",
+        className: cn(
+          GRID_TEMPLATE,
+          "border-b bg-slate-50 py-4 font-semibold text-xs text-slate-400 uppercase tracking-wider"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { role: "columnheader", className: "text-left", children: locationColumnLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { role: "columnheader", className: "text-right", children: revenueColumnLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { role: "columnheader", className: "text-right", children: statusColumnLabel })
+        ]
+      }
+    ),
+    hasRows ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y", children: rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(LocationTableRow, { row }, row.id ?? `${row.name}-${index}`)) }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 font-medium text-slate-700 text-sm", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardShell, { className: "overflow-hidden rounded-xl border-slate-200 shadow-none", children: hasRows ? /* @__PURE__ */ jsxRuntime.jsx(
+      "dl",
+      {
+        className: "grid",
+        style: { gridTemplateColumns: `${labelColumnWidth} 1fr` },
+        children: rows.map((row, index) => {
+          const isLast = index === rows.length - 1;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            RowPair,
+            {
+              row,
+              isLast,
+              cellPadding
+            },
+            `${row.label}-${index}`
+          );
+        })
+      }
+    ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "dt",
+      {
+        className: cn(
+          "min-w-0 break-words bg-slate-50/70 font-normal text-slate-500 text-sm leading-snug",
+          cellPadding,
+          !isLast && "border-slate-100 border-b"
+        ),
+        children: row.label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "dd",
+      {
+        className: cn(
+          "min-w-0 break-words border-slate-100 border-l font-medium text-sm leading-snug",
+          valueColorClass,
+          cellPadding,
+          !isLast && "border-b"
+        ),
+        children: row.href ? /* @__PURE__ */ jsxRuntime.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-xs whitespace-nowrap";
+  if (style === "outline") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: cn(baseClass, "border"),
+        style: {
+          backgroundColor: TAG_BG,
+          borderColor: TAG_BORDER,
+          color: TAG_TEXT
+        },
+        children: [
+          badge.dot && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: baseClass,
+      style: { backgroundColor: solid.bg, color: solid.text },
+      children: [
+        badge.dot && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
+    group.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-2 block font-medium text-[11px] text-gray-400 uppercase tracking-wider", children: group.label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-3", children: badges.map((badge, i) => {
+      if (!badge?.label) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        BadgePill,
+        {
+          badge,
+          groupStyle
+        },
+        `${badge.label}-${i}`
+      );
+    }) })
+  ] });
+}
+function BadgesArtifact({ groups, className }) {
+  const safeGroups = groups ?? [];
+  if (safeGroups.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-6", className), children: safeGroups.map((group, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("section", { className: cn("text-left", className), children: [
+    title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-bold text-slate-900 text-base leading-snug", children: title }) : null,
+    intro ? /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cn(
+          "text-slate-500 text-sm leading-relaxed",
+          title && "mt-4"
+        ),
+        children: renderRich(intro)
+      }
+    ) : null,
+    safeItems.length > 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+            "li",
+            {
+              className: "flex items-start gap-3.5",
+              children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex-1 pt-0.5 text-slate-900 text-sm 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__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12l4 4 8-9" })
+    }
+  );
+}
+function ClockIcon2({
+  color = "#64748B",
+  className,
+  strokeWidth = 1.75
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 7v5l3 2" })
+      ]
+    }
+  );
+}
+function XIcon7({
+  color = ERROR_COLOR,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: base,
+        style: { ...dimensions, backgroundColor: COMPLETE_BG },
+        "data-status": "complete",
+        children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon8, { color: accent, className: "block", style: { width: glyphPx, height: glyphPx } })
+      }
+    );
+  }
+  if (resolved === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: base,
+        style: { ...dimensions, backgroundColor: ERROR_BG },
+        "data-status": "error",
+        children: /* @__PURE__ */ jsxRuntime.jsx(XIcon7, { color: ERROR_COLOR, className: "block", style: { width: glyphPx, height: glyphPx } })
+      }
+    );
+  }
+  if (resolved === "active") {
+    const ringColor = accentColor ?? ACTIVE_COLOR;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: base,
+        style: dimensions,
+        "data-status": "active",
+        role: "status",
+        "aria-label": "In progress",
+        "aria-live": "polite",
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(SPIN_CLASS, "block"), style: { width: px, height: px }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className: "block size-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            fill: "none",
+            stroke: ringColor,
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeDasharray: "47 16"
+          }
+        ) }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: base, style: dimensions, "data-status": "pending", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className: "block size-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col gap-6 text-left", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardShell, { className: "rounded-xl border-slate-200/80 bg-slate-50/70 px-5 py-4 shadow-none", children: [
+      taskLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-[11px] text-slate-400 uppercase tracking-wider", children: taskLabel }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-slate-700 leading-relaxed", children: taskDescription })
+    ] }),
+    safeSteps.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex list-none flex-col gap-5", children: safeSteps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        className: "flex items-center gap-4",
+        "data-status": step.status,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatusNode, { status: step.status, size: "md" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "text-sm leading-snug",
+                stepLabelClass(step.status)
+              ),
+              children: step.label
+            }
+          )
+        ]
+      },
+      step.id ?? index
+    )) }) : null,
+    findingsVisible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-slate-200 border-t" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        findingsLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-[11px] text-slate-400 uppercase tracking-wider", children: findingsLabel }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm 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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("li", { className: "relative flex gap-4", "data-status": step.status ?? "complete", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "relative flex shrink-0 justify-center",
+        style: { width: NODE_COLUMN_WIDTH },
+        children: [
+          !isLast && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            StatusNode,
+            {
+              status: step.status ?? "complete",
+              size: NODE_SIZE,
+              accentColor,
+              className: "relative z-10"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 pt-1.5 pb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-sm text-slate-900 leading-snug", children: step.title }),
+      step.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm 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__ */ jsxRuntime.jsxs("div", { className: cn("w-full bg-card pl-2", className), children: [
+    hasSteps ? /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-col", children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineStep,
+      {
+        step,
+        isLast: index === steps.length - 1,
+        accentColor
+      },
+      step.id ?? `${step.title}-${index}`
+    )) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-6 text-slate-400 text-sm", children: "No steps" }),
+    hasFooter ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 border-slate-200 border-t pt-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-slate-500", children: [
+      showFooterIcon ? /* @__PURE__ */ jsxRuntime.jsx(ClockIcon2, { className: "size-4 shrink-0" }) : null,
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DataTable, { data: payload.table, className });
+  return void 0;
+}
+function CheckIcon9() {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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-center 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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CheckIcon9, {})
+          }
+        ),
+        isOtherExpanded ? /* @__PURE__ */ jsxRuntime.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-sm leading-snug outline-none placeholder:text-slate-400",
+            style: { color: colors.selectedLabel }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "flex-1 text-sm 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 = React4.useRef(null);
+  const isControlled = typeof onSelect === "function";
+  const [internalSelected, setInternalSelected] = React4.useState(
+    selectedOptionId ?? null
+  );
+  const [internalCustom, setInternalCustom] = React4.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__ */ jsxRuntime.jsxs(CardShell, { className: cn("p-6 sm:p-7", className), children: [
+    hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-5 flex items-center justify-between gap-3", children: [
+      resolvedProgress ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "inline-flex items-center rounded-lg px-3 py-1 font-semibold text-xs",
+          style: { backgroundColor: colors.pillBg, color: colors.pillText },
+          children: resolvedProgress
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" }),
+      categoryLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: colors.categoryText }, children: categoryLabel })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h3",
+      {
+        className: "font-bold text-base leading-snug",
+        style: { color: colors.titleColor },
+        children: question
+      }
+    ),
+    safeOptions.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = React4.useRef(null);
+  const [currentTime, setCurrentTime] = React4.useState(currentTimeSeconds);
+  const [duration, setDuration] = React4.useState(durationSeconds);
+  const [playing, setPlaying] = React4.useState(isPlaying);
+  React4.useEffect(() => {
+    setCurrentTime(currentTimeSeconds);
+  }, [currentTimeSeconds]);
+  React4.useEffect(() => {
+    setDuration(durationSeconds);
+  }, [durationSeconds]);
+  React4.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 = React4.useCallback(() => {
+    const el = audioRef.current;
+    if (el && Number.isFinite(el.duration)) setDuration(el.duration);
+  }, []);
+  const handleTimeUpdate = React4.useCallback(() => {
+    const el = audioRef.current;
+    if (el) setCurrentTime(el.currentTime);
+  }, []);
+  const handleEnded = React4.useCallback(() => {
+    setPlaying(false);
+    onTogglePlay?.(false);
+  }, [onTogglePlay]);
+  const seekTo = React4.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 = React4.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 = React4.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__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), children: [
+    hasSrc && /* @__PURE__ */ jsxRuntime.jsx(
+      "audio",
+      {
+        ref: audioRef,
+        src,
+        preload: "metadata",
+        className: "hidden",
+        "aria-label": title,
+        onLoadedMetadata: handleLoadedMetadata,
+        onTimeUpdate: handleTimeUpdate,
+        onEnded: handleEnded,
+        children: /* @__PURE__ */ jsxRuntime.jsx("track", { kind: "captions" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-5", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "34", height: "34", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1.5", fill: "currentColor" }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "34", height: "34", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5.5l11 6.5-11 6.5z", fill: "currentColor" }) })
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "flex-1 rounded-[3px]",
+                style: {
+                  height: `${Math.max(height * 100, 8)}%`,
+                  backgroundColor: played ? accent : inactive
+                }
+              },
+              index
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: "shrink-0 font-mono text-xs tabular-nums",
+          style: { color: mutedText },
+          children: [
+            formatTime2(currentTime),
+            " / ",
+            formatTime2(effectiveDuration)
+          ]
+        }
+      )
+    ] }),
+    chapterList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-6 flex flex-col gap-1", children: chapterList.map((chapter, index) => {
+      const isActive = index === activeChapterIndex;
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "shrink-0 font-mono text-xs tabular-nums",
+                style: { color: mutedText },
+                children: formatTime2(chapter.startSeconds)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "text-sm",
+                  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__ */ jsxRuntime.jsx(ChartContainer, { data: payload.chart, className }) : null,
+  metrics: ({ payload, className }) => payload.metrics ? /* @__PURE__ */ jsxRuntime.jsx(MetricsGrid, { metrics: payload.metrics, className }) : null,
+  table: ({ payload, className }) => payload.table ? /* @__PURE__ */ jsxRuntime.jsx(DataTable, { data: payload.table, className }) : null,
+  "kpi-card-with-chart": ({ payload, className }) => payload.kpiCardWithChart ? /* @__PURE__ */ jsxRuntime.jsx(KpiCardWithChart, { ...payload.kpiCardWithChart, className }) : null,
+  "pie-chart": ({ payload, className }) => payload.pieChart ? /* @__PURE__ */ jsxRuntime.jsx(PieChartArtifact, { ...payload.pieChart, className }) : null,
+  "stacked-sparklines": ({ payload, className }) => payload.stackedSparklines ? /* @__PURE__ */ jsxRuntime.jsx(StackedSparklines, { ...payload.stackedSparklines, className }) : null,
+  "stat-card-half-circle": ({ payload, className }) => payload.statCardHalfCircle ? /* @__PURE__ */ jsxRuntime.jsx(StatCardHalfCircle, { ...payload.statCardHalfCircle, className }) : null,
+  "table-list": ({ payload, className }) => payload.tableList ? /* @__PURE__ */ jsxRuntime.jsx(TableListArtifact, { ...payload.tableList, className }) : null,
+  "kpi-card-with-sparklines": ({ payload, className }) => payload.kpiCardWithSparklines ? /* @__PURE__ */ jsxRuntime.jsx(KpiCardWithSparklines, { ...payload.kpiCardWithSparklines, className }) : null,
+  "locations-revenue-card": ({ payload, className }) => payload.locationsRevenue ? /* @__PURE__ */ jsxRuntime.jsx(LocationsRevenueCard, { ...payload.locationsRevenue, className }) : null,
+  "row-based-data-list": ({ payload, className }) => payload.rowBasedDataList ? /* @__PURE__ */ jsxRuntime.jsx(RowBasedDataList, { ...payload.rowBasedDataList, className }) : null,
+  badges: ({ payload, className }) => payload.badges ? /* @__PURE__ */ jsxRuntime.jsx(BadgesArtifact, { ...payload.badges, className }) : null,
+  "ordered-list": ({ payload, className }) => payload.orderedList ? /* @__PURE__ */ jsxRuntime.jsx(OrderedListArtifact, { ...payload.orderedList, className }) : null,
+  "deep-research-progress": ({ payload, className }) => payload.deepResearchProgress ? /* @__PURE__ */ jsxRuntime.jsx(DeepResearchProgress, { ...payload.deepResearchProgress, className }) : null,
+  tracker: ({ payload, className }) => payload.tracker ? /* @__PURE__ */ jsxRuntime.jsx(Tracker, { ...payload.tracker, className }) : null,
+  "built-in-questions": ({ payload, className }) => payload.builtInQuestions ? /* @__PURE__ */ jsxRuntime.jsx(BuiltInQuestions, { ...payload.builtInQuestions, className }) : null,
+  "audio-player": ({ payload, className }) => payload.audioPlayer ? /* @__PURE__ */ jsxRuntime.jsx(AudioPlayer, { ...payload.audioPlayer, className }) : null
+};
+function DataPayloadView({ payload, className }) {
+  const render = ARTIFACT_REGISTRY[payload.type];
+  return render ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: render({ payload, className }) }) : null;
 }
 function ReportView({ report, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-6", className), children: [
@@ -7797,25 +10061,34 @@ function MessageList({
     const hasSteps = message.role === "assistant" && !!message.steps && message.steps.length > 0;
     const hasAttachments = !!message.attachments && message.attachments.length > 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(MessageContainer, { role: message.role, children: [
-      showAvatars && /* @__PURE__ */ jsxRuntime.jsx(AgentAvatar, { role: message.role, size: "sm" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
-        hasReasoning && /* @__PURE__ */ jsxRuntime.jsx(MessageWithReasoning, { steps: message.reasoning }),
-        hasSteps && /* @__PURE__ */ jsxRuntime.jsx(MessageWithSteps, { steps: message.steps }),
-        message.content && /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { role: message.role, children: /* @__PURE__ */ jsxRuntime.jsx(MessageContent, { children: message.content }) }),
-        hasAttachments && /* @__PURE__ */ jsxRuntime.jsx(MessageWithAttachments, { attachments: message.attachments }),
-        message.data && /* @__PURE__ */ jsxRuntime.jsx(DataPayloadView, { payload: message.data }),
-        message.confirmation && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AgentAvatar, { role: message.role, size: "md" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 flex-col gap-2",
+            message.role === "user" && "items-end"
+          ),
+          children: [
+            hasReasoning && /* @__PURE__ */ jsxRuntime.jsx(MessageWithReasoning, { steps: message.reasoning }),
+            hasSteps && /* @__PURE__ */ jsxRuntime.jsx(MessageWithSteps, { steps: message.steps }),
+            message.content && /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { role: message.role, children: /* @__PURE__ */ jsxRuntime.jsx(MessageContent, { children: message.content }) }),
+            hasAttachments && /* @__PURE__ */ jsxRuntime.jsx(MessageWithAttachments, { attachments: message.attachments }),
+            message.data && /* @__PURE__ */ jsxRuntime.jsx(DataPayloadView, { payload: message.data }),
+            message.confirmation && /* @__PURE__ */ jsxRuntime.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);
   }) });
 }
@@ -8741,13 +11014,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] = React4.useState(read);
+  React4.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,
@@ -8757,6 +11048,7 @@ function AgentWorkspace({
   showHeader,
   showConversationHeader,
   headerActions,
+  headerControlsPlacement = "before",
   headerStatus,
   conversation,
   conversationOpen: conversationOpenProp,
@@ -8776,9 +11068,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(
@@ -8835,6 +11129,39 @@ function AgentWorkspace({
   ) : composer;
   const headerVisible = showHeader ?? showConversationHeader ?? true;
   const statusLine = headerStatus ?? (agent ? agent.error ?? agent.statusLabel : null);
+  const builtInControls = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    agent && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          lucideReact.ChevronDown,
+          {
+            className: cn(
+              "size-4 transition-transform duration-200",
+              !conversationOpen && "rotate-180"
+            )
+          }
+        )
+      }
+    ),
+    hasRightPanel && /* @__PURE__ */ jsxRuntime.jsx(AgentWorkspacePanelToggle, { side: "right", className: "hidden md:flex" })
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsx(AgentWorkspaceContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -8850,7 +11177,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
             ),
@@ -8859,14 +11186,14 @@ function AgentWorkspace({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full min-w-0 grow flex-col", children: [
-          showPanelToggles && hasLeftPanel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 top-3 z-30 hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(
+          showPanelToggles && hasLeftPanel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 top-3 z-30 hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(
             AgentWorkspacePanelToggle,
             {
               side: "left",
               className: "border border-border/60 bg-background/80 shadow-sm backdrop-blur"
             }
           ) }),
-          showPanelToggles && hasRightPanel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-3 z-30 hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(
+          showPanelToggles && hasRightPanel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-3 z-30 hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(
             AgentWorkspacePanelToggle,
             {
               side: "right",
@@ -8884,7 +11211,7 @@ function AgentWorkspace({
                     AgentWorkspacePanelToggle,
                     {
                       side: "left",
-                      className: "hidden lg:flex"
+                      className: "hidden md:flex"
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-3.5" }) }),
@@ -8893,46 +11220,13 @@ function AgentWorkspace({
                     statusLine && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-muted-foreground", children: statusLine })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-1", children: headerControlsPlacement === "before" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  builtInControls,
+                  headerActions
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   headerActions,
-                  agent && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "size-4" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                        lucideReact.ChevronDown,
-                        {
-                          className: cn(
-                            "size-4 transition-transform duration-200",
-                            !conversationOpen && "rotate-180"
-                          )
-                        }
-                      )
-                    }
-                  ),
-                  hasRightPanel && /* @__PURE__ */ jsxRuntime.jsx(
-                    AgentWorkspacePanelToggle,
-                    {
-                      side: "right",
-                      className: "hidden lg:flex"
-                    }
-                  )
-                ] })
+                  builtInControls
+                ] }) })
               ]
             }
           ),
@@ -8999,7 +11293,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
             ),
@@ -9114,10 +11408,13 @@ exports.AgentWorkspacePanelToggle = AgentWorkspacePanelToggle;
 exports.AgentWorkspaceSkeleton = AgentWorkspaceSkeleton;
 exports.AllocationBreakdown = AllocationBreakdown;
 exports.AnalyticsDashboard = AnalyticsDashboard;
+exports.AudioPlayer = AudioPlayer;
 exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
 exports.AvatarImage = AvatarImage;
 exports.Badge = Badge;
+exports.BadgesArtifact = BadgesArtifact;
+exports.BuiltInQuestions = BuiltInQuestions;
 exports.Button = Button;
 exports.ChartContainer = ChartContainer;
 exports.ChatPanel = ChatPanel;
@@ -9130,6 +11427,7 @@ exports.ConversationAnalytics = ConversationAnalytics;
 exports.ConversationArtifact = ConversationArtifact;
 exports.DataPayloadView = DataPayloadView;
 exports.DataTable = DataTable;
+exports.DeepResearchProgress = DeepResearchProgress;
 exports.DynamicRenderer = DynamicRenderer;
 exports.EntityCard = EntityCard;
 exports.FileDropZone = FileDropZone;
@@ -9140,7 +11438,10 @@ exports.GuidedLessonFlow = GuidedLessonFlow;
 exports.ImageGenerator = ImageGenerator;
 exports.InlineSuggestionsInput = InlineSuggestionsInput;
 exports.Input = Input;
+exports.KpiCardWithChart = KpiCardWithChart;
+exports.KpiCardWithSparklines = KpiCardWithSparklines;
 exports.ListingFeed = ListingFeed;
+exports.LocationsRevenueCard = LocationsRevenueCard;
 exports.MediaEditorCanvas = MediaEditorCanvas;
 exports.MediaGallery = MediaGallery;
 exports.MessageActions = MessageActions;
@@ -9159,9 +11460,11 @@ exports.NativeAgentProvider = NativeAgentProvider;
 exports.NativeSurface = NativeSurface;
 exports.OnboardingWizard = OnboardingWizard;
 exports.OptionCards = OptionCards;
+exports.OrderedListArtifact = OrderedListArtifact;
 exports.OverlayModal = OverlayModal;
 exports.PerformanceMetrics = PerformanceMetrics;
 exports.PersonaSelector = PersonaSelector;
+exports.PieChartArtifact = PieChartArtifact;
 exports.Progress = Progress;
 exports.ProgressTracker = ProgressTracker;
 exports.PromptInput = PromptInput;
@@ -9170,6 +11473,7 @@ exports.QuickReplies = QuickReplies;
 exports.QuizCard = QuizCard;
 exports.RecommendationCards = RecommendationCards;
 exports.ReportView = ReportView;
+exports.RowBasedDataList = RowBasedDataList;
 exports.ScheduleTimeline = ScheduleTimeline;
 exports.ScrollArea = ScrollArea;
 exports.ScrollBar = ScrollBar;
@@ -9178,8 +11482,11 @@ exports.SentimentDisplay = SentimentDisplay;
 exports.SettingsPanel = SettingsPanel;
 exports.SlotRenderer = SlotRenderer;
 exports.SplitView = SplitView;
+exports.StackedSparklines = StackedSparklines;
+exports.StatCardHalfCircle = StatCardHalfCircle;
 exports.StatusBadge = StatusBadge;
 exports.SystemMessage = SystemMessage;
+exports.TableListArtifact = TableListArtifact;
 exports.TemplateSelector = TemplateSelector;
 exports.Textarea = Textarea;
 exports.Timestamp = Timestamp;
@@ -9187,6 +11494,7 @@ exports.Tooltip = Tooltip4;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
+exports.Tracker = Tracker;
 exports.TypingIndicator = TypingIndicator;
 exports.WritingAssistant = WritingAssistant;
 exports.badgeVariants = badgeVariants;