@shapesos/clay 0.11.0 → 0.12.0

package/dist/chat.cjs

@@ -40,7 +40,7 @@ __export(chat_exports, {
 module.exports = __toCommonJS(chat_exports);
 
 // src/components/chat/chat-message/chat-message.tsx
-var import_react11 = require("react");
+var import_react15 = require("react");
 
 // src/components/blocks/types.ts
 var blockTypes = {
@@ -48,13 +48,33 @@ var blockTypes = {
   ARTIFACT_REF: "ARTIFACT_REF"
 };
 
-// src/components/artifacts/types.ts
+// src/components/artifacts/artifact-base.ts
 var artifactTypes = {
-  TABLE: "TABLE"
+  TABLE: "TABLE",
+  CHART: "CHART"
 };
 
-// src/components/artifacts/table-artifact/table-artifact.tsx
-var import_react7 = require("react");
+// src/components/artifacts/chart-artifact/types.ts
+var DEFAULT_CHART_ARTIFACT_LABELS = {
+  download: "Download CSV",
+  unavailable: "Chart data is unavailable.",
+  loadError: "Couldn't load chart data.",
+  loading: "Loading chart\u2026",
+  empty: "No data to chart.",
+  othersCategoryLabels: ["Others", "Other"]
+};
+
+// src/components/artifacts/table-artifact/types.ts
+var DEFAULT_TABLE_ARTIFACT_LABELS = {
+  download: "Download CSV",
+  unavailable: "Table data is unavailable.",
+  loadError: "Couldn't load table data.",
+  loading: "Loading table\u2026",
+  empty: "No rows to display."
+};
+
+// src/components/artifacts/chart-artifact/chart-artifact.tsx
+var import_react9 = require("react");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -394,7 +414,12 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/artifacts/artifact-download-button/artifact-download-button.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function ArtifactDownloadButton({ href }) {
+var DEFAULT_LABEL = "Download CSV";
+function ArtifactDownloadButton({
+  href,
+  label = DEFAULT_LABEL,
+  onClick
+}) {
   if (!isSafeDownloadUrl(href)) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -404,12 +429,13 @@ function ArtifactDownloadButton({ href }) {
         href,
         download: true,
         rel: "noopener noreferrer",
+        onClick,
         icon: IconDownload,
         size: "small",
-        "aria-label": "Download artifact"
+        "aria-label": label
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipContent, { children: "Download" })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipContent, { children: label })
   ] }) });
 }
 function isSafeDownloadUrl(url) {
@@ -421,87 +447,10 @@ function isSafeDownloadUrl(url) {
   }
 }
 
-// src/components/ui/table.tsx
-var React2 = __toESM(require("react"), 1);
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Table = React2.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("relative w-full overflow-auto", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props }) }));
-Table.displayName = "Table";
-var TableHeader = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
-);
-TableHeader.displayName = "TableHeader";
-var TableBody = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
-);
-TableBody.displayName = "TableBody";
-var TableFooter = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })
-);
-TableFooter.displayName = "TableFooter";
-var TableRow = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "tr",
-    {
-      ref,
-      className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
-      ...props
-    }
-  )
-);
-TableRow.displayName = "TableRow";
-var TableHead = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "th",
-    {
-      ref,
-      className: cn(
-        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-        className
-      ),
-      ...props
-    }
-  )
-);
-TableHead.displayName = "TableHead";
-var TableCell = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props })
-);
-TableCell.displayName = "TableCell";
-var TableCaption = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })
-);
-TableCaption.displayName = "TableCaption";
-
-// src/components/table/use-scroll-shadow.ts
+// src/components/artifacts/status-message.tsx
 var import_react4 = require("react");
-function useScrollShadow() {
-  const targetRef = (0, import_react4.useRef)(null);
-  const [isScrolled, setIsScrolled] = (0, import_react4.useState)(false);
-  (0, import_react4.useEffect)(() => {
-    const target = targetRef.current;
-    if (!target) return;
-    let scrollContainer = target;
-    while (scrollContainer) {
-      const overflowY = getComputedStyle(scrollContainer).overflowY;
-      if (overflowY === "auto" || overflowY === "scroll") break;
-      scrollContainer = scrollContainer.parentElement;
-    }
-    if (!scrollContainer) return;
-    setIsScrolled(scrollContainer.scrollTop > 0);
-    const handleScroll = () => {
-      if (!scrollContainer) return;
-      setIsScrolled(scrollContainer.scrollTop > 0);
-    };
-    scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
-    return () => scrollContainer.removeEventListener("scroll", handleScroll);
-  }, []);
-  return { targetRef, isScrolled };
-}
-
-// src/components/artifacts/table-artifact/table-artifact-styles.ts
-var import_react5 = require("react");
 function StatusMessage({ $tone, children }) {
-  return (0, import_react5.createElement)(
+  return (0, import_react4.createElement)(
     "div",
     {
       className: `py-6 px-2 text-center text-sm font-medium leading-5 ${$tone === "error" ? "text-red-600" : "text-brown-70"}`
@@ -510,313 +459,80 @@ function StatusMessage({ $tone, children }) {
   );
 }
 
-// src/components/artifacts/table-artifact/table-artifact-content.constants.ts
-var TABLE_STATUS = {
-  LOADING: "loading",
-  READY: "ready",
-  ERROR: "error",
-  UNAVAILABLE: "unavailable"
-};
-
-// src/components/artifacts/table-artifact/table-artifact-content.utils.ts
-function formatCell(row, column) {
-  return row[column.key] ?? "";
-}
-var HEAD_CLASS = "h-auto py-2 px-4 text-xs font-medium text-foreground whitespace-nowrap text-left";
-var CELL_CLASS = "p-4 text-sm font-normal text-foreground align-top min-w-[150px] text-left";
-var ROW_CLASSES = "border-b-brown-30 bg-background/70 hover:bg-secondary";
-var DATA_ROW_CLASSES = `${ROW_CLASSES} animate-in fade-in duration-300`;
-var SCROLL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.01), 0 6px 12px -2px rgb(0 0 0 / 0.03)";
+// src/components/chart/bar-chart/bar-chart.tsx
+var import_react5 = require("react");
+var import_recharts2 = require("recharts");
 
-// src/components/artifacts/table-artifact/table-artifact-content.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function TableArtifactContent({
-  columns,
-  data,
-  knownRowCount,
-  maxShimmerRows,
-  maxBodyHeight,
-  unavailableMessage
+// src/components/chart/chart-container.tsx
+var import_recharts = require("recharts");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ChartContainer({
+  children,
+  height = 320,
+  width = "100%",
+  className,
+  style
 }) {
-  if (data.status === TABLE_STATUS.ERROR) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusMessage, { $tone: "error", children: "Couldn't load table data." });
-  }
-  if (data.status === TABLE_STATUS.UNAVAILABLE) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusMessage, { $tone: "info", children: unavailableMessage });
-  }
-  if (data.status === TABLE_STATUS.LOADING) {
-    if (typeof knownRowCount === "number" && knownRowCount > 0) {
-      const shimmerCount = Math.min(knownRowCount, maxShimmerRows);
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArtifactTable, { columns, maxBodyHeight, children: renderShimmerRows(columns, shimmerCount) });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusMessage, { $tone: "info", children: "Loading table\u2026" });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArtifactTable, { columns, maxBodyHeight, children: data.rows.length === 0 ? renderEmptyRow(columns.length) : renderDataRows(columns, data.rows) });
-}
-function ArtifactTable({ columns, maxBodyHeight, children }) {
-  const { targetRef, isScrolled } = useScrollShadow();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: targetRef, className: "overscroll-none", style: { maxHeight: maxBodyHeight, overflowY: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Table, { containerClassName: "overflow-visible", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      TableHeader,
-      {
-        "data-scrolled": isScrolled ? "true" : void 0,
-        className: "sticky top-0 z-10 bg-background/70 backdrop-blur-lg transition-shadow",
-        style: isScrolled ? { boxShadow: SCROLL_SHADOW } : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableRow, { className: "hover:bg-transparent", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableHead, { scope: "col", className: HEAD_CLASS, children: column.label }, column.key)) })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableBody, { children })
-  ] }) });
-}
-function renderShimmerRows(columns, count) {
-  return Array.from({ length: count }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableRow, { className: ROW_CLASSES, "aria-hidden": "true", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableCell, { className: CELL_CLASS, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "block h-3 w-3/4 animate-pulse rounded bg-muted-foreground/20" }) }, column.key)) }, `shimmer-${index}`));
-}
-function renderDataRows(columns, rows) {
-  return rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableRow, { className: DATA_ROW_CLASSES, children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableCell, { className: CELL_CLASS, children: formatCell(row, column) }, column.key)) }, index));
-}
-function renderEmptyRow(colSpan) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableCell, { colSpan, className: "py-6 text-center text-sm text-muted-foreground", children: "No rows to display." }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("text-xs text-foreground", className), style: { width, height, ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children }) });
 }
 
-// src/components/artifacts/table-artifact/use-table-artifact-data.ts
-var import_react6 = require("react");
-
-// src/components/artifacts/table-artifact/parse-csv.ts
-var import_papaparse = __toESM(require("papaparse"), 1);
-function parseCsv(text, columns) {
-  const result = import_papaparse.default.parse(text, {
-    header: true,
-    skipEmptyLines: true,
-    dynamicTyping: false
-  });
-  const csvHeaders = new Set(result.meta?.fields ?? []);
-  const presentColumns = columns.filter((col) => csvHeaders.has(col.key));
-  return result.data.map((rawRow) => {
-    const row = {};
-    for (const column of presentColumns) {
-      const value = rawRow[column.key];
-      row[column.key] = value === void 0 || value === "" ? null : value;
+// src/components/chart/chart-legend-content.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ChartLegendContent({ payload, className, iconType = "square" }) {
+  if (!payload || payload.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "ul",
+    {
+      className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-xs text-brown-80", className),
+      children: payload.map((entry, i) => {
+        const swatchColor = typeof entry.color === "string" ? entry.color : "transparent";
+        const label = entry.value !== void 0 ? String(entry.value) : "";
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { className: "flex items-center gap-1.5", children: [
+          iconType === "square" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block h-2.5 w-2.5 shrink-0 rounded-sm", style: { background: swatchColor } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block h-[3px] w-4 shrink-0 rounded-full", style: { background: swatchColor } }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label })
+        ] }, `${label}-${i}`);
+      })
     }
-    return row;
-  });
-}
-
-// src/components/artifacts/table-artifact/use-table-artifact-data.ts
-var LOADING = { status: "loading", rows: null, error: null };
-var UNAVAILABLE = { status: "unavailable", rows: null, error: null };
-var INITIAL_INTERNAL = { cacheKey: null, data: LOADING };
-function columnsFingerprint(columns) {
-  return columns.map((c) => `${c.key}:${c.type ?? "string"}`).join("|");
-}
-function useTableArtifactData(presignedUrl, columns) {
-  const colsKey = (0, import_react6.useMemo)(() => columnsFingerprint(columns), [columns]);
-  const cacheKey = presignedUrl ? `${presignedUrl}::${colsKey}` : null;
-  const [state, setState] = (0, import_react6.useState)(INITIAL_INTERNAL);
-  (0, import_react6.useEffect)(() => {
-    if (!presignedUrl) return;
-    const controller = new AbortController();
-    fetch(presignedUrl, {
-      signal: controller.signal,
-      headers: { Accept: "text/csv" },
-      // Presigned URLs are cross-origin S3 in production and don't need credentials. Explicit
-      // omit so a same-origin URL (compromised payload, local dev) can't accidentally receive
-      // session cookies or auth headers.
-      credentials: "omit"
-    }).then(async (response) => {
-      if (!response.ok) throw new Error(`Failed to load table data (${response.status})`);
-      return response.text();
-    }).then((text) => {
-      if (controller.signal.aborted) return;
-      try {
-        const rows = parseCsv(text, columns);
-        setState({ cacheKey: `${presignedUrl}::${colsKey}`, data: { status: "ready", rows, error: null } });
-      } catch (parseError) {
-        console.error("[TableArtifact] CSV parse failed", parseError);
-        const err = parseError instanceof Error ? parseError : new Error(String(parseError));
-        setState({ cacheKey: `${presignedUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
-      }
-    }).catch((error) => {
-      if (controller.signal.aborted) return;
-      console.error("[TableArtifact] Fetch failed", error);
-      const err = error instanceof Error ? error : new Error(String(error));
-      setState({ cacheKey: `${presignedUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
-    });
-    return () => {
-      controller.abort();
-    };
-  }, [presignedUrl, colsKey]);
-  if (!presignedUrl) return UNAVAILABLE;
-  if (state.cacheKey !== cacheKey) return LOADING;
-  return state.data;
-}
-
-// src/components/artifacts/table-artifact/validate.ts
-function isValidTableConfig(config) {
-  if (!config || typeof config !== "object") return false;
-  const candidate = config;
-  if (!Array.isArray(candidate.columns)) return false;
-  if (candidate.columns.length === 0) return false;
-  return candidate.columns.every(isValidTableColumn);
-}
-function isValidTableColumn(column) {
-  if (!column || typeof column !== "object") return false;
-  const candidate = column;
-  if (typeof candidate.key !== "string" || candidate.key.length === 0) return false;
-  if (typeof candidate.label !== "string") return false;
-  return true;
+  );
 }
 
-// src/components/artifacts/table-artifact/table-artifact.tsx
+// src/components/chart/chart-tooltip-content.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var TITLE_CLASSES = "text-sm font-semibold text-foreground";
-var TABLE_MAX_BODY_HEIGHT = 480;
-var MAX_SHIMMER_ROWS = 10;
-var MSG_UNAVAILABLE = "Table data is unavailable.";
-function TableArtifact({ artifact }) {
-  const validConfig = isValidTableConfig(artifact.config);
-  const validColumns = validConfig ? artifact.config.columns : null;
-  (0, import_react7.useEffect)(() => {
-    if (validConfig) return;
-    console.warn("[clay] TableArtifact: malformed `config` \u2014 skipping render.");
-  }, [validConfig]);
-  const data = useTableArtifactData(
-    validConfig ? artifact.protectedAsset?.presignedUrl ?? null : null,
-    validColumns ?? []
-  );
-  const presignedUrl = artifact.protectedAsset?.presignedUrl ?? null;
-  if (!validConfig || !validColumns) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ArtifactHeader, { className: "bg-background/70", children: [
-        artifact.title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactTitle, { className: TITLE_CLASSES, children: artifact.title }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {}),
-        presignedUrl ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactActions, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactDownloadButton, { href: presignedUrl }) }) : null
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactContent, { className: "p-0 overflow-auto", style: { maxHeight: TABLE_MAX_BODY_HEIGHT }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StatusMessage, { $tone: "info", children: MSG_UNAVAILABLE }) })
-    ] });
-  }
-  return (
-    // The table body owns its own scroll container (`ArtifactTable` inside `TableArtifactContent`).
-    // Disable the outer overflow container so only one scroll context exists — this prevents
-    // double-scroll nesting and lets `useScrollShadow` find the correct scroll ancestor.
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ArtifactHeader, { className: "bg-background/70", children: [
-        artifact.title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactTitle, { className: TITLE_CLASSES, children: artifact.title }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactActions, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactDownloadButton, { href: presignedUrl ?? "" }) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactContent, { className: "p-0 overflow-visible", style: { maxHeight: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        TableArtifactContent,
-        {
-          columns: validColumns,
-          data,
-          knownRowCount: artifact.config.stats?.rowCount,
-          maxShimmerRows: MAX_SHIMMER_ROWS,
-          maxBodyHeight: TABLE_MAX_BODY_HEIGHT,
-          unavailableMessage: MSG_UNAVAILABLE
-        }
-      ) })
-    ] })
+function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  className,
+  showLabel = true,
+  formatValue
+}) {
+  if (!active || !payload || payload.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-brown-40 bg-brown-10 px-3 py-2 text-xs shadow-sm",
+        "min-w-32 text-foreground",
+        className
+      ),
+      children: [
+        showLabel && label !== void 0 && label !== null ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mb-1.5 font-medium text-brown-90", children: String(label) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "space-y-1", children: payload.map((entry, i) => {
+          const name = entry.name !== void 0 ? String(entry.name) : "";
+          const rawValue = entry.value;
+          const display = formatValue ? formatValue(rawValue, name) : rawValue === void 0 ? "" : String(rawValue);
+          const swatch = typeof entry.color === "string" ? entry.color : "transparent";
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inline-block h-2.5 w-2.5 shrink-0 rounded-sm", style: { background: swatch } }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-brown-70", children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ml-auto font-semibold tabular-nums text-brown-90", children: display })
+          ] }, `${name}-${i}`);
+        }) })
+      ]
+    }
   );
 }
 
-// src/components/artifacts/table-artifact/to-clipboard-text.ts
-function tableArtifactToClipboardText(artifact) {
-  const trimmedTitle = artifact.title?.trim();
-  return trimmedTitle || "Table";
-}
-
-// src/components/artifacts/artifact-services/table-artifact-service.ts
-var TableArtifactService = {
-  type: artifactTypes.TABLE,
-  Component: TableArtifact,
-  toClipboardText: tableArtifactToClipboardText
-};
-
-// src/components/artifacts/artifact-services/index.ts
-var ArtifactServices = {
-  [artifactTypes.TABLE]: TableArtifactService
-};
-function artifactToClipboardText(artifact) {
-  const entry = ArtifactServices[artifact.type];
-  if (!entry) {
-    return `[Artifact: ${artifact.title ?? artifact.type}]`;
-  }
-  return entry.toClipboardText(artifact);
-}
-
-// src/components/blocks/artifact-ref-block/artifact-ref-block.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function ArtifactRefBlock({ block }) {
-  const { artifact } = block.payload;
-  const entry = ArtifactServices[artifact.type];
-  if (!entry) return null;
-  const { Component } = entry;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, { artifact });
-}
-
-// src/components/blocks/block-services/artifact-ref-block-service.ts
-var ArtifactRefBlockService = {
-  type: blockTypes.ARTIFACT_REF,
-  Component: ArtifactRefBlock,
-  /**
-   * Delegates to the registered artifact component's `toClipboardText`. Falls back to
-   * `[Artifact: <title>]` via `artifactToClipboardText`'s own fallback when the artifact type
-   * has no registered component, so copy never silently produces an empty string.
-   */
-  toClipboardText: (block) => artifactToClipboardText(block.payload.artifact)
-};
-
-// src/utils/markdown-to-plain-text.ts
-var PLACEHOLDER_PREFIX = "\u200B\u200BIC";
-var PLACEHOLDER_SUFFIX = "\u200B\u200B";
-var PLACEHOLDER_REGEX = new RegExp(`${PLACEHOLDER_PREFIX}(\\d+)${PLACEHOLDER_SUFFIX}`, "g");
-function stripInlineMarks(text) {
-  return text.replace(/\*{3}(.+?)\*{3}/g, "$1").replace(/\*{2}(.+?)\*{2}/g, "$1").replace(/_{2}(.+?)_{2}/g, "$1").replace(/\*(.+?)\*/g, "$1").replace(/_(.+?)_/g, "$1").replace(/~~(.+?)~~/g, "$1");
-}
-function markdownToPlainText(markdown) {
-  if (!markdown) return "";
-  const inlineCodeSnippets = [];
-  let result = markdown.replace(/^<!--[\s\S]*?--!?>\n?/gm, "").replace(/```[\s\S]*?```/g, "").replace(/`([^`]+)`/g, (_match, code) => {
-    inlineCodeSnippets.push(code);
-    return `${PLACEHOLDER_PREFIX}${inlineCodeSnippets.length - 1}${PLACEHOLDER_SUFFIX}`;
-  }).replace(/^#{1,6}\s+/gm, "").replace(/^(?:---|\*\*\*|___)\s*$/gm, "");
-  result = stripInlineMarks(result).replace(/!\[([^\]]*)\]\([^)]+\)/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^>\s?/gm, "").replace(/^\|[-:\s|]+\|\s*$/gm, "").replace(/^\|\s?/gm, "").replace(/\s?\|$/gm, "").replace(/\n{3,}/g, "\n\n").trim();
-  result = result.replace(PLACEHOLDER_REGEX, (_match, index) => inlineCodeSnippets[Number(index)]);
-  return result;
-}
-
-// src/components/blocks/text-block/text-block.tsx
-var import_react_markdown = __toESM(require("react-markdown"), 1);
-var import_remark_breaks = __toESM(require("remark-breaks"), 1);
-var import_remark_gfm = __toESM(require("remark-gfm"), 1);
-
-// src/components/blocks/scrollable-table/scrollable-table-styles.ts
-var import_styled_components3 = __toESM(require("styled-components"), 1);
-var TableContainer = import_styled_components3.default.div`
-  position: relative;
-  margin-block: 8px 16px;
-`;
-var TableScroll = import_styled_components3.default.div`
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-`;
-
-// src/components/blocks/scrollable-table/scrollable-table.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function ScrollableTable({ node: _node, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("table", { ...props }) }) });
-}
-
-// src/components/blocks/text-block/sanitize.ts
-function sanitize(text) {
-  return text.split("\n").filter((line) => {
-    const t = line.trim();
-    return !(t.startsWith("<!-- table-title:") && t.endsWith("-->"));
-  }).join("\n");
-}
-
-// src/components/blocks/text-block/text-block-styles.ts
-var import_styled_components4 = __toESM(require("styled-components"), 1);
-
 // src/tokens/typography.ts
 var fontFamilies = {
   /** Geist — primary UI font for body text, labels, headings, and display. */
@@ -1112,106 +828,1108 @@ function typographyMixin(type) {
   ].join(";\n  ");
 }
 
-// src/components/blocks/text-block/text-block-styles.ts
-var TextBlockWrapper = import_styled_components4.default.div`
-  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
-  color: ${colors["brown-100"]};
-  word-break: break-word;
-
-  & h1 {
-    ${typographyMixin(typographyTypes.GEIST_HEADING_S_BOLD)};
-    margin-block: 20px;
+// src/components/chart/chart-palette.ts
+var CHART_PALETTE = [
+  colors["blue-600"],
+  //   #2563EB  — primary
+  colors["blue-400"],
+  //   #60A5FA  — mid
+  colors["blue-300"],
+  //   #93C5FD  — light
+  colors["blue-100"],
+  //   #DBEAFE  — very light
+  colors["indigo-400"],
+  // #818CF8
+  colors["indigo-500"],
+  // #6366F1
+  colors["indigo-600"],
+  // #4F46E5
+  colors["indigo-800"],
+  // #3730A3
+  colors["blue-800"]
+  //   #1E40AF  — deepest
+];
+var OTHERS_SLICE_COLOR = colors["brown-60"];
+var DEFAULT_OTHERS_CATEGORY_LABELS = ["others", "other"];
+function isOthersCategory(value, labels) {
+  if (value === null || value === void 0) return false;
+  if (labels.length === 0) return false;
+  const normalized = String(value).trim().toLowerCase();
+  for (const label of labels) {
+    if (normalized === label.toLowerCase()) return true;
   }
+  return false;
+}
+function colorForSeriesIndex(index, palette = CHART_PALETTE) {
+  return palette[index % palette.length] ?? CHART_PALETTE[0];
+}
 
-  & h2 {
-    ${typographyMixin(typographyTypes.GEIST_BODY_L_SEMI_BOLD)};
-    margin-block: 12px;
-  }
+// src/components/chart/chart-styles.ts
+var GRID_STROKE = colors["brown-40"];
+var AXIS_STROKE = colors["brown-50"];
+var AXIS_TICK_STYLE = {
+  fill: colors["brown-70"],
+  fontSize: 12,
+  fontWeight: 500
+};
+var CHART_VALUE_LABEL_STYLE = {
+  fill: colors["brown-70"],
+  fontSize: 12,
+  fontWeight: 500
+};
+var BAR_TOOLTIP_CURSOR_FILL = colors["brown-alpha-12"];
+var LINE_ACTIVE_DOT_STROKE = colors["brown-10"];
+var CHART_MARGIN = { top: 8, right: 16, left: 0, bottom: 4 };
+var PIE_CHART_MARGIN = { top: 0, right: 24, left: 24, bottom: 4 };
+var CHART_AXIS_PROPS = {
+  stroke: AXIS_STROKE,
+  tick: AXIS_TICK_STYLE,
+  tickLine: false,
+  axisLine: false
+};
+var CHART_GRID_PROPS = {
+  stroke: GRID_STROKE,
+  strokeDasharray: "3 3",
+  vertical: false
+};
 
-  & h3,
-  & h4,
-  & h5,
-  & h6 {
-    ${typographyMixin(typographyTypes.GEIST_BODY_M_SEMI_BOLD)};
-    margin-block: 8px;
+// src/components/chart/chart-tick-utils.ts
+function maxTickCharsByCategoryCount(n) {
+  if (n <= 5) return 24;
+  if (n <= 8) return 14;
+  if (n <= 12) return 10;
+  if (n <= 16) return 7;
+  return 5;
+}
+function truncateLabel(value, maxChars) {
+  const s = String(value ?? "");
+  if (s.length <= maxChars) return s;
+  return s.slice(0, Math.max(1, maxChars - 1)).trimEnd() + "\u2026";
+}
+function evenlyDistributedVisibleIndices(n, target) {
+  if (n <= target) {
+    return new Set(Array.from({ length: n }, (_, i) => i));
   }
-
-  & strong {
-    ${typographyMixin(typographyTypes.GEIST_BODY_S_SEMI_BOLD)};
+  const set = /* @__PURE__ */ new Set();
+  const step = (n - 1) / (target - 1);
+  for (let i = 0; i < target; i++) {
+    set.add(Math.round(i * step));
   }
+  return set;
+}
+function defaultBarTickFormatter(categoryCount) {
+  const max = maxTickCharsByCategoryCount(categoryCount);
+  return (value) => truncateLabel(value, max);
+}
+function defaultLineChartTickFormatter(categoryCount, visibleIndices) {
+  const max = maxTickCharsByCategoryCount(visibleIndices.size || categoryCount);
+  return (value, index) => {
+    if (!visibleIndices.has(index)) return "";
+    return truncateLabel(value, max);
+  };
+}
 
-  & p {
-    margin-block: 0px;
-  }
+// src/components/chart/coerce-numeric.ts
+function coerceNumericColumns(rows, numericKeys) {
+  return rows.map((row) => {
+    const out = { ...row };
+    for (const k of numericKeys) {
+      const v = out[k];
+      if (v == null) continue;
+      const n = Number(v);
+      out[k] = Number.isFinite(n) ? n : NaN;
+    }
+    return out;
+  });
+}
 
-  & p + p {
-    margin-block: 8px 0px;
-  }
+// src/components/chart/bar-chart/bar-chart.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function BarChart({
+  data,
+  xKey,
+  series,
+  stacked = false,
+  height = 320,
+  width = "100%",
+  className,
+  palette = CHART_PALETTE,
+  showTooltip = true,
+  showLegend,
+  showGrid = true,
+  showXAxis = true,
+  showYAxis = true,
+  showValueLabels,
+  xAxisInterval = 0,
+  xAxisAngle,
+  xAxisTickFormatter
+}) {
+  const seriesKeys = (0, import_react5.useMemo)(() => series.map((s) => s.key), [series]);
+  const coercedData = (0, import_react5.useMemo)(
+    () => coerceNumericColumns(data, seriesKeys),
+    [data, seriesKeys]
+  );
+  const resolvedShowLegend = showLegend ?? series.length > 1;
+  const resolvedShowValueLabels = showValueLabels ?? (!stacked && series.length === 1);
+  const resolvedAngle = xAxisAngle ?? (coercedData.length >= 8 ? -30 : 0);
+  const resolvedTickFormatter = (0, import_react5.useMemo)(
+    () => xAxisTickFormatter ?? defaultBarTickFormatter(coercedData.length),
+    [xAxisTickFormatter, coercedData.length]
+  );
+  const angledLabelPad = resolvedAngle === 0 ? 0 : Math.min(Math.abs(resolvedAngle) * 0.7, 40);
+  const chartMargin = { ...CHART_MARGIN, bottom: CHART_MARGIN.bottom + angledLabelPad };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_recharts2.BarChart, { data: coercedData, margin: chartMargin, barCategoryGap: "22%", children: [
+    showGrid ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_recharts2.CartesianGrid, { ...CHART_GRID_PROPS }) : null,
+    showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_recharts2.XAxis,
+      {
+        dataKey: xKey,
+        ...CHART_AXIS_PROPS,
+        interval: xAxisInterval,
+        angle: resolvedAngle,
+        textAnchor: resolvedAngle !== 0 ? "end" : "middle",
+        tickMargin: resolvedAngle === 0 ? 8 : 12,
+        height: resolvedAngle !== 0 ? 60 : void 0,
+        tickFormatter: resolvedTickFormatter
+      }
+    ) : null,
+    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_recharts2.YAxis, { ...CHART_AXIS_PROPS, width: 40 }) : null,
+    showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_recharts2.Tooltip, { cursor: { fill: BAR_TOOLTIP_CURSOR_FILL }, content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartTooltipContent, {}) }) : null,
+    resolvedShowLegend ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_recharts2.Legend,
+      {
+        verticalAlign: "top",
+        align: "center",
+        wrapperStyle: { top: 0 },
+        itemSorter: null,
+        content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartLegendContent, { iconType: "square" })
+      }
+    ) : null,
+    series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_recharts2.Bar,
+      {
+        dataKey: s.key,
+        name: s.label,
+        fill: colorForSeriesIndex(i, palette),
+        stackId: stacked ? "default" : s.key,
+        radius: barRadius(stacked, i, series.length),
+        children: resolvedShowValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_recharts2.LabelList, { dataKey: s.key, position: "top", style: CHART_VALUE_LABEL_STYLE }) : null
+      },
+      s.key
+    ))
+  ] }) });
+}
+function barRadius(stacked, seriesIndex, seriesCount) {
+  if (!stacked) return [6, 6, 0, 0];
+  const isTopSegment = seriesIndex === seriesCount - 1;
+  return isTopSegment ? [6, 6, 0, 0] : [0, 0, 0, 0];
+}
 
-  & ul,
-  & ol {
-    margin-block: 16px;
-    padding-left: 20px;
-  }
+// src/components/artifacts/chart-artifact/chart-variant-services/constants.ts
+var VARIANT_CHART_HEIGHT = "100%";
 
-  & li + li {
-    margin-block: 4px;
-  }
+// src/components/artifacts/chart-artifact/chart-variant-services/bar-chart-variant-component.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function BarChartVariantComponent({ config, rows }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    BarChart,
+    {
+      data: rows,
+      xKey: config.xKey,
+      series: config.series,
+      stacked: config.stacked,
+      height: VARIANT_CHART_HEIGHT
+    }
+  );
+}
 
-  & ol {
-    list-style-type: decimal;
-  }
+// src/components/artifacts/chart-artifact/chart-variant-services/shared-column-keys.ts
+function seriesBasedColumnKeys(config) {
+  return [config.xKey, ...config.series.map((s) => s.key)];
+}
+function pieColumnKeys(config) {
+  return [config.categoryKey, config.valueKey];
+}
 
-  & ol ol {
-    list-style-type: lower-alpha;
-  }
+// src/components/artifacts/chart-artifact/chart-variant-services/shared-validators.ts
+function isValidChartSeries(series) {
+  if (!series || typeof series !== "object") return false;
+  const candidate = series;
+  if (typeof candidate.key !== "string" || candidate.key.length === 0) return false;
+  if (typeof candidate.label !== "string") return false;
+  return true;
+}
 
-  & ol ol ol {
-    list-style-type: lower-roman;
-  }
+// src/components/artifacts/chart-artifact/chart-variant-services/bar-chart-variant-service.tsx
+function isValidBarChartConfig(config) {
+  if (!config || typeof config !== "object") return false;
+  const candidate = config;
+  if (candidate.variant !== "BAR") return false;
+  if (typeof candidate.xKey !== "string" || candidate.xKey.length === 0) return false;
+  if (!Array.isArray(candidate.series) || candidate.series.length === 0) return false;
+  if (!candidate.series.every(isValidChartSeries)) return false;
+  return true;
+}
+var BarChartVariantService = {
+  variant: "BAR",
+  isValidConfig: isValidBarChartConfig,
+  columnKeys: seriesBasedColumnKeys,
+  Component: BarChartVariantComponent
+};
 
-  & a {
-    color: inherit;
-    text-decoration-line: underline;
-    text-decoration-style: dotted;
-    text-decoration-thickness: auto;
-    text-underline-offset: auto;
-    text-underline-position: from-font;
-    transition: color 75ms ease-in-out;
+// src/components/chart/line-chart/line-chart.tsx
+var import_react6 = require("react");
+var import_recharts3 = require("recharts");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TARGET_VISIBLE_LABELS = 5;
+function LineChart({
+  data,
+  xKey,
+  series,
+  smooth = true,
+  showDots = true,
+  strokeWidth = 2,
+  height = 320,
+  width = "100%",
+  className,
+  palette = CHART_PALETTE,
+  showTooltip = true,
+  showLegend,
+  showGrid = true,
+  showXAxis = true,
+  showYAxis = true,
+  showValueLabels = false,
+  xAxisInterval = 0,
+  xAxisAngle = 0,
+  xAxisTickFormatter
+}) {
+  const seriesKeys = (0, import_react6.useMemo)(() => series.map((s) => s.key), [series]);
+  const coercedData = (0, import_react6.useMemo)(
+    () => coerceNumericColumns(data, seriesKeys),
+    [data, seriesKeys]
+  );
+  const lineType = smooth ? "monotone" : "linear";
+  const resolvedShowLegend = showLegend ?? series.length > 1;
+  const resolvedTickFormatter = (0, import_react6.useMemo)(() => {
+    if (xAxisTickFormatter) return xAxisTickFormatter;
+    const visible = evenlyDistributedVisibleIndices(coercedData.length, TARGET_VISIBLE_LABELS);
+    return defaultLineChartTickFormatter(coercedData.length, visible);
+  }, [xAxisTickFormatter, coercedData.length]);
+  const angledLabelPad = xAxisAngle === 0 ? 0 : Math.min(Math.abs(xAxisAngle) * 0.7, 40);
+  const chartMargin = { ...CHART_MARGIN, right: CHART_MARGIN.right + 16, bottom: CHART_MARGIN.bottom + angledLabelPad };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_recharts3.LineChart, { data: coercedData, margin: chartMargin, children: [
+    showGrid ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_recharts3.CartesianGrid, { ...CHART_GRID_PROPS }) : null,
+    showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_recharts3.XAxis,
+      {
+        dataKey: xKey,
+        ...CHART_AXIS_PROPS,
+        interval: xAxisInterval,
+        angle: xAxisAngle,
+        textAnchor: xAxisAngle !== 0 ? "end" : "middle",
+        tickMargin: xAxisAngle === 0 ? 8 : 12,
+        height: xAxisAngle !== 0 ? 60 : void 0,
+        tickFormatter: resolvedTickFormatter
+      }
+    ) : null,
+    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_recharts3.YAxis, { ...CHART_AXIS_PROPS, width: 40 }) : null,
+    showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartTooltipContent, {}) }) : null,
+    resolvedShowLegend ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_recharts3.Legend,
+      {
+        verticalAlign: "top",
+        align: "center",
+        wrapperStyle: { top: 0 },
+        itemSorter: null,
+        content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartLegendContent, { iconType: "line" })
+      }
+    ) : null,
+    series.map((s, i) => {
+      const color = colorForSeriesIndex(i, palette);
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_recharts3.Line,
+        {
+          type: lineType,
+          dataKey: s.key,
+          name: s.label,
+          stroke: color,
+          strokeWidth,
+          dot: showDots ? { r: 3, fill: color, stroke: color, strokeWidth: 0 } : false,
+          activeDot: { r: 5, fill: color, stroke: LINE_ACTIVE_DOT_STROKE, strokeWidth: 2 },
+          children: showValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_recharts3.LabelList, { dataKey: s.key, position: "top", style: CHART_VALUE_LABEL_STYLE }) : null
+        },
+        s.key
+      );
+    })
+  ] }) });
+}
 
-    &:hover {
-      color: ${colors["blue-600"]};
+// src/components/artifacts/chart-artifact/chart-variant-services/line-chart-variant-component.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function LineChartVariantComponent({ config, rows }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LineChart, { data: rows, xKey: config.xKey, series: config.series, height: VARIANT_CHART_HEIGHT });
+}
+
+// src/components/artifacts/chart-artifact/chart-variant-services/line-chart-variant-service.tsx
+function isValidLineChartConfig(config) {
+  if (!config || typeof config !== "object") return false;
+  const candidate = config;
+  if (candidate.variant !== "LINE") return false;
+  if (typeof candidate.xKey !== "string" || candidate.xKey.length === 0) return false;
+  if (!Array.isArray(candidate.series) || candidate.series.length === 0) return false;
+  if (!candidate.series.every(isValidChartSeries)) return false;
+  return true;
+}
+var LineChartVariantService = {
+  variant: "LINE",
+  isValidConfig: isValidLineChartConfig,
+  columnKeys: seriesBasedColumnKeys,
+  Component: LineChartVariantComponent
+};
+
+// src/components/chart/pie-chart/pie-chart.tsx
+var import_react7 = require("react");
+var import_recharts4 = require("recharts");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function PieChart({
+  data,
+  categoryKey,
+  valueKey,
+  height = 320,
+  width = "100%",
+  className,
+  palette = CHART_PALETTE,
+  showLabels = true,
+  showTooltip = true,
+  showLegend = true,
+  innerRadius = 0,
+  outerRadius = "68%",
+  othersCategoryLabels = DEFAULT_OTHERS_CATEGORY_LABELS
+}) {
+  const { orderedData, sliceColors } = (0, import_react7.useMemo)(() => {
+    const coerced = coerceNumericColumns(data, [valueKey]);
+    const namedRows = [];
+    const namedColors = [];
+    const othersRows = [];
+    const othersColors = [];
+    for (const row of coerced) {
+      if (isOthersCategory(row[categoryKey], othersCategoryLabels)) {
+        othersRows.push(row);
+        othersColors.push(OTHERS_SLICE_COLOR);
+      } else {
+        namedRows.push(row);
+        namedColors.push(colorForSeriesIndex(namedRows.length - 1, palette));
+      }
     }
-  }
+    return {
+      orderedData: [...namedRows, ...othersRows],
+      sliceColors: [...namedColors, ...othersColors]
+    };
+  }, [data, valueKey, categoryKey, othersCategoryLabels, palette]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_recharts4.PieChart, { margin: PIE_CHART_MARGIN, children: [
+    showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_recharts4.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartTooltipContent, {}) }) : null,
+    showLegend ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_recharts4.Legend,
+      {
+        verticalAlign: "top",
+        align: "center",
+        wrapperStyle: { top: 0 },
+        itemSorter: null,
+        content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartLegendContent, { iconType: "square" })
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_recharts4.Pie,
+      {
+        data: orderedData,
+        dataKey: valueKey,
+        nameKey: categoryKey,
+        cx: "50%",
+        cy: "52%",
+        startAngle: 90,
+        endAngle: -270,
+        innerRadius,
+        outerRadius,
+        label: showLabels ? (entry) => {
+          const v = entry.value;
+          if (v === void 0 || v === null) return null;
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "text",
+            {
+              x: entry.x,
+              y: entry.y,
+              fill: CHART_VALUE_LABEL_STYLE.fill,
+              fontSize: CHART_VALUE_LABEL_STYLE.fontSize,
+              fontWeight: CHART_VALUE_LABEL_STYLE.fontWeight,
+              textAnchor: entry.textAnchor,
+              dominantBaseline: "central",
+              children: String(v)
+            }
+          );
+        } : false,
+        labelLine: false,
+        stroke: "none",
+        strokeWidth: 0,
+        children: orderedData.map((_row, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_recharts4.Cell, { fill: sliceColors[i] }, i))
+      }
+    )
+  ] }) });
+}
 
-  & hr {
-    border: none;
-    border-top: 1px solid ${colors["brown-40"]};
-    margin-block: 20px;
-  }
+// src/components/artifacts/chart-artifact/chart-variant-services/pie-chart-variant-component.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function PieChartVariantComponent({
+  config,
+  rows,
+  labels
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    PieChart,
+    {
+      data: rows,
+      categoryKey: config.categoryKey,
+      valueKey: config.valueKey,
+      othersCategoryLabels: labels.othersCategoryLabels,
+      height: VARIANT_CHART_HEIGHT
+    }
+  );
+}
 
-  & table {
-    margin: 0;
-    width: 100%;
-    border-collapse: collapse;
-  }
+// src/components/artifacts/chart-artifact/chart-variant-services/pie-chart-variant-service.tsx
+function isValidPieChartConfig(config) {
+  if (!config || typeof config !== "object") return false;
+  const candidate = config;
+  if (candidate.variant !== "PIE") return false;
+  if (typeof candidate.categoryKey !== "string" || candidate.categoryKey.length === 0) return false;
+  if (typeof candidate.valueKey !== "string" || candidate.valueKey.length === 0) return false;
+  if (!Array.isArray(candidate.series)) return false;
+  return true;
+}
+var PieChartVariantService = {
+  variant: "PIE",
+  isValidConfig: isValidPieChartConfig,
+  columnKeys: pieColumnKeys,
+  Component: PieChartVariantComponent
+};
 
-  & th,
-  & td {
-    border: none;
-    border-bottom: 1px solid ${colors["brown-40"]};
-    text-align: left;
-  }
+// src/components/artifacts/chart-artifact/chart-variant-services/index.ts
+var ChartVariantServices = {
+  LINE: LineChartVariantService,
+  BAR: BarChartVariantService,
+  PIE: PieChartVariantService
+};
 
-  & th {
-    ${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};
-    padding: 8px;
+// src/components/artifacts/chart-artifact/chart-artifact-content.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function ChartArtifactContent({ config, rows, labels }) {
+  const service = ChartVariantServices[config.variant];
+  if (!service) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StatusMessage, { $tone: "info", children: labels.unavailable });
   }
+  const Component = service.Component;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Component, { config, rows, labels });
+}
 
-  & td {
-    ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
-    padding: 16px 8px;
-    min-width: 150px;
+// src/components/artifacts/parse-csv.ts
+var import_papaparse = __toESM(require("papaparse"), 1);
+function parseCsv(text, columns) {
+  const result = import_papaparse.default.parse(text, {
+    header: true,
+    skipEmptyLines: true,
+    dynamicTyping: false
+  });
+  const csvHeaders = new Set(result.meta?.fields ?? []);
+  const presentColumns = columns.filter((col) => csvHeaders.has(col.key));
+  if (presentColumns.length === 0) return [];
+  return result.data.map((rawRow) => {
+    const row = {};
+    for (const column of presentColumns) {
+      const value = rawRow[column.key];
+      row[column.key] = value === void 0 || value === "" ? null : value;
+    }
+    return row;
+  });
+}
+
+// src/components/artifacts/use-rows-artifact-data.ts
+var import_react8 = require("react");
+var LOADING = { status: "loading", rows: null, error: null };
+var UNAVAILABLE = { status: "unavailable", rows: null, error: null };
+var INITIAL_INTERNAL = { cacheKey: null, data: LOADING };
+function columnsFingerprint(columns) {
+  return columns.map((c) => c.key).join("|");
+}
+function scrubUrl(url) {
+  const q = url.indexOf("?");
+  return q === -1 ? url : `${url.slice(0, q)}?<redacted>`;
+}
+function useRowsArtifactData(presignedUrl, columns, parse) {
+  const colsKey = (0, import_react8.useMemo)(() => columnsFingerprint(columns), [columns]);
+  const safeUrl = presignedUrl && isSafeDownloadUrl(presignedUrl) ? presignedUrl : null;
+  const cacheKey = safeUrl ? `${safeUrl}::${colsKey}` : null;
+  const [state, setState] = (0, import_react8.useState)(INITIAL_INTERNAL);
+  (0, import_react8.useEffect)(() => {
+    if (!safeUrl) return;
+    const controller = new AbortController();
+    fetch(safeUrl, {
+      signal: controller.signal,
+      headers: { Accept: "text/csv" },
+      // Presigned URLs are cross-origin S3 in production and don't need credentials. Explicit
+      // omit so a same-origin URL (compromised payload, local dev) can't accidentally receive
+      // session cookies or auth headers.
+      credentials: "omit"
+    }).then(async (response) => {
+      if (!response.ok) throw new Error(`Failed to load artifact data (${response.status})`);
+      return response.text();
+    }).then((text) => {
+      if (controller.signal.aborted) return;
+      try {
+        const rows = parse(text, columns);
+        setState({ cacheKey: `${safeUrl}::${colsKey}`, data: { status: "ready", rows, error: null } });
+      } catch (parseError) {
+        const err = parseError instanceof Error ? parseError : new Error(String(parseError));
+        console.error("[ArtifactData] CSV parse failed:", err.message);
+        setState({ cacheKey: `${safeUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
+      }
+    }).catch((error) => {
+      if (controller.signal.aborted) return;
+      const err = error instanceof Error ? error : new Error(String(error));
+      console.error(`[ArtifactData] Fetch failed [${scrubUrl(safeUrl)}]:`, err.message);
+      setState({ cacheKey: `${safeUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [safeUrl, colsKey]);
+  if (!safeUrl) return UNAVAILABLE;
+  if (state.cacheKey !== cacheKey) return LOADING;
+  return state.data;
+}
+
+// src/components/artifacts/chart-artifact/use-chart-artifact-data.ts
+function useChartArtifactData(presignedUrl, config) {
+  const service = ChartVariantServices[config.variant];
+  const keys = service ? service.columnKeys(config) : [];
+  const columns = keys.map((key) => ({ key }));
+  return useRowsArtifactData(presignedUrl, columns, parseCsv);
+}
+
+// src/components/artifacts/chart-artifact/validate.ts
+function isValidChartConfig(config) {
+  if (!config || typeof config !== "object") return false;
+  const variant = config.variant;
+  if (typeof variant !== "string") return false;
+  const service = ChartVariantServices[variant];
+  if (!service) return false;
+  return service.isValidConfig(config);
+}
+
+// src/components/artifacts/chart-artifact/chart-artifact.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var TITLE_CLASSES = "text-sm font-semibold text-foreground";
+var CHART_HEIGHT = 320;
+function ChartArtifact({ artifact, labels, callbacks }) {
+  const validConfig = isValidChartConfig(artifact.config);
+  (0, import_react9.useEffect)(() => {
+    if (validConfig) return;
+    console.warn("[clay] ChartArtifact: malformed `config` \u2014 skipping render.");
+  }, [validConfig]);
+  const presignedUrl = artifact.protectedAsset?.presignedUrl ?? null;
+  const resolvedLabels = (0, import_react9.useMemo)(
+    () => ({ ...DEFAULT_CHART_ARTIFACT_LABELS, ...labels?.[artifactTypes.CHART] ?? {} }),
+    [labels]
+  );
+  const data = useChartArtifactData(
+    validConfig ? presignedUrl : null,
+    validConfig ? artifact.config : { variant: "LINE", series: [], xKey: "x" }
+  );
+  const onDownload = callbacks?.[artifactTypes.CHART]?.onDownload;
+  const handleDownloadClick = onDownload ? () => onDownload(artifact) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ArtifactHeader, { className: "bg-background/70", children: [
+      artifact.title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArtifactTitle, { className: TITLE_CLASSES, children: artifact.title }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", {}),
+      presignedUrl ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArtifactActions, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArtifactDownloadButton, { href: presignedUrl, label: resolvedLabels.download, onClick: handleDownloadClick }) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      ArtifactContent,
+      {
+        className: "p-4 overflow-visible flex flex-none items-center justify-center",
+        style: { height: CHART_HEIGHT },
+        children: renderBody(validConfig, artifact, data, resolvedLabels)
+      }
+    )
+  ] });
+}
+function renderBody(validConfig, artifact, data, labels) {
+  if (!validConfig) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatusMessage, { $tone: "info", children: labels.unavailable });
+  }
+  if (data.status === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatusMessage, { $tone: "error", children: labels.loadError });
+  }
+  if (data.status === "unavailable") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatusMessage, { $tone: "info", children: labels.unavailable });
+  }
+  if (data.status === "loading") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatusMessage, { $tone: "info", children: labels.loading });
+  }
+  if (data.rows.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatusMessage, { $tone: "info", children: labels.empty });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartArtifactContent, { config: artifact.config, rows: data.rows, labels });
+}
+
+// src/components/artifacts/chart-artifact/to-clipboard-text.ts
+function chartArtifactToClipboardText(artifact) {
+  const trimmedTitle = artifact.title?.trim();
+  return trimmedTitle || "Chart";
+}
+
+// src/components/artifacts/artifact-services/chart-artifact-service.ts
+var ChartArtifactService = {
+  type: artifactTypes.CHART,
+  Component: ChartArtifact,
+  toClipboardText: chartArtifactToClipboardText
+};
+
+// src/components/artifacts/table-artifact/table-artifact.tsx
+var import_react11 = require("react");
+
+// src/components/ui/table.tsx
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Table = React2.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("relative w-full overflow-auto", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props }) }));
+Table.displayName = "Table";
+var TableHeader = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
+);
+TableBody.displayName = "TableBody";
+var TableFooter = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })
+);
+TableFooter.displayName = "TableFooter";
+var TableRow = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "tr",
+    {
+      ref,
+      className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var TableHead = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "th",
+    {
+      ref,
+      className: cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+var TableCell = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props })
+);
+TableCell.displayName = "TableCell";
+var TableCaption = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })
+);
+TableCaption.displayName = "TableCaption";
+
+// src/components/table/use-scroll-shadow.ts
+var import_react10 = require("react");
+function useScrollShadow() {
+  const targetRef = (0, import_react10.useRef)(null);
+  const [isScrolled, setIsScrolled] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
+    const target = targetRef.current;
+    if (!target) return;
+    let scrollContainer = target;
+    while (scrollContainer) {
+      const overflowY = getComputedStyle(scrollContainer).overflowY;
+      if (overflowY === "auto" || overflowY === "scroll") break;
+      scrollContainer = scrollContainer.parentElement;
+    }
+    if (!scrollContainer) return;
+    setIsScrolled(scrollContainer.scrollTop > 0);
+    const handleScroll = () => {
+      if (!scrollContainer) return;
+      setIsScrolled(scrollContainer.scrollTop > 0);
+    };
+    scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
+    return () => scrollContainer.removeEventListener("scroll", handleScroll);
+  }, []);
+  return { targetRef, isScrolled };
+}
+
+// src/components/artifacts/table-artifact/table-artifact-content.constants.ts
+var TABLE_STATUS = {
+  LOADING: "loading",
+  READY: "ready",
+  ERROR: "error",
+  UNAVAILABLE: "unavailable"
+};
+
+// src/components/artifacts/table-artifact/table-artifact-content.utils.ts
+function formatCell(row, column) {
+  return row[column.key] ?? "";
+}
+var HEAD_CLASS = "h-auto py-2 px-4 text-xs font-medium text-foreground whitespace-nowrap text-left";
+var CELL_CLASS = "p-4 text-sm font-normal text-foreground align-top min-w-[150px] text-left";
+var ROW_CLASSES = "border-b-brown-30 bg-background/70 hover:bg-secondary";
+var DATA_ROW_CLASSES = `${ROW_CLASSES} animate-in fade-in duration-300`;
+var SCROLL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.01), 0 6px 12px -2px rgb(0 0 0 / 0.03)";
+
+// src/components/artifacts/table-artifact/table-artifact-content.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function TableArtifactContent({
+  columns,
+  data,
+  knownRowCount,
+  maxShimmerRows,
+  maxBodyHeight,
+  labels
+}) {
+  if (data.status === TABLE_STATUS.ERROR) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StatusMessage, { $tone: "error", children: labels.loadError });
+  }
+  if (data.status === TABLE_STATUS.UNAVAILABLE) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StatusMessage, { $tone: "info", children: labels.unavailable });
+  }
+  if (data.status === TABLE_STATUS.LOADING) {
+    if (typeof knownRowCount === "number" && knownRowCount > 0) {
+      const shimmerCount = Math.min(knownRowCount, maxShimmerRows);
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArtifactTable, { columns, maxBodyHeight, children: renderShimmerRows(columns, shimmerCount) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StatusMessage, { $tone: "info", children: labels.loading });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArtifactTable, { columns, maxBodyHeight, children: data.rows.length === 0 ? renderEmptyRow(columns.length, labels.empty) : renderDataRows(columns, data.rows) });
+}
+function ArtifactTable({ columns, maxBodyHeight, children }) {
+  const { targetRef, isScrolled } = useScrollShadow();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: targetRef, className: "overscroll-none", style: { maxHeight: maxBodyHeight, overflowY: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Table, { containerClassName: "overflow-visible", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      TableHeader,
+      {
+        "data-scrolled": isScrolled ? "true" : void 0,
+        className: "sticky top-0 z-10 bg-background/70 backdrop-blur-lg transition-shadow",
+        style: isScrolled ? { boxShadow: SCROLL_SHADOW } : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, { className: "hover:bg-transparent", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableHead, { scope: "col", className: HEAD_CLASS, children: column.label }, column.key)) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableBody, { children })
+  ] }) });
+}
+function renderShimmerRows(columns, count) {
+  return Array.from({ length: count }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, { className: ROW_CLASSES, "aria-hidden": "true", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { className: CELL_CLASS, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "block h-3 w-3/4 animate-pulse rounded bg-muted-foreground/20" }) }, column.key)) }, `shimmer-${index}`));
+}
+function renderDataRows(columns, rows) {
+  return rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, { className: DATA_ROW_CLASSES, children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { className: CELL_CLASS, children: formatCell(row, column) }, column.key)) }, index));
+}
+function renderEmptyRow(colSpan, emptyMessage) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { colSpan, className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) });
+}
+
+// src/components/artifacts/table-artifact/use-table-artifact-data.ts
+function useTableArtifactData(presignedUrl, columns) {
+  return useRowsArtifactData(presignedUrl, columns, parseCsv);
+}
+
+// src/components/artifacts/table-artifact/validate.ts
+function isValidTableConfig(config) {
+  if (!config || typeof config !== "object") return false;
+  const candidate = config;
+  if (!Array.isArray(candidate.columns)) return false;
+  if (candidate.columns.length === 0) return false;
+  return candidate.columns.every(isValidTableColumn);
+}
+function isValidTableColumn(column) {
+  if (!column || typeof column !== "object") return false;
+  const candidate = column;
+  if (typeof candidate.key !== "string" || candidate.key.length === 0) return false;
+  if (typeof candidate.label !== "string") return false;
+  return true;
+}
+
+// src/components/artifacts/table-artifact/table-artifact.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var TITLE_CLASSES2 = "text-sm font-semibold text-foreground";
+var TABLE_MAX_BODY_HEIGHT = 480;
+var MAX_SHIMMER_ROWS = 10;
+function TableArtifact({ artifact, labels, callbacks }) {
+  const validConfig = isValidTableConfig(artifact.config);
+  const validColumns = validConfig ? artifact.config.columns : null;
+  (0, import_react11.useEffect)(() => {
+    if (validConfig) return;
+    console.warn("[clay] TableArtifact: malformed `config` \u2014 skipping render.");
+  }, [validConfig]);
+  const resolvedLabels = (0, import_react11.useMemo)(
+    () => ({ ...DEFAULT_TABLE_ARTIFACT_LABELS, ...labels?.[artifactTypes.TABLE] ?? {} }),
+    [labels]
+  );
+  const data = useTableArtifactData(
+    validConfig ? artifact.protectedAsset?.presignedUrl ?? null : null,
+    validColumns ?? []
+  );
+  const presignedUrl = artifact.protectedAsset?.presignedUrl ?? null;
+  const onDownload = callbacks?.[artifactTypes.TABLE]?.onDownload;
+  const handleDownloadClick = onDownload ? () => onDownload(artifact) : void 0;
+  if (!validConfig || !validColumns) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ArtifactHeader, { className: "bg-background/70", children: [
+        artifact.title ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactTitle, { className: TITLE_CLASSES2, children: artifact.title }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", {}),
+        presignedUrl ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactActions, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          ArtifactDownloadButton,
+          {
+            href: presignedUrl,
+            label: resolvedLabels.download,
+            onClick: handleDownloadClick
+          }
+        ) }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactContent, { className: "p-0 overflow-auto", style: { maxHeight: TABLE_MAX_BODY_HEIGHT }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StatusMessage, { $tone: "info", children: resolvedLabels.unavailable }) })
+    ] });
+  }
+  return (
+    // The table body owns its own scroll container (`ArtifactTable` inside `TableArtifactContent`).
+    // Disable the outer overflow container so only one scroll context exists — this prevents
+    // double-scroll nesting and lets `useScrollShadow` find the correct scroll ancestor.
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ArtifactHeader, { className: "bg-background/70", children: [
+        artifact.title ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactTitle, { className: TITLE_CLASSES2, children: artifact.title }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactActions, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          ArtifactDownloadButton,
+          {
+            href: presignedUrl ?? "",
+            label: resolvedLabels.download,
+            onClick: handleDownloadClick
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactContent, { className: "p-0 overflow-visible", style: { maxHeight: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        TableArtifactContent,
+        {
+          columns: validColumns,
+          data,
+          knownRowCount: artifact.config.stats?.rowCount,
+          maxShimmerRows: MAX_SHIMMER_ROWS,
+          maxBodyHeight: TABLE_MAX_BODY_HEIGHT,
+          labels: resolvedLabels
+        }
+      ) })
+    ] })
+  );
+}
+
+// src/components/artifacts/table-artifact/to-clipboard-text.ts
+function tableArtifactToClipboardText(artifact) {
+  const trimmedTitle = artifact.title?.trim();
+  return trimmedTitle || "Table";
+}
+
+// src/components/artifacts/artifact-services/table-artifact-service.ts
+var TableArtifactService = {
+  type: artifactTypes.TABLE,
+  Component: TableArtifact,
+  toClipboardText: tableArtifactToClipboardText
+};
+
+// src/components/artifacts/artifact-services/index.ts
+var ArtifactServices = {
+  [artifactTypes.TABLE]: TableArtifactService,
+  [artifactTypes.CHART]: ChartArtifactService
+};
+function artifactToClipboardText(artifact) {
+  const entry = ArtifactServices[artifact.type];
+  if (!entry) {
+    return `[Artifact: ${artifact.title ?? artifact.type}]`;
+  }
+  return entry.toClipboardText(artifact);
+}
+
+// src/components/blocks/artifact-ref-block/artifact-ref-block.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function ArtifactRefBlock({ block }) {
+  const { artifact, labels, callbacks } = block.payload;
+  const entry = ArtifactServices[artifact.type];
+  if (!entry) return null;
+  const { Component } = entry;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Component, { artifact, labels, callbacks });
+}
+
+// src/components/blocks/block-services/artifact-ref-block-service.ts
+var ArtifactRefBlockService = {
+  type: blockTypes.ARTIFACT_REF,
+  Component: ArtifactRefBlock,
+  /**
+   * Delegates to the registered artifact component's `toClipboardText`. Falls back to
+   * `[Artifact: <title>]` via `artifactToClipboardText`'s own fallback when the artifact type
+   * has no registered component, so copy never silently produces an empty string.
+   */
+  toClipboardText: (block) => artifactToClipboardText(block.payload.artifact)
+};
+
+// src/utils/markdown-to-plain-text.ts
+var PLACEHOLDER_PREFIX = "\u200B\u200BIC";
+var PLACEHOLDER_SUFFIX = "\u200B\u200B";
+var PLACEHOLDER_REGEX = new RegExp(`${PLACEHOLDER_PREFIX}(\\d+)${PLACEHOLDER_SUFFIX}`, "g");
+function stripInlineMarks(text) {
+  return text.replace(/\*{3}(.+?)\*{3}/g, "$1").replace(/\*{2}(.+?)\*{2}/g, "$1").replace(/_{2}(.+?)_{2}/g, "$1").replace(/\*(.+?)\*/g, "$1").replace(/_(.+?)_/g, "$1").replace(/~~(.+?)~~/g, "$1");
+}
+function markdownToPlainText(markdown) {
+  if (!markdown) return "";
+  const inlineCodeSnippets = [];
+  let result = markdown.replace(/^<!--[\s\S]*?--!?>\n?/gm, "").replace(/```[\s\S]*?```/g, "").replace(/`([^`]+)`/g, (_match, code) => {
+    inlineCodeSnippets.push(code);
+    return `${PLACEHOLDER_PREFIX}${inlineCodeSnippets.length - 1}${PLACEHOLDER_SUFFIX}`;
+  }).replace(/^#{1,6}\s+/gm, "").replace(/^(?:---|\*\*\*|___)\s*$/gm, "");
+  result = stripInlineMarks(result).replace(/!\[([^\]]*)\]\([^)]+\)/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^>\s?/gm, "").replace(/^\|[-:\s|]+\|\s*$/gm, "").replace(/^\|\s?/gm, "").replace(/\s?\|$/gm, "").replace(/\n{3,}/g, "\n\n").trim();
+  result = result.replace(PLACEHOLDER_REGEX, (_match, index) => inlineCodeSnippets[Number(index)]);
+  return result;
+}
+
+// src/components/blocks/text-block/text-block.tsx
+var import_react_markdown = __toESM(require("react-markdown"), 1);
+var import_remark_breaks = __toESM(require("remark-breaks"), 1);
+var import_remark_gfm = __toESM(require("remark-gfm"), 1);
+
+// src/components/blocks/scrollable-table/scrollable-table-styles.ts
+var import_styled_components3 = __toESM(require("styled-components"), 1);
+var TableContainer = import_styled_components3.default.div`
+  position: relative;
+  margin-block: 8px 16px;
+`;
+var TableScroll = import_styled_components3.default.div`
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
+
+// src/components/blocks/scrollable-table/scrollable-table.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function ScrollableTable({ node: _node, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("table", { ...props }) }) });
+}
+
+// src/components/blocks/text-block/sanitize.ts
+function sanitize(text) {
+  return text.split("\n").filter((line) => {
+    const t = line.trim();
+    return !(t.startsWith("<!-- table-title:") && t.endsWith("-->"));
+  }).join("\n");
+}
+
+// src/components/blocks/text-block/text-block-styles.ts
+var import_styled_components4 = __toESM(require("styled-components"), 1);
+var TextBlockWrapper = import_styled_components4.default.div`
+  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
+  color: ${colors["brown-100"]};
+  word-break: break-word;
+
+  & h1 {
+    ${typographyMixin(typographyTypes.GEIST_HEADING_S_BOLD)};
+    margin-block: 20px;
+  }
+
+  & h2 {
+    ${typographyMixin(typographyTypes.GEIST_BODY_L_SEMI_BOLD)};
+    margin-block: 12px;
+  }
+
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
+    ${typographyMixin(typographyTypes.GEIST_BODY_M_SEMI_BOLD)};
+    margin-block: 8px;
+  }
+
+  & strong {
+    ${typographyMixin(typographyTypes.GEIST_BODY_S_SEMI_BOLD)};
+  }
+
+  & p {
+    margin-block: 0px;
+  }
+
+  & p + p {
+    margin-block: 8px 0px;
+  }
+
+  & ul,
+  & ol {
+    margin-block: 16px;
+    padding-left: 20px;
+  }
+
+  & li + li {
+    margin-block: 4px;
+  }
+
+  & ol {
+    list-style-type: decimal;
+  }
+
+  & ol ol {
+    list-style-type: lower-alpha;
+  }
+
+  & ol ol ol {
+    list-style-type: lower-roman;
+  }
+
+  & a {
+    color: inherit;
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-decoration-thickness: auto;
+    text-underline-offset: auto;
+    text-underline-position: from-font;
+    transition: color 75ms ease-in-out;
+
+    &:hover {
+      color: ${colors["blue-600"]};
+    }
+  }
+
+  & hr {
+    border: none;
+    border-top: 1px solid ${colors["brown-40"]};
+    margin-block: 20px;
+  }
+
+  & table {
+    margin: 0;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  & th,
+  & td {
+    border: none;
+    border-bottom: 1px solid ${colors["brown-40"]};
+    text-align: left;
+  }
+
+  & th {
+    ${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};
+    padding: 8px;
+  }
+
+  & td {
+    ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
+    padding: 16px 8px;
+    min-width: 150px;
     width: 1%;
   }
 
@@ -1231,12 +1949,12 @@ var TextBlockWrapper = import_styled_components4.default.div`
 `;
 
 // src/components/blocks/text-block/text-block.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var markdownComponents = {
-  table: ((tableProps) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScrollableTable, { ...tableProps }))
+  table: ((tableProps) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScrollableTable, { ...tableProps }))
 };
 function TextBlock({ block }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextBlockWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], components: markdownComponents, children: sanitize(block.payload.text) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextBlockWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], components: markdownComponents, children: sanitize(block.payload.text) }) });
 }
 
 // src/components/blocks/block-services/text-block-service.ts
@@ -1258,12 +1976,12 @@ var BlockServices = {
 };
 
 // src/components/blocks/block/block.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Block({ block }) {
   const service = BlockServices[block.type];
   if (!service) return null;
   const { Component } = service;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Component, { block });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Component, { block });
 }
 
 // src/components/chat/hooks/copy-message-text.ts
@@ -1281,13 +1999,13 @@ function copyMessageText(message) {
 }
 
 // src/components/chat/chat-message-actions/chat-message-actions.tsx
-var import_react10 = require("react");
+var import_react14 = require("react");
 
 // src/components/chat/chat-context/chat-context.ts
-var import_react8 = require("react");
-var ChatContext = (0, import_react8.createContext)(null);
+var import_react12 = require("react");
+var ChatContext = (0, import_react12.createContext)(null);
 function useChatContext() {
-  const context = (0, import_react8.useContext)(ChatContext);
+  const context = (0, import_react12.useContext)(ChatContext);
   if (!context) {
     throw new Error("useChatContext must be used within a Chat.Root component");
   }
@@ -1295,7 +2013,7 @@ function useChatContext() {
 }
 
 // src/components/chat/hooks/use-copy-to-clipboard.ts
-var import_react9 = require("react");
+var import_react13 = require("react");
 
 // src/utils/clipboard.ts
 function copyToClipboard(text, options) {
@@ -1308,14 +2026,14 @@ function copyToClipboard(text, options) {
 // src/components/chat/hooks/use-copy-to-clipboard.ts
 var RESET_DELAY_MS = 2e3;
 function useCopyToClipboard() {
-  const [isCopied, setIsCopied] = (0, import_react9.useState)(false);
-  const timeoutRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const [isCopied, setIsCopied] = (0, import_react13.useState)(false);
+  const timeoutRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
   }, []);
-  const copy = (0, import_react9.useCallback)((text) => {
+  const copy = (0, import_react13.useCallback)((text) => {
     copyToClipboard(text, {
       onSuccess: () => {
         setIsCopied(true);
@@ -1355,24 +2073,24 @@ var AnimatedAction = import_styled_components5.default.div`
 `;
 
 // src/components/chat/chat-message-actions/chat-message-actions.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function ChatMessageActions({ className, messageId, content, role, isHelpful }) {
   const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
   const { isCopied, copy } = useCopyToClipboard();
-  const handleCopy = (0, import_react10.useCallback)(() => {
+  const handleCopy = (0, import_react14.useCallback)(() => {
     copy(content);
     onCopyMessage?.(messageId);
   }, [content, messageId, copy, onCopyMessage]);
-  const handleThumbUp = (0, import_react10.useCallback)(() => {
+  const handleThumbUp = (0, import_react14.useCallback)(() => {
     onThumbUpClick?.(messageId, isHelpful === true ? null : true);
   }, [messageId, isHelpful, onThumbUpClick]);
-  const handleThumbDown = (0, import_react10.useCallback)(() => {
+  const handleThumbDown = (0, import_react14.useCallback)(() => {
     onThumbDownClick?.(messageId, isHelpful === false ? null : false);
   }, [messageId, isHelpful, onThumbDownClick]);
   const isAssistant = role === MESSAGE_ROLE.ASSISTANT;
   const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ActionsContainer, { $role: role, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ActionsContainer, { $role: role, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       IconButton,
       {
         icon: isCopied ? IconCheck : IconCopy,
@@ -1380,7 +2098,7 @@ function ChatMessageActions({ className, messageId, content, role, isHelpful })
         "aria-label": isCopied ? "Copied" : "Copy message"
       }
     ),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       IconButton,
       {
         icon: IconThumbUp,
@@ -1389,7 +2107,7 @@ function ChatMessageActions({ className, messageId, content, role, isHelpful })
         "aria-label": "Good response"
       }
     ) }),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       IconButton,
       {
         icon: IconThumbDown,
@@ -1439,12 +2157,12 @@ var MessageBubble = import_styled_components6.default.div`
 `;
 
 // src/components/chat/chat-message/chat-message.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function ChatMessage({ message }) {
-  const clipboardText = (0, import_react11.useMemo)(() => copyMessageText(message), [message]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageRow, { $role: message.role, role: "article", "aria-label": `${message.role} message`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MessageContainer, { $role: message.role, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageBubble, { $role: message.role, "data-testid": "message-bubble", children: message.blocks.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Block, { block }, index)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const clipboardText = (0, import_react15.useMemo)(() => copyMessageText(message), [message]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageRow, { $role: message.role, role: "article", "aria-label": `${message.role} message`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(MessageContainer, { $role: message.role, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageBubble, { $role: message.role, "data-testid": "message-bubble", children: message.blocks.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Block, { block }, index)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       ChatMessageActions,
       {
         messageId: message.id,