@useatlas/create 0.0.5 → 0.0.7

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

@@ -4,78 +4,96 @@ 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 { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ShieldX } from "lucide-react";
+import Link from "next/link";
 import { AdminSidebar } from "./admin-sidebar";
 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 [adminCheck, setAdminCheck] = useState<"pending" | "allowed" | "denied">("pending");
   const [passwordChangeRequired, setPasswordChangeRequired] = useState(false);
 
   const credentials: RequestCredentials = isCrossOrigin ? "include" : "same-origin";
 
-  // Check if password change is required after session loads
+  // Verify admin access by calling the backend, which resolves the effective
+  // role (user-level + org member role). This is the source of truth.
+  // Unauthenticated users never reach here — the proxy redirects them.
   useEffect(() => {
     if (!session.data?.user) return;
 
-    async function checkPasswordStatus() {
+    async function checkAdminAccess() {
       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);
+        if (res.ok) {
+          setAdminCheck("allowed");
+          const data = await res.json();
+          if (data.passwordChangeRequired) setPasswordChangeRequired(true);
+        } else {
+          setAdminCheck("denied");
+        }
       } catch {
-        // Non-critical — skip silently
+        setAdminCheck("denied");
       }
     }
-    checkPasswordStatus();
+    checkAdminAccess();
   }, [session.data?.user, apiUrl, credentials]);
 
-  // Loading session
-  if (session.isPending) {
+  // Loading session (proxy already handled unauthenticated)
+  if (session.isPending || adminCheck === "pending") {
     return (
-      <div className="flex h-dvh items-center justify-center">
-        <LoadingState message="Checking authentication..." />
-      </div>
+      <main id="main" tabIndex={-1} className="flex h-dvh items-center justify-center">
+        <LoadingState message="Checking access..." />
+      </main>
     );
   }
 
-  // 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") {
+  // Signed in but not admin — inline forbidden UI using shadcn
+  if (adminCheck === "denied") {
     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>
+      <main id="main" tabIndex={-1} className="flex h-dvh items-center justify-center bg-background p-4">
+        <Card className="w-full max-w-sm">
+          <CardHeader className="text-center">
+            <div className="mx-auto mb-2 flex size-12 items-center justify-center rounded-lg bg-destructive/10">
+              <ShieldX className="size-6 text-destructive" />
+            </div>
+            <CardTitle className="text-2xl">Access denied</CardTitle>
+            <CardDescription>
+              The admin console requires the admin role.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <Button asChild variant="outline" className="w-full">
+              <Link href="/">Back to chat</Link>
+            </Button>
+            <Button
+              variant="ghost"
+              className="w-full"
+              onClick={() => authClient.signOut().then(() => window.location.assign("/login"))}
+            >
+              Sign in as a different user
+            </Button>
+          </CardContent>
+        </Card>
+      </main>
     );
   }
 
   return (
     <SidebarProvider>
       <AdminSidebar />
-      <SidebarInset>
+      <SidebarInset id="main" tabIndex={-1}>
         <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" />

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

@@ -2,16 +2,20 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useUserRole } from "@/ui/hooks/use-platform-admin-guard";
+import { useBranding } from "@/ui/hooks/use-branding";
+import type { LucideIcon } from "lucide-react";
 import {
+  ArrowLeft,
+  ChevronRight,
   LayoutDashboard,
   Database,
-  Cable,
-  ScrollText,
   Users,
-  Puzzle,
-  CalendarClock,
-  Zap,
-  ArrowLeft,
+  BarChart3,
+  Brain,
+  Settings,
+  Shield,
+  Globe,
 } from "lucide-react";
 import {
   Sidebar,
@@ -23,29 +27,154 @@ import {
   SidebarMenu,
   SidebarMenuItem,
   SidebarMenuButton,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
   SidebarFooter,
   SidebarRail,
 } from "@/components/ui/sidebar";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+
+// ---------------------------------------------------------------------------
+// Nav data
+// ---------------------------------------------------------------------------
+
+interface NavSubItem {
+  href: string;
+  label: string;
+  /** When true, only highlight on exact pathname match (no prefix matching). */
+  exact?: boolean;
+  /** When set, only users with this role see this item. */
+  requiredRole?: "platform_admin";
+}
 
-const navItems = [
-  { href: "/admin", label: "Overview", icon: LayoutDashboard, exact: true },
-  { 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 },
+interface NavGroup {
+  title: string;
+  icon: LucideIcon;
+  items: NavSubItem[];
+  requiredRole?: "platform_admin";
+}
+
+const navGroups: NavGroup[] = [
+  {
+    title: "Data",
+    icon: Database,
+    items: [
+      { href: "/admin/semantic", label: "Semantic Layer" },
+      { href: "/admin/schema-diff", label: "Schema Diff" },
+      { href: "/admin/connections", label: "Connections" },
+      { href: "/admin/cache", label: "Cache" },
+    ],
+  },
+  {
+    title: "Intelligence",
+    icon: Brain,
+    items: [
+      { href: "/admin/model-config", label: "AI Provider", requiredRole: "platform_admin" },
+      { href: "/admin/learned-patterns", label: "Learned Patterns" },
+      { href: "/admin/prompts", label: "Prompt Library" },
+      { href: "/admin/actions", label: "Actions" },
+    ],
+  },
+  {
+    title: "Users & Access",
+    icon: Users,
+    items: [
+      { href: "/admin/users", label: "Users" },
+      { href: "/admin/organizations", label: "Organizations", requiredRole: "platform_admin" },
+      { href: "/admin/roles", label: "Roles" },
+      { href: "/admin/sessions", label: "Sessions" },
+      { href: "/admin/api-keys", label: "API Keys" },
+    ],
+  },
+  {
+    title: "Security",
+    icon: Shield,
+    items: [
+      { href: "/admin/sso", label: "SSO" },
+      { href: "/admin/scim", label: "SCIM" },
+      { href: "/admin/ip-allowlist", label: "IP Allowlist" },
+      { href: "/admin/abuse", label: "Abuse Prevention", requiredRole: "platform_admin" },
+      { href: "/admin/approval", label: "Approval Workflows" },
+      { href: "/admin/compliance", label: "PII Compliance" },
+    ],
+  },
+  {
+    title: "Monitoring",
+    icon: BarChart3,
+    items: [
+      { href: "/admin/audit", label: "Audit Log" },
+      { href: "/admin/token-usage", label: "Token Usage" },
+      { href: "/admin/usage", label: "Usage" },
+      { href: "/admin/scheduled-tasks", label: "Scheduled Tasks" },
+    ],
+  },
+  {
+    title: "Configuration",
+    icon: Settings,
+    items: [
+      { href: "/admin/plugins", label: "Plugins" },
+      { href: "/admin/integrations", label: "Integrations" },
+      { href: "/admin/billing", label: "Billing" },
+      { href: "/admin/branding", label: "Branding" },
+      { href: "/admin/custom-domain", label: "Custom Domain" },
+      { href: "/admin/sandbox", label: "Sandbox" },
+      { href: "/admin/residency", label: "Data Residency" },
+      { href: "/admin/settings", label: "Settings" },
+    ],
+  },
+  {
+    title: "Platform",
+    icon: Globe,
+    requiredRole: "platform_admin",
+    items: [
+      { href: "/admin/platform", label: "Overview", exact: true },
+      { href: "/admin/platform/sla", label: "SLA Monitoring" },
+      { href: "/admin/platform/backups", label: "Backups" },
+      { href: "/admin/platform/residency", label: "Data Residency" },
+      { href: "/admin/platform/domains", label: "Custom Domains" },
+    ],
+  },
 ];
 
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
 export function AdminSidebar() {
   const pathname = usePathname();
+  const userRole = useUserRole();
+  const { branding } = useBranding();
 
-  function isActive(item: (typeof navItems)[number]) {
+  function isSubItemActive(item: NavSubItem) {
     if (item.exact) return pathname === item.href;
-    return pathname.startsWith(item.href);
+    return pathname === item.href || pathname.startsWith(item.href + "/");
+  }
+
+  function isGroupActive(group: NavGroup) {
+    return group.items.some((item) => isSubItemActive(item));
   }
 
+  const visibleGroups = navGroups
+    .filter((group) => !group.requiredRole || group.requiredRole === userRole)
+    .map((group) => ({
+      ...group,
+      items: group.items.filter(
+        (item) => !item.requiredRole || item.requiredRole === userRole,
+      ),
+    }))
+    .filter((group) => group.items.length > 0);
+
+  const showCustomLogo = branding?.logoUrl;
+  const headerTitle = branding?.hideAtlasBranding
+    ? (branding.logoText || "Admin")
+    : (branding?.logoText || "Atlas");
+  const headerSubtitle = branding?.hideAtlasBranding ? "" : "Admin Console";
+
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader>
@@ -53,39 +182,88 @@ export function AdminSidebar() {
           <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>
+                {showCustomLogo ? (
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={showCustomLogo as string}
+                      alt=""
+                      className="size-5 object-contain"
+                    />
+                  </div>
+                ) : (
+                  <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>
+                  <span className="truncate font-semibold">{headerTitle}</span>
+                  {headerSubtitle && <span className="truncate text-xs">{headerSubtitle}</span>}
                 </div>
               </Link>
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarHeader>
+
       <SidebarContent>
+        {/* Overview — always visible, no group wrapper */}
         <SidebarGroup>
-          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
-              {navItems.map((item) => (
-                <SidebarMenuItem key={item.href}>
-                  <SidebarMenuButton asChild isActive={isActive(item)} tooltip={item.label}>
-                    <Link href={item.href}>
-                      <item.icon />
-                      <span>{item.label}</span>
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild isActive={pathname === "/admin"} tooltip="Overview">
+                  <Link href="/admin">
+                    <LayoutDashboard />
+                    <span>Overview</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
+
+        {/* Collapsible nav groups */}
+        <SidebarGroup>
+          <SidebarGroupLabel>Manage</SidebarGroupLabel>
+          <SidebarMenu>
+            {visibleGroups.map((group) => (
+              <Collapsible
+                key={group.title}
+                asChild
+                defaultOpen={isGroupActive(group)}
+                className="group/collapsible"
+              >
+                <SidebarMenuItem>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuButton tooltip={group.title}>
+                      <group.icon />
+                      <span>{group.title}</span>
+                      <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {group.items.map((item) => (
+                        <SidebarMenuSubItem key={item.href}>
+                          <SidebarMenuSubButton asChild isActive={isSubItemActive(item)}>
+                            <Link href={item.href}>
+                              <span>{item.label}</span>
+                            </Link>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              </Collapsible>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
       </SidebarContent>
+
       <SidebarFooter>
         <SidebarMenu>
           <SidebarMenuItem>

package/templates/docker/src/ui/components/admin/delivery-status-badge.tsx

@@ -0,0 +1,53 @@
+import { Badge } from "@/components/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { CheckCircle2, XCircle, Clock } from "lucide-react";
+
+export function DeliveryStatusBadge({ status, error }: { status: string | null; error: string | null }) {
+  if (!status) return <span className="text-xs text-muted-foreground">—</span>;
+
+  const badge = (() => {
+    switch (status) {
+      case "sent":
+        return (
+          <Badge variant="secondary" className="gap-1 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
+            <CheckCircle2 className="size-3" />
+            sent
+          </Badge>
+        );
+      case "failed":
+        return (
+          <Badge variant="destructive" className="gap-1">
+            <XCircle className="size-3" />
+            failed
+          </Badge>
+        );
+      default:
+        return (
+          <Badge variant="outline" className="gap-1">
+            <Clock className="size-3" />
+            {status}
+          </Badge>
+        );
+    }
+  })();
+
+  if (status === "failed" && error) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{badge}</TooltipTrigger>
+          <TooltipContent side="top" className="max-w-xs">
+            <p className="text-xs">{error}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return badge;
+}

package/templates/docker/src/ui/components/admin/empty-state.tsx

@@ -2,21 +2,42 @@
 
 import type { LucideIcon } from "lucide-react";
 import type { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+
+type EmptyStateProps = {
+  icon: LucideIcon;
+  description?: string;
+  action?: { label: string; onClick: () => void };
+  children?: ReactNode;
+} & ({ title: string; message?: string } | { title?: never; /** @deprecated Use `title` instead */ message: string });
 
 export function EmptyState({
   icon: Icon,
+  title,
+  description,
   message,
+  action,
   children,
-}: {
-  icon: LucideIcon;
-  message: string;
-  children?: ReactNode;
-}) {
+}: EmptyStateProps) {
+  const heading = title ?? message;
   return (
     <div className="flex h-64 items-center justify-center text-muted-foreground">
       <div className="text-center">
         <Icon className="mx-auto size-10 opacity-50" />
-        <p className="mt-3 text-sm">{message}</p>
+        {heading && <p className="mt-3 text-sm font-medium">{heading}</p>}
+        {description && (
+          <p className="mt-1 text-xs text-muted-foreground">{description}</p>
+        )}
+        {action && (
+          <Button
+            variant="link"
+            size="xs"
+            onClick={action.onClick}
+            className="mt-3"
+          >
+            {action.label}
+          </Button>
+        )}
         {children}
       </div>
     </div>

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

@@ -12,59 +12,10 @@ import {
 } from "@/components/ui/table";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
+import type { Dimension, Join, Measure, QueryPattern, EntityData } from "@/ui/lib/types";
+import { normalizeList } from "@/ui/lib/helpers";
 
-export interface Dimension {
-  name: string;
-  type: string;
-  description?: string;
-  sample_values?: string[];
-  primary_key?: boolean;
-  foreign_key?: boolean;
-}
-
-export interface Join {
-  to: string;
-  description?: string;
-  relationship?: string;
-  on?: string;
-}
-
-export interface Measure {
-  name: string;
-  sql: string;
-  type?: string;
-  description?: string;
-}
-
-export interface QueryPattern {
-  name: string;
-  description: string;
-  sql: string;
-}
-
-export interface EntityData {
-  name: string;
-  table: string;
-  description: string;
-  type?: "table" | "view";
-  dimensions: Record<string, Dimension> | Dimension[];
-  joins?: Join[] | Record<string, Join>;
-  measures?: Record<string, Measure> | Measure[];
-  query_patterns?: Record<string, QueryPattern> | QueryPattern[];
-}
-
-/**
- * Normalize a record-or-array field from the API into a flat array.
- * When the data is a Record, the key is merged in under `keyName`.
- */
-function normalizeList<T>(
-  data: Record<string, T> | T[] | undefined,
-  keyName: string,
-): (T & Record<string, unknown>)[] {
-  if (!data) return [];
-  if (Array.isArray(data)) return data as (T & Record<string, unknown>)[];
-  return Object.entries(data).map(([key, value]) => ({ ...value, [keyName]: key }));
-}
+export type { EntityData };
 
 export function EntityDetail({ entity }: { entity: EntityData }) {
   const dimensions = normalizeList(entity.dimensions, "name") as Dimension[];

package/templates/docker/src/ui/components/admin/error-banner.tsx

@@ -10,8 +10,8 @@ export function ErrorBanner({
   onRetry?: () => void;
 }) {
   return (
-    <div className="m-6 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 flex items-center justify-between gap-4">
-      <p className="text-sm text-destructive">{message}</p>
+    <div role="alert" className="rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 flex items-center justify-between gap-4">
+      <p className="text-sm text-red-800 dark:text-red-300">{message}</p>
       {onRetry && (
         <Button variant="outline" size="sm" onClick={onRetry} className="shrink-0">
           Retry

package/templates/docker/src/ui/components/admin/feature-disabled.tsx

@@ -1,25 +1,48 @@
 "use client";
 
-import { Ban, ShieldX } from "lucide-react";
+import { Ban, DatabaseZap, ShieldX } from "lucide-react";
 
 /**
- * Shown when an admin page gets a 403 (no admin role) or 404 (feature not enabled).
+ * Shown when an admin page gets a 401/403/404/503 status.
+ *
+ * Evaluation order (matches code):
+ * - 503 → internal database not configured (DATABASE_URL missing)
+ * - 404 → feature not enabled (enterprise config)
+ * - 401 → authentication required
+ * - 403 → insufficient role
  */
 export function FeatureGate({
   status,
   feature,
+  message,
 }: {
-  status: 401 | 403 | 404;
+  status: 401 | 403 | 404 | 503;
   feature: string;
+  /** Optional override for the description text. */
+  message?: string;
 }) {
+  if (status === 503) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="text-center">
+          <DatabaseZap className="mx-auto size-10 text-muted-foreground/50" />
+          <p className="mt-3 text-sm font-medium">Internal database not configured</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Set DATABASE_URL to enable {feature}.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   if (status === 404) {
     return (
       <div className="flex h-full items-center justify-center">
         <div className="text-center">
           <Ban className="mx-auto size-10 text-muted-foreground/50" />
           <p className="mt-3 text-sm font-medium">{feature} not enabled</p>
-          <p className="mt-1 text-xs text-muted-foreground">
-            Enable this feature in your server configuration to use this page.
+          <p className="mt-1 max-w-sm text-xs text-muted-foreground">
+            {message ?? "Enable this feature in your server configuration to use this page."}
           </p>
         </div>
       </div>