@useatlas/react 0.0.1

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

@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import { formatCell } from "../../lib/helpers";
+
+export function DataTable({
+  columns,
+  rows,
+  maxRows = 10,
+}: {
+  columns: string[];
+  rows: (Record<string, unknown> | unknown[])[];
+  maxRows?: number;
+}) {
+  const [sortCol, setSortCol] = useState<number | null>(null);
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+
+  const hasMore = rows.length > maxRows;
+
+  const cell = (row: Record<string, unknown> | unknown[], colIdx: number): unknown => {
+    if (Array.isArray(row)) return row[colIdx];
+    return (row as Record<string, unknown>)[columns[colIdx]];
+  };
+
+  const handleSort = (colIdx: number) => {
+    if (sortCol === colIdx) {
+      if (sortDir === "asc") {
+        setSortDir("desc");
+      } else {
+        setSortCol(null);
+        setSortDir("asc");
+      }
+    } else {
+      setSortCol(colIdx);
+      setSortDir("asc");
+    }
+  };
+
+  const sorted = sortCol !== null
+    ? [...rows].sort((a, b) => {
+        const av = cell(a, sortCol);
+        const bv = cell(b, sortCol);
+        if (av == null && bv == null) return 0;
+        if (av == null) return 1;
+        if (bv == null) return -1;
+        const aStr = String(av).trim();
+        const bStr = String(bv).trim();
+        if (aStr === "" && bStr === "") return 0;
+        if (aStr === "") return 1;
+        if (bStr === "") return -1;
+        const an = Number(aStr), bn = Number(bStr);
+        if (!isNaN(an) && !isNaN(bn)) {
+          return sortDir === "asc" ? an - bn : bn - an;
+        }
+        const cmp = aStr.localeCompare(bStr);
+        return sortDir === "asc" ? cmp : -cmp;
+      })
+    : rows;
+  const display = sorted.slice(0, maxRows);
+
+  return (
+    <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}
+                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"
+              >
+                {col}
+                {sortCol === i
+                  ? sortDir === "asc" ? " \u25B2" : " \u25BC"
+                  : ""}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {display.map((row, i) => (
+            <tr
+              key={i}
+              className={i % 2 === 0 ? "bg-zinc-100/60 dark:bg-zinc-900/60" : "bg-zinc-50/30 dark:bg-zinc-900/30"}
+            >
+              {columns.map((_, j) => (
+                <td key={j} className="whitespace-nowrap px-3 py-1.5 text-zinc-700 dark:text-zinc-300">
+                  {formatCell(cell(row, j))}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </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
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { parseChatError, type AuthMode } from "../../lib/types";
+
+export function ErrorBanner({ error, authMode }: { error: Error; authMode: AuthMode }) {
+  const info = useMemo(() => parseChatError(error, authMode), [error, authMode]);
+  const [countdown, setCountdown] = useState(info.retryAfterSeconds ?? 0);
+
+  useEffect(() => {
+    if (!info.retryAfterSeconds) return;
+    setCountdown(info.retryAfterSeconds);
+    const interval = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) { clearInterval(interval); return 0; }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [info.retryAfterSeconds]);
+
+  const detail = info.retryAfterSeconds && countdown > 0
+    ? `Try again in ${countdown} second${countdown !== 1 ? "s" : ""}.`
+    : info.detail;
+
+  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>
+  );
+}

package/src/components/chat/explore-card.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState } from "react";
+import { getToolArgs, getToolResult, isToolComplete } from "../../lib/helpers";
+
+export function ExploreCard({ part }: { part: unknown }) {
+  const args = getToolArgs(part);
+  const result = getToolResult(part);
+  const done = isToolComplete(part);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="my-2 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
+      <button
+        onClick={() => done && setOpen(!open)}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-zinc-100/60 dark:hover:bg-zinc-800/60"
+      >
+        <span className="font-mono text-green-400">$</span>
+        <span className="flex-1 truncate font-mono text-zinc-700 dark:text-zinc-300">
+          {String(args.command ?? "")}
+        </span>
+        {done ? (
+          <span className="text-zinc-400 dark:text-zinc-600">{open ? "\u25BE" : "\u25B8"}</span>
+        ) : (
+          <span className="animate-pulse text-zinc-500">running...</span>
+        )}
+      </button>
+      {open && done && (
+        <div className="border-t border-zinc-100 bg-white px-3 py-2 dark:border-zinc-800 dark:bg-zinc-950">
+          <pre className="max-h-60 overflow-auto whitespace-pre-wrap font-mono text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
+            {result != null
+              ? typeof result === "string"
+                ? result
+                : JSON.stringify(result, null, 2)
+              : "(no output received)"}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { Button } from "../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">
+      {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/src/components/chat/loading-card.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export function LoadingCard({ label }: { label: string }) {
+  return (
+    <div className="my-2 flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900">
+      <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-zinc-300 border-t-zinc-600 dark:border-zinc-600 dark:border-t-zinc-300" />
+      {label}
+    </div>
+  );
+}

package/src/components/chat/managed-auth-card.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useState } from "react";
+import { useAtlasConfig } from "../../context";
+
+export function ManagedAuthCard() {
+  const { authClient } = useAtlasConfig();
+  const [view, setView] = useState<"login" | "signup">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleLogin(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      const res = await authClient.signIn.email({ email, password });
+      if (res.error) setError(res.error.message ?? "Sign in failed");
+    } catch (err) {
+      console.error("Sign in error:", err);
+      setError(err instanceof TypeError ? "Unable to reach the server" : "Sign in failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleSignup(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      const res = await authClient.signUp.email({ email, password, name: name || email.split("@")[0] });
+      if (res.error) setError(res.error.message ?? "Sign up failed");
+    } catch (err) {
+      console.error("Sign up error:", err);
+      setError(err instanceof TypeError ? "Unable to reach the server" : "Sign up failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      <div className="w-full max-w-sm space-y-4 rounded-lg border border-zinc-200 bg-zinc-50 p-6 dark:border-zinc-700 dark:bg-zinc-900">
+        <div className="text-center">
+          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+            {view === "login" ? "Sign in to Atlas" : "Create an account"}
+          </h2>
+          <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+            {view === "login" ? "Enter your credentials to continue" : "Set up your Atlas account"}
+          </p>
+        </div>
+
+        <form onSubmit={view === "login" ? handleLogin : handleSignup} className="space-y-3">
+          {view === "signup" && (
+            <input
+              type="text"
+              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"
+            />
+          )}
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Email"
+            required
+            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"
+          />
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Password"
+            required
+            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"
+          />
+          {error && (
+            <p className="text-xs text-red-600 dark:text-red-400">{error}</p>
+          )}
+          <button
+            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"
+          >
+            {loading ? "..." : view === "login" ? "Sign in" : "Create account"}
+          </button>
+        </form>
+
+        <p className="text-center text-xs text-zinc-500 dark:text-zinc-400">
+          {view === "login" ? (
+            <>
+              No account?{" "}
+              <button onClick={() => { setView("signup"); setError(""); }} className="text-blue-600 hover:underline dark:text-blue-400">
+                Create one
+              </button>
+            </>
+          ) : (
+            <>
+              Already have an account?{" "}
+              <button onClick={() => { setView("login"); setError(""); }} className="text-blue-600 hover:underline dark:text-blue-400">
+                Sign in
+              </button>
+            </>
+          )}
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/chat/markdown.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+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";
+
+/* ------------------------------------------------------------------ */
+/*  Lazy-loaded syntax highlighter (~300KB)                            */
+/* ------------------------------------------------------------------ */
+
+type SyntaxHighlighterModule = typeof import("react-syntax-highlighter");
+type StyleModule = typeof import("react-syntax-highlighter/dist/esm/styles/prism");
+
+let _highlighterCache: { Prism: SyntaxHighlighterModule["Prism"]; oneDark: StyleModule["oneDark"]; oneLight: StyleModule["oneLight"] } | null = null;
+let _loadFailed = false;
+
+function LazyCodeBlock({ language, dark, children }: { language: string; dark: boolean; children: string }) {
+  const [mod, setMod] = useState(_highlighterCache);
+
+  useEffect(() => {
+    if (_highlighterCache || _loadFailed) return;
+    Promise.all([
+      import("react-syntax-highlighter"),
+      import("react-syntax-highlighter/dist/esm/styles/prism"),
+    ]).then(([sh, styles]) => {
+      _highlighterCache = { Prism: sh.Prism, oneDark: styles.oneDark, oneLight: styles.oneLight };
+      setMod(_highlighterCache);
+    }).catch((err) => {
+      console.warn("Syntax highlighter failed to load — code blocks will use plain text:", err);
+      _loadFailed = true;
+    });
+  }, []);
+
+  if (!mod) {
+    return (
+      <pre className="my-2 overflow-x-auto rounded-lg bg-zinc-100 p-3 text-xs dark:bg-zinc-800">
+        <code>{children}</code>
+      </pre>
+    );
+  }
+
+  return (
+    <mod.Prism
+      language={language}
+      style={dark ? mod.oneDark : mod.oneLight}
+      customStyle={CODE_BLOCK_STYLE}
+    >
+      {children}
+    </mod.Prism>
+  );
+}
+
+const CODE_BLOCK_STYLE = {
+  margin: "0.5rem 0",
+  borderRadius: "0.5rem",
+  fontSize: "0.75rem",
+} as const;
+
+/* ------------------------------------------------------------------ */
+/*  Static markdown renderers — hoisted outside component              */
+/* ------------------------------------------------------------------ */
+
+const mdComponents = {
+  p: ({ children }: { children?: ReactNode }) => (
+    <p className="mb-3 leading-relaxed last:mb-0">{children}</p>
+  ),
+  h1: ({ children }: { children?: ReactNode }) => (
+    <h1 className="mb-2 mt-4 text-lg font-bold first:mt-0">{children}</h1>
+  ),
+  h2: ({ children }: { children?: ReactNode }) => (
+    <h2 className="mb-2 mt-3 text-base font-semibold first:mt-0">{children}</h2>
+  ),
+  h3: ({ children }: { children?: ReactNode }) => (
+    <h3 className="mb-1 mt-2 font-semibold first:mt-0">{children}</h3>
+  ),
+  ul: ({ children }: { children?: ReactNode }) => (
+    <ul className="mb-3 list-disc space-y-1 pl-4">{children}</ul>
+  ),
+  ol: ({ children }: { children?: ReactNode }) => (
+    <ol className="mb-3 list-decimal space-y-1 pl-4">{children}</ol>
+  ),
+  strong: ({ children }: { children?: ReactNode }) => (
+    <strong className="font-semibold text-zinc-900 dark:text-zinc-50">{children}</strong>
+  ),
+  blockquote: ({ children }: { children?: ReactNode }) => (
+    <blockquote className="my-2 border-l-2 border-zinc-300 pl-3 text-zinc-500 dark:border-zinc-600 dark:text-zinc-400">
+      {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}</>,
+};
+
+export const Markdown = memo(function Markdown({ content }: { content: string }) {
+  const dark = useContext(DarkModeContext);
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        ...mdComponents,
+        code({ className, children, ...props }) {
+          const match = /language-(\w+)/.exec(className || "");
+          if (match) {
+            return (
+              <LazyCodeBlock language={match[1]} dark={dark}>
+                {String(children).replace(/\n$/, "")}
+              </LazyCodeBlock>
+            );
+          }
+          return (
+            <code
+              className="rounded bg-zinc-200/50 px-1.5 py-0.5 text-xs text-zinc-800 dark:bg-zinc-700/50 dark:text-zinc-200"
+              {...props}
+            >
+              {children}
+            </code>
+          );
+        },
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+});