@useatlas/react 0.0.1 → 0.0.2

package/src/components/atlas-chat.tsx

@@ -27,8 +27,10 @@ import {
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
 import { Button } from "./ui/button";
+import { Input } from "./ui/input";
 import { ScrollArea } from "./ui/scroll-area";
 import { parseSuggestions } from "../lib/helpers";
+import { ErrorBoundary } from "./error-boundary";
 
 const API_KEY_STORAGE_KEY = "atlas-api-key";
 
@@ -47,6 +49,10 @@ export interface AtlasChatProps {
   authClient?: AtlasAuthClient;
   /** Custom renderers for tool results. Keys are tool names (e.g. "executeSQL", "explore", "executePython"). */
   toolRenderers?: ToolRenderers;
+  /** Custom chat API endpoint path. Defaults to "/api/v1/chat". */
+  chatEndpoint?: string;
+  /** Custom conversations API endpoint path. Defaults to "/api/v1/conversations". */
+  conversationsEndpoint?: string;
 }
 
 /** No-op auth client for non-managed auth modes. */
@@ -112,7 +118,7 @@ function SaveButton({
 }: {
   conversationId: string;
   conversations: { id: string; starred: boolean }[];
-  onStar: (id: string, starred: boolean) => Promise<boolean>;
+  onStar: (id: string, starred: boolean) => Promise<void>;
 }) {
   const isStarred = conversations.find((c) => c.id === conversationId)?.starred ?? false;
   const [pending, setPending] = useState(false);
@@ -162,6 +168,8 @@ export function AtlasChat(props: AtlasChatProps) {
     schemaExplorer: schemaExplorerEnabled = false,
     authClient = noopAuthClient,
     toolRenderers,
+    chatEndpoint = "/api/v1/chat",
+    conversationsEndpoint = "/api/v1/conversations",
   } = props;
 
   // Apply theme from props on mount and when it changes
@@ -176,6 +184,8 @@ export function AtlasChat(props: AtlasChatProps) {
         sidebar={sidebar}
         schemaExplorerEnabled={schemaExplorerEnabled}
         toolRenderers={toolRenderers}
+        chatEndpoint={chatEndpoint}
+        conversationsEndpoint={conversationsEndpoint}
       />
     </AtlasUIProvider>
   );
@@ -186,11 +196,15 @@ function AtlasChatInner({
   sidebar,
   schemaExplorerEnabled,
   toolRenderers,
+  chatEndpoint,
+  conversationsEndpoint,
 }: {
   propApiKey?: string;
   sidebar: boolean;
   schemaExplorerEnabled: boolean;
   toolRenderers?: ToolRenderers;
+  chatEndpoint: string;
+  conversationsEndpoint: string;
 }) {
   const { apiUrl, isCrossOrigin, authClient } = useAtlasConfig();
   const dark = useDarkMode();
@@ -231,6 +245,7 @@ function AtlasChatInner({
     enabled: sidebar,
     getHeaders,
     getCredentials,
+    conversationsEndpoint,
   });
 
   const refreshConvosRef = useRef(convos.refresh);
@@ -334,7 +349,7 @@ function AtlasChatInner({
       headers["Authorization"] = `Bearer ${apiKey}`;
     }
     return new DefaultChatTransport({
-      api: `${apiUrl}/api/chat`,
+      api: `${apiUrl}${chatEndpoint}`,
       headers,
       credentials: isCrossOrigin ? "include" : undefined,
       body: () => (conversationIdRef.current ? { conversationId: conversationIdRef.current } : {}),
@@ -352,7 +367,7 @@ function AtlasChatInner({
         return response;
       }) as typeof fetch,
     });
-  }, [apiKey, apiUrl, isCrossOrigin]);
+  }, [apiKey, apiUrl, isCrossOrigin, chatEndpoint]);
 
   const { messages, setMessages, sendMessage, status, error } = useChat({ transport });
 
@@ -382,17 +397,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(""), 5000);
-      }
-    } catch (err) {
-      console.warn("Failed to load conversation:", err);
+      setMessages(uiMessages);
+      setConversationId(id);
+      convos.setSelectedId(id);
+      setMobileMenuOpen(false);
+    } catch (err: unknown) {
+      console.warn("Failed to load conversation:", err instanceof Error ? err.message : String(err));
       setHealthWarning("Failed to load conversation. Please try again.");
       setTimeout(() => setHealthWarning(""), 5000);
     } finally {
@@ -435,19 +445,21 @@ function AtlasChatInner({
           />
         )}
 
-        <main className="flex flex-1 flex-col overflow-hidden">
+        <main id="main" tabIndex={-1} className="flex flex-1 flex-col overflow-hidden">
           <div className="mx-auto flex w-full max-w-4xl flex-1 flex-col overflow-hidden p-4">
             <header className="mb-4 flex-none border-b border-zinc-100 pb-3 dark:border-zinc-800">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
                   {showSidebar && (
-                    <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"
                     >
                       {MenuIcon}
-                    </button>
+                    </Button>
                   )}
                   <div className="flex items-center gap-2.5">
                     {AtlasLogo}
@@ -475,7 +487,9 @@ function AtlasChatInner({
                       <span className="hidden text-xs text-zinc-500 sm:inline dark:text-zinc-400">
                         {managedSession.data?.user?.email}
                       </span>
-                      <button
+                      <Button
+                        variant="outline"
+                        size="sm"
                         onClick={() => {
                           authClient.signOut().catch((err: unknown) => {
                             console.error("Sign out failed:", err);
@@ -483,18 +497,18 @@ function AtlasChatInner({
                             setTimeout(() => setHealthWarning(""), 5000);
                           });
                         }}
-                        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"
                       >
                         Sign out
-                      </button>
+                      </Button>
                     </>
                   )}
                 </div>
               </div>
             </header>
 
-            {healthWarning && (
-              <p className="mb-2 text-xs text-zinc-400 dark:text-zinc-500">{healthWarning}</p>
+            {(healthWarning || convos.fetchError) && (
+              <p className="mb-2 text-xs text-zinc-400 dark:text-zinc-500">{healthWarning || convos.fetchError}</p>
             )}
 
             {isManaged && !isSignedIn ? (
@@ -508,6 +522,14 @@ function AtlasChatInner({
                 )}
 
                 <ScrollArea viewportRef={scrollRef} className="min-h-0 flex-1">
+                <ErrorBoundary
+                  fallbackRender={(_error, reset) => (
+                    <div className="flex flex-col items-center justify-center gap-2 p-6 text-sm text-red-600 dark:text-red-400">
+                      <p>Failed to render messages.</p>
+                      <Button variant="link" size="sm" onClick={reset} className="text-xs">Try again</Button>
+                    </div>
+                  )}
+                >
                 <div data-atlas-messages className="space-y-4 pb-4 pr-3">
                   {messages.length === 0 && !error && (
                     <div className="flex h-full flex-col items-center justify-center gap-6">
@@ -515,19 +537,20 @@ function AtlasChatInner({
                         <p className="text-lg font-medium text-zinc-500 dark:text-zinc-400">
                           What would you like to know?
                         </p>
-                        <p className="mt-1 text-sm text-zinc-400 dark:text-zinc-600">
+                        <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-500">
                           Ask a question about your data to get started
                         </p>
                       </div>
                       <div className="grid w-full max-w-lg grid-cols-1 gap-2 sm:grid-cols-2">
                         {STARTER_PROMPTS.map((prompt) => (
-                          <button
+                          <Button
                             key={prompt}
+                            variant="outline"
                             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"
+                            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"
                           >
                             {prompt}
-                          </button>
+                          </Button>
                         ))}
                       </div>
                     </div>
@@ -536,7 +559,7 @@ function AtlasChatInner({
                   {messages.map((m, msgIndex) => {
                     if (m.role === "user") {
                       return (
-                        <div key={m.id} className="flex justify-end">
+                        <div key={m.id} className="flex justify-end" role="article" aria-label="Message from you">
                           <div className="max-w-[85%] rounded-xl bg-blue-600 px-4 py-3 text-sm text-white">
                             {m.parts?.map((part, i) =>
                               part.type === "text" ? (
@@ -554,6 +577,13 @@ function AtlasChatInner({
                       m.role === "assistant" &&
                       msgIndex === messages.length - 1;
 
+                    // Skip rendering assistant messages with no visible content
+                    // (happens when stream errors before producing any text)
+                    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 is typeof p & { type: "text"; text: string } => p.type === "text" && !!p.text.trim())
                       .findLast((p) => parseSuggestions(p.text).suggestions.length > 0);
@@ -562,7 +592,7 @@ function AtlasChatInner({
                       : [];
 
                     return (
-                      <div key={m.id} className="space-y-2">
+                      <div key={m.id} className="space-y-2" role="article" aria-label="Message from Atlas">
                         {m.parts?.map((part, i) => {
                           if (part.type === "text" && part.text.trim()) {
                             const displayText = parseSuggestions(part.text).text;
@@ -584,7 +614,17 @@ function AtlasChatInner({
                           }
                           return null;
                         })}
-                        {isLastAssistant && !isLoading && (
+                        {/* Show inline error when the last assistant message is empty (stream failed before producing content) */}
+                        {isLastAssistant && !hasVisibleParts && !isLoading && error && (
+                          <div className="max-w-[90%]">
+                            <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">
+                              {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."}
+                            </div>
+                          </div>
+                        )}
+                        {isLastAssistant && !isLoading && hasVisibleParts && (
                           <>
                             <FollowUpChips
                               suggestions={suggestions}
@@ -605,9 +645,27 @@ function AtlasChatInner({
 
                   {isLoading && messages.length > 0 && <TypingIndicator />}
                 </div>
+                </ErrorBoundary>
                 </ScrollArea>
 
-                {error && <ErrorBanner error={error} authMode={authMode} />}
+                {error && (
+                  <ErrorBanner
+                    error={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 is { type: "text"; text: string } => p.type === "text")
+                              .map((p) => p.text)
+                              .join(" ");
+                            if (text) handleSend(text);
+                          }
+                        : undefined
+                    }
+                  />
+                )}
 
                 <form
                   data-atlas-form
@@ -617,21 +675,23 @@ function AtlasChatInner({
                   }}
                   className="flex flex-none gap-2 border-t border-zinc-100 pt-4 dark:border-zinc-800"
                 >
-                  <input
+                  <Input
                     data-atlas-input
                     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"
+                    className="min-w-0 flex-1 py-3 text-base sm:text-sm"
                     disabled={isLoading || healthFailed}
+                    aria-label="Chat message"
                   />
-                  <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 : undefined}
+                    className="shrink-0 px-5"
                   >
                     Ask
-                  </button>
+                  </Button>
                 </form>
               </ActionAuthProvider>
             )}

package/src/components/chart/result-chart.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Component, type ReactNode, type ErrorInfo, useMemo, useId, useState } from "react";
+import { useMemo, useId, useState } from "react";
+import { ErrorBoundary } from "../error-boundary";
 import {
   ResponsiveContainer,
   BarChart,
@@ -32,39 +33,6 @@ import {
   type ChartDetectionResult,
 } from "./chart-detection";
 
-/* ------------------------------------------------------------------ */
-/*  Error boundary                                                       */
-/* ------------------------------------------------------------------ */
-
-class ChartErrorBoundary extends Component<
-  { children: ReactNode; fallback?: ReactNode },
-  { hasError: boolean }
-> {
-  constructor(props: { children: ReactNode; fallback?: ReactNode }) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError(): { hasError: boolean } {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo) {
-    console.error("Chart rendering failed:", error, info.componentStack);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallback ?? (
-        <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-3 py-2 text-xs text-yellow-700 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-400">
-          Chart could not be rendered. Switch to Table view to see your data.
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}
-
 /* ------------------------------------------------------------------ */
 /*  Theme helpers                                                       */
 /* ------------------------------------------------------------------ */
@@ -493,7 +461,8 @@ function ChartTypeSelector({
         <button
           key={rec.type}
           onClick={() => onChange(rec.type)}
-          className={`rounded px-2 py-0.5 text-xs font-medium transition-colors ${
+          aria-pressed={active === rec.type}
+          className={`rounded px-2 py-0.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 ${
             active === rec.type
               ? "bg-blue-100 text-blue-700 dark:bg-blue-600/20 dark:text-blue-400"
               : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
@@ -576,7 +545,14 @@ export function ResultChart({
           onChange={setActiveType}
         />
       </div>
-      <ChartErrorBoundary key={currentType}>
+      <ErrorBoundary
+        key={currentType}
+        fallback={
+          <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-3 py-2 text-xs text-yellow-700 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-400">
+            Unable to render chart. Switch to Table view to see your data.
+          </div>
+        }
+      >
         <ChartRenderer
           rows={rows}
           rec={currentRec}
@@ -584,7 +560,7 @@ export function ResultChart({
           defaultRec={result.recommendations[0]}
           dark={dark}
         />
-      </ChartErrorBoundary>
+      </ErrorBoundary>
     </div>
   );
 }

package/src/components/chat/api-key-bar.tsx

@@ -18,7 +18,7 @@ export function ApiKeyBar({
         <span className="text-zinc-500 dark:text-zinc-400">API key configured</span>
         <button
           onClick={() => { 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"
         >
           Change
         </button>
@@ -42,13 +42,13 @@ export 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
       />
       <button
         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"
       >
         Save
       </button>
@@ -56,7 +56,7 @@ export function ApiKeyBar({
         <button
           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"
         >
           Cancel
         </button>

package/src/components/chat/data-table.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import { useState, type ComponentProps } from "react";
 import { formatCell } from "../../lib/helpers";
+import { ErrorBoundary } from "../error-boundary";
+import { Button } from "../ui/button";
 
-export function DataTable({
+function DataTableInner({
   columns,
   rows,
   maxRows = 10,
@@ -15,6 +17,19 @@ export function DataTable({
   const [sortCol, setSortCol] = useState<number | null>(null);
   const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
 
+  if (rows.length === 0) {
+    return (
+      <div className="rounded-lg border border-zinc-200 px-4 py-8 text-center dark:border-zinc-700">
+        <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
+          Query returned no results
+        </p>
+        <p className="mt-1 text-xs text-zinc-400 dark:text-zinc-500">
+          Try adjusting your query filters or criteria
+        </p>
+      </div>
+    );
+  }
+
   const hasMore = rows.length > maxRows;
 
   const cell = (row: Record<string, unknown> | unknown[], colIdx: number): unknown => {
@@ -67,8 +82,17 @@ export function DataTable({
             {columns.map((col, i) => (
               <th
                 key={i}
+                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"
               >
                 {col}
                 {sortCol === i
@@ -102,3 +126,18 @@ export function DataTable({
     </div>
   );
 }
+
+export function DataTable(props: ComponentProps<typeof DataTableInner>) {
+  return (
+    <ErrorBoundary
+      fallbackRender={(_error, reset) => (
+        <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">
+          <span>Unable to render results.</span>
+          <Button variant="link" onClick={reset}>Retry</Button>
+        </div>
+      )}
+    >
+      <DataTableInner {...props} />
+    </ErrorBoundary>
+  );
+}

package/src/components/chat/error-banner.tsx

@@ -1,12 +1,42 @@
 "use client";
 
 import { useState, useEffect, useMemo } from "react";
-import { parseChatError, type AuthMode } from "../../lib/types";
+import { Button } from "../ui/button";
+import { parseChatError, type AuthMode, type ClientErrorCode } from "../../lib/types";
+import { WifiOff, ServerCrash, ShieldAlert, Clock, AlertTriangle } from "lucide-react";
 
-export function ErrorBanner({ error, authMode }: { error: Error; authMode: AuthMode }) {
+/** Icon for each client error code */
+function ErrorIcon({ clientCode }: { clientCode?: ClientErrorCode }) {
+  switch (clientCode) {
+    case "offline":
+      return <WifiOff className="size-4 shrink-0" />;
+    case "api_unreachable":
+      return <ServerCrash className="size-4 shrink-0" />;
+    case "auth_failure":
+      return <ShieldAlert className="size-4 shrink-0" />;
+    case "rate_limited_http":
+      return <Clock className="size-4 shrink-0" />;
+    case "server_error":
+      return <ServerCrash className="size-4 shrink-0" />;
+    default:
+      return <AlertTriangle className="size-4 shrink-0" />;
+  }
+}
+
+export function ErrorBanner({
+  error,
+  authMode,
+  onRetry,
+}: {
+  error: Error;
+  authMode: AuthMode;
+  onRetry?: () => void;
+}) {
   const info = useMemo(() => parseChatError(error, authMode), [error, authMode]);
   const [countdown, setCountdown] = useState(info.retryAfterSeconds ?? 0);
+  const [restoredOnline, setRestoredOnline] = useState(false);
 
+  // Countdown timer for rate-limited errors
   useEffect(() => {
     if (!info.retryAfterSeconds) return;
     setCountdown(info.retryAfterSeconds);
@@ -19,14 +49,87 @@ export function ErrorBanner({ error, authMode }: { error: Error; authMode: AuthM
     return () => clearInterval(interval);
   }, [info.retryAfterSeconds]);
 
+  // Auto-retry when countdown reaches 0 for rate-limited errors
+  useEffect(() => {
+    if (info.retryAfterSeconds && countdown === 0 && onRetry) {
+      onRetry();
+    }
+  }, [countdown, info.retryAfterSeconds, onRetry]);
+
+  // Offline auto-recovery — listen for online event
+  useEffect(() => {
+    if (info.clientCode !== "offline") return;
+
+    function handleOnline() {
+      setRestoredOnline(true);
+      // Auto-retry when coming back online
+      onRetry?.();
+    }
+
+    window.addEventListener("online", handleOnline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+    };
+  }, [info.clientCode, onRetry]);
+
+  // Emit postMessage error event for widget host pages
+  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 {
+      // Silently ignore postMessage errors (cross-origin restrictions)
+    }
+  }, [info.clientCode, info.code, info.title, info.detail, info.retryable]);
+
+  // If we were offline but came back online, hide the banner
+  if (info.clientCode === "offline" && restoredOnline) {
+    return null;
+  }
+
   const detail = info.retryAfterSeconds && countdown > 0
     ? `Try again in ${countdown} second${countdown !== 1 ? "s" : ""}.`
     : info.detail;
 
+  const showRetry = info.retryable && onRetry && countdown === 0 && info.clientCode !== "offline";
+
   return (
-    <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">
-      <p className="font-medium">{info.title}</p>
-      {detail && <p className="mt-1 text-xs opacity-80">{detail}</p>}
+    <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"
+    >
+      <div className="flex items-start gap-2">
+        <ErrorIcon clientCode={info.clientCode} />
+        <div className="min-w-0 flex-1">
+          <p className="font-medium">{info.title}</p>
+          {detail && <p className="mt-1 text-xs opacity-80">{detail}</p>}
+          {info.requestId && (
+            <p className="mt-1 text-xs opacity-60">Request ID: {info.requestId}</p>
+          )}
+          {showRetry && (
+            <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"
+            >
+              Try again
+            </Button>
+          )}
+        </div>
+      </div>
     </div>
   );
 }

package/src/components/chat/follow-up-chips.tsx

@@ -12,7 +12,7 @@ export function FollowUpChips({
   if (suggestions.length === 0) return null;
 
   return (
-    <div className="flex flex-wrap gap-2 pt-1">
+    <div className="flex flex-wrap gap-2 pt-1" role="group" aria-label="Suggested follow-up questions">
       {suggestions.map((s, i) => (
         <Button
           key={`${i}-${s}`}