@useatlas/create 0.0.2 → 0.0.3

package/templates/docker/src/lib/tools/sql.ts

@@ -31,9 +31,29 @@ const log = createLogger("sql");
 
 const parser = new Parser();
 
+/**
+ * Strip SQL comments for regex guard testing.
+ *
+ * Block comments and line comments are removed so that anchored patterns
+ * like `^\s*(KILL)\b` cannot be bypassed with a leading comment.
+ *
+ * Only used for regex testing — the original SQL is passed to the AST parser
+ * unchanged so that comment-aware parsing still works correctly.
+ */
+function stripSqlComments(sql: string): string {
+  // Single regex handles string literals, block comments, line comments,
+  // and MySQL-style # comments in one pass. String literals (single-quoted
+  // with '' escape) are preserved unchanged; comments are replaced with a space.
+  return sql
+    .replace(/'(?:[^']|'')*'|\/\*[\s\S]*?\*\/|--[^\n]*|#[^\n]*/g, (match) =>
+      match.startsWith("'") ? match : " ",
+    )
+    .trim();
+}
+
 const FORBIDDEN_PATTERNS = [
   /\b(INSERT|UPDATE|DELETE|DROP|CREATE|ALTER|TRUNCATE)\b/i,
-  /\b(GRANT|REVOKE|EXEC|EXECUTE|CALL)\b/i,
+  /\b(GRANT|REVOKE|EXEC|EXECUTE|CALL|KILL)\b/i,
   /\b(COPY|LOAD|VACUUM|REINDEX|OPTIMIZE)\b/i,
   /\bINTO\s+OUTFILE\b/i,
 ];
@@ -45,82 +65,68 @@ const MYSQL_FORBIDDEN_PATTERNS = [
   /\b(SHOW|DESCRIBE|EXPLAIN|USE)\b/i,
 ];
 
-// ClickHouse-specific patterns — admin/mutation commands unique to ClickHouse
-const CLICKHOUSE_FORBIDDEN_PATTERNS = [
-  /\b(SYSTEM)\b/i,
-  /\b(KILL)\b/i,
-  /\b(ATTACH|DETACH)\b/i,
-  /\b(RENAME)\b/i,
-  /\b(EXCHANGE)\b/i,
-  /\b(SHOW|DESCRIBE|EXPLAIN|USE)\b/i,
-];
-
-// Snowflake-specific patterns — only applied when dbType === "snowflake"
-// Stage operations (PUT/GET/LIST/REMOVE/RM) and MERGE are Snowflake DML
-// not covered by the base patterns.
-// Stage ops are anchored to statement start (^\s*) to avoid false positives
-// on common words in data values (e.g., WHERE name = 'Get Ready').
-// MERGE/SHOW/DESCRIBE/EXPLAIN/USE use word-boundary since they rarely
-// appear as data values.
-const SNOWFLAKE_FORBIDDEN_PATTERNS = [
-  /^\s*(PUT|GET|LIST|REMOVE|RM)\b/i,
-  /\b(MERGE)\b/i,
-  /\b(SHOW|DESCRIBE|EXPLAIN|USE)\b/i,
-];
-
-// DuckDB-specific patterns — block PRAGMA, ATTACH, DETACH, INSTALL,
-// EXPORT, IMPORT, CHECKPOINT, file-reading functions, and SET.
-// Note: LOAD is already blocked by base FORBIDDEN_PATTERNS.
-const DUCKDB_FORBIDDEN_PATTERNS = [
-  /\b(PRAGMA)\b/i,
-  /\b(ATTACH|DETACH)\b/i,
-  /\b(INSTALL)\b/i,
-  /\b(EXPORT|IMPORT)\b/i,
-  /\b(CHECKPOINT)\b/i,
-  /\b(DESCRIBE|EXPLAIN|SHOW)\b/i,
-  // Block file-reading table functions that can access the host filesystem
-  /\b(read_csv_auto|read_csv|read_parquet|read_json|read_json_auto|read_text)\b/i,
-  /\b(parquet_scan|csv_scan|json_scan)\b/i,
-  // Block SET for configuration variables (DuckDB has no session-level read-only guard for :memory:)
-  /^\s*SET\b/i,
-];
-
 /**
  * Map DBType to node-sql-parser dialect string.
- * ClickHouse and DuckDB use PostgreSQL mode (closest match for SELECT syntax).
- * Snowflake uses "Snowflake" mode (alpha in node-sql-parser v5+).
+ *
+ * When a connectionId is provided, plugin-registered metadata is checked first.
+ * Falls back to the hardcoded switch for known types, and defaults to
+ * "PostgresQL" for unknown/custom dbType strings (plugin escape hatch).
  */
-export function parserDatabase(dbType: DBType): string {
+export function parserDatabase(dbType: DBType | string, connectionId?: string): string {
+  // 1. Plugin metadata takes precedence
+  if (connectionId) {
+    const pluginDialect = connections.getParserDialect(connectionId);
+    if (pluginDialect) return pluginDialect;
+  }
+
+  // 2. Core types + fallback for plugin-registered types
   switch (dbType) {
     case "postgres": return "PostgresQL";
     case "mysql": return "MySQL";
-    // node-sql-parser v5 has no ClickHouse dialect. PostgreSQL mode is the
-    // closest match for ClickHouse SELECT syntax (CTEs, JOINs, subqueries).
-    case "clickhouse": return "PostgresQL";
-    case "snowflake": return "Snowflake";
-    // DuckDB's SQL dialect is PostgreSQL-compatible. PostgreSQL mode handles
-    // CTEs, JOINs, subqueries, window functions, and standard SQL syntax.
-    case "duckdb": return "PostgresQL";
-    case "salesforce":
-      throw new Error(
-        "Salesforce uses SOQL, not SQL. Use the querySalesforce tool instead of executeSQL.",
+    default:
+      // Unknown types (plugin-registered via `string & {}`) default to
+      // PostgreSQL mode as a safe fallback. Log a warning so plugin authors
+      // know to register a parserDialect via ConnectionPluginMeta.
+      log.warn(
+        { dbType, connectionId },
+        "No parser dialect registered for dbType '%s' — falling back to PostgreSQL parser. " +
+        "Register a parserDialect via ConnectionPluginMeta to use the correct SQL grammar.",
+        dbType,
       );
-    default: {
-      const _exhaustive: never = dbType;
-      throw new Error(`Unknown database type: ${_exhaustive}`);
-    }
+      return "PostgresQL";
   }
 }
 
-function getExtraPatterns(dbType: DBType): RegExp[] {
+/**
+ * Get extra forbidden patterns for a connection.
+ *
+ * When a connectionId is provided, plugin-registered patterns are checked first.
+ * Falls back to the hardcoded arrays for known types, and returns an empty
+ * array for unknown/custom dbType strings.
+ */
+function getExtraPatterns(dbType: DBType | string, connectionId?: string): RegExp[] {
+  // 1. Plugin metadata takes precedence
+  if (connectionId) {
+    const pluginPatterns = connections.getForbiddenPatterns(connectionId);
+    if (pluginPatterns.length > 0) return pluginPatterns;
+  }
+
+  // 2. Core types + fallback for plugin-registered types
   switch (dbType) {
     case "postgres": return [];
     case "mysql": return MYSQL_FORBIDDEN_PATTERNS;
-    case "clickhouse": return CLICKHOUSE_FORBIDDEN_PATTERNS;
-    case "snowflake": return SNOWFLAKE_FORBIDDEN_PATTERNS;
-    case "duckdb": return DUCKDB_FORBIDDEN_PATTERNS;
-    case "salesforce": return []; // Salesforce is redirected before reaching here
-    default: { const _exhaustive: never = dbType; throw new Error(`Unknown database type: ${_exhaustive}`); }
+    default:
+      // Unknown types (plugin-registered) — no extra patterns from core.
+      // Warn so plugin authors know to register forbiddenPatterns.
+      if (dbType) {
+        log.warn(
+          { dbType, connectionId },
+          "No forbidden patterns registered for dbType '%s' — only base DML/DDL patterns apply. " +
+          "Register forbiddenPatterns via ConnectionPluginMeta for database-specific protection.",
+          dbType,
+        );
+      }
+      return [];
   }
 }
 
@@ -128,29 +134,23 @@ export function validateSQL(sql: string, connectionId?: string): { valid: boolea
   // Resolve DB type for this connection.
   // When an explicit connectionId is given but not found, return a validation
   // error instead of silently falling back — wrong parser mode is a security risk.
-  let dbType: DBType;
+  let dbType: DBType | string;
   if (connectionId) {
     try {
       dbType = connections.getDBType(connectionId);
-    } catch {
+    } catch (err) {
+      log.debug({ err, connectionId }, "getDBType failed for connectionId");
       return { valid: false, error: `Connection "${connectionId}" is not registered.` };
     }
   } else {
     try {
       dbType = detectDBType();
-    } catch {
-      return { valid: false, error: "No valid datasource configured. Set ATLAS_DATASOURCE_URL to a PostgreSQL, MySQL, ClickHouse, Snowflake, DuckDB, or Salesforce connection string." };
+    } catch (err) {
+      log.debug({ err }, "detectDBType failed — no valid datasource configured");
+      return { valid: false, error: "No valid datasource configured. Set ATLAS_DATASOURCE_URL to a PostgreSQL or MySQL connection string, or register a datasource plugin." };
     }
   }
 
-  // Salesforce uses SOQL — redirect to the querySalesforce tool
-  if (dbType === "salesforce") {
-    return {
-      valid: false,
-      error: "This connection uses Salesforce (SOQL). Use the querySalesforce tool instead of executeSQL.",
-    };
-  }
-
   // 0. Reject empty / whitespace-only input
   const trimmed = sql.trim().replace(/;\s*$/, "");
   if (!trimmed) {
@@ -158,10 +158,14 @@ export function validateSQL(sql: string, connectionId?: string): { valid: boolea
   }
 
   // 1. Regex guard against mutation keywords
-  const extraPatterns = getExtraPatterns(dbType);
+  //
+  // Strip comments before testing so that leading block/line comments
+  // cannot bypass start-of-string anchored patterns (e.g. `/* x */ KILL ...`).
+  const forRegex = stripSqlComments(trimmed);
+  const extraPatterns = getExtraPatterns(dbType, connectionId);
   const patterns = [...FORBIDDEN_PATTERNS, ...extraPatterns];
   for (const pattern of patterns) {
-    if (pattern.test(trimmed)) {
+    if (pattern.test(forRegex)) {
       return {
         valid: false,
         error: `Forbidden SQL operation detected: ${pattern.source}`,
@@ -177,7 +181,7 @@ export function validateSQL(sql: string, connectionId?: string): { valid: boolea
   // attempt. The agent can always reformulate into standard SQL that parses.
   const cteNames = new Set<string>();
   try {
-    const ast = parser.astify(trimmed, { database: parserDatabase(dbType) });
+    const ast = parser.astify(trimmed, { database: parserDatabase(dbType, connectionId) });
     const statements = Array.isArray(ast) ? ast : [ast];
 
     // Single-statement check — reject batched queries
@@ -192,7 +196,8 @@ export function validateSQL(sql: string, connectionId?: string): { valid: boolea
           error: `Only SELECT statements are allowed, got: ${stmt.type}`,
         };
       }
-      // Collect CTE names so the table whitelist can ignore them
+      // CTE extraction: node-sql-parser doesn't expose .with in its type definitions,
+      // but the property exists at runtime for SELECT statements with CTEs.
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       if (Array.isArray((stmt as any).with)) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -204,21 +209,16 @@ export function validateSQL(sql: string, connectionId?: string): { valid: boolea
     }
   } catch (err) {
     const detail = err instanceof Error ? err.message : "";
-    const hint = dbType === "clickhouse"
-      ? " Note: ClickHouse-specific syntax (PREWHERE, LIMIT BY, arrayJoin) is not supported by the SQL validator. Use standard SQL equivalents."
-      : dbType === "duckdb"
-        ? " Note: DuckDB-specific syntax (QUALIFY, EXCLUDE, REPLACE, STRUCT literals) may not be supported by the SQL validator. Use standard SQL equivalents."
-        : "";
     return {
       valid: false,
-      error: `Query could not be parsed.${detail ? ` ${detail}.` : ""} Rewrite using standard SQL syntax.${hint}`,
+      error: `Query could not be parsed.${detail ? ` ${detail}.` : ""} Rewrite using standard SQL syntax.`,
     };
   }
 
   // 3. Table whitelist check
   if (process.env.ATLAS_TABLE_WHITELIST !== "false") {
     try {
-      const tables = parser.tableList(trimmed, { database: parserDatabase(dbType) });
+      const tables = parser.tableList(trimmed, { database: parserDatabase(dbType, connectionId) });
       const allowed = getWhitelistedTables(connectionId);
 
       for (const ref of tables) {
@@ -515,7 +515,7 @@ Rules:
       // Extract tables from the (possibly plugin-mutated) SQL
       let queriedTables: Set<string>;
       try {
-        const dialect = parserDatabase(dbType);
+        const dialect = parserDatabase(dbType, connId);
         const tableRefs = parser.tableList(normalizedMutated, { database: dialect });
         queriedTables = new Set(
           tableRefs

package/templates/docker/src/types/vercel-sandbox.d.ts

@@ -39,6 +39,12 @@ declare module "@vercel/sandbox" {
     stderr(): Promise<string>;
   }
 
+  /** Network policy update — replaces the current firewall configuration. */
+  type NetworkPolicyUpdate =
+    | "deny-all"
+    | "allow-all"
+    | { allow?: string[] | Record<string, unknown>; subnets?: { allow?: string[]; deny?: string[] } };
+
   class Sandbox {
     static create(opts?: SandboxCreateOptions): Promise<Sandbox>;
     mkDir(path: string): Promise<void>;
@@ -49,6 +55,7 @@ declare module "@vercel/sandbox" {
       args?: string[],
       opts?: { signal?: AbortSignal }
     ): Promise<CommandFinished>;
+    updateNetworkPolicy(policy: NetworkPolicyUpdate): Promise<void>;
     stop(): Promise<Sandbox>;
   }
 }

package/templates/docker/src/ui/components/admin/admin-layout.tsx

@@ -1,26 +1,95 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import type { ReactNode } from "react";
 import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar";
 import { Separator } from "@/components/ui/separator";
 import { AdminSidebar } from "./admin-sidebar";
-
-// TODO: Add real role gating once admin API enforces auth.
-// For now, all users can access the admin console — the admin API
-// endpoints will reject unauthorized requests server-side.
+import { useAtlasConfig } from "@/ui/context";
+import { ManagedAuthCard } from "@/ui/components/chat/managed-auth-card";
+import { LoadingState } from "./loading-state";
+import { ChangePasswordDialog } from "./change-password-dialog";
 
 export function AdminLayout({ children }: { children: ReactNode }) {
+  const { authClient, apiUrl, isCrossOrigin } = useAtlasConfig();
+  const session = authClient.useSession();
+  const [passwordChangeRequired, setPasswordChangeRequired] = useState(false);
+
+  const credentials: RequestCredentials = isCrossOrigin ? "include" : "same-origin";
+
+  // Check if password change is required after session loads
+  useEffect(() => {
+    if (!session.data?.user) return;
+
+    async function checkPasswordStatus() {
+      try {
+        const res = await fetch(`${apiUrl}/api/v1/admin/me/password-status`, { credentials });
+        if (!res.ok) return;
+        const data = await res.json();
+        if (data.passwordChangeRequired) setPasswordChangeRequired(true);
+      } catch {
+        // Non-critical — skip silently
+      }
+    }
+    checkPasswordStatus();
+  }, [session.data?.user, apiUrl, credentials]);
+
+  // Loading session
+  if (session.isPending) {
+    return (
+      <div className="flex h-dvh items-center justify-center">
+        <LoadingState message="Checking authentication..." />
+      </div>
+    );
+  }
+
+  // Not signed in
+  if (!session.data?.user) {
+    return <ManagedAuthCard />;
+  }
+
+  // Signed in but not admin
+  const role = (session.data.user as Record<string, unknown>).role;
+  if (role !== "admin") {
+    return (
+      <div className="flex h-dvh items-center justify-center">
+        <div className="w-full max-w-sm space-y-3 rounded-lg border border-zinc-200 bg-zinc-50 p-6 text-center dark:border-zinc-700 dark:bg-zinc-900">
+          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+            Access Denied
+          </h2>
+          <p className="text-sm text-zinc-500 dark:text-zinc-400">
+            The admin console requires the <strong>admin</strong> role. You are signed in
+            as <strong>{session.data.user.email}</strong> with role <strong>{String(role ?? "viewer")}</strong>.
+          </p>
+          <button
+            onClick={() => authClient.signOut()}
+            className="mt-2 rounded-lg bg-zinc-200 px-4 py-2 text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-100 dark:hover:bg-zinc-600"
+          >
+            Sign out
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <SidebarProvider>
       <AdminSidebar />
       <SidebarInset>
-        <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
-          <SidebarTrigger className="-ml-1" />
-          <Separator orientation="vertical" className="mr-2 h-4" />
-          <span className="text-sm font-medium text-muted-foreground">Admin Console</span>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <span className="text-sm font-medium text-muted-foreground">Admin Console</span>
+          </div>
         </header>
         <div className="flex-1 overflow-auto">{children}</div>
       </SidebarInset>
+
+      <ChangePasswordDialog
+        open={passwordChangeRequired}
+        onComplete={() => setPasswordChangeRequired(false)}
+      />
     </SidebarProvider>
   );
 }

package/templates/docker/src/ui/components/admin/admin-sidebar.tsx

@@ -7,6 +7,7 @@ import {
   Database,
   Cable,
   ScrollText,
+  Users,
   Puzzle,
   CalendarClock,
   Zap,
@@ -23,7 +24,7 @@ import {
   SidebarMenuItem,
   SidebarMenuButton,
   SidebarFooter,
-  SidebarSeparator,
+  SidebarRail,
 } from "@/components/ui/sidebar";
 
 const navItems = [
@@ -31,6 +32,7 @@ const navItems = [
   { href: "/admin/semantic", label: "Semantic Layer", icon: Database },
   { href: "/admin/connections", label: "Connections", icon: Cable },
   { href: "/admin/audit", label: "Audit", icon: ScrollText },
+  { href: "/admin/users", label: "Users", icon: Users },
   { href: "/admin/plugins", label: "Plugins", icon: Puzzle },
   { href: "/admin/scheduled-tasks", label: "Scheduled Tasks", icon: CalendarClock },
   { href: "/admin/actions", label: "Actions", icon: Zap },
@@ -45,20 +47,26 @@ export function AdminSidebar() {
   }
 
   return (
-    <Sidebar>
-      <SidebarHeader className="px-3 pt-4 pb-2">
-        <div className="flex items-center gap-2.5">
-          <svg viewBox="0 0 256 256" fill="none" className="size-6 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>
-          <div>
-            <p className="text-sm font-semibold leading-none tracking-tight">Atlas</p>
-            <p className="text-xs text-muted-foreground">Admin Console</p>
-          </div>
-        </div>
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <Link href="/admin">
+                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  <svg viewBox="0 0 256 256" fill="none" className="size-4" aria-hidden="true">
+                    <path d="M128 24 L232 208 L24 208 Z" stroke="currentColor" strokeWidth="20" fill="none" strokeLinejoin="round" />
+                  </svg>
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">Atlas</span>
+                  <span className="truncate text-xs">Admin Console</span>
+                </div>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
       </SidebarHeader>
-      <SidebarSeparator />
       <SidebarContent>
         <SidebarGroup>
           <SidebarGroupLabel>Navigation</SidebarGroupLabel>
@@ -68,7 +76,7 @@ export function AdminSidebar() {
                 <SidebarMenuItem key={item.href}>
                   <SidebarMenuButton asChild isActive={isActive(item)} tooltip={item.label}>
                     <Link href={item.href}>
-                      <item.icon className="size-4" />
+                      <item.icon />
                       <span>{item.label}</span>
                     </Link>
                   </SidebarMenuButton>
@@ -79,18 +87,18 @@ export function AdminSidebar() {
         </SidebarGroup>
       </SidebarContent>
       <SidebarFooter>
-        <SidebarSeparator />
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton asChild tooltip="Back to Chat">
               <Link href="/">
-                <ArrowLeft className="size-4" />
+                <ArrowLeft />
                 <span>Back to Chat</span>
               </Link>
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarFooter>
+      <SidebarRail />
     </Sidebar>
   );
 }

package/templates/docker/src/ui/components/admin/change-password-dialog.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useAtlasConfig } from "@/ui/context";
+
+export function ChangePasswordDialog({
+  open,
+  onComplete,
+}: {
+  open: boolean;
+  onComplete: () => void;
+}) {
+  const { apiUrl, isCrossOrigin } = useAtlasConfig();
+  const credentials: RequestCredentials = isCrossOrigin ? "include" : "same-origin";
+
+  const [currentPassword, setCurrentPassword] = useState("atlas-dev");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+
+    if (newPassword.length < 8) {
+      setError("Password must be at least 8 characters.");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+    if (newPassword === currentPassword) {
+      setError("New password must be different from current password.");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiUrl}/api/v1/admin/me/password`, {
+        method: "POST",
+        credentials,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ currentPassword, newPassword }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        setError(data.message ?? `Failed (HTTP ${res.status})`);
+        return;
+      }
+
+      onComplete();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to change password");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <AlertDialog open={open}>
+      <AlertDialogContent className="sm:max-w-md" onEscapeKeyDown={(e) => e.preventDefault()}>
+        <form onSubmit={handleSubmit}>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Change your password</AlertDialogTitle>
+            <AlertDialogDescription>
+              You&apos;re using the default dev password. Please set a new password to continue.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <div className="space-y-3 py-4">
+            <div className="space-y-1">
+              <label className="text-xs font-medium text-muted-foreground">Current password</label>
+              <Input
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                required
+              />
+            </div>
+            <div className="space-y-1">
+              <label className="text-xs font-medium text-muted-foreground">New password</label>
+              <Input
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                required
+                minLength={8}
+                placeholder="At least 8 characters"
+              />
+            </div>
+            <div className="space-y-1">
+              <label className="text-xs font-medium text-muted-foreground">Confirm new password</label>
+              <Input
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+                minLength={8}
+              />
+            </div>
+            {error && (
+              <p className="text-xs text-red-600 dark:text-red-400">{error}</p>
+            )}
+          </div>
+
+          <AlertDialogFooter>
+            <Button type="submit" disabled={loading}>
+              {loading ? "Changing..." : "Change password"}
+            </Button>
+          </AlertDialogFooter>
+        </form>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/templates/docker/src/ui/components/admin/entity-detail.tsx

@@ -62,7 +62,7 @@ function normalizeList<T>(
   keyName: string,
 ): (T & Record<string, unknown>)[] {
   if (!data) return [];
-  if (Array.isArray(data)) return data;
+  if (Array.isArray(data)) return data as (T & Record<string, unknown>)[];
   return Object.entries(data).map(([key, value]) => ({ ...value, [keyName]: key }));
 }
 
@@ -211,8 +211,8 @@ export function EntityDetail({ entity }: { entity: EntityData }) {
           <section>
             <h3 className="mb-3 text-sm font-semibold">Query Patterns ({patterns.length})</h3>
             <div className="space-y-3">
-              {patterns.map((p) => (
-                <Card key={p.name} className="shadow-none">
+              {patterns.map((p, i) => (
+                <Card key={`${p.name}-${i}`} className="shadow-none">
                   <CardHeader className="py-3 pb-2">
                     <CardTitle className="text-sm">{p.name}</CardTitle>
                     <p className="text-xs text-muted-foreground">{p.description}</p>