@useatlas/react 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,19 +1,17 @@
-import { DarkModeContext, setTheme, useDarkMode, useConversations, AUTH_MODES, OKLCH_RE, applyBrandColor, useThemeMode, parseChatError } from './chunk-2WFDP7G5.js';
-export { AUTH_MODES, THEME_STORAGE_KEY, buildThemeInitScript, parseChatError, setTheme, useConversations } from './chunk-2WFDP7G5.js';
-import { detectCharts } from './chunk-44HBZYKP.js';
+import { DarkModeContext, setTheme, useDarkMode, useConversations, AUTH_MODES, OKLCH_RE, applyBrandColor, useThemeMode, parseChatError } from './chunk-FMSGREKS.js';
+export { AUTH_MODES, THEME_STORAGE_KEY, buildThemeInitScript, parseChatError, setTheme, useConversations } from './chunk-FMSGREKS.js';
+import { detectCharts, ErrorBoundary, Button, cn } from './chunk-35SCTKSW.js';
 import { useChat } from '@ai-sdk/react';
 import { getToolName, DefaultChatTransport, isToolUIPart } from 'ai';
 import * as React from 'react';
 import { createContext, lazy, memo, useContext, Component, useState, useMemo, Suspense, useEffect, useRef, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { FileDown, FileSpreadsheet, TableProperties, Star, Moon, Sun, Monitor, ArrowLeft, AlertTriangle, ServerCrash, Clock, ShieldAlert, WifiOff, XIcon, Columns3, Link2, Sparkles, Search, Eye, ArrowRight, Trash2 } from 'lucide-react';
 import { isActionToolResult, RESOLVED_STATUSES } from '@useatlas/types/action';
-import { FileDown, FileSpreadsheet, TableProperties, Star, Moon, Sun, Monitor, ArrowLeft, XIcon, Columns3, Link2, Sparkles, Search, Eye, ArrowRight, Trash2 } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { ScrollArea as ScrollArea$1, ToggleGroup as ToggleGroup$1, Slot, DropdownMenu as DropdownMenu$1, Dialog, Separator as Separator$1, AlertDialog as AlertDialog$1 } from 'radix-ui';
 import { cva } from 'class-variance-authority';
-import { Slot, ScrollArea as ScrollArea$1, ToggleGroup as ToggleGroup$1, DropdownMenu as DropdownMenu$1, Dialog, Separator as Separator$1, AlertDialog as AlertDialog$1 } from 'radix-ui';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 
 var AtlasUIContext = createContext(null);
 function useAtlasConfig() {
@@ -43,9 +41,30 @@ function ActionAuthProvider({
   );
   return /* @__PURE__ */ jsx(ActionAuthContext.Provider, { value, children });
 }
-function ErrorBanner({ error, authMode }) {
+function ErrorIcon({ clientCode }) {
+  switch (clientCode) {
+    case "offline":
+      return /* @__PURE__ */ jsx(WifiOff, { className: "size-4 shrink-0" });
+    case "api_unreachable":
+      return /* @__PURE__ */ jsx(ServerCrash, { className: "size-4 shrink-0" });
+    case "auth_failure":
+      return /* @__PURE__ */ jsx(ShieldAlert, { className: "size-4 shrink-0" });
+    case "rate_limited_http":
+      return /* @__PURE__ */ jsx(Clock, { className: "size-4 shrink-0" });
+    case "server_error":
+      return /* @__PURE__ */ jsx(ServerCrash, { className: "size-4 shrink-0" });
+    default:
+      return /* @__PURE__ */ jsx(AlertTriangle, { className: "size-4 shrink-0" });
+  }
+}
+function ErrorBanner({
+  error,
+  authMode,
+  onRetry
+}) {
   const info = useMemo(() => parseChatError(error, authMode), [error, authMode]);
   const [countdown, setCountdown] = useState(info.retryAfterSeconds ?? 0);
+  const [restoredOnline, setRestoredOnline] = useState(false);
   useEffect(() => {
     if (!info.retryAfterSeconds) return;
     setCountdown(info.retryAfterSeconds);
@@ -60,11 +79,74 @@ function ErrorBanner({ error, authMode }) {
     }, 1e3);
     return () => clearInterval(interval);
   }, [info.retryAfterSeconds]);
+  useEffect(() => {
+    if (info.retryAfterSeconds && countdown === 0 && onRetry) {
+      onRetry();
+    }
+  }, [countdown, info.retryAfterSeconds, onRetry]);
+  useEffect(() => {
+    if (info.clientCode !== "offline") return;
+    function handleOnline() {
+      setRestoredOnline(true);
+      onRetry?.();
+    }
+    window.addEventListener("online", handleOnline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+    };
+  }, [info.clientCode, onRetry]);
+  useEffect(() => {
+    try {
+      if (typeof window !== "undefined" && window.parent !== window) {
+        window.parent.postMessage(
+          {
+            type: "atlas:error",
+            error: {
+              code: info.clientCode ?? info.code ?? "unknown",
+              message: info.title,
+              detail: info.detail,
+              retryable: info.retryable
+            }
+          },
+          "*"
+        );
+      }
+    } catch {
+    }
+  }, [info.clientCode, info.code, info.title, info.detail, info.retryable]);
+  if (info.clientCode === "offline" && restoredOnline) {
+    return null;
+  }
   const detail = info.retryAfterSeconds && countdown > 0 ? `Try again in ${countdown} second${countdown !== 1 ? "s" : ""}.` : info.detail;
-  return /* @__PURE__ */ jsxs("div", { className: "mb-2 rounded-lg border border-red-300 bg-red-50 text-red-700 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-400 px-4 py-3 text-sm", children: [
-    /* @__PURE__ */ jsx("p", { className: "font-medium", children: info.title }),
-    detail && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs opacity-80", children: detail })
-  ] });
+  const showRetry = info.retryable && onRetry && countdown === 0 && info.clientCode !== "offline";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "mb-2 rounded-lg border border-red-300 bg-red-50 text-red-700 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-400 px-4 py-3 text-sm",
+      role: "alert",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(ErrorIcon, { clientCode: info.clientCode }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium", children: info.title }),
+          detail && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs opacity-80", children: detail }),
+          info.requestId && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs opacity-60", children: [
+            "Request ID: ",
+            info.requestId
+          ] }),
+          showRetry && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "link",
+              size: "sm",
+              onClick: onRetry,
+              className: "mt-2 h-auto p-0 text-xs font-medium text-red-700 dark:text-red-400",
+              children: "Try again"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
 }
 function ApiKeyBar({
   apiKey,
@@ -82,7 +164,7 @@ function ApiKeyBar({
             setDraft(apiKey);
             setEditing(true);
           },
-          className: "rounded border border-zinc-200 px-2 py-0.5 text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-800 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200",
+          className: "rounded border border-zinc-200 px-2 py-0.5 text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-800 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200",
           children: "Change"
         }
       )
@@ -107,7 +189,7 @@ function ApiKeyBar({
             value: draft,
             onChange: (e) => setDraft(e.target.value),
             placeholder: "Enter your API key...",
-            className: "flex-1 bg-transparent text-xs text-zinc-900 placeholder-zinc-400 outline-none dark:text-zinc-100 dark:placeholder-zinc-600",
+            className: "flex-1 bg-transparent text-xs text-zinc-900 placeholder-zinc-400 outline-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:text-zinc-100 dark:placeholder-zinc-600",
             autoFocus: true
           }
         ),
@@ -116,7 +198,7 @@ function ApiKeyBar({
           {
             type: "submit",
             disabled: !draft.trim(),
-            className: "rounded border border-zinc-200 px-2 py-0.5 text-xs text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-800 disabled:opacity-40 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200",
+            className: "rounded border border-zinc-200 px-2 py-0.5 text-xs text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-800 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-40 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200",
             children: "Save"
           }
         ),
@@ -125,7 +207,7 @@ function ApiKeyBar({
           {
             type: "button",
             onClick: () => setEditing(false),
-            className: "text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
+            className: "rounded text-xs text-zinc-400 hover:text-zinc-600 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:hover:text-zinc-300",
             children: "Cancel"
           }
         )
@@ -182,7 +264,7 @@ function ManagedAuthCard() {
           value: name,
           onChange: (e) => setName(e.target.value),
           placeholder: "Name (optional)",
-          className: "w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 outline-none focus:border-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600"
+          className: "w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 outline-none focus-visible:border-blue-500 focus-visible:ring-[3px] focus-visible:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600"
         }
       ),
       /* @__PURE__ */ jsx(
@@ -193,7 +275,7 @@ function ManagedAuthCard() {
           onChange: (e) => setEmail(e.target.value),
           placeholder: "Email",
           required: true,
-          className: "w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 outline-none focus:border-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600"
+          className: "w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 outline-none focus-visible:border-blue-500 focus-visible:ring-[3px] focus-visible:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600"
         }
       ),
       /* @__PURE__ */ jsx(
@@ -205,7 +287,7 @@ function ManagedAuthCard() {
           placeholder: "Password",
           required: true,
           minLength: 8,
-          className: "w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 outline-none focus:border-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600"
+          className: "w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 outline-none focus-visible:border-blue-500 focus-visible:ring-[3px] focus-visible:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600"
         }
       ),
       error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-600 dark:text-red-400", children: error }),
@@ -214,7 +296,7 @@ function ManagedAuthCard() {
         {
           type: "submit",
           disabled: loading,
-          className: "w-full rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-500 disabled:opacity-40",
+          className: "w-full rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-500/50 disabled:opacity-40",
           children: loading ? "..." : view === "login" ? "Sign in" : "Create account"
         }
       )
@@ -225,14 +307,14 @@ function ManagedAuthCard() {
       /* @__PURE__ */ jsx("button", { onClick: () => {
         setView("signup");
         setError("");
-      }, className: "text-blue-600 hover:underline dark:text-blue-400", children: "Create one" })
+      }, className: "rounded text-blue-600 hover:underline focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-500/50 dark:text-blue-400", children: "Create one" })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       "Already have an account?",
       " ",
       /* @__PURE__ */ jsx("button", { onClick: () => {
         setView("login");
         setError("");
-      }, className: "text-blue-600 hover:underline dark:text-blue-400", children: "Sign in" })
+      }, className: "rounded text-blue-600 hover:underline focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-500/50 dark:text-blue-400", children: "Sign in" })
     ] }) })
   ] }) });
 }
@@ -292,7 +374,7 @@ function downloadCSV(csv, filename = "atlas-results.csv") {
     a.download = filename;
     a.click();
   } catch (err) {
-    console.error("CSV download failed:", err);
+    console.error("CSV download failed:", err instanceof Error ? err.message : String(err));
     window.alert("CSV download failed");
   } finally {
     if (url) {
@@ -311,31 +393,31 @@ function coerceExcelCell(v) {
   return String(v);
 }
 async function downloadExcel(columns, rows, filename = "atlas-results.xlsx") {
-  let XLSX;
+  let ExcelJS;
   try {
-    XLSX = await import(
-      'xlsx'
+    ExcelJS = await import(
+      'exceljs'
       /* webpackIgnore: true */
     );
   } catch (err) {
-    console.error("Failed to load xlsx library:", err);
+    console.error("Failed to load exceljs library:", err instanceof Error ? err.message : String(err));
     window.alert("Excel export is unavailable. The spreadsheet library failed to load.");
     return;
   }
   let url = null;
   try {
-    const data = rows.map((row) => {
+    const wb = new ExcelJS.Workbook();
+    const ws = wb.addWorksheet("Results");
+    ws.columns = columns.map((col) => ({ header: col, key: col }));
+    for (const row of rows) {
       const obj = {};
       for (const col of columns) {
         obj[col] = coerceExcelCell(row[col]);
       }
-      return obj;
-    });
-    const ws = XLSX.utils.json_to_sheet(data, { header: columns });
-    const wb = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(wb, ws, "Results");
-    const wbOut = XLSX.write(wb, { bookType: "xlsx", type: "array" });
-    const blob = new Blob([wbOut], {
+      ws.addRow(obj);
+    }
+    const buffer = await wb.xlsx.writeBuffer();
+    const blob = new Blob([buffer], {
       type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
     });
     url = URL.createObjectURL(blob);
@@ -344,8 +426,8 @@ async function downloadExcel(columns, rows, filename = "atlas-results.xlsx") {
     a.download = filename;
     a.click();
   } catch (err) {
-    console.error("Excel download failed:", err);
-    const detail = err instanceof Error ? err.message : "Unknown error";
+    const detail = err instanceof Error ? err.message : String(err);
+    console.error("Excel download failed:", detail);
     window.alert(`Excel download failed: ${detail}
 
 You can try the CSV download as an alternative.`);
@@ -409,13 +491,19 @@ function LoadingCard({ label }) {
     label
   ] });
 }
-function DataTable({
+function DataTableInner({
   columns,
   rows,
   maxRows = 10
 }) {
   const [sortCol, setSortCol] = useState(null);
   const [sortDir, setSortDir] = useState("asc");
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-zinc-200 px-4 py-8 text-center dark:border-zinc-700", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: "Query returned no results" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-zinc-400 dark:text-zinc-500", children: "Try adjusting your query filters or criteria" })
+    ] });
+  }
   const hasMore = rows.length > maxRows;
   const cell = (row, colIdx) => {
     if (Array.isArray(row)) return row[colIdx];
@@ -458,8 +546,17 @@ function DataTable({
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-zinc-200 bg-zinc-100/80 dark:border-zinc-700 dark:bg-zinc-800/80", children: columns.map((col, i) => /* @__PURE__ */ jsxs(
         "th",
         {
+          tabIndex: 0,
+          role: "columnheader",
+          "aria-sort": sortCol === i ? sortDir === "asc" ? "ascending" : "descending" : "none",
           onClick: () => handleSort(i),
-          className: "group cursor-pointer select-none whitespace-nowrap px-3 py-2 text-left font-medium text-zinc-500 transition-colors hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200",
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleSort(i);
+            }
+          },
+          className: "group cursor-pointer select-none whitespace-nowrap px-3 py-2 text-left font-medium text-zinc-500 transition-colors hover:text-zinc-800 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:text-zinc-400 dark:hover:text-zinc-200",
           children: [
             col,
             sortCol === i ? sortDir === "asc" ? " \u25B2" : " \u25BC" : ""
@@ -485,6 +582,18 @@ function DataTable({
     ] })
   ] });
 }
+function DataTable(props) {
+  return /* @__PURE__ */ jsx(
+    ErrorBoundary,
+    {
+      fallbackRender: (_error, reset) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-400", children: [
+        /* @__PURE__ */ jsx("span", { children: "Unable to render results." }),
+        /* @__PURE__ */ jsx(Button, { variant: "link", onClick: reset, children: "Retry" })
+      ] }),
+      children: /* @__PURE__ */ jsx(DataTableInner, { ...props })
+    }
+  );
+}
 function CopyButton({ text, label = "Copy" }) {
   const [state, setState] = useState("idle");
   return /* @__PURE__ */ jsx(
@@ -539,7 +648,7 @@ function SQLBlock({ sql }) {
     /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsx(CopyButton, { text: sql, label: "Copy SQL" }) })
   ] });
 }
-var ResultChart = lazy(() => import('./result-chart-NFAJ4IQ5.js').then((m) => ({ default: m.ResultChart })));
+var ResultChart = lazy(() => import('./result-chart-C3EJTN5G.js').then((m) => ({ default: m.ResultChart })));
 var ChartFallback = /* @__PURE__ */ jsx("div", { className: "h-64 animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800" });
 function toStringRows(columns, rows) {
   return rows.map((row) => columns.map((col) => row[col] == null ? "" : String(row[col])));
@@ -710,7 +819,8 @@ function borderColor(status) {
     case "denied":
     case "failed":
       return "border-red-300 dark:border-red-900/50";
-    default:
+    case "rolled_back":
+    case "timed_out":
       return "border-zinc-200 dark:border-zinc-700";
   }
 }
@@ -732,7 +842,7 @@ function ActionApprovalCard({ part }) {
   const effectiveStatus = cardState.phase === "resolved" ? cardState.status : toolResult.status;
   const isPending = effectiveStatus === "pending_approval" && cardState.phase !== "submitting";
   const isSubmitting = cardState.phase === "submitting";
-  const resolvedResult = cardState.phase === "resolved" ? cardState.result : toolResult.result;
+  const resolvedResult = cardState.phase === "resolved" ? cardState.result : toolResult.status === "approved" || toolResult.status === "executed" || toolResult.status === "auto_approved" ? toolResult.result : void 0;
   async function callAction(endpoint, body) {
     if (!actionAuth) {
       console.warn("ActionApprovalCard: No ActionAuthProvider found. API calls will be sent without authentication.");
@@ -758,8 +868,10 @@ function ActionApprovalCard({ part }) {
       } catch {
         throw new Error("Action was already resolved, but the response could not be read. Refresh the page.");
       }
-      const status = typeof data2.status === "string" ? data2.status : "failed";
-      const label = status.replace(/_/g, " ");
+      if (typeof data2.status !== "string" || !RESOLVED_STATUSES.has(data2.status)) {
+        throw new Error("Action was already resolved with an unrecognized status. Refresh the page.");
+      }
+      const label = data2.status.replace(/_/g, " ");
       throw new Error(`This action was already ${label} by another user or policy.`);
     }
     if (!res.ok) {
@@ -772,8 +884,8 @@ function ActionApprovalCard({ part }) {
     } catch {
       throw new Error("Action succeeded, but the response could not be read. Refresh the page.");
     }
-    if (typeof data.status !== "string") {
-      throw new Error("Action succeeded, but the server returned an invalid status. Refresh the page.");
+    if (typeof data.status !== "string" || !RESOLVED_STATUSES.has(data.status)) {
+      throw new Error("Action succeeded, but the server returned an unrecognized status. Refresh the page.");
     }
     setCardState({ phase: "resolved", status: data.status, result: data.result });
   }
@@ -816,11 +928,11 @@ function ActionApprovalCard({ part }) {
         /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Result: " }),
         typeof resolvedResult === "string" ? resolvedResult : safeStringify(resolvedResult)
       ] }),
-      toolResult.error && /* @__PURE__ */ jsxs("div", { className: "mb-2 rounded bg-red-50 p-2 text-xs text-red-700 dark:bg-red-900/20 dark:text-red-400", children: [
+      toolResult.status === "failed" && /* @__PURE__ */ jsxs("div", { className: "mb-2 rounded bg-red-50 p-2 text-xs text-red-700 dark:bg-red-900/20 dark:text-red-400", children: [
         /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Error: " }),
         toolResult.error
       ] }),
-      toolResult.reason && RESOLVED_STATUSES.has(effectiveStatus) && /* @__PURE__ */ jsxs("div", { className: "mb-2 text-xs text-zinc-500 dark:text-zinc-400", children: [
+      toolResult.status === "denied" && RESOLVED_STATUSES.has(effectiveStatus) && /* @__PURE__ */ jsxs("div", { className: "mb-2 text-xs text-zinc-500 dark:text-zinc-400", children: [
         /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Reason: " }),
         toolResult.reason
       ] })
@@ -833,7 +945,7 @@ function ActionApprovalCard({ part }) {
           {
             onClick: handleApprove,
             disabled: isSubmitting,
-            className: "inline-flex items-center gap-1.5 rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-500 disabled:opacity-40",
+            className: "inline-flex items-center gap-1.5 rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-500/50 disabled:opacity-40",
             children: [
               isSubmitting && cardState.action === "approve" && /* @__PURE__ */ jsx("span", { className: "inline-block h-3 w-3 animate-spin rounded-full border-2 border-white/30 border-t-white" }),
               "Approve"
@@ -845,7 +957,7 @@ function ActionApprovalCard({ part }) {
           {
             onClick: () => setShowDenyInput(true),
             disabled: isSubmitting,
-            className: "rounded border border-zinc-300 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-400 hover:text-zinc-800 disabled:opacity-40 dark:border-zinc-600 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200",
+            className: "rounded border border-zinc-300 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-400 hover:text-zinc-800 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-40 dark:border-zinc-600 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200",
             children: "Deny"
           }
         ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
@@ -855,7 +967,7 @@ function ActionApprovalCard({ part }) {
               value: denyReason,
               onChange: (e) => setDenyReason(e.target.value),
               placeholder: "Reason (optional)",
-              className: "flex-1 rounded border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-900 placeholder-zinc-400 outline-none focus:border-red-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600",
+              className: "flex-1 rounded border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-900 placeholder-zinc-400 outline-none focus-visible:border-red-400 focus-visible:ring-[3px] focus-visible:ring-red-400/30 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600",
               disabled: isSubmitting
             }
           ),
@@ -864,7 +976,7 @@ function ActionApprovalCard({ part }) {
             {
               onClick: handleDeny,
               disabled: isSubmitting,
-              className: "inline-flex items-center gap-1.5 rounded bg-red-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-500 disabled:opacity-40",
+              className: "inline-flex items-center gap-1.5 rounded bg-red-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-red-500/50 disabled:opacity-40",
               children: [
                 isSubmitting && cardState.action === "deny" && /* @__PURE__ */ jsx("span", { className: "inline-block h-3 w-3 animate-spin rounded-full border-2 border-white/30 border-t-white" }),
                 "Confirm Deny"
@@ -879,7 +991,7 @@ function ActionApprovalCard({ part }) {
                 setDenyReason("");
               },
               disabled: isSubmitting,
-              className: "text-xs text-zinc-400 hover:text-zinc-600 disabled:opacity-40 dark:hover:text-zinc-300",
+              className: "rounded text-xs text-zinc-400 hover:text-zinc-600 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-40 dark:hover:text-zinc-300",
               children: "Cancel"
             }
           )
@@ -888,7 +1000,7 @@ function ActionApprovalCard({ part }) {
     ] })
   ] });
 }
-var ResultChart2 = lazy(() => import('./result-chart-NFAJ4IQ5.js').then((m) => ({ default: m.ResultChart })));
+var ResultChart2 = lazy(() => import('./result-chart-C3EJTN5G.js').then((m) => ({ default: m.ResultChart })));
 var ALLOWED_IMAGE_MIME = /* @__PURE__ */ new Set(["image/png", "image/jpeg"]);
 var PythonErrorBoundary = class extends Component {
   constructor(props) {
@@ -1172,63 +1284,12 @@ var STARTER_PROMPTS = [
   "What is the headcount breakdown by department?",
   "What is total MRR by plan type?"
 ];
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot.Root : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
 function FollowUpChips({
   suggestions,
   onSelect
 }) {
   if (suggestions.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 pt-1", children: suggestions.map((s, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 pt-1", role: "group", "aria-label": "Suggested follow-up questions", children: suggestions.map((s, i) => /* @__PURE__ */ jsx(
     Button,
     {
       variant: "outline",
@@ -1364,7 +1425,7 @@ function DeleteConfirmation({
       "button",
       {
         onClick: onCancel,
-        className: "rounded px-2 py-0.5 text-zinc-500 transition-colors hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200",
+        className: "rounded px-2 py-0.5 text-zinc-500 transition-colors hover:text-zinc-800 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:text-zinc-400 dark:hover:text-zinc-200",
         children: "Cancel"
       }
     ),
@@ -1372,7 +1433,7 @@ function DeleteConfirmation({
       "button",
       {
         onClick: onConfirm,
-        className: "rounded bg-red-600 px-2 py-0.5 text-white transition-colors hover:bg-red-500",
+        className: "rounded bg-red-600 px-2 py-0.5 text-white transition-colors hover:bg-red-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-red-500/50 ",
         children: "Delete"
       }
     )
@@ -1402,6 +1463,7 @@ function ConversationItem({
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [starPending, setStarPending] = useState(false);
+  const [error, setError] = useState(null);
   if (confirmDelete) {
     return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-red-200 bg-red-50/50 dark:border-red-900/30 dark:bg-red-950/10", children: /* @__PURE__ */ jsx(
       DeleteConfirmation,
@@ -1410,12 +1472,11 @@ function ConversationItem({
         onConfirm: async () => {
           setDeleting(true);
           try {
-            const success = await onDelete();
-            if (success) {
-              setConfirmDelete(false);
-            }
-          } catch (err) {
-            console.warn("Failed to delete conversation:", err);
+            await onDelete();
+            setConfirmDelete(false);
+          } catch {
+            setError("Failed to delete");
+            setTimeout(() => setError(null), 3e3);
           } finally {
             setDeleting(false);
           }
@@ -1435,11 +1496,11 @@ function ConversationItem({
           onSelect();
         }
       },
-      className: `group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2.5 text-left text-sm transition-colors ${isActive ? "bg-blue-50 text-blue-700 dark:bg-blue-600/10 dark:text-blue-400" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"}`,
+      className: `group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 ${isActive ? "bg-blue-50 text-blue-700 dark:bg-blue-600/10 dark:text-blue-400" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"}`,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: conversation.title || "New conversation" }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-400 dark:text-zinc-500", children: relativeTime(conversation.updatedAt) })
+          error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500 dark:text-red-400", children: error }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-400 dark:text-zinc-500", children: relativeTime(conversation.updatedAt) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
           /* @__PURE__ */ jsx(
@@ -1453,8 +1514,9 @@ function ConversationItem({
                 setStarPending(true);
                 try {
                   await onStar(!conversation.starred);
-                } catch (err) {
-                  console.warn("Failed to update star:", err);
+                } catch {
+                  setError("Failed to update");
+                  setTimeout(() => setError(null), 3e3);
                 } finally {
                   setStarPending(false);
                 }
@@ -1495,7 +1557,7 @@ function ConversationList({
   emptyMessage
 }) {
   if (conversations.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-xs text-zinc-400 dark:text-zinc-500", children: emptyMessage ?? "No conversations yet" });
+    return /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-xs text-zinc-500 dark:text-zinc-400", children: emptyMessage ?? "No conversations yet" });
   }
   function renderItems(items) {
     return items.map((c) => /* @__PURE__ */ jsx(
@@ -1536,6 +1598,14 @@ function ConversationSidebar({
   onMobileClose
 }) {
   const [filter, setFilter] = useState("all");
+  useEffect(() => {
+    if (!mobileOpen) return;
+    function handleKeyDown(e) {
+      if (e.key === "Escape") onMobileClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [mobileOpen, onMobileClose]);
   const starredConversations = conversations.filter((c) => c.starred);
   const filteredConversations = filter === "saved" ? starredConversations : conversations;
   const sidebar = /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col border-r border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950", children: [
@@ -1545,7 +1615,7 @@ function ConversationSidebar({
         "button",
         {
           onClick: onNewChat,
-          className: "rounded-lg border border-zinc-200 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-400 hover:text-zinc-900 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200",
+          className: "rounded-lg border border-zinc-200 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-400 hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200",
           children: "+ New"
         }
       )
@@ -1897,6 +1967,19 @@ function SheetTitle({
     }
   );
 }
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
 function ScrollArea({
   className,
   children,
@@ -2348,10 +2431,13 @@ function SchemaExplorer({
     onOpenChange(false);
   }
   return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "flex w-full flex-col p-0 sm:max-w-xl", children: [
-    /* @__PURE__ */ jsx(SheetHeader, { className: "px-4 pt-4", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2 text-base", children: [
-      /* @__PURE__ */ jsx(TableProperties, { className: "size-4" }),
-      "Schema Explorer"
-    ] }) }),
+    /* @__PURE__ */ jsxs(SheetHeader, { className: "px-4 pt-4", children: [
+      /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2 text-base", children: [
+        /* @__PURE__ */ jsx(TableProperties, { className: "size-4" }),
+        "Schema Explorer"
+      ] }),
+      /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Browse tables, columns, joins, and query patterns from the semantic layer" })
+    ] }),
     /* @__PURE__ */ jsx(Separator, { className: "mt-3" }),
     /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden pt-3", children: loading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-400", children: "Loading schema..." }) }) : error ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-4", children: /* @__PURE__ */ jsx("p", { className: "text-center text-xs text-red-500", children: error }) }) : selectedName ? detailError ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 px-4", children: [
       /* @__PURE__ */ jsx("p", { className: "text-center text-xs text-red-500", children: detailError }),
@@ -2519,7 +2605,9 @@ function AtlasChat(props) {
     sidebar = false,
     schemaExplorer: schemaExplorerEnabled = false,
     authClient = noopAuthClient,
-    toolRenderers
+    toolRenderers,
+    chatEndpoint = "/api/v1/chat",
+    conversationsEndpoint = "/api/v1/conversations"
   } = props;
   useEffect(() => {
     setTheme(propTheme);
@@ -2530,7 +2618,9 @@ function AtlasChat(props) {
       propApiKey,
       sidebar,
       schemaExplorerEnabled,
-      toolRenderers
+      toolRenderers,
+      chatEndpoint,
+      conversationsEndpoint
     }
   ) });
 }
@@ -2538,7 +2628,9 @@ function AtlasChatInner({
   propApiKey,
   sidebar,
   schemaExplorerEnabled,
-  toolRenderers
+  toolRenderers,
+  chatEndpoint,
+  conversationsEndpoint
 }) {
   const { apiUrl, isCrossOrigin, authClient } = useAtlasConfig();
   const dark = useDarkMode();
@@ -2572,7 +2664,8 @@ function AtlasChatInner({
     apiUrl,
     enabled: sidebar,
     getHeaders,
-    getCredentials
+    getCredentials,
+    conversationsEndpoint
   });
   const refreshConvosRef = useRef(convos.refresh);
   refreshConvosRef.current = convos.refresh;
@@ -2664,7 +2757,7 @@ function AtlasChatInner({
       headers["Authorization"] = `Bearer ${apiKey}`;
     }
     return new DefaultChatTransport({
-      api: `${apiUrl}/api/chat`,
+      api: `${apiUrl}${chatEndpoint}`,
       headers,
       credentials: isCrossOrigin ? "include" : void 0,
       body: () => conversationIdRef.current ? { conversationId: conversationIdRef.current } : {},
@@ -2682,7 +2775,7 @@ function AtlasChatInner({
         return response;
       })
     });
-  }, [apiKey, apiUrl, isCrossOrigin]);
+  }, [apiKey, apiUrl, isCrossOrigin, chatEndpoint]);
   const { messages, setMessages, sendMessage, status, error } = useChat({ transport });
   const isLoading = status === "streaming" || status === "submitted";
   useEffect(() => {
@@ -2707,17 +2800,12 @@ function AtlasChatInner({
     setLoadingConversation(true);
     try {
       const uiMessages = await convos.loadConversation(id);
-      if (uiMessages) {
-        setMessages(uiMessages);
-        setConversationId(id);
-        convos.setSelectedId(id);
-        setMobileMenuOpen(false);
-      } else {
-        setHealthWarning("Could not load conversation. It may have been deleted.");
-        setTimeout(() => setHealthWarning(""), 5e3);
-      }
+      setMessages(uiMessages);
+      setConversationId(id);
+      convos.setSelectedId(id);
+      setMobileMenuOpen(false);
     } catch (err) {
-      console.warn("Failed to load conversation:", err);
+      console.warn("Failed to load conversation:", err instanceof Error ? err.message : String(err));
       setHealthWarning("Failed to load conversation. Please try again.");
       setTimeout(() => setHealthWarning(""), 5e3);
     } finally {
@@ -2751,14 +2839,16 @@ function AtlasChatInner({
           onMobileClose: () => setMobileMenuOpen(false)
         }
       ),
-      /* @__PURE__ */ jsx("main", { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-4xl flex-1 flex-col overflow-hidden p-4", children: [
+      /* @__PURE__ */ jsx("main", { id: "main", tabIndex: -1, className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-4xl flex-1 flex-col overflow-hidden p-4", children: [
         /* @__PURE__ */ jsx("header", { className: "mb-4 flex-none border-b border-zinc-100 pb-3 dark:border-zinc-800", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
             showSidebar && /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                variant: "ghost",
+                size: "icon",
                 onClick: () => setMobileMenuOpen(true),
-                className: "flex size-11 items-center justify-center rounded text-zinc-400 hover:text-zinc-700 md:hidden dark:hover:text-zinc-200",
+                className: "size-11 text-zinc-400 hover:text-zinc-700 md:hidden dark:hover:text-zinc-200",
                 "aria-label": "Open conversation history",
                 children: MenuIcon
               }
@@ -2787,8 +2877,10 @@ function AtlasChatInner({
             isSignedIn && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { className: "hidden text-xs text-zinc-500 sm:inline dark:text-zinc-400", children: managedSession.data?.user?.email }),
               /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
+                  variant: "outline",
+                  size: "sm",
                   onClick: () => {
                     authClient.signOut().catch((err) => {
                       console.error("Sign out failed:", err);
@@ -2796,75 +2888,101 @@ function AtlasChatInner({
                       setTimeout(() => setHealthWarning(""), 5e3);
                     });
                   },
-                  className: "rounded border border-zinc-200 px-3 py-2 text-xs text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-800 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200",
+                  className: "text-xs text-zinc-500 dark:text-zinc-400",
                   children: "Sign out"
                 }
               )
             ] })
           ] })
         ] }) }),
-        healthWarning && /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-zinc-400 dark:text-zinc-500", children: healthWarning }),
+        (healthWarning || convos.fetchError) && /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-zinc-400 dark:text-zinc-500", children: healthWarning || convos.fetchError }),
         isManaged && !isSignedIn ? /* @__PURE__ */ jsx(ManagedAuthCard, {}) : /* @__PURE__ */ jsxs(ActionAuthProvider, { getHeaders, getCredentials, children: [
           authMode === "simple-key" && !propApiKey && /* @__PURE__ */ jsx("div", { className: "mb-3 flex-none", children: /* @__PURE__ */ jsx(ApiKeyBar, { apiKey, onSave: handleSaveApiKey }) }),
-          /* @__PURE__ */ jsx(ScrollArea, { viewportRef: scrollRef, className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxs("div", { "data-atlas-messages": true, className: "space-y-4 pb-4 pr-3", children: [
-            messages.length === 0 && !error && /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-6", children: [
-              /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-zinc-500 dark:text-zinc-400", children: "What would you like to know?" }),
-                /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-zinc-400 dark:text-zinc-600", children: "Ask a question about your data to get started" })
+          /* @__PURE__ */ jsx(ScrollArea, { viewportRef: scrollRef, className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
+            ErrorBoundary,
+            {
+              fallbackRender: (_error, reset) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-6 text-sm text-red-600 dark:text-red-400", children: [
+                /* @__PURE__ */ jsx("p", { children: "Failed to render messages." }),
+                /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", onClick: reset, className: "text-xs", children: "Try again" })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "grid w-full max-w-lg grid-cols-1 gap-2 sm:grid-cols-2", children: STARTER_PROMPTS.map((prompt) => /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => handleSend(prompt),
-                  className: "rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2.5 text-left text-sm text-zinc-500 transition-colors hover:border-zinc-400 hover:bg-zinc-100 hover:text-zinc-800 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400 dark:hover:border-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-200",
-                  children: prompt
-                },
-                prompt
-              )) })
-            ] }),
-            messages.map((m, msgIndex) => {
-              if (m.role === "user") {
-                return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx("div", { className: "max-w-[85%] rounded-xl bg-blue-600 px-4 py-3 text-sm text-white", children: m.parts?.map(
-                  (part, i) => part.type === "text" ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: part.text }, i) : null
-                ) }) }, m.id);
-              }
-              const isLastAssistant = m.role === "assistant" && msgIndex === messages.length - 1;
-              const lastTextWithSuggestions = m.parts?.filter((p) => p.type === "text" && !!p.text.trim()).findLast((p) => parseSuggestions(p.text).suggestions.length > 0);
-              const suggestions = lastTextWithSuggestions ? parseSuggestions(lastTextWithSuggestions.text).suggestions : [];
-              return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                m.parts?.map((part, i) => {
-                  if (part.type === "text" && part.text.trim()) {
-                    const displayText = parseSuggestions(part.text).text;
-                    if (!displayText.trim()) return null;
-                    return /* @__PURE__ */ jsx("div", { className: "max-w-[90%]", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl bg-zinc-100 px-4 py-3 text-sm text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200", children: /* @__PURE__ */ jsx(Markdown, { content: displayText }) }) }, i);
-                  }
-                  if (isToolUIPart(part)) {
-                    return /* @__PURE__ */ jsx("div", { className: "max-w-[95%]", children: /* @__PURE__ */ jsx(ToolPart, { part, toolRenderers }) }, i);
+              children: /* @__PURE__ */ jsxs("div", { "data-atlas-messages": true, className: "space-y-4 pb-4 pr-3", children: [
+                messages.length === 0 && !error && /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-6", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-zinc-500 dark:text-zinc-400", children: "What would you like to know?" }),
+                    /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-500", children: "Ask a question about your data to get started" })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "grid w-full max-w-lg grid-cols-1 gap-2 sm:grid-cols-2", children: STARTER_PROMPTS.map((prompt) => /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      onClick: () => handleSend(prompt),
+                      className: "h-auto whitespace-normal justify-start rounded-lg bg-zinc-50 px-3 py-2.5 text-left text-sm text-zinc-500 hover:text-zinc-800 dark:bg-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200",
+                      children: prompt
+                    },
+                    prompt
+                  )) })
+                ] }),
+                messages.map((m, msgIndex) => {
+                  if (m.role === "user") {
+                    return /* @__PURE__ */ jsx("div", { className: "flex justify-end", role: "article", "aria-label": "Message from you", children: /* @__PURE__ */ jsx("div", { className: "max-w-[85%] rounded-xl bg-blue-600 px-4 py-3 text-sm text-white", children: m.parts?.map(
+                      (part, i) => part.type === "text" ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: part.text }, i) : null
+                    ) }) }, m.id);
                   }
-                  return null;
+                  const isLastAssistant = m.role === "assistant" && msgIndex === messages.length - 1;
+                  const hasVisibleParts = m.parts?.some(
+                    (p) => p.type === "text" && p.text.trim() || isToolUIPart(p)
+                  );
+                  if (!hasVisibleParts && !isLastAssistant) return null;
+                  const lastTextWithSuggestions = m.parts?.filter((p) => p.type === "text" && !!p.text.trim()).findLast((p) => parseSuggestions(p.text).suggestions.length > 0);
+                  const suggestions = lastTextWithSuggestions ? parseSuggestions(lastTextWithSuggestions.text).suggestions : [];
+                  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", role: "article", "aria-label": "Message from Atlas", children: [
+                    m.parts?.map((part, i) => {
+                      if (part.type === "text" && part.text.trim()) {
+                        const displayText = parseSuggestions(part.text).text;
+                        if (!displayText.trim()) return null;
+                        return /* @__PURE__ */ jsx("div", { className: "max-w-[90%]", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl bg-zinc-100 px-4 py-3 text-sm text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200", children: /* @__PURE__ */ jsx(Markdown, { content: displayText }) }) }, i);
+                      }
+                      if (isToolUIPart(part)) {
+                        return /* @__PURE__ */ jsx("div", { className: "max-w-[95%]", children: /* @__PURE__ */ jsx(ToolPart, { part, toolRenderers }) }, i);
+                      }
+                      return null;
+                    }),
+                    isLastAssistant && !hasVisibleParts && !isLoading && error && /* @__PURE__ */ jsx("div", { className: "max-w-[90%]", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-950/30 dark:text-red-400", children: error.message ? `Something went wrong generating a response: ${error.message}. Try sending your message again.` : "Something went wrong generating a response. Try sending your message again." }) }),
+                    isLastAssistant && !isLoading && hasVisibleParts && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        FollowUpChips,
+                        {
+                          suggestions,
+                          onSelect: handleSend
+                        }
+                      ),
+                      conversationId && sidebar && convos.available && /* @__PURE__ */ jsx(
+                        SaveButton,
+                        {
+                          conversationId,
+                          conversations: convos.conversations,
+                          onStar: convos.starConversation
+                        }
+                      )
+                    ] })
+                  ] }, m.id);
                 }),
-                isLastAssistant && !isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    FollowUpChips,
-                    {
-                      suggestions,
-                      onSelect: handleSend
-                    }
-                  ),
-                  conversationId && sidebar && convos.available && /* @__PURE__ */ jsx(
-                    SaveButton,
-                    {
-                      conversationId,
-                      conversations: convos.conversations,
-                      onStar: convos.starConversation
-                    }
-                  )
-                ] })
-              ] }, m.id);
-            }),
-            isLoading && messages.length > 0 && /* @__PURE__ */ jsx(TypingIndicator, {})
-          ] }) }),
-          error && /* @__PURE__ */ jsx(ErrorBanner, { error, authMode }),
+                isLoading && messages.length > 0 && /* @__PURE__ */ jsx(TypingIndicator, {})
+              ] })
+            }
+          ) }),
+          error && /* @__PURE__ */ jsx(
+            ErrorBanner,
+            {
+              error,
+              authMode: authMode ?? "none",
+              onRetry: messages.some((m) => m.role === "user") ? () => {
+                const lastUserMsg = messages.toReversed().find((m) => m.role === "user");
+                const text = lastUserMsg?.parts?.filter((p) => p.type === "text").map((p) => p.text).join(" ");
+                if (text) handleSend(text);
+              } : void 0
+            }
+          ),
           /* @__PURE__ */ jsxs(
             "form",
             {
@@ -2876,22 +2994,24 @@ function AtlasChatInner({
               className: "flex flex-none gap-2 border-t border-zinc-100 pt-4 dark:border-zinc-800",
               children: [
                 /* @__PURE__ */ jsx(
-                  "input",
+                  Input,
                   {
                     "data-atlas-input": true,
                     value: input,
                     onChange: (e) => setInput(e.target.value),
                     placeholder: "Ask a question about your data...",
-                    className: "min-w-0 flex-1 rounded-lg border border-zinc-200 bg-zinc-50 px-4 py-3 text-base text-zinc-900 placeholder-zinc-400 outline-none focus:border-blue-500 sm:text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder-zinc-600",
-                    disabled: isLoading || healthFailed
+                    className: "min-w-0 flex-1 py-3 text-base sm:text-sm",
+                    disabled: isLoading || healthFailed,
+                    "aria-label": "Chat message"
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  "button",
+                  Button,
                   {
                     type: "submit",
-                    disabled: isLoading || healthFailed || !input.trim(),
-                    className: "shrink-0 rounded-lg bg-blue-600 px-5 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-500 disabled:opacity-40",
+                    disabled: isLoading || healthFailed,
+                    "aria-disabled": !(isLoading || healthFailed) && !input.trim() ? true : void 0,
+                    className: "shrink-0 px-5",
                     children: "Ask"
                   }
                 )