@useatlas/create 0.0.2 → 0.0.4

package/templates/nextjs-standalone/src/ui/components/admin/semantic-file-tree.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronRight, File, Folder } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+
+export type SemanticSelection =
+  | { type: "catalog" }
+  | { type: "glossary" }
+  | { type: "entity"; name: string }
+  | { type: "metrics"; file?: string }
+  | null;
+
+interface SemanticFileTreeProps {
+  entityNames: string[];
+  metricFileNames: string[];
+  hasCatalog: boolean;
+  hasGlossary: boolean;
+  selection: SemanticSelection;
+  onSelect: (selection: SemanticSelection) => void;
+  className?: string;
+}
+
+function isSelected(selection: SemanticSelection, target: SemanticSelection): boolean {
+  if (!selection || !target) return false;
+  if (selection.type !== target.type) return false;
+  if (selection.type === "entity" && target.type === "entity") return selection.name === target.name;
+  if (selection.type === "metrics" && target.type === "metrics") return selection.file === target.file;
+  return true;
+}
+
+function FileItem({
+  name,
+  selected,
+  onClick,
+  indent = 0,
+}: {
+  name: string;
+  selected: boolean;
+  onClick: () => void;
+  indent?: number;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
+        selected ? "bg-accent text-accent-foreground" : "hover:bg-muted text-muted-foreground hover:text-foreground",
+      )}
+      style={{ paddingLeft: `${8 + indent * 16}px` }}
+    >
+      <File className="size-4 shrink-0 opacity-60" />
+      <span className="truncate">{name}</span>
+    </button>
+  );
+}
+
+function FolderSection({
+  name,
+  children,
+  defaultOpen = true,
+  indent = 0,
+}: {
+  name: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  indent?: number;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger
+        className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm font-medium hover:bg-muted transition-colors"
+        style={{ paddingLeft: `${8 + indent * 16}px` }}
+      >
+        <ChevronRight
+          className={cn("size-3.5 shrink-0 transition-transform", open && "rotate-90")}
+        />
+        <Folder className="size-4 shrink-0 opacity-60" />
+        <span className="truncate">{name}</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>{children}</CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export function SemanticFileTree({
+  entityNames,
+  metricFileNames,
+  hasCatalog,
+  hasGlossary,
+  selection,
+  onSelect,
+  className,
+}: SemanticFileTreeProps) {
+  return (
+    <div className={cn("flex flex-col", className)}>
+      <div className="border-b px-4 py-3">
+        <div className="flex items-center gap-2">
+          <Folder className="size-4 text-muted-foreground" />
+          <span className="text-sm font-semibold">semantic/</span>
+        </div>
+      </div>
+      <ScrollArea className="flex-1">
+        <div className="space-y-0.5 p-2">
+          {hasCatalog && (
+            <FileItem
+              name="catalog.yml"
+              selected={isSelected(selection, { type: "catalog" })}
+              onClick={() => onSelect({ type: "catalog" })}
+            />
+          )}
+          {hasGlossary && (
+            <FileItem
+              name="glossary.yml"
+              selected={isSelected(selection, { type: "glossary" })}
+              onClick={() => onSelect({ type: "glossary" })}
+            />
+          )}
+
+          <FolderSection name="entities">
+            {entityNames.length === 0 ? (
+              <p className="py-2 text-xs text-muted-foreground" style={{ paddingLeft: "40px" }}>
+                No entities
+              </p>
+            ) : (
+              entityNames.map((name) => (
+                <FileItem
+                  key={name}
+                  name={`${name}.yml`}
+                  selected={isSelected(selection, { type: "entity", name })}
+                  onClick={() => onSelect({ type: "entity", name })}
+                  indent={1}
+                />
+              ))
+            )}
+          </FolderSection>
+
+          {metricFileNames.length > 0 && (
+            <FolderSection name="metrics">
+              {metricFileNames.map((file) => (
+                <FileItem
+                  key={file}
+                  name={`${file}.yml`}
+                  selected={isSelected(selection, { type: "metrics", file })}
+                  onClick={() => onSelect({ type: "metrics", file })}
+                  indent={1}
+                />
+              ))}
+            </FolderSection>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}

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

@@ -16,22 +16,39 @@ import { ToolPart } from "./chat/tool-part";
 import { Markdown } from "./chat/markdown";
 import { STARTER_PROMPTS } from "./chat/starter-prompts";
 import { ConversationSidebar } from "./conversations/conversation-sidebar";
+import { ChangePasswordDialog } from "./admin/change-password-dialog";
 
 const API_KEY_STORAGE_KEY = "atlas-api-key";
 
+/* Static SVG icons — hoisted to avoid recreation on every render */
+const MenuIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
+    <path fillRule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" />
+  </svg>
+);
+
+const AtlasLogo = (
+  <svg viewBox="0 0 256 256" fill="none" className="h-7 w-7 shrink-0 text-primary" aria-hidden="true">
+    <path d="M128 24 L232 208 L24 208 Z" stroke="currentColor" strokeWidth="14" fill="none" strokeLinejoin="round"/>
+    <circle cx="128" cy="28" r="16" fill="currentColor"/>
+  </svg>
+);
+
 export function AtlasChat() {
   const { apiUrl, isCrossOrigin, authClient } = useAtlasConfig();
   const dark = useDarkMode();
   const [input, setInput] = useState("");
-  const [authMode, setAuthMode] = useState<AuthMode>("none");
+  const [authMode, setAuthMode] = useState<AuthMode | null>(null);
   const [healthWarning, setHealthWarning] = useState("");
   const [apiKey, setApiKey] = useState("");
   const [conversationId, setConversationId] = useState<string | null>(null);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [loadingConversation, setLoadingConversation] = useState(false);
+  const [passwordChangeRequired, setPasswordChangeRequired] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const managedSession = authClient.useSession();
+  const authResolved = authMode !== null;
   const isManaged = authMode === "managed";
   const isSignedIn = isManaged && !!managedSession.data?.user;
 
@@ -55,6 +72,9 @@ export function AtlasChat() {
   const refreshConvosRef = useRef(convos.refresh);
   refreshConvosRef.current = convos.refresh;
 
+  const conversationIdRef = useRef(conversationId);
+  conversationIdRef.current = conversationId;
+
   // Load API key from sessionStorage on mount + fetch auth mode + conversations
   useEffect(() => {
     try {
@@ -76,6 +96,7 @@ export function AtlasChat() {
             return fetchHealth(attempt + 1);
           }
           setHealthWarning("Health check failed — check server logs. Try refreshing the page.");
+          setAuthMode("none");
           return;
         }
         const data = await res.json();
@@ -90,6 +111,7 @@ export function AtlasChat() {
           return fetchHealth(attempt + 1);
         }
         setHealthWarning("Unable to reach the API server. Try refreshing the page.");
+        setAuthMode("none");
       }
     }
     fetchHealth(1);
@@ -100,6 +122,25 @@ export function AtlasChat() {
     convos.fetchList();
   }, [authMode, convos.fetchList]);
 
+  // Check if managed auth user needs to change their default password
+  useEffect(() => {
+    if (!isManaged || !managedSession.data?.user) return;
+
+    async function checkPasswordStatus() {
+      try {
+        const res = await fetch(`${apiUrl}/api/v1/admin/me/password-status`, {
+          credentials: isCrossOrigin ? "include" : "same-origin",
+        });
+        if (!res.ok) return;
+        const data = await res.json();
+        if (data.passwordChangeRequired) setPasswordChangeRequired(true);
+      } catch {
+        // Non-critical — skip silently
+      }
+    }
+    checkPasswordStatus();
+  }, [isManaged, managedSession.data?.user, apiUrl, isCrossOrigin]);
+
   const handleSaveApiKey = useCallback((key: string) => {
     setApiKey(key);
     try {
@@ -109,7 +150,9 @@ export function AtlasChat() {
     }
   }, []);
 
-  // Dynamic transport — captures x-conversation-id from response
+  // Dynamic transport — captures x-conversation-id from response.
+  // conversationId is accessed via ref to avoid recreating the transport mid-stream
+  // (which causes an infinite re-render loop in useChat).
   const transport = useMemo(() => {
     const headers: Record<string, string> = {};
     if (apiKey) {
@@ -119,11 +162,11 @@ export function AtlasChat() {
       api: `${apiUrl}/api/chat`,
       headers,
       credentials: isCrossOrigin ? "include" : undefined,
-      body: conversationId ? { conversationId } : undefined,
+      body: () => (conversationIdRef.current ? { conversationId: conversationIdRef.current } : {}),
       fetch: (async (input, init) => {
         const response = await globalThis.fetch(input, init);
         const convId = response.headers.get("x-conversation-id");
-        if (convId && convId !== conversationId) {
+        if (convId && convId !== conversationIdRef.current) {
           setConversationId(convId);
           setTimeout(() => {
             refreshConvosRef.current().catch((err) => {
@@ -134,7 +177,7 @@ export function AtlasChat() {
         return response;
       }) as typeof fetch,
     });
-  }, [apiKey, authMode, apiUrl, isCrossOrigin, conversationId]);
+  }, [apiKey, authMode, apiUrl, isCrossOrigin]);
 
   const { messages, setMessages, sendMessage, status, error } = useChat({ transport });
 
@@ -186,6 +229,16 @@ export function AtlasChat() {
     setMobileMenuOpen(false);
   }
 
+  // Wait for auth mode detection before rendering — prevents flash of chat UI
+  // when managed auth is active but session hasn't been checked yet.
+  if (!authResolved || (isManaged && managedSession.isPending)) {
+    return (
+      <DarkModeContext.Provider value={dark}>
+        <div className="flex h-dvh items-center justify-center bg-white dark:bg-zinc-950" />
+      </DarkModeContext.Provider>
+    );
+  }
+
   return (
     <DarkModeContext.Provider value={dark}>
       <div className="flex h-dvh">
@@ -214,16 +267,11 @@ export function AtlasChat() {
                       className="rounded p-1 text-zinc-400 hover:text-zinc-700 md:hidden dark:hover:text-zinc-200"
                       aria-label="Open conversation history"
                     >
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
-                        <path fillRule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" />
-                      </svg>
+                      {MenuIcon}
                     </button>
                   )}
                   <div className="flex items-center gap-2.5">
-                    <svg viewBox="0 0 256 256" fill="none" className="h-7 w-7 shrink-0" aria-hidden="true">
-                      <path d="M128 24 L232 208 L24 208 Z" stroke="#23CE9E" strokeWidth="14" fill="none" strokeLinejoin="round"/>
-                      <circle cx="128" cy="28" r="16" fill="#23CE9E"/>
-                    </svg>
+                    {AtlasLogo}
                     <div>
                       <h1 className="text-xl font-semibold tracking-tight">Atlas</h1>
                       <p className="text-sm text-zinc-500">Ask your data anything</p>
@@ -365,6 +413,10 @@ export function AtlasChat() {
           </div>
         </main>
       </div>
+      <ChangePasswordDialog
+        open={passwordChangeRequired}
+        onComplete={() => setPasswordChangeRequired(false)}
+      />
     </DarkModeContext.Provider>
   );
 }

package/templates/nextjs-standalone/src/ui/components/chart/result-chart.tsx

@@ -100,6 +100,26 @@ function truncateLabel(label: unknown, maxLen = 12): string {
 /*  Tooltip                                                             */
 /* ------------------------------------------------------------------ */
 
+const TOOLTIP_LABEL_STYLE = { fontWeight: 600, marginBottom: 4 } as const;
+
+const tooltipStyleCache = new Map<boolean, React.CSSProperties>();
+function getTooltipStyle(dark: boolean): React.CSSProperties {
+  let style = tooltipStyleCache.get(dark);
+  if (!style) {
+    const t = themeTokens(dark);
+    style = {
+      background: t.tooltipBg,
+      border: `1px solid ${t.tooltipBorder}`,
+      borderRadius: 6,
+      padding: "8px 12px",
+      fontSize: 12,
+      color: t.tooltipText,
+    };
+    tooltipStyleCache.set(dark, style);
+  }
+  return style;
+}
+
 function ChartTooltip({ active, payload, label, dark }: {
   active?: boolean;
   payload?: Array<{ name: string; value: number; color: string }>;
@@ -107,19 +127,9 @@ function ChartTooltip({ active, payload, label, dark }: {
   dark: boolean;
 }) {
   if (!active || !payload?.length) return null;
-  const t = themeTokens(dark);
   return (
-    <div
-      style={{
-        background: t.tooltipBg,
-        border: `1px solid ${t.tooltipBorder}`,
-        borderRadius: 6,
-        padding: "8px 12px",
-        fontSize: 12,
-        color: t.tooltipText,
-      }}
-    >
-      <p style={{ fontWeight: 600, marginBottom: 4 }}>{label}</p>
+    <div style={getTooltipStyle(dark)}>
+      <p style={TOOLTIP_LABEL_STYLE}>{label}</p>
       {payload.map((entry, i) => (
         <p key={i} style={{ color: entry.color }}>
           {entry.name}: {typeof entry.value === "number" ? formatNumber(entry.value) : entry.value}
@@ -365,9 +375,9 @@ export function ResultChart({
       </div>
       <ChartErrorBoundary key={currentType}>
         <div className="p-2">
-          {currentType === "bar" && <BarChartView data={chartData} rec={currentRec} dark={dark} />}
-          {currentType === "line" && <LineChartView data={chartData} rec={currentRec} dark={dark} />}
-          {currentType === "pie" && <PieChartView data={chartData} rec={currentRec} dark={dark} />}
+          {currentType === "bar" ? <BarChartView data={chartData} rec={currentRec} dark={dark} />
+            : currentType === "line" ? <LineChartView data={chartData} rec={currentRec} dark={dark} />
+            : <PieChartView data={chartData} rec={currentRec} dark={dark} />}
         </div>
       </ChartErrorBoundary>
     </div>

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

@@ -1,58 +1,104 @@
 "use client";
 
-import { useContext } from "react";
+import { memo, useContext, useState, useEffect, type ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { DarkModeContext } from "../../hooks/use-dark-mode";
 
-export function Markdown({ content }: { content: string }) {
+/* ------------------------------------------------------------------ */
+/*  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;
+
+function LazyCodeBlock({ language, dark, children }: { language: string; dark: boolean; children: string }) {
+  const [mod, setMod] = useState(_highlighterCache);
+
+  useEffect(() => {
+    if (_highlighterCache) 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);
+    });
+  }, []);
+
+  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>
+  ),
+  pre: ({ children }: { children?: ReactNode }) => <>{children}</>,
+};
+
+export const Markdown = memo(function Markdown({ content }: { content: string }) {
   const dark = useContext(DarkModeContext);
   return (
     <ReactMarkdown
       components={{
-        p: ({ children }) => (
-          <p className="mb-3 leading-relaxed last:mb-0">{children}</p>
-        ),
-        h1: ({ children }) => (
-          <h1 className="mb-2 mt-4 text-lg font-bold first:mt-0">{children}</h1>
-        ),
-        h2: ({ children }) => (
-          <h2 className="mb-2 mt-3 text-base font-semibold first:mt-0">{children}</h2>
-        ),
-        h3: ({ children }) => (
-          <h3 className="mb-1 mt-2 font-semibold first:mt-0">{children}</h3>
-        ),
-        ul: ({ children }) => (
-          <ul className="mb-3 list-disc space-y-1 pl-4">{children}</ul>
-        ),
-        ol: ({ children }) => (
-          <ol className="mb-3 list-decimal space-y-1 pl-4">{children}</ol>
-        ),
-        strong: ({ children }) => (
-          <strong className="font-semibold text-zinc-900 dark:text-zinc-50">{children}</strong>
-        ),
-        blockquote: ({ children }) => (
-          <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>
-        ),
-        pre: ({ children }) => <>{children}</>,
+        ...mdComponents,
         code({ className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || "");
           if (match) {
             return (
-              <SyntaxHighlighter
-                language={match[1]}
-                style={dark ? oneDark : oneLight}
-                customStyle={{
-                  margin: "0.5rem 0",
-                  borderRadius: "0.5rem",
-                  fontSize: "0.75rem",
-                }}
-              >
+              <LazyCodeBlock language={match[1]} dark={dark}>
                 {String(children).replace(/\n$/, "")}
-              </SyntaxHighlighter>
+              </LazyCodeBlock>
             );
           }
           return (
@@ -69,4 +115,4 @@ export function Markdown({ content }: { content: string }) {
       {content}
     </ReactMarkdown>
   );
-}
+});