@useatlas/create 0.0.5 → 0.0.7

package/templates/nextjs-standalone/src/ui/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/templates/nextjs-standalone/src/ui/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 "@/components/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 => {
@@ -59,15 +74,25 @@ export function DataTable({
   const display = sorted.slice(0, maxRows);
 
   return (
-    <div className="overflow-x-auto rounded-lg border border-zinc-200 dark:border-zinc-700">
+    <div className="relative rounded-lg border border-zinc-200 dark:border-zinc-700">
+      <div className="overflow-x-auto [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 dark:[&::-webkit-scrollbar-thumb]:bg-zinc-600">
       <table className="min-w-full text-xs">
         <thead>
           <tr className="border-b border-zinc-200 bg-zinc-100/80 dark:border-zinc-700 dark:bg-zinc-800/80">
             {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-3 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
@@ -92,6 +117,7 @@ export function DataTable({
           ))}
         </tbody>
       </table>
+      </div>
       {hasMore && (
         <div className="border-t border-zinc-200 px-3 py-1.5 text-xs text-zinc-500 dark:border-zinc-700">
           Showing {maxRows} of {rows.length} rows
@@ -100,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/templates/nextjs-standalone/src/ui/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 "@/components/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,65 @@ 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]);
+
+  // 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/templates/nextjs-standalone/src/ui/components/chat/follow-up-chips.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+export function FollowUpChips({
+  suggestions,
+  onSelect,
+}: {
+  suggestions: string[];
+  onSelect: (text: string) => void;
+}) {
+  if (suggestions.length === 0) return null;
+
+  return (
+    <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}`}
+          variant="outline"
+          size="sm"
+          className="h-auto rounded-full px-3 py-1.5 text-xs font-normal text-zinc-600 dark:text-zinc-400"
+          onClick={() => onSelect(s)}
+        >
+          {s}
+        </Button>
+      ))}
+    </div>
+  );
+}

package/templates/nextjs-standalone/src/ui/components/chat/markdown.tsx

@@ -2,6 +2,7 @@
 
 import { memo, useContext, useState, useEffect, type ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { DarkModeContext } from "../../hooks/use-dark-mode";
 
 /* ------------------------------------------------------------------ */
@@ -83,6 +84,28 @@ const mdComponents = {
       {children}
     </blockquote>
   ),
+  table: ({ children }: { children?: ReactNode }) => (
+    <div className="my-3 overflow-x-auto rounded-lg border border-zinc-200 dark:border-zinc-700">
+      <table className="min-w-full text-sm">{children}</table>
+    </div>
+  ),
+  thead: ({ children }: { children?: ReactNode }) => (
+    <thead className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800/50">
+      {children}
+    </thead>
+  ),
+  tbody: ({ children }: { children?: ReactNode }) => (
+    <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">{children}</tbody>
+  ),
+  tr: ({ children }: { children?: ReactNode }) => <tr>{children}</tr>,
+  th: ({ children }: { children?: ReactNode }) => (
+    <th className="px-3 py-2 text-left text-xs font-medium text-zinc-600 dark:text-zinc-300">
+      {children}
+    </th>
+  ),
+  td: ({ children }: { children?: ReactNode }) => (
+    <td className="px-3 py-2 text-zinc-700 dark:text-zinc-300">{children}</td>
+  ),
   pre: ({ children }: { children?: ReactNode }) => <>{children}</>,
 };
 
@@ -90,6 +113,7 @@ export const Markdown = memo(function Markdown({ content }: { content: string })
   const dark = useContext(DarkModeContext);
   return (
     <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
       components={{
         ...mdComponents,
         code({ className, children, ...props }) {

package/templates/nextjs-standalone/src/ui/components/chat/prompt-library.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useAtlasConfig } from "../../context";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Search, Loader2, BookOpen, MessageSquare } from "lucide-react";
+import type { PromptCollection, PromptItem } from "../../lib/types";
+
+interface CollectionWithItems extends PromptCollection {
+  items: PromptItem[];
+}
+
+export function PromptLibrary({
+  open,
+  onOpenChange,
+  onSendPrompt,
+  getHeaders,
+  getCredentials,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSendPrompt: (text: string) => void;
+  getHeaders: () => Record<string, string>;
+  getCredentials: () => RequestCredentials;
+}) {
+  const { apiUrl } = useAtlasConfig();
+  const [collections, setCollections] = useState<CollectionWithItems[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [fetched, setFetched] = useState(false);
+
+  // Fetch collections + items when Sheet opens (cached in state)
+  useEffect(() => {
+    if (!open || fetched) return;
+    let cancelled = false;
+
+    async function fetchAll() {
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await fetch(`${apiUrl}/api/v1/prompts`, {
+          headers: getHeaders(),
+          credentials: getCredentials(),
+        });
+        if (!res.ok) {
+          let msg = "Failed to load prompt library";
+          try { msg = ((await res.json()) as Record<string, unknown>).message as string ?? msg; } catch { /* intentionally ignored: response may not be JSON */ }
+          if (!cancelled) setError(msg);
+          return;
+        }
+        const data = await res.json();
+        const cols: PromptCollection[] = data.collections ?? [];
+
+        // Fetch items for each collection in parallel
+        const withItems = await Promise.all(
+          cols.map(async (col) => {
+            try {
+              const itemRes = await fetch(`${apiUrl}/api/v1/prompts/${col.id}`, {
+                headers: getHeaders(),
+                credentials: getCredentials(),
+              });
+              if (!itemRes.ok) {
+                console.debug(`Failed to fetch items for collection ${col.id}: HTTP ${itemRes.status}`);
+                return { ...col, items: [] as PromptItem[] };
+              }
+              const itemData = await itemRes.json();
+              return { ...col, items: (itemData.items ?? []) as PromptItem[] };
+            } catch (err) {
+              console.debug(`Failed to fetch items for collection ${col.id}:`, err instanceof Error ? err.message : String(err));
+              return { ...col, items: [] as PromptItem[] };
+            }
+          }),
+        );
+
+        if (!cancelled) {
+          setCollections(withItems);
+          setFetched(true);
+        }
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : "Failed to load prompt library");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    fetchAll();
+    return () => { cancelled = true; };
+  }, [open, fetched, apiUrl, getHeaders, getCredentials]);
+
+  function handleSelectPrompt(question: string) {
+    onOpenChange(false);
+    onSendPrompt(question);
+  }
+
+  // Filter collections and items by search
+  const filtered = search.trim()
+    ? collections
+        .map((col) => ({
+          ...col,
+          items: col.items.filter(
+            (item) =>
+              item.question.toLowerCase().includes(search.toLowerCase()) ||
+              (item.description?.toLowerCase().includes(search.toLowerCase()) ?? false),
+          ),
+        }))
+        .filter((col) => col.items.length > 0 || col.name.toLowerCase().includes(search.toLowerCase()))
+    : collections;
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="sm:max-w-md p-0 flex flex-col">
+        <SheetHeader className="px-6 pt-6 pb-4 border-b">
+          <SheetTitle className="flex items-center gap-2">
+            <BookOpen className="size-5" />
+            Prompt Library
+          </SheetTitle>
+          <div className="relative mt-2">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+            <Input
+              placeholder="Search prompts..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+        </SheetHeader>
+
+        <ScrollArea className="flex-1">
+          <div className="p-4">
+            {loading ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="size-5 animate-spin text-muted-foreground" />
+              </div>
+            ) : error ? (
+              <div className="text-center py-12">
+                <p className="text-sm text-muted-foreground">{error}</p>
+                <Button variant="link" size="sm" onClick={() => setFetched(false)} className="mt-2">
+                  Retry
+                </Button>
+              </div>
+            ) : filtered.length === 0 ? (
+              <div className="text-center py-12">
+                <BookOpen className="mx-auto size-8 text-muted-foreground/50 mb-3" />
+                <p className="text-sm text-muted-foreground">
+                  {search ? "No prompts match your search" : "No prompt collections available"}
+                </p>
+              </div>
+            ) : (
+              <Accordion type="multiple" defaultValue={filtered.map((c) => c.id)}>
+                {filtered.map((col) => (
+                  <AccordionItem key={col.id} value={col.id}>
+                    <AccordionTrigger className="hover:no-underline py-3">
+                      <div className="flex items-center gap-2 text-left">
+                        <span className="text-sm font-medium">{col.name}</span>
+                        <Badge variant="outline" className="text-[10px]">
+                          {col.items.length}
+                        </Badge>
+                      </div>
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      <div className="space-y-1 pb-2">
+                        {col.items.map((item) => (
+                          <button
+                            key={item.id}
+                            onClick={() => handleSelectPrompt(item.question)}
+                            className="w-full text-left rounded-lg px-3 py-2.5 text-sm transition-colors hover:bg-accent group"
+                          >
+                            <div className="flex items-start gap-2">
+                              <MessageSquare className="size-3.5 mt-0.5 shrink-0 text-muted-foreground group-hover:text-foreground" />
+                              <div className="min-w-0">
+                                <p className="text-sm leading-snug">{item.question}</p>
+                                {item.description && (
+                                  <p className="text-xs text-muted-foreground mt-0.5">{item.description}</p>
+                                )}
+                              </div>
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            )}
+          </div>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}