@flaredev/cli 0.12.2 → 0.13.0

package/templates/app/components/dashboard/user-actions.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { BanIcon, MoreHorizontalIcon, ShieldIcon, UserPlusIcon } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import { createUserAction, setBannedAction, setRoleAction, type UserActionResult } from "@/app/dashboard/users/actions";
+
+/**
+ * The management side of the users page: make an account, change a role, ban.
+ *
+ * Everything here calls the same Better Auth admin API the CLI uses, so an account made
+ * from this dialog and one made with `flare user:add` are indistinguishable.
+ *
+ * The well-known roles get one-click entries; anything else is typed, because a role is
+ * just a string your policies name — inventing one here is how you "add a role".
+ */
+const KNOWN_ROLES = ["admin", "staff", "user"];
+
+export function CreateUserButton() {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [pending, startTransition] = useTransition();
+
+  const submit = (form: FormData) => {
+    startTransition(async () => {
+      const result = await createUserAction({
+        name: String(form.get("name") ?? ""),
+        email: String(form.get("email") ?? ""),
+        password: String(form.get("password") ?? ""),
+        role: String(form.get("role") ?? "user"),
+      });
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      toast.success("Account created. They can sign in now.");
+      setOpen(false);
+      router.refresh();
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <UserPlusIcon data-icon="inline-start" />
+          New user
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>New user</DialogTitle>
+          <DialogDescription>Usable immediately — send them the password and have them change it.</DialogDescription>
+        </DialogHeader>
+        <form action={submit} className="flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="new-user-name">Name</Label>
+            <Input id="new-user-name" name="name" required autoComplete="off" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="new-user-email">Email</Label>
+            <Input id="new-user-email" name="email" type="email" required autoComplete="off" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="new-user-password">Password</Label>
+            <Input id="new-user-password" name="password" type="text" required minLength={8} autoComplete="off" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="new-user-role">Role</Label>
+            <Input id="new-user-role" name="role" defaultValue="user" list="known-roles" />
+            <datalist id="known-roles">
+              {KNOWN_ROLES.map((role) => (
+                <option key={role} value={role} />
+              ))}
+            </datalist>
+            <p className="text-xs text-muted-foreground">Type anything: a new role exists the moment a policy names it.</p>
+          </div>
+          <DialogFooter>
+            <Button type="submit" disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Create account
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function UserRowMenu({ userId, role, banned }: { userId: string; role: string; banned: boolean }) {
+  const router = useRouter();
+  const [pending, startTransition] = useTransition();
+
+  const run = (work: () => Promise<UserActionResult>, done: string) => {
+    startTransition(async () => {
+      const result = await work();
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      toast.success(done);
+      router.refresh();
+    });
+  };
+
+  const setRole = (next: string) => run(() => setRoleAction({ userId, role: next }), `Role is now ${next}.`);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" aria-label="Manage this account" disabled={pending}>
+          {pending ? <Spinner /> : <MoreHorizontalIcon />}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        <DropdownMenuLabel className="flex items-center gap-2 text-xs font-normal text-muted-foreground">
+          <ShieldIcon className="size-3.5" />
+          Role
+        </DropdownMenuLabel>
+        <DropdownMenuGroup>
+          {KNOWN_ROLES.map((option) => (
+            <DropdownMenuItem key={option} disabled={option === role} onSelect={() => setRole(option)}>
+              {option}
+            </DropdownMenuItem>
+          ))}
+          <DropdownMenuItem
+            onSelect={() => {
+              const next = window.prompt("Role (lowercase letters, digits, _ or -):", role);
+              if (next && next !== role) setRole(next);
+            }}
+          >
+            Something else…
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            variant={banned ? undefined : "destructive"}
+            onSelect={() => run(() => setBannedAction({ userId, banned: !banned }), banned ? "Unbanned — they can sign in again." : "Banned. Their data stays; their way in doesn't.")}
+          >
+            <BanIcon />
+            {banned ? "Unban" : "Ban"}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/templates/app/components/dashboard/user-menu.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { KeyRoundIcon, LogOutIcon, MonitorSmartphoneIcon, ShieldCheckIcon, UserIcon } from "lucide-react";
+import { LogOutIcon, ShieldIcon, UserCircleIcon } from "lucide-react";
 import { authClient } from "@/lib/auth-client";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
@@ -36,8 +36,12 @@ export function UserAvatar({ user, className }: { user: DashboardUser; className
 /**
  * What's inside the account menu, wherever it's opened from — the header's avatar and
  * the sidebar's footer both show this, so there's one list of account actions, not two.
+ *
+ * Three entries, not a sitemap. Password, security and devices are tabs inside Account
+ * settings, so linking each of them here was the same door four times. "Manage roles"
+ * appears for the people who can use it.
  */
-export function UserMenuItems({ user }: { user: DashboardUser }) {
+export function UserMenuItems({ user, isAdmin = false }: { user: DashboardUser; isAdmin?: boolean }) {
   const signOut = async () => {
     await authClient.signOut();
     window.location.assign("/sign-in");
@@ -56,34 +60,24 @@ export function UserMenuItems({ user }: { user: DashboardUser }) {
       <DropdownMenuGroup>
         <DropdownMenuItem asChild>
           <Link href="/dashboard/account">
-            <UserIcon />
-            Profile
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Link href="/dashboard/account/password">
-            <KeyRoundIcon />
-            Password
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Link href="/dashboard/account/security">
-            <ShieldCheckIcon />
-            Security
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Link href="/dashboard/account/sessions">
-            <MonitorSmartphoneIcon />
-            Devices
+            <UserCircleIcon />
+            Account settings
           </Link>
         </DropdownMenuItem>
+        {isAdmin && (
+          <DropdownMenuItem asChild>
+            <Link href="/dashboard/users">
+              <ShieldIcon />
+              Manage roles
+            </Link>
+          </DropdownMenuItem>
+        )}
       </DropdownMenuGroup>
       <DropdownMenuSeparator />
       <DropdownMenuGroup>
         <DropdownMenuItem variant="destructive" onSelect={signOut}>
           <LogOutIcon />
-          Sign out
+          Log out
         </DropdownMenuItem>
       </DropdownMenuGroup>
     </>

package/templates/app/components/dashboard/users-table.tsx

@@ -0,0 +1,109 @@
+import { CheckCircle2Icon, MinusIcon } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { LocalTime } from "./local-time";
+import { UserAvatar } from "./user-menu";
+import { UserRowMenu } from "./user-actions";
+
+/**
+ * The accounts table, shared by both stacks: the page above it only decides where the
+ * rows come from (Prisma on Next.js, Drizzle on Cloudflare).
+ */
+export interface AccountRow {
+  id: string;
+  name: string;
+  email: string;
+  image?: string | null;
+  /** The admin plugin's default role is "user"; null means the same. */
+  role?: string | null;
+  banned?: boolean | null;
+  emailVerified: boolean;
+  twoFactorEnabled?: boolean | null;
+  createdAt: Date;
+}
+
+/** Roles that stand out: everything else is the ordinary "user" and stays quiet. */
+function roleTone(role: string): "default" | "secondary" {
+  return role === "admin" ? "default" : "secondary";
+}
+
+export function UsersTable({ rows, total, currentUserId }: { rows: AccountRow[]; total: number; currentUserId: string }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">Accounts</CardTitle>
+        <CardDescription>
+          {total.toLocaleString()} {total === 1 ? "account" : "accounts"}
+          {total > rows.length ? `, newest ${rows.length} shown` : ""}.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Who</TableHead>
+                <TableHead>Role</TableHead>
+                <TableHead>Verified</TableHead>
+                <TableHead>Two-factor</TableHead>
+                <TableHead className="text-right">Joined</TableHead>
+                <TableHead className="w-10" aria-label="Actions" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {rows.map((account) => (
+                <TableRow key={account.id}>
+                  <TableCell>
+                    <div className="flex items-center gap-3">
+                      <UserAvatar user={account} className="size-8 rounded-md" />
+                      <div className="grid min-w-0 leading-tight">
+                        <span className="truncate text-sm font-medium">{account.name || "—"}</span>
+                        <span className="truncate text-xs text-muted-foreground">{account.email}</span>
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {account.banned ? (
+                      <Badge variant="destructive">banned</Badge>
+                    ) : (
+                      <Badge variant={roleTone(account.role ?? "user")}>{account.role ?? "user"}</Badge>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {account.emailVerified ? (
+                      <CheckCircle2Icon aria-label="Email verified" className="size-4.5 text-success" />
+                    ) : (
+                      <MinusIcon aria-label="Not verified" className="size-4.5 text-muted-foreground" />
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {account.twoFactorEnabled ? (
+                      <CheckCircle2Icon aria-label="Two-factor on" className="size-4.5 text-success" />
+                    ) : (
+                      <MinusIcon aria-label="Two-factor off" className="size-4.5 text-muted-foreground" />
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right whitespace-nowrap text-muted-foreground tabular-nums">
+                    <LocalTime value={account.createdAt} />
+                  </TableCell>
+                  <TableCell>
+                    {/* Not on your own row: demoting or banning yourself is a lockout, not a feature. */}
+                    {account.id !== currentUserId && (
+                      <UserRowMenu userId={account.id} role={account.role ?? "user"} banned={Boolean(account.banned)} />
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+        <p className="mt-4 text-xs text-muted-foreground">
+          A role is a name your <a className="underline underline-offset-2" href="https://flare-docs.codetotech.com/guides/roles-and-policies/" target="_blank" rel="noreferrer">policies</a> give
+          meaning: <code>npx flare gen policy Contact --roles admin,staff</code> decides what each role may do. The terminal does all
+          of this too — <code>npx flare user:add</code>, <code>npx flare user:role</code> — and writes the same rows.
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/app/lib/api-docs.ts

@@ -4,7 +4,7 @@
  * request, so they always match the API.
  */
 export const apiDocs = {
-  title: "__APP_NAME__ API",
+  title: "__APP_TITLE__ API",
   description: "",
   version: "1.0.0",
   /**

package/templates/app/lib/auth.ts

@@ -194,7 +194,7 @@ async function promoteFirstUser() {
 }
 
 export const auth = betterAuth({
-  appName: "__APP_NAME__",
+  appName: "__APP_TITLE__",
   secret: env.BETTER_AUTH_SECRET,
   // Without BETTER_AUTH_URL, accept local dev on any port, a `flare dev --tunnel` URL and
   // this app's workers.dev host. Cloudflare only routes hosts this Worker serves, so a
@@ -265,7 +265,7 @@ export const auth = betterAuth({
     }),
     emailOTP({ sendVerificationOTP: (data) => sendEmailCode(data), otpLength: 6, expiresIn: 5 * 60, allowedAttempts: 5 }),
     twoFactor({
-      issuer: "__APP_NAME__",
+      issuer: "__APP_TITLE__",
       otpOptions: { sendOTP: ({ user, otp }) => sendTwoFactorCode({ user, otp }), allowedAttempts: 5 },
       // With only email codes switched on there's no authenticator app to confirm first.
       skipVerificationOnEnable: !authConfig.twoFactor.authenticator,
@@ -273,7 +273,7 @@ export const auth = betterAuth({
       // accounts that do have one must still give it.
       allowPasswordless: true,
     }),
-    passkey({ rpName: "__APP_NAME__" }),
+    passkey({ rpName: "__APP_TITLE__" }),
     // Must stay last: lets server actions set auth cookies.
     nextCookies(),
   ],

package/templates/app/lib/dashboard.ts

@@ -167,7 +167,11 @@ export async function resourceStats(name: string, field?: string, days = 7): Pro
       return stats;
     },
     ["flare", "resource-stats"],
-    { tags: [resourceTag(name)], revalidate: TTL.medium },
+    // TTL.short, by the TTL table's own words: "changes often, cheap to recompute:
+    // counts, dashboards". These are those counts — and `flare seed:resource` writes
+    // from outside the app, where no tag revalidates them, so at medium the overview
+    // said "0 records" for five minutes after seeding a thousand.
+    { tags: [resourceTag(name)], revalidate: TTL.short },
   );
   return read(name, field, days, limit ?? undefined);
 }

package/templates/app/lib/mail.ts

@@ -10,7 +10,7 @@ import { createMailer, renderTransactionalEmail, type TransactionalEmail } from
  */
 export const mailer = createMailer({
   apiKey: env.RESEND_API_KEY,
-  from: env.MAIL_FROM || "__APP_NAME__ <onboarding@resend.dev>",
+  from: env.MAIL_FROM || "__APP_TITLE__ <onboarding@resend.dev>",
 });
 
 /**
@@ -31,6 +31,6 @@ export async function sendTransactionalEmail({
   idempotencyKey,
   ...content
 }: Omit<TransactionalEmail, "appName"> & { to: string | string[]; subject: string; idempotencyKey?: string }) {
-  const { html, text } = renderTransactionalEmail({ appName: "__APP_NAME__", ...content });
+  const { html, text } = renderTransactionalEmail({ appName: "__APP_TITLE__", ...content });
   return mailer.send({ to, subject, html, text, idempotencyKey });
 }

package/templates/app/lib/site.ts

@@ -5,9 +5,9 @@ import type { ThemeName } from "./theme";
  * the page titles read from here. Edit freely.
  */
 export const site = {
-  name: "__APP_NAME__",
+  name: "__APP_TITLE__",
   tagline: "The fastest way to run your business",
-  description: "__APP_NAME__ keeps your team, your customers and your data in one place, and it's live on the edge in every region.",
+  description: "__APP_TITLE__ keeps your team, your customers and your data in one place, and it's live on the edge in every region.",
   /**
    * The look of the whole app: sign-in screens, dashboard, admin and home page.
    * One of: default, coral, amber, sky, mono, emerald. FLARE_THEME (shell or .env)

package/templates/app/vite.config.ts

@@ -7,7 +7,9 @@ export default defineConfig(({ mode }) => ({
   // FLARE_THEME (shell or .env) picks the theme for this build; see lib/theme.ts.
   define: { __FLARE_THEME__: JSON.stringify(loadEnv(mode, process.cwd(), "FLARE_").FLARE_THEME ?? "") },
   // `flare dev --tunnel` serves the dev server on a https://*.trycloudflare.com URL.
-  server: { allowedHosts: [".trycloudflare.com"] },
+  // Port 3000 rather than Vite's 5173, so both stacks answer where everything printed
+  // and documented says they do — the Next.js stack is 3000 and cannot move.
+  server: { port: 3000, allowedHosts: [".trycloudflare.com"] },
   optimizeDeps: {
     /*
      * Packages that ship their own "use client" components are left out of dependency

package/templates/next/README.md

@@ -1,4 +1,4 @@
-# __APP_NAME__
+# __APP_TITLE__
 
 A [Flare](https://flare-docs.codetotech.com) app on Next.js, Postgres and Prisma.
 

package/templates/next/app/dashboard/layout.tsx

@@ -53,9 +53,9 @@ export default async function DashboardLayout({ children }: { children: React.Re
 
   return (
     <SidebarProvider defaultOpen={!collapsed}>
-      <DashboardSidebar appName="__APP_NAME__" resources={resources} links={dashboardLinks} isAdmin={ADMIN_ROLES.includes(role)} user={account} />
+      <DashboardSidebar appName="__APP_TITLE__" resources={resources} links={dashboardLinks} isAdmin={ADMIN_ROLES.includes(role)} user={account} />
       <SidebarInset>
-        <DashboardHeader user={account} initialTheme={theme} notices={notices} />
+        <DashboardHeader user={account} initialTheme={theme} notices={notices} isAdmin={ADMIN_ROLES.includes(role)} />
         <main className="flex flex-1 flex-col gap-6 p-4 md:p-6 lg:p-8">{children}</main>
       </SidebarInset>
       <Toaster theme={theme} />

package/templates/next/app/dashboard/observability/page.tsx

@@ -0,0 +1,156 @@
+import Link from "next/link";
+import { DatabaseIcon, HistoryIcon, KeyRoundIcon, UsersIcon } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { LocalTime } from "@/components/dashboard/local-time";
+import { StatCards, type Stat } from "@/components/dashboard/stat-card";
+import { auditCount, recentAudit } from "@/lib/audit";
+import { recordCount, requireDashboard, resourcePath, visibleResources } from "@/lib/dashboard";
+import { prisma } from "@/lib/db";
+
+export const metadata = { title: "Observability" };
+
+const ACTION_TONE: Record<string, "secondary" | "destructive" | "outline"> = {
+  create: "secondary",
+  update: "outline",
+  delete: "destructive",
+  "bulk-delete": "destructive",
+  import: "secondary",
+};
+
+/**
+ * How the app is behaving, from what this app can actually see: the database, the
+ * accounts and the record of who changed what.
+ *
+ * Request traffic, errors and latency are Vercel's to measure — they happen at their
+ * edge, before a byte reaches this code — so the page links there rather than printing
+ * three dashes and calling them "not connected".
+ */
+export default async function ObservabilityPage() {
+  await requireDashboard("/dashboard/observability");
+
+  const [resources, changes, audit, people, sessions] = await Promise.all([
+    visibleResources(),
+    auditCount(7),
+    recentAudit(20),
+    prisma.user.count(),
+    prisma.session.count({ where: { expiresAt: { gt: new Date() } } }),
+  ]);
+
+  const tables = await Promise.all(resources.map(async (resource) => ({ resource, total: await recordCount(resource.name) })));
+  const records = tables.reduce((total, table) => total + table.total, 0);
+
+  const stats: Stat[] = [
+    { label: "Users", value: people, icon: UsersIcon, href: "/dashboard/users" },
+    // Users are records too — the hint counts their table, so the number must as well.
+    { label: "Records", value: records + people, hint: `across ${tables.length + 1} ${tables.length === 0 ? "table" : "tables"}`, icon: DatabaseIcon },
+    { label: "Signed-in sessions", value: sessions, hint: "not yet expired", icon: KeyRoundIcon },
+    { label: "Changes this week", value: changes, hint: "creates, edits and deletes", icon: HistoryIcon },
+  ];
+
+  return (
+    <>
+      <PageHeader
+        title="Observability"
+        description="The database, the accounts, and the record of who changed what."
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Observability" }]}
+      />
+
+      <StatCards stats={stats} />
+
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.6fr)]">
+        <Card className="h-fit">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <DatabaseIcon className="size-4" />
+              Database
+            </CardTitle>
+            <CardDescription>What each table holds right now.</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col">
+            <div className="flex items-center justify-between gap-3 border-b py-2.5 text-sm last:border-b-0 last:pb-0">
+              <Link href="/dashboard/users" className="hover:underline">
+                Users
+              </Link>
+              <span className="tabular-nums text-muted-foreground">{people.toLocaleString()}</span>
+            </div>
+            {tables.map(({ resource, total }) => (
+              <div key={resource.name} className="flex items-center justify-between gap-3 border-b py-2.5 text-sm last:border-b-0 last:pb-0">
+                <Link href={resourcePath(resource)} className="hover:underline">
+                  {resource.pluralLabel}
+                </Link>
+                <span className="tabular-nums text-muted-foreground">{total.toLocaleString()}</span>
+              </div>
+            ))}
+            <p className="mt-4 text-xs text-muted-foreground">
+              Request traffic, errors and latency happen at Vercel&apos;s edge before they reach this code, so they live in{" "}
+              <a href="https://vercel.com/dashboard" target="_blank" rel="noreferrer" className="underline underline-offset-2">
+                your Vercel dashboard
+              </a>{" "}
+              under Observability.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <HistoryIcon className="size-4" />
+              Recent changes
+            </CardTitle>
+            <CardDescription>Every write through the dashboard, newest first.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {audit.length === 0 ? (
+              <Empty>
+                <EmptyHeader>
+                  <EmptyTitle>Nothing yet</EmptyTitle>
+                  <EmptyDescription>Creates, edits, deletes and imports show up here as they happen.</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            ) : (
+              <div className="overflow-x-auto">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>What</TableHead>
+                      <TableHead>Record</TableHead>
+                      <TableHead>Who</TableHead>
+                      <TableHead className="text-right">When</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {audit.map((entry) => (
+                      <TableRow key={entry.id}>
+                        <TableCell>
+                          <Badge variant={ACTION_TONE[entry.action] ?? "secondary"}>{entry.action}</Badge>
+                          <span className="ml-2 text-muted-foreground">{entry.resource}</span>
+                        </TableCell>
+                        <TableCell className="max-w-56 truncate">{entry.recordLabel ?? describeBulk(entry.changes)}</TableCell>
+                        <TableCell className="max-w-48 truncate text-muted-foreground">{entry.userEmail ?? "—"}</TableCell>
+                        <TableCell className="text-right whitespace-nowrap text-muted-foreground tabular-nums">
+                          <LocalTime value={entry.createdAt} />
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </>
+  );
+}
+
+/** Bulk actions have no single record, so say how many they touched. */
+function describeBulk(changes: Record<string, unknown> | null): string {
+  if (!changes) return "—";
+  if (typeof changes.deleted === "number") return `${changes.deleted} deleted`;
+  if (typeof changes.created === "number") return `${changes.created} imported`;
+  return "—";
+}