@useatlas/react 0.0.1 → 0.0.3

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@useatlas/react",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Embeddable Atlas chat UI for React applications",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AtlasDevHQ/atlas",
+    "directory": "packages/react"
+  },
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -10,6 +15,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./hooks": "./src/hooks/index.ts",
+    "./widget": "./src/global.d.ts",
     "./styles.css": "./src/styles.css"
   },
   "publishConfig": {
@@ -37,6 +43,9 @@
           "default": "./dist/hooks.cjs"
         }
       },
+      "./widget": {
+        "types": "./dist/global.d.ts"
+      },
       "./styles.css": "./dist/styles.css"
     }
   },
@@ -48,8 +57,9 @@
     "*.css"
   ],
   "scripts": {
-    "build": "tsup && cp src/styles.css dist/styles.css && bun x @tailwindcss/cli -i src/widget.css -o dist/widget.css --minify",
+    "build": "tsup && cp src/styles.css dist/styles.css && cp src/global.d.ts dist/global.d.ts && mkdir -p dist/lib && cp src/lib/widget-types.ts dist/lib/widget-types.d.ts && bun x @tailwindcss/cli -i src/widget.css -o dist/widget.css --minify",
     "dev": "tsup --watch",
+    "test": "bun scripts/test-isolated.ts",
     "type": "tsc --noEmit"
   },
   "peerDependencies": {
@@ -61,7 +71,7 @@
     "react-syntax-highlighter": ">=15.0.0",
     "recharts": ">=2.0.0",
     "tailwindcss": ">=4.0.0",
-    "xlsx": ">=0.18.0"
+    "exceljs": ">=4.0.0"
   },
   "peerDependenciesMeta": {
     "lucide-react": {
@@ -76,13 +86,13 @@
     "tailwindcss": {
       "optional": true
     },
-    "xlsx": {
+    "exceljs": {
       "optional": true
     }
   },
   "dependencies": {
-    "@useatlas/types": "workspace:*",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@useatlas/types": "^0.0.2",
+    "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "radix-ui": "^1.4.3",
@@ -91,23 +101,23 @@
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
-    "@ai-sdk/react": "^3.0.99",
-    "@tailwindcss/cli": "^4.2.1",
+    "@ai-sdk/react": "^3.0.143",
+    "@tailwindcss/cli": "^4.2.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "ai": "^6.0.97",
-    "happy-dom": "16.6.0",
-    "lucide-react": "^0.577.0",
+    "ai": "^6.0.141",
+    "exceljs": "^4.4.0",
+    "happy-dom": "20.8.9",
+    "lucide-react": "^1.7.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-syntax-highlighter": "^16.1.0",
-    "recharts": "^3.7.0",
-    "tailwindcss": "^4.2.1",
-    "tsup": "^8.5.0",
-    "typescript": "^5.9.3",
-    "xlsx": "^0.18.5"
+    "react-syntax-highlighter": "^16.1.1",
+    "recharts": "^3.8.1",
+    "tailwindcss": "^4.2.2",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.2"
   }
 }

package/src/components/__tests__/data-table.test.tsx

@@ -0,0 +1,125 @@
+import { describe, expect, test } from "bun:test";
+import { render, fireEvent } from "@testing-library/react";
+import { DataTable } from "../chat/data-table";
+
+describe("DataTable", () => {
+  const columns = ["name", "revenue", "city"];
+  const rows = [
+    { name: "Acme", revenue: 500000, city: "NYC" },
+    { name: "Beta", revenue: 300000, city: "LA" },
+    { name: "Gamma", revenue: 200000, city: "SF" },
+  ];
+
+  test("renders column headers", () => {
+    const { container } = render(<DataTable columns={columns} rows={rows} />);
+    const ths = container.querySelectorAll("th");
+    const headers = Array.from(ths).map((th) => th.textContent?.trim());
+    expect(headers).toEqual(["name", "revenue", "city"]);
+  });
+
+  test("renders correct number of data rows", () => {
+    const { container } = render(<DataTable columns={columns} rows={rows} />);
+    const trs = container.querySelectorAll("tbody tr");
+    expect(trs.length).toBe(3);
+  });
+
+  test("renders cell values", () => {
+    const { container } = render(<DataTable columns={columns} rows={rows} />);
+    expect(container.textContent).toContain("Acme");
+    expect(container.textContent).toContain("NYC");
+  });
+
+  test("formats numeric values with locale separators", () => {
+    const { container } = render(
+      <DataTable columns={["val"]} rows={[{ val: 1234567 }]} />,
+    );
+    const text = container.textContent!;
+    // formatCell uses toLocaleString() — verify formatted output contains separators
+    // (exact format varies by locale, but should match X,XXX,XXX or X.XXX.XXX pattern)
+    expect(text).toMatch(/1[,.\s]234[,.\s]567/);
+  });
+
+  test("renders em-dash for null values", () => {
+    const { container } = render(
+      <DataTable columns={["val"]} rows={[{ val: null }]} />,
+    );
+    expect(container.textContent).toContain("\u2014");
+  });
+
+  test("truncates to maxRows and shows overflow message", () => {
+    const manyRows = Array.from({ length: 25 }, (_, i) => ({ name: `Item ${i}` }));
+    const { container } = render(
+      <DataTable columns={["name"]} rows={manyRows} maxRows={10} />,
+    );
+    const trs = container.querySelectorAll("tbody tr");
+    expect(trs.length).toBe(10);
+    expect(container.textContent).toContain("Showing 10 of 25 rows");
+  });
+
+  test("no overflow message when rows fit", () => {
+    const { container } = render(<DataTable columns={columns} rows={rows} maxRows={10} />);
+    expect(container.textContent).not.toContain("Showing");
+  });
+
+  test("sort ascending on column click", () => {
+    const { container } = render(<DataTable columns={columns} rows={rows} />);
+    const ths = container.querySelectorAll("th");
+    const nameHeader = ths[0];
+
+    // Click to sort ascending by name
+    fireEvent.click(nameHeader);
+
+    const firstCell = container.querySelector("tbody tr td");
+    expect(firstCell!.textContent).toBe("Acme");
+  });
+
+  test("sort descending on second click", () => {
+    const { container } = render(<DataTable columns={columns} rows={rows} />);
+    const ths = container.querySelectorAll("th");
+    const nameHeader = ths[0];
+
+    fireEvent.click(nameHeader); // asc
+    fireEvent.click(nameHeader); // desc
+
+    const cells = container.querySelectorAll("tbody tr td:first-child");
+    expect(cells[0].textContent).toBe("Gamma");
+  });
+
+  test("third click resets sort to original order", () => {
+    // Use data where original order differs from both asc and desc
+    const unsortedRows = [
+      { name: "Beta", revenue: 300000, city: "LA" },
+      { name: "Acme", revenue: 500000, city: "NYC" },
+      { name: "Gamma", revenue: 200000, city: "SF" },
+    ];
+    const { container } = render(<DataTable columns={columns} rows={unsortedRows} />);
+    const ths = container.querySelectorAll("th");
+    const nameHeader = ths[0];
+
+    fireEvent.click(nameHeader); // asc: Acme, Beta, Gamma
+    fireEvent.click(nameHeader); // desc: Gamma, Beta, Acme
+    fireEvent.click(nameHeader); // reset: Beta, Acme, Gamma (original)
+
+    const firstCell = container.querySelector("tbody tr td");
+    expect(firstCell!.textContent).toBe("Beta");
+  });
+
+  test("renders with array rows (unknown[][])", () => {
+    const arrayRows = [
+      ["Alice", 100],
+      ["Bob", 200],
+    ];
+    const { container } = render(
+      <DataTable columns={["name", "score"]} rows={arrayRows} />,
+    );
+    expect(container.textContent).toContain("Alice");
+    expect(container.textContent).toContain("Bob");
+  });
+
+  test("renders empty state message when rows are empty", () => {
+    const { container } = render(<DataTable columns={["id"]} rows={[]} />);
+    expect(container.querySelector("table")).toBeNull();
+    expect(container.textContent).toContain("Query returned no results");
+    expect(container.textContent).toContain("Try adjusting your query filters or criteria");
+  });
+});

package/src/components/actions/action-approval-card.tsx

@@ -5,8 +5,8 @@ import { getToolArgs, getToolResult, isToolComplete } from "../../lib/helpers";
 import {
   isActionToolResult,
   RESOLVED_STATUSES,
-  type ActionStatus,
-  type ResolvedStatus,
+  type ActionDisplayStatus,
+  type ResolvedDisplayStatus,
   type ActionApprovalResponse,
   type ActionToolResultShape,
 } from "../../lib/action-types";
@@ -35,14 +35,14 @@ function safeStringify(value: unknown): string {
 type CardState =
   | { phase: "idle" }
   | { phase: "submitting"; action: "approve" | "deny" }
-  | { phase: "resolved"; status: ResolvedStatus; result?: unknown }
+  | { phase: "resolved"; status: ResolvedDisplayStatus; result?: unknown }
   | { phase: "error"; message: string };
 
 /* ------------------------------------------------------------------ */
 /*  Border color by status                                             */
 /* ------------------------------------------------------------------ */
 
-function borderColor(status: ActionStatus): string {
+function borderColor(status: ActionDisplayStatus): string {
   switch (status) {
     case "pending_approval":
       return "border-yellow-300 dark:border-yellow-900/50";
@@ -53,7 +53,8 @@ function borderColor(status: ActionStatus): string {
     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";
   }
 }
@@ -87,12 +88,16 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
   const toolResult: ActionToolResultShape = rawResult;
 
   // Effective status: local optimistic update wins over server result
-  const effectiveStatus: ActionStatus =
+  const effectiveStatus: ActionDisplayStatus =
     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
+      : undefined;
 
   /* ---------------------------------------------------------------- */
   /*  API helpers                                                      */
@@ -127,8 +132,10 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
       } catch {
         throw new Error("Action was already resolved, but the response could not be read. Refresh the page.");
       }
-      const status = typeof data.status === "string" ? data.status as ResolvedStatus : "failed" as ResolvedStatus;
-      const label = status.replace(/_/g, " ");
+      if (typeof data.status !== "string" || !RESOLVED_STATUSES.has(data.status as ActionDisplayStatus)) {
+        throw new Error("Action was already resolved with an unrecognized status. Refresh the page.");
+      }
+      const label = data.status.replace(/_/g, " ");
       throw new Error(`This action was already ${label} by another user or policy.`);
     }
 
@@ -143,10 +150,10 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
     } 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 as ActionDisplayStatus)) {
+      throw new Error("Action succeeded, but the server returned an unrecognized status. Refresh the page.");
     }
-    setCardState({ phase: "resolved", status: data.status as ResolvedStatus, result: data.result });
+    setCardState({ phase: "resolved", status: data.status as ResolvedDisplayStatus, result: data.result });
   }
 
   async function handleApprove() {
@@ -215,13 +222,13 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
                 : safeStringify(resolvedResult)}
             </div>
           )}
-          {toolResult.error && (
+          {toolResult.status === "failed" && (
             <div className="mb-2 rounded bg-red-50 p-2 text-xs text-red-700 dark:bg-red-900/20 dark:text-red-400">
               <span className="font-medium">Error: </span>
               {toolResult.error}
             </div>
           )}
-          {toolResult.reason && RESOLVED_STATUSES.has(effectiveStatus) && (
+          {toolResult.status === "denied" && RESOLVED_STATUSES.has(effectiveStatus) && (
             <div className="mb-2 text-xs text-zinc-500 dark:text-zinc-400">
               <span className="font-medium">Reason: </span>
               {toolResult.reason}
@@ -241,7 +248,7 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
             <button
               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"
             >
               {isSubmitting && cardState.action === "approve" && (
                 <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-white/30 border-t-white" />
@@ -253,7 +260,7 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
               <button
                 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"
               >
                 Deny
               </button>
@@ -263,13 +270,13 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
                   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}
                 />
                 <button
                   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"
                 >
                   {isSubmitting && cardState.action === "deny" && (
                     <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-white/30 border-t-white" />
@@ -282,7 +289,7 @@ export function ActionApprovalCard({ part }: { part: unknown }) {
                     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"
                 >
                   Cancel
                 </button>

package/src/components/actions/action-status-badge.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import type { ActionStatus } from "../../lib/action-types";
+import type { ActionDisplayStatus } from "../../lib/action-types";
 
-const STATUS_CONFIG: Record<ActionStatus, { label: string; classes: string }> = {
+const STATUS_CONFIG: Record<ActionDisplayStatus, { label: string; classes: string }> = {
   pending_approval: {
     label: "Pending Approval",
     classes: "bg-yellow-100 text-yellow-700 dark:bg-yellow-600/20 dark:text-yellow-400",
@@ -37,7 +37,7 @@ const STATUS_CONFIG: Record<ActionStatus, { label: string; classes: string }> =
   },
 };
 
-export function ActionStatusBadge({ status }: { status: ActionStatus }) {
+export function ActionStatusBadge({ status }: { status: ActionDisplayStatus }) {
   const config = STATUS_CONFIG[status] ?? {
     label: status.replace(/_/g, " "),
     classes: "bg-zinc-100 text-zinc-700 dark:bg-zinc-600/20 dark:text-zinc-400",