@flaredev/cli 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flaredev/cli",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "The flare command-line tool: create, generate, migrate, and deploy Flare apps",
   "license": "MIT",
   "author": "Muke Johnbaptist",
@@ -41,7 +41,7 @@
     "jiti": "^2.7.0",
     "jsonc-parser": "^3.3.1",
     "picocolors": "^1.1.1",
-    "@flaredev/core": "0.2.0"
+    "@flaredev/core": "0.3.0"
   },
   "engines": {
     "node": ">=22"

package/templates/app/app/admin/page.tsx

@@ -1,63 +1,11 @@
-import Link from "next/link";
-import { ArrowRightIcon, PlusIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
-import { resourceIcon } from "@/components/admin/resource-icon";
-import { adminPath, recordCount, visibleResources } from "@/lib/admin";
+import { permanentRedirect } from "next/navigation";
 
-/** Admin landing page: one card per resource with its record count. */
-export default async function AdminPage() {
-  const resources = await visibleResources();
-  const counts = await Promise.all(resources.map((resource) => recordCount(resource.name)));
-
-  if (resources.length === 0) {
-    return (
-      <Empty className="rounded-lg border border-dashed">
-        <EmptyHeader>
-          <EmptyTitle>No resources yet</EmptyTitle>
-          <EmptyDescription>
-            Generate one with <code>flare gen resource Contact --fields &quot;name:string, email:string&quot;</code>.
-          </EmptyDescription>
-        </EmptyHeader>
-      </Empty>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-6">
-      <h1 className="text-2xl font-semibold">Overview</h1>
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        {resources.map((resource, index) => {
-          const Icon = resourceIcon(resource.icon);
-          return (
-            <Card key={resource.name}>
-              <CardHeader>
-                <CardDescription className="flex items-center gap-2">
-                  <Icon className="size-5" />
-                  {resource.pluralLabel}
-                </CardDescription>
-                <CardTitle className="text-3xl font-bold tabular-nums">{counts[index]!.toLocaleString()}</CardTitle>
-                <CardAction>
-                  <Button variant="ghost" size="icon" aria-label={`New ${resource.label.toLowerCase()}`} asChild>
-                    <Link href={adminPath(resource, "new")}>
-                      <PlusIcon />
-                    </Link>
-                  </Button>
-                </CardAction>
-              </CardHeader>
-              <CardContent>
-                <Button variant="link" className="h-auto p-0" asChild>
-                  <Link href={adminPath(resource)}>
-                    View {resource.pluralLabel.toLowerCase()}
-                    <ArrowRightIcon data-icon="inline-end" />
-                  </Link>
-                </Button>
-              </CardContent>
-            </Card>
-          );
-        })}
-      </div>
-    </div>
-  );
+/**
+ * The admin used to live here. It's the dashboard now — one signed-in area, with the
+ * resources, the account pages, security and observability in the same shell.
+ *
+ * Kept so links and bookmarks still land somewhere.
+ */
+export default function AdminPage() {
+  permanentRedirect("/dashboard");
 }

package/templates/app/app/dashboard/account/page.tsx

@@ -1,5 +1,6 @@
 import { and, eq } from "drizzle-orm";
 import { SecuritySettings } from "@/components/account/security-settings";
+import { PageHeader } from "@/components/dashboard/page-header";
 import { getDb } from "@/db";
 import { account } from "@/db/auth-schema";
 import { enabledSocialProviders } from "@/lib/auth";
@@ -18,10 +19,11 @@ export default async function AccountPage() {
 
   return (
     <>
-      <div className="flex flex-col gap-1">
-        <h1 className="text-3xl">Account</h1>
-        <p className="text-foreground-muted">Your profile, how you sign in, and where you&apos;re signed in.</p>
-      </div>
+      <PageHeader
+        title="Account"
+        description="Your profile, how you sign in, and where you're signed in."
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Account" }]}
+      />
       <SecuritySettings
         user={{
           name: user.name,

package/templates/app/app/{admin → dashboard}/actions.ts

@@ -3,19 +3,21 @@
 import { revalidatePath } from "next/cache";
 import { createObjectKey, fileKeyPrefix, fileMaxBytes, matchesContentType, mimeTypesFor, type FileField } from "@flaredev/core";
 import type { FieldIssue } from "@flaredev/core/server";
+import { diffFields, recordAudit } from "@/lib/audit";
+import { toCsv } from "@/lib/csv";
 import { storage } from "@/lib/storage";
-import { can, type PolicyAction } from "@flaredev/core";
-import { adminPath, adminSession, adminStore, policyFor } from "@/lib/admin";
+import { can, storedFields, type PolicyAction } from "@flaredev/core";
+import { resourcePath, dashboardSession, dashboardStore, policyFor } from "@/lib/dashboard";
 
 export type ActionResult<T = unknown> =
   | { ok: true; data: T }
   | { ok: false; status: number; error: string; issues?: FieldIssue[]; field?: string };
 
-const forbidden = (message = "You don't have access to the admin."): ActionResult<never> => ({ ok: false, status: 403, error: message });
+const forbidden = (message = "You don't have access to this."): ActionResult<never> => ({ ok: false, status: 403, error: message });
 
 /** Session + policy check for one action on one resource. */
 async function allowed(resourceName: string, action: PolicyAction): Promise<ActionResult<never> | undefined> {
-  const { allowed: inAdmin, role } = await adminSession();
+  const { allowed: inAdmin, role } = await dashboardSession();
   if (!inAdmin) return forbidden();
   if (!can(policyFor(resourceName), role, action)) return forbidden(`Your role can't ${action} this record.`);
 }
@@ -24,19 +26,105 @@ export async function deleteRecordAction(resourceName: string, id: string): Prom
   const denied = await allowed(resourceName, "delete");
   if (denied) return denied;
 
-  const store = adminStore(resourceName);
+  const store = dashboardStore(resourceName);
+  const existing = await store.get(id);
   const result = await store.delete(id);
-  if (result.ok) revalidatePath(adminPath(store.resource));
+  if (result.ok) {
+    await recordAudit({
+      action: "delete",
+      resource: resourceName,
+      recordId: id,
+      recordLabel: existing.ok ? recordTitle(store.resource, existing.data) : null,
+    });
+    revalidatePath(resourcePath(store.resource));
+  }
   return result;
 }
 
+/** What to call a record in the audit log: its title field, falling back to its id. */
+function recordTitle(resource: { titleField: string }, record: Record<string, unknown>): string {
+  const value = record[resource.titleField];
+  return typeof value === "string" && value ? value : String(record.id ?? "");
+}
+
+/** How many rows one export may fetch: enough for a spreadsheet, not enough to exhaust the Worker. */
+const EXPORT_LIMIT = 50_000;
+const EXPORT_PAGE = 500;
+
+export async function deleteManyAction(resourceName: string, ids: string[]): Promise<ActionResult<{ deleted: number; failed: number }>> {
+  const denied = await allowed(resourceName, "delete");
+  if (denied) return denied;
+  if (ids.length === 0) return { ok: true, data: { deleted: 0, failed: 0 } };
+  if (ids.length > 500) return { ok: false, status: 400, error: "That's more than 500 records. Delete them in smaller batches." };
+
+  const store = dashboardStore(resourceName);
+  // One at a time, through the store: deleting a record runs its policy, its hooks and
+  // its cache invalidation, and a row that refuses to go (a foreign key still pointing
+  // at it) shouldn't take the rest of the batch with it.
+  let deleted = 0;
+  let failed = 0;
+  for (const id of ids) {
+    const result = await store.delete(id);
+    if (result.ok) deleted++;
+    else failed++;
+  }
+  if (deleted > 0) {
+    await recordAudit({ action: "bulk-delete", resource: resourceName, changes: { deleted, failed } });
+    revalidatePath(resourcePath(store.resource));
+  }
+  return { ok: true, data: { deleted, failed } };
+}
+
+/**
+ * Every record matching the current search and filters, as CSV.
+ *
+ * Read through the same store the table uses, so the export shows exactly what the
+ * person can see — their policy, their filters, their sort.
+ */
+export async function exportRecordsAction(resourceName: string, query: string): Promise<ActionResult<{ csv: string; rows: number; truncated: boolean }>> {
+  const denied = await allowed(resourceName, "read");
+  if (denied) return denied;
+
+  const store = dashboardStore(resourceName);
+  const fields = storedFields(store.resource).filter(([, def]) => def.kind !== "file");
+  const columns = [["id", "Id"] as const, ...fields.map(([key, def]) => [key, def.label] as const), ["createdAt", "Created"] as const];
+
+  const rows: Record<string, unknown>[] = [];
+  let truncated = false;
+  for (let page = 1; rows.length < EXPORT_LIMIT; page++) {
+    const params = new URLSearchParams(query);
+    params.set("page", String(page));
+    params.set("perPage", String(EXPORT_PAGE));
+    const result = await store.list(params);
+    if (!result.ok) return result;
+    rows.push(...result.data.data);
+    if (page >= result.data.meta.totalPages) break;
+    if (rows.length >= EXPORT_LIMIT) {
+      truncated = true;
+      break;
+    }
+  }
+
+  const csv = toCsv(rows, columns.map(([key, label]) => ({ key, label })));
+  return { ok: true, data: { csv, rows: rows.length, truncated } };
+}
+
 export async function createRecordAction(resourceName: string, input: unknown): Promise<ActionResult<Record<string, unknown>>> {
   const denied = await allowed(resourceName, "create");
   if (denied) return denied;
 
-  const store = adminStore(resourceName);
+  const store = dashboardStore(resourceName);
   const result = await store.create(input);
-  if (result.ok) revalidatePath(adminPath(store.resource));
+  if (result.ok) {
+    await recordAudit({
+      action: "create",
+      resource: resourceName,
+      recordId: String(result.data.id),
+      recordLabel: recordTitle(store.resource, result.data),
+      changes: diffFields(null, result.data),
+    });
+    revalidatePath(resourcePath(store.resource));
+  }
   return result;
 }
 
@@ -44,9 +132,19 @@ export async function updateRecordAction(resourceName: string, id: string, input
   const denied = await allowed(resourceName, "update");
   if (denied) return denied;
 
-  const store = adminStore(resourceName);
+  const store = dashboardStore(resourceName);
+  const before = await store.get(id);
   const result = await store.update(id, input);
-  if (result.ok) revalidatePath(adminPath(store.resource));
+  if (result.ok) {
+    await recordAudit({
+      action: "update",
+      resource: resourceName,
+      recordId: id,
+      recordLabel: recordTitle(store.resource, result.data),
+      changes: diffFields(before.ok ? before.data : null, result.data),
+    });
+    revalidatePath(resourcePath(store.resource));
+  }
   return result;
 }
 
@@ -55,7 +153,7 @@ function fileField(
   resourceName: string,
   fieldKey: string,
 ): { failure: ActionResult<never> } | { field: FileField & { label: string }; prefix: string } {
-  const { resource } = adminStore(resourceName);
+  const { resource } = dashboardStore(resourceName);
   const field = resource.fields[fieldKey];
   if (!field || field.kind !== "file") {
     return { failure: { ok: false, status: 400, error: `${resourceName} has no file field "${fieldKey}".` } };

package/templates/app/app/dashboard/import-actions.ts

@@ -0,0 +1,91 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { recordAudit } from "@/lib/audit";
+import { can, type PolicyAction } from "@flaredev/core";
+import type { Failure } from "@flaredev/core/server";
+import { resourcePath, dashboardSession, dashboardStore, policyFor } from "@/lib/dashboard";
+import type { ActionResult } from "./actions";
+
+/** One row that couldn't be saved, numbered from 1 within the batch that was sent. */
+export interface ImportFailure {
+  row: number;
+  error: string;
+  field?: string;
+}
+
+export interface ImportSummary {
+  created: number;
+  failed: ImportFailure[];
+}
+
+/** Rows accepted per call. The browser splits a file into batches of this size or smaller. */
+const MAX_ROWS = 5000;
+
+/** How many consecutive failures at the start of a batch count as a mis-mapped file. */
+const GIVE_UP_AFTER = 25;
+
+const forbidden = (message = "You don't have access to the admin."): ActionResult<never> => ({ ok: false, status: 403, error: message });
+
+/** Session + policy check for one action on one resource. */
+async function allowed(resourceName: string, action: PolicyAction): Promise<ActionResult<never> | undefined> {
+  const { allowed: inAdmin, role } = await dashboardSession();
+  if (!inAdmin) return forbidden();
+  if (!can(policyFor(resourceName), role, action)) return forbidden(`Your role can't ${action} this record.`);
+}
+
+/** A store failure as one line of text, attributed to a field when the issues name one. */
+function describe(failure: Failure): { error: string; field?: string } {
+  const issues = failure.issues ?? [];
+  if (issues.length === 0) return { error: failure.error, field: failure.field };
+  return {
+    error: issues.map((issue) => (issue.path ? `${issue.path}: ${issue.message}` : issue.message)).join("; "),
+    field: issues[0]?.path.split(".")[0] || failure.field,
+  };
+}
+
+/**
+ * Creates one batch of imported records and reports what happened to each row.
+ *
+ * Rows go through `store.create` one at a time rather than a bulk insert so an import
+ * gets the same validation, defaults, generated ids and change hooks as the API and the
+ * admin form; a bulk insert would let a CSV write values no other route can.
+ */
+export async function importRecordsAction(resourceName: string, rows: Record<string, unknown>[]): Promise<ActionResult<ImportSummary>> {
+  const denied = await allowed(resourceName, "create");
+  if (denied) return denied;
+
+  if (rows.length > MAX_ROWS) {
+    return { ok: false, status: 413, error: `This import sent ${rows.length} rows at once. Send at most ${MAX_ROWS} rows per batch.` };
+  }
+
+  const store = dashboardStore(resourceName);
+  const failed: ImportFailure[] = [];
+  let created = 0;
+
+  for (const [index, row] of rows.entries()) {
+    const result = await store.create(row);
+    if (result.ok) {
+      created += 1;
+    } else {
+      failed.push({ row: index + 1, ...describe(result) });
+    }
+
+    // Columns mapped to the wrong fields fail every row, so a long file would spend
+    // thousands of writes proving the same point. A short batch runs to the end, where
+    // the per-row report is more use than an early exit.
+    if (created === 0 && failed.length === GIVE_UP_AFTER && rows.length > GIVE_UP_AFTER) {
+      return {
+        ok: false,
+        status: 422,
+        error: `The first ${GIVE_UP_AFTER} rows all failed, so nothing was imported. Check the column mapping — the first row said: ${failed[0]?.error ?? "no reason given"}`,
+      };
+    }
+  }
+
+  if (created > 0) {
+    await recordAudit({ action: "import", resource: resourceName, changes: { created, failed: failed.length } });
+    revalidatePath(resourcePath(store.resource));
+  }
+  return { ok: true, data: { created, failed } };
+}

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

@@ -1,39 +1,42 @@
-import Link from "next/link";
-import { BrandMark } from "@/components/auth/auth-shell";
-import { DashboardNav } from "@/components/dashboard/dashboard-nav";
-import { SignOutButton } from "@/components/sign-out-button";
-import { ADMIN_ROLES } from "@/lib/admin";
-import { requireSession } from "@/lib/session";
-import { site } from "@/lib/site";
-
-/** The frame around every signed-in page: the app's mark, its sections and the account menu. */
-export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
-  const { user } = await requireSession("/dashboard");
-  const role = (user as { role?: string | null }).role ?? "";
-  const links = [
-    { href: "/dashboard", label: "Overview" },
-    { href: "/dashboard/account", label: "Account" },
-    ...(ADMIN_ROLES.includes(role) ? [{ href: "/admin", label: "Admin" }] : []),
-  ];
-
-  return (
-    <div className="min-h-dvh bg-surface-muted/40">
-      <header className="border-b border-border bg-surface">
-        <div className="mx-auto flex max-w-5xl items-center justify-between gap-4 px-6 pt-4">
-          <Link href="/dashboard" className="flex items-center gap-3">
-            <BrandMark link={false} />
-            <span className="font-semibold">{site.name}</span>
-          </Link>
-          <div className="flex items-center gap-3">
-            <span className="hidden text-sm text-foreground-muted sm:inline">{user.email}</span>
-            <SignOutButton />
-          </div>
-        </div>
-        <div className="mx-auto max-w-5xl px-3">
-          <DashboardNav links={links} />
-        </div>
-      </header>
-      <main className="mx-auto flex max-w-5xl flex-col gap-8 px-6 py-10">{children}</main>
-    </div>
-  );
-}
+import { cookies } from "next/headers";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { Toaster } from "@/components/ui/sonner";
+import { DashboardHeader, type Theme } from "@/components/dashboard/dashboard-header";
+import { DashboardSidebar } from "@/components/dashboard/dashboard-sidebar";
+import { dashboardLinks } from "@/lib/dashboard-nav";
+import { ADMIN_ROLES, visibleResources } from "@/lib/dashboard";
+import { requireSession } from "@/lib/session";
+
+/**
+ * The frame around every signed-in page: the app's resources in the sidebar, the
+ * account menu in the header.
+ *
+ * Everyone signed in gets a dashboard. What's in it depends on the policies: the
+ * sidebar lists only the resources this person may read, and the sections that manage
+ * the app itself are for ADMIN_ROLES (lib/dashboard.ts).
+ */
+export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const { user } = await requireSession("/dashboard");
+  const jar = await cookies();
+  const theme = (jar.get("flare-theme")?.value ?? "system") as Theme;
+  const collapsed = jar.get("sidebar_state")?.value === "false";
+  const role = (user as { role?: string | null }).role ?? "";
+
+  const resources = (await visibleResources()).map((resource) => ({
+    name: resource.name,
+    pluralLabel: resource.pluralLabel,
+    slug: resource.slug,
+    icon: resource.icon,
+  }));
+
+  return (
+    <SidebarProvider defaultOpen={!collapsed}>
+      <DashboardSidebar appName="__APP_NAME__" resources={resources} links={dashboardLinks} isAdmin={ADMIN_ROLES.includes(role)} />
+      <SidebarInset>
+        <DashboardHeader user={{ name: user.name, email: user.email }} initialTheme={theme} />
+        <main className="flex flex-1 flex-col gap-6 p-4 md:p-6 lg:p-8">{children}</main>
+      </SidebarInset>
+      <Toaster theme={theme} />
+    </SidebarProvider>
+  );
+}

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

@@ -0,0 +1,174 @@
+import Link from "next/link";
+import { ActivityIcon, AlertTriangleIcon, DatabaseIcon, GaugeIcon, HistoryIcon } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+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 { StatCards, type Stat } from "@/components/dashboard/stat-card";
+import { TrafficChart } from "@/components/dashboard/traffic-chart";
+import { auditCount, recentAudit } from "@/lib/audit";
+import { workerAnalytics } from "@/lib/analytics";
+import { recordCount, requireDashboard, resourcePath, visibleResources } from "@/lib/dashboard";
+import { site } from "@/lib/site";
+
+export const metadata = { title: "Observability" };
+
+const ACTION_TONE: Record<string, "secondary" | "destructive" | "outline"> = {
+  create: "secondary",
+  update: "outline",
+  delete: "destructive",
+  "bulk-delete": "destructive",
+  import: "secondary",
+};
+
+const when = (date: Date) => new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(date);
+
+/** How the app is behaving: traffic from Cloudflare, size from the database, and who changed what. */
+export default async function ObservabilityPage() {
+  await requireDashboard("/dashboard/observability");
+
+  const [analytics, resources, changes, audit] = await Promise.all([
+    workerAnalytics(site.name.toLowerCase().replace(/[^a-z0-9-]+/g, "-")),
+    visibleResources(),
+    auditCount(7),
+    recentAudit(20),
+  ]);
+
+  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[] = [
+    analytics.ok
+      ? { label: "Requests (7 days)", value: analytics.data.requests, icon: ActivityIcon }
+      : { label: "Requests (7 days)", value: "—", hint: "not connected", icon: ActivityIcon },
+    analytics.ok
+      ? {
+          label: "Errors",
+          value: analytics.data.errors,
+          hint: `${analytics.data.errorRate.toFixed(2)}% of requests`,
+          goodDirection: "down",
+          icon: AlertTriangleIcon,
+        }
+      : { label: "Errors", value: "—", hint: "not connected", icon: AlertTriangleIcon },
+    analytics.ok
+      ? { label: "Median CPU time", value: `${analytics.data.medianCpuMs} ms`, hint: "per request", icon: GaugeIcon }
+      : { label: "Median CPU time", value: "—", hint: "not connected", icon: GaugeIcon },
+    { label: "Changes this week", value: changes, hint: "creates, edits and deletes", icon: HistoryIcon },
+  ];
+
+  return (
+    <>
+      <PageHeader
+        title="Observability"
+        description="Traffic, database and the record of who changed what."
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Observability" }]}
+      />
+
+      <StatCards stats={stats} />
+
+      {!analytics.ok && (
+        <Alert>
+          <AlertTitle>{analytics.reason === "unconfigured" ? "Traffic isn't connected yet" : "Couldn't read traffic from Cloudflare"}</AlertTitle>
+          <AlertDescription>
+            <p>
+              {analytics.message}
+              {analytics.reason === "unconfigured" &&
+                " Create a token with Account Analytics: Read, then set it with `wrangler secret put CLOUDFLARE_API_TOKEN` and `wrangler secret put CLOUDFLARE_ACCOUNT_ID`."}
+            </p>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {analytics.ok && analytics.data.points.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Requests a day</CardTitle>
+            <CardDescription>The last seven days, errors marked in red.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TrafficChart points={analytics.data.points} />
+          </CardContent>
+        </Card>
+      )}
+
+      <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>{records.toLocaleString()} records across {tables.length} {tables.length === 1 ? "table" : "tables"}.</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col">
+            {tables.length === 0 && <p className="text-sm text-muted-foreground">No resources yet.</p>}
+            {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>
+            ))}
+          </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">{when(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 "—";
+}