@useatlas/create 0.0.2 → 0.0.4

package/templates/docker/src/ui/components/chat/python-result-card.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import { Component, type ReactNode, type ErrorInfo, useContext, useState } from "react";
+import { getToolArgs, getToolResult, isToolComplete } from "../../lib/helpers";
+import { DarkModeContext } from "../../hooks/use-dark-mode";
+import dynamic from "next/dynamic";
+import { LoadingCard } from "./loading-card";
+import { DataTable } from "./data-table";
+import type { ChartDetectionResult } from "../chart/chart-detection";
+
+const ResultChart = dynamic(
+  () => import("../chart/result-chart").then((m) => ({ default: m.ResultChart })),
+  { ssr: false, loading: () => <div className="h-64 animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800" /> },
+);
+
+interface RechartsChartConfig {
+  type: "line" | "bar" | "pie";
+  data: Record<string, unknown>[];
+  categoryKey: string;
+  valueKeys: string[];
+}
+
+interface PythonChart {
+  base64: string;
+  mimeType: "image/png";
+}
+
+const ALLOWED_IMAGE_MIME = new Set(["image/png", "image/jpeg"]);
+
+/* ------------------------------------------------------------------ */
+/*  Error boundary                                                     */
+/* ------------------------------------------------------------------ */
+
+class PythonErrorBoundary extends Component<
+  { children: ReactNode },
+  { hasError: boolean; error?: Error }
+> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("PythonResultCard rendering failed:", error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="my-2 rounded-lg border border-red-300 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">
+          Python result could not be rendered: {this.state.error?.message ?? "unknown error"}
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Main component                                                     */
+/* ------------------------------------------------------------------ */
+
+export function PythonResultCard({ part }: { part: unknown }) {
+  return (
+    <PythonErrorBoundary>
+      <PythonResultCardInner part={part} />
+    </PythonErrorBoundary>
+  );
+}
+
+function PythonResultCardInner({ part }: { part: unknown }) {
+  const dark = useContext(DarkModeContext);
+  const args = getToolArgs(part);
+  const raw = getToolResult(part);
+  const done = isToolComplete(part);
+  const [open, setOpen] = useState(true);
+
+  if (!done) return <LoadingCard label="Running Python..." />;
+
+  // Structural validation — result must be a non-null object
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
+    return (
+      <div className="my-2 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">
+        Python executed but returned an unexpected result format.
+      </div>
+    );
+  }
+
+  const result = raw as Record<string, unknown>;
+
+  if (!result.success) {
+    return (
+      <div className="my-2 overflow-hidden rounded-lg border border-red-300 bg-red-50 dark:border-red-900/50 dark:bg-red-950/20">
+        <div className="px-3 py-2 text-xs font-medium text-red-700 dark:text-red-400">
+          Python execution failed
+        </div>
+        <pre className="border-t border-red-200 px-3 py-2 text-xs whitespace-pre-wrap text-red-600 dark:border-red-900/50 dark:text-red-300">
+          {String(result.error ?? "Unknown error")}
+        </pre>
+        {!!result.output && (
+          <pre className="border-t border-red-200 px-3 py-2 text-xs whitespace-pre-wrap text-red-500 dark:border-red-900/50 dark:text-red-400">
+            {String(result.output)}
+          </pre>
+        )}
+      </div>
+    );
+  }
+
+  const output = result.output ? String(result.output) : null;
+  const table = result.table as { columns: string[]; rows: unknown[][] } | undefined;
+  const charts = Array.isArray(result.charts) ? (result.charts as PythonChart[]) : undefined;
+  const rechartsCharts = Array.isArray(result.rechartsCharts) ? (result.rechartsCharts as RechartsChartConfig[]) : undefined;
+
+  const hasTable = table && Array.isArray(table.columns) && Array.isArray(table.rows)
+    && table.columns.length > 0 && table.rows.length > 0;
+  const hasCharts = charts && charts.length > 0;
+  const hasRechartsCharts = rechartsCharts && rechartsCharts.length > 0;
+
+  // Filter charts to only safe image MIME types
+  const safeCharts = hasCharts
+    ? charts.filter((c) => c.base64 && ALLOWED_IMAGE_MIME.has(c.mimeType))
+    : [];
+
+  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={() => 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="rounded bg-emerald-100 px-1.5 py-0.5 font-medium text-emerald-700 dark:bg-emerald-600/20 dark:text-emerald-400">
+          Python
+        </span>
+        <span className="flex-1 truncate text-zinc-500 dark:text-zinc-400">
+          {String(args.explanation ?? "Python result")}
+        </span>
+        <span className="text-zinc-400 dark:text-zinc-600">{open ? "\u25BE" : "\u25B8"}</span>
+      </button>
+
+      {open && (
+        <div className="space-y-2 border-t border-zinc-100 px-3 py-2 dark:border-zinc-800">
+          {output && (
+            <pre className="rounded-md bg-zinc-100 px-3 py-2 text-xs whitespace-pre-wrap text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
+              {output}
+            </pre>
+          )}
+
+          {hasTable && <DataTable columns={table.columns} rows={table.rows} />}
+
+          {hasRechartsCharts &&
+            rechartsCharts.map((chart, i) => (
+              <RechartsChartSection key={i} chart={chart} dark={dark} />
+            ))}
+
+          {safeCharts.length > 0 &&
+            safeCharts.map((chart, i) => (
+              <ChartImage key={i} chart={chart} index={i} />
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Chart image with error handling                                    */
+/* ------------------------------------------------------------------ */
+
+function ChartImage({ chart, index }: { chart: PythonChart; index: number }) {
+  const [failed, setFailed] = useState(false);
+
+  if (failed) {
+    return (
+      <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 {index + 1} failed to render.
+      </div>
+    );
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element -- base64 data URL, cannot use next/image optimization
+    <img
+      src={`data:${chart.mimeType};base64,${chart.base64}`}
+      alt={`Python chart ${index + 1}`}
+      className="max-w-full rounded-lg border border-zinc-200 dark:border-zinc-700"
+      onError={() => setFailed(true)}
+    />
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Recharts section — bypasses auto-detection with synthetic result   */
+/* ------------------------------------------------------------------ */
+
+function RechartsChartSection({ chart, dark }: { chart: RechartsChartConfig; dark: boolean }) {
+  if (!chart.categoryKey || !Array.isArray(chart.valueKeys) || !Array.isArray(chart.data)) {
+    return (
+      <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 data is incomplete or malformed.
+      </div>
+    );
+  }
+
+  const headers = [chart.categoryKey, ...chart.valueKeys];
+  const rows: string[][] = chart.data.map((row) =>
+    headers.map((key) => (row[key] == null ? "" : String(row[key]))),
+  );
+
+  // Build a synthetic detection result so ResultChart uses the backend's
+  // chart config directly, bypassing auto-detection that might reject it.
+  const detectionResult: ChartDetectionResult = {
+    chartable: true,
+    columns: headers.map((h, i) => ({
+      header: h,
+      type: i === 0 ? "categorical" as const : "numeric" as const,
+      index: i,
+      uniqueCount: i === 0 ? chart.data.length : 0,
+    })),
+    recommendations: [{
+      type: chart.type,
+      categoryColumn: { header: chart.categoryKey, type: "categorical" as const, index: 0, uniqueCount: chart.data.length },
+      valueColumns: chart.valueKeys.map((k, i) => ({
+        header: k,
+        type: "numeric" as const,
+        index: i + 1,
+        uniqueCount: 0,
+      })) as [{ header: string; type: "numeric"; index: number; uniqueCount: number }, ...{ header: string; type: "numeric"; index: number; uniqueCount: number }[]],
+      reason: "Python-generated chart",
+    }],
+    data: chart.data.map((row) => {
+      const out: Record<string, string | number> = {};
+      for (const key of headers) {
+        const val = row[key];
+        out[key] = typeof val === "number" ? val : String(val ?? "");
+      }
+      return out;
+    }),
+  };
+
+  return <ResultChart headers={headers} rows={rows} dark={dark} detectionResult={detectionResult} />;
+}

package/templates/docker/src/ui/components/chat/sql-block.tsx

@@ -1,27 +1,51 @@
 "use client";
 
-import { useContext } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { useContext, useState, useEffect } from "react";
 import { DarkModeContext } from "../../hooks/use-dark-mode";
 import { CopyButton } from "./copy-button";
 
+type SyntaxHighlighterModule = typeof import("react-syntax-highlighter");
+type StyleModule = typeof import("react-syntax-highlighter/dist/esm/styles/prism");
+
+let _cache: { Prism: SyntaxHighlighterModule["Prism"]; oneDark: StyleModule["oneDark"]; oneLight: StyleModule["oneLight"] } | null = null;
+
+const SQL_BLOCK_STYLE = {
+  margin: 0,
+  borderRadius: "0.5rem",
+  fontSize: "0.75rem",
+  padding: "0.75rem 1rem",
+} as const;
+
 export function SQLBlock({ sql }: { sql: string }) {
   const dark = useContext(DarkModeContext);
+  const [mod, setMod] = useState(_cache);
+
+  useEffect(() => {
+    if (_cache) return;
+    Promise.all([
+      import("react-syntax-highlighter"),
+      import("react-syntax-highlighter/dist/esm/styles/prism"),
+    ]).then(([sh, styles]) => {
+      _cache = { Prism: sh.Prism, oneDark: styles.oneDark, oneLight: styles.oneLight };
+      setMod(_cache);
+    });
+  }, []);
+
   return (
     <div className="relative">
-      <SyntaxHighlighter
-        language="sql"
-        style={dark ? oneDark : oneLight}
-        customStyle={{
-          margin: 0,
-          borderRadius: "0.5rem",
-          fontSize: "0.75rem",
-          padding: "0.75rem 1rem",
-        }}
-      >
-        {sql}
-      </SyntaxHighlighter>
+      {mod ? (
+        <mod.Prism
+          language="sql"
+          style={dark ? mod.oneDark : mod.oneLight}
+          customStyle={SQL_BLOCK_STYLE}
+        >
+          {sql}
+        </mod.Prism>
+      ) : (
+        <pre className="overflow-x-auto rounded-lg bg-zinc-100 p-3 text-xs dark:bg-zinc-800">
+          <code>{sql}</code>
+        </pre>
+      )}
       <div className="absolute right-2 top-2">
         <CopyButton text={sql} label="Copy SQL" />
       </div>

package/templates/docker/src/ui/components/chat/sql-result-card.tsx

@@ -4,7 +4,12 @@ import { useContext, useMemo, useState } from "react";
 import { getToolArgs, getToolResult, isToolComplete, downloadCSV, toCsvString } from "../../lib/helpers";
 import { DarkModeContext } from "../../hooks/use-dark-mode";
 import { detectCharts } from "../chart/chart-detection";
-import { ResultChart } from "../chart/result-chart";
+import dynamic from "next/dynamic";
+
+const ResultChart = dynamic(
+  () => import("../chart/result-chart").then((m) => ({ default: m.ResultChart })),
+  { ssr: false, loading: () => <div className="h-64 animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800" /> },
+);
 import { LoadingCard } from "./loading-card";
 import { DataTable } from "./data-table";
 import { SQLBlock } from "./sql-block";

package/templates/docker/src/ui/components/chat/tool-part.tsx

@@ -1,13 +1,15 @@
 "use client";
 
+import { memo } from "react";
 import { getToolName } from "ai";
-import { getToolResult } from "../../lib/helpers";
+import { getToolResult, isToolComplete } from "../../lib/helpers";
 import { isActionToolResult } from "../../lib/action-types";
 import { ExploreCard } from "./explore-card";
 import { SQLResultCard } from "./sql-result-card";
 import { ActionApprovalCard } from "../actions/action-approval-card";
+import { PythonResultCard } from "./python-result-card";
 
-export function ToolPart({ part }: { part: unknown }) {
+export const ToolPart = memo(function ToolPart({ part }: { part: unknown }) {
   let name: string;
   try {
     name = getToolName(part as Parameters<typeof getToolName>[0]);
@@ -25,6 +27,8 @@ export function ToolPart({ part }: { part: unknown }) {
       return <ExploreCard part={part} />;
     case "executeSQL":
       return <SQLResultCard part={part} />;
+    case "executePython":
+      return <PythonResultCard part={part} />;
     default: {
       const result = getToolResult(part);
       if (isActionToolResult(result)) {
@@ -37,4 +41,9 @@ export function ToolPart({ part }: { part: unknown }) {
       );
     }
   }
-}
+}, (prev, next) => {
+  // Once a tool part is complete, its output won't change — skip re-renders.
+  // This prevents the Recharts render tree from contributing to React's update depth limit.
+  if (isToolComplete(prev.part) && isToolComplete(next.part)) return true;
+  return false;
+});

package/templates/docker/src/ui/components/chat/typing-indicator.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+const DELAY_1 = { animationDelay: "150ms" } as const;
+const DELAY_2 = { animationDelay: "300ms" } as const;
+
 export function TypingIndicator() {
   return (
     <div className="flex justify-start">
@@ -7,11 +10,11 @@ export function TypingIndicator() {
         <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500" />
         <span
           className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500"
-          style={{ animationDelay: "150ms" }}
+          style={DELAY_1}
         />
         <span
           className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500"
-          style={{ animationDelay: "300ms" }}
+          style={DELAY_2}
         />
       </div>
     </div>

package/templates/docker/src/ui/components/conversations/conversation-item.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useState } from "react";
+import { Star, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import type { Conversation } from "../../lib/types";
 import { DeleteConfirmation } from "./delete-confirmation";
 
@@ -52,7 +54,6 @@ export function ConversationItem({
             if (success) {
               setConfirmDelete(false);
             }
-            // On failure, keep confirmation dialog open so user sees something is wrong
           }}
         />
       </div>
@@ -60,9 +61,17 @@ export function ConversationItem({
   }
 
   return (
-    <button
+    <div
+      role="button"
+      tabIndex={0}
       onClick={onSelect}
-      className={`group flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      }}
+      className={`group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 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"
@@ -77,7 +86,9 @@ export function ConversationItem({
         </p>
       </div>
       <div className="flex shrink-0 items-center gap-0.5">
-        <button
+        <Button
+          variant="ghost"
+          size="icon"
           onClick={async (e) => {
             e.stopPropagation();
             if (starPending) return;
@@ -86,35 +97,29 @@ export function ConversationItem({
             setStarPending(false);
           }}
           disabled={starPending}
-          className={`rounded p-1 transition-all ${
+          className={`h-6 w-6 transition-all ${
             conversation.starred
               ? "text-amber-400 opacity-100 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300"
               : "text-zinc-400 opacity-0 hover:text-amber-400 group-hover:opacity-100 dark:hover:text-amber-400"
           } ${starPending ? "opacity-50" : ""}`}
           aria-label={conversation.starred ? "Unstar conversation" : "Star conversation"}
         >
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5">
-            {conversation.starred ? (
-              <path fillRule="evenodd" d="M8 1.75a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 13.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 7.874a.75.75 0 0 1 .416-1.28l4.21-.611L7.327 2.17A.75.75 0 0 1 8 1.75Z" clipRule="evenodd" />
-            ) : (
-              <path fillRule="evenodd" d="M8 1.75a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 13.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 7.874a.75.75 0 0 1 .416-1.28l4.21-.611L7.327 2.17A.75.75 0 0 1 8 1.75Zm0 2.445L6.615 7.05a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 4.196Z" clipRule="evenodd" />
-            )}
-          </svg>
-        </button>
-        <button
+          <Star className="h-3.5 w-3.5" fill={conversation.starred ? "currentColor" : "none"} />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
           onClick={(e) => {
             e.stopPropagation();
             setConfirmDelete(true);
           }}
           disabled={deleting}
-          className="shrink-0 rounded p-1 text-zinc-400 opacity-0 transition-all hover:bg-red-50 hover:text-red-500 group-hover:opacity-100 dark:hover:bg-red-950/20 dark:hover:text-red-400"
+          className="h-6 w-6 shrink-0 text-zinc-400 opacity-0 transition-all hover:bg-red-50 hover:text-red-500 group-hover:opacity-100 dark:hover:bg-red-950/20 dark:hover:text-red-400"
           aria-label="Delete conversation"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5">
-            <path fillRule="evenodd" d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.286a1.5 1.5 0 0 0 1.492-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5A.75.75 0 0 1 9.95 6Z" clipRule="evenodd" />
-          </svg>
-        </button>
+          <Trash2 className="h-3.5 w-3.5" />
+        </Button>
       </div>
-    </button>
+    </div>
   );
 }

package/templates/docker/src/ui/context.tsx

@@ -14,7 +14,7 @@ export interface AtlasAuthClient {
     email: (opts: { email: string; password: string; name: string }) => Promise<{ error?: { message?: string } | null }>;
   };
   signOut: () => Promise<unknown>;
-  useSession: () => { data?: { user?: { email?: string } } | null };
+  useSession: () => { data?: { user?: { email?: string } } | null; isPending?: boolean };
 }
 
 export interface AtlasUIConfig {

package/templates/docker/src/ui/hooks/use-conversations.ts

@@ -64,12 +64,12 @@ export function useConversations(opts: UseConversationsOptions): UseConversation
       }
 
       if (!res.ok) {
-        const body = await res.json().catch(() => null);
-        if (body?.code === "not_available") {
+        const errorBody = await res.json().catch(() => null);
+        if (errorBody?.code === "not_available") {
           setAvailable(false);
           return;
         }
-        console.warn(`fetchList: HTTP ${res.status}`, body);
+        console.warn(`fetchList: HTTP ${res.status}`, errorBody);
         return;
       }
 

package/templates/docker/src/ui/hooks/use-dark-mode.ts

@@ -1,17 +1,24 @@
 "use client";
 
-import { createContext, useState, useEffect } from "react";
+import { createContext, useSyncExternalStore } from "react";
 
 export const DarkModeContext = createContext(false);
 
+/** SSR-safe snapshot: reads current prefers-color-scheme without hydration flicker. */
+function subscribeToColorScheme(onChange: () => void) {
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  mq.addEventListener("change", onChange);
+  return () => mq.removeEventListener("change", onChange);
+}
+
+function getSnapshot() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+function getServerSnapshot() {
+  return false;
+}
+
 export function useDarkMode() {
-  const [dark, setDark] = useState(false);
-  useEffect(() => {
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    setDark(mq.matches);
-    const handler = (e: MediaQueryListEvent) => setDark(e.matches);
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, []);
-  return dark;
+  return useSyncExternalStore(subscribeToColorScheme, getSnapshot, getServerSnapshot);
 }

package/templates/docker/tsconfig.json

@@ -30,8 +30,8 @@
   },
   "include": [
     "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts"
   ],

package/templates/nextjs-standalone/.env.example

@@ -50,7 +50,7 @@
 # ATLAS_QUERY_TIMEOUT=30000    # Default: 30s in milliseconds
 
 # === Production Deployment ===
-# Required for production (Railway, Render, etc.):
+# Required for production (Railway, etc.):
 #   ATLAS_PROVIDER + its API key (e.g. ANTHROPIC_API_KEY)
 #   ATLAS_DATASOURCE_URL=postgresql://user:pass@host:5432/dbname
 #

package/templates/nextjs-standalone/bin/__tests__/plugin-cli.test.ts

@@ -19,7 +19,7 @@ describe("pluginTemplate", () => {
     const result = pluginTemplate("my-source", "datasource");
     expect(result).toContain('import { definePlugin } from "@useatlas/plugin-sdk"');
     expect(result).toContain('id: "my-source"');
-    expect(result).toContain('type: "datasource"');
+    expect(result).toContain('types: ["datasource"]');
     expect(result).toContain("satisfies AtlasDatasourcePlugin");
     expect(result).toContain("connection:");
     expect(result).toContain("dbType:");
@@ -28,7 +28,7 @@ describe("pluginTemplate", () => {
   test("generates context template with contextProvider", () => {
     const result = pluginTemplate("my-ctx", "context");
     expect(result).toContain('id: "my-ctx"');
-    expect(result).toContain('type: "context"');
+    expect(result).toContain('types: ["context"]');
     expect(result).toContain("contextProvider:");
     expect(result).toContain("satisfies AtlasContextPlugin");
   });
@@ -36,7 +36,7 @@ describe("pluginTemplate", () => {
   test("generates interaction template with routes", () => {
     const result = pluginTemplate("my-interaction", "interaction");
     expect(result).toContain('id: "my-interaction"');
-    expect(result).toContain('type: "interaction"');
+    expect(result).toContain('types: ["interaction"]');
     expect(result).toContain("routes(app:");
     expect(result).toContain("satisfies AtlasInteractionPlugin");
   });
@@ -44,7 +44,7 @@ describe("pluginTemplate", () => {
   test("generates action template with actions array", () => {
     const result = pluginTemplate("my-action", "action");
     expect(result).toContain('id: "my-action"');
-    expect(result).toContain('type: "action"');
+    expect(result).toContain('types: ["action"]');
     expect(result).toContain("actions:");
     expect(result).toContain("satisfies AtlasActionPlugin");
     expect(result).toContain('import { tool } from "ai"');
@@ -60,7 +60,7 @@ describe("pluginTestTemplate", () => {
   test("generates test with correct plugin id assertion", () => {
     const result = pluginTestTemplate("test-plugin", "datasource");
     expect(result).toContain('expect(plugin.id).toBe("test-plugin")');
-    expect(result).toContain('expect(plugin.type).toBe("datasource")');
+    expect(result).toContain('expect(plugin.types).toContain("datasource")');
     expect(result).toContain("healthCheck");
   });
 });
@@ -125,7 +125,7 @@ describe("handlePluginCreate", () => {
     expect(fs.existsSync(path.join(pluginDir, "tsconfig.json"))).toBe(true);
 
     const indexContent = fs.readFileSync(path.join(pluginDir, "src", "index.ts"), "utf-8");
-    expect(indexContent).toContain('type: "datasource"');
+    expect(indexContent).toContain('types: ["datasource"]');
     expect(indexContent).toContain('id: "test-ds"');
 
     const pkgJson = JSON.parse(fs.readFileSync(path.join(pluginDir, "package.json"), "utf-8"));
@@ -139,7 +139,7 @@ describe("handlePluginCreate", () => {
     expect(fs.existsSync(path.join(pluginDir, "src", "index.ts"))).toBe(true);
 
     const indexContent = fs.readFileSync(path.join(pluginDir, "src", "index.ts"), "utf-8");
-    expect(indexContent).toContain('type: "action"');
+    expect(indexContent).toContain('types: ["action"]');
     expect(indexContent).toContain("actions:");
   });
 
@@ -148,7 +148,7 @@ describe("handlePluginCreate", () => {
 
     const pluginDir = path.join(tmpDir, "plugins", "my-ctx");
     const indexContent = fs.readFileSync(path.join(pluginDir, "src", "index.ts"), "utf-8");
-    expect(indexContent).toContain('type: "context"');
+    expect(indexContent).toContain('types: ["context"]');
     expect(indexContent).toContain("contextProvider:");
   });
 
@@ -157,7 +157,7 @@ describe("handlePluginCreate", () => {
 
     const pluginDir = path.join(tmpDir, "plugins", "my-web");
     const indexContent = fs.readFileSync(path.join(pluginDir, "src", "index.ts"), "utf-8");
-    expect(indexContent).toContain('type: "interaction"');
+    expect(indexContent).toContain('types: ["interaction"]');
     expect(indexContent).toContain("routes(app:");
   });