@flaredev/cli 0.12.2 → 0.13.0

package/dist/index.js

@@ -414,7 +414,11 @@ var CLOUDFLARE_ONLY = [
   ".dev.vars.example",
   "worker-configuration.d.ts",
   // The engine's Drizzle adapter; the Next.js overlay brings prisma-rows.ts instead.
-  "lib/resource/drizzle-rows.ts"
+  "lib/resource/drizzle-rows.ts",
+  // Estimates Workers, D1 and R2 bills from Cloudflare's own price sheet — numbers that
+  // mean nothing to an app on Vercel and Neon, so a Next.js app doesn't get the page.
+  "app/dashboard/costs",
+  "components/dashboard/cost-estimator.tsx"
 ];
 
 // src/stack.ts
@@ -519,6 +523,9 @@ function installArgs(pm) {
 
 // src/commands/create.ts
 var SEED_ADMIN = { email: "admin@example.com", password: "Password", name: "Admin" };
+function toAppTitle(name) {
+  return name.split("-").map((word) => word ? word[0].toUpperCase() + word.slice(1) : word).join(" ");
+}
 var ALLOW_BUILDS = [
   "'@prisma/engines': false",
   "esbuild: true",
@@ -568,13 +575,14 @@ function createApp(target, options2 = {}) {
   const compatibilityDate = options2.compatibilityDate ?? COMPATIBILITY_DATE;
   const files = copyTemplate(join4(templatesDir, "app"), dir, {
     APP_NAME: name,
+    APP_TITLE: toAppTitle(name),
     COMPAT_DATE: compatibilityDate,
     PM: packageManager,
     THEME: theme,
     SIGNUP: signup
   });
   if (stack === "next") {
-    copyTemplate(join4(templatesDir, "next"), dir, { APP_NAME: name, PM: packageManager, THEME: theme, SIGNUP: signup });
+    copyTemplate(join4(templatesDir, "next"), dir, { APP_NAME: name, APP_TITLE: toAppTitle(name), PM: packageManager, THEME: theme, SIGNUP: signup });
     for (const path of CLOUDFLARE_ONLY) rmSync(join4(dir, path), { recursive: true, force: true });
   }
   writeFileSync3(join4(dir, "lib", "auth-config.ts"), renderAuthConfig(authMethods, authProviders, signup));
@@ -610,10 +618,15 @@ storage/
       start: "next start",
       deploy: "vercel deploy --prod",
       "db:generate": "prisma generate",
-      "db:migrate": "prisma migrate dev",
+      // Thin aliases for the flare commands, so the scripts and the printed steps
+      // can never say different things. `flare migrate` is `prisma migrate dev`
+      // plus `prisma generate` — the generate is not optional; Prisma 7 removed
+      // generator runs from `migrate dev`, and a client without the new model
+      // fails the very next command, usually `flare seed:resource`.
+      "db:migrate": "flare migrate",
       // An account to sign in with, so the app is reachable the moment the tables
       // exist. Safe to run twice: --skip-existing makes a second run a no-op.
-      "db:seed": `flare user:add ${SEED_ADMIN.email} --password ${SEED_ADMIN.password} --name ${SEED_ADMIN.name} --role admin --skip-existing`,
+      "db:seed": "flare db:seed",
       "db:studio": "prisma studio"
     } : {
       dev: "flare dev",
@@ -690,23 +703,27 @@ function printNextSteps(result, installed) {
   const pm = result.packageManager;
   const database = result.stack === "next" ? [
     ["docker compose up -d", "Postgres, on the address .env already has"],
-    [`${pm} run db:migrate`, "create the tables"],
-    [`${pm} run db:seed`, "an account to sign in with"]
+    ["npx flare migrate", "create the tables"],
+    ["npx flare db:seed", "an account to sign in with"]
   ] : [];
   const commands = [
     [`cd ${rel}`, "your new app"],
     ...installed ? [] : [[`${pm} install`, "dependencies first"]],
     ...database,
-    [`${pm} run dev`, "http://localhost:3000"],
+    ["npx flare dev", "http://localhost:3000"]
+  ];
+  const firstResource = [
     ["npx flare gen resource Contact", "a table, API and admin screens"],
+    ["npx flare migrate", "create its table"],
     ["npx flare seed:resource Contact 1000", "fill it with sample rows"]
   ];
-  const width = Math.max(...commands.map(([command]) => command.length)) + 2;
-  const steps = commands.map(([command, note2]) => `${pc.cyan(command.padEnd(width))}${pc.dim(note2)}`);
-  prompts.note(steps.join("\n"), "Next");
+  const width = Math.max(...[...commands, ...firstResource].map(([command]) => command.length)) + 2;
+  const line = ([command, note2]) => `${pc.cyan(command.padEnd(width))}${pc.dim(note2)}`;
+  prompts.note(commands.map(line).join("\n"), "Next");
+  prompts.note(firstResource.map(line).join("\n"), "Your first resource");
   const storage = storageSetupSteps(result.storage, result.stack, { local: true });
   if (storage.length > 0) {
-    prompts.note(storage.map((line) => line.startsWith("http") ? pc.cyan(line) : line).join("\n"), `Uploads \xB7 ${result.storage}`);
+    prompts.note(storage.map((line2) => line2.startsWith("http") ? pc.cyan(line2) : line2).join("\n"), `Uploads \xB7 ${result.storage}`);
   }
   if (result.stack === "next") {
     prompts.note(
@@ -2703,12 +2720,20 @@ async function migrate(options2 = {}) {
   const appRoot = findAppRoot(options2.cwd ?? process.cwd());
   const log2 = options2.log ?? ((message) => console.log(message));
   if (readStack(appRoot) === "next") {
+    const prisma = resolveBin(appRoot, "prisma", "prisma");
+    if (options2.deploy) {
+      log2(`${pc6.cyan("prisma")} migrate deploy`);
+      return runNode([prisma, "migrate", "deploy"], appRoot);
+    }
     if (options2.remote) {
-      log2(pc6.dim("On Next.js, `--remote` is whichever database DATABASE_URL points at."));
+      log2(pc6.dim("On Next.js, the database is whichever one DATABASE_URL points at."));
     }
-    const prisma = resolveBin(appRoot, "prisma", "prisma");
-    log2(`${pc6.cyan("prisma")} migrate deploy`);
-    return runNode([prisma, "migrate", "deploy"], appRoot);
+    const args = ["migrate", "dev", ...options2.name ? ["--name", options2.name] : []];
+    log2(`${pc6.cyan("prisma")} ${args.join(" ")}`);
+    const code = await runNode([prisma, ...args], appRoot);
+    if (code !== 0) return code;
+    log2(`${pc6.cyan("prisma")} generate`);
+    return runNode([prisma, "generate"], appRoot);
   }
   const { db, target, wrangler } = context(options2);
   const result = await runWrangler(wrangler, ["d1", "migrations", "apply", db.binding, ...target], appRoot);
@@ -3269,7 +3294,7 @@ async function addUser(email, options2 = {}) {
 async function addOnD1(appRoot, rows, options2, log2) {
   if (options2.role) {
     const roles = await listRoles(options2);
-    if (roles && !roles.includes(options2.role)) {
+    if (roles && roles.length > 0 && !roles.includes(options2.role)) {
       log2(pc9.red(`No role "${options2.role}" is registered. Known roles: ${roles.join(", ") || "none"}.`));
       log2(pc9.dim(`Register it with: flare role:add ${options2.role}${options2.remote ? " --remote" : ""}`));
       return 1;
@@ -6338,7 +6363,7 @@ import { existsSync as existsSync25, mkdirSync as mkdirSync12, readFileSync as r
 import { dirname as dirname12, join as join25, relative as relative2 } from "path";
 import pc20 from "picocolors";
 var TRACKED = ["app", "lib", "components"];
-var PER_APP = /__APP_NAME__|__PM__|__THEME__|__COMPAT_DATE__/;
+var PER_APP = /__APP_NAME__|__APP_TITLE__|__PM__|__THEME__|__COMPAT_DATE__/;
 var WRITTEN_PER_APP = /* @__PURE__ */ new Set(["lib/auth-config.ts"]);
 var prunedOn = (path, stack) => stack === "next" && CLOUDFLARE_ONLY.some((only) => path === only || path.startsWith(`${only}/`));
 function upstreamFile(path, stack) {
@@ -7919,10 +7944,10 @@ function createCli() {
     "migrate",
     perStack(
       "Apply pending D1 migrations (local database unless --remote)",
-      "Apply pending Prisma migrations to the database in DATABASE_URL (prisma migrate deploy)",
-      "Apply pending migrations: D1 on the Cloudflare stack, Prisma on the Next.js one"
+      "Make the database match the schema: prisma migrate dev + prisma generate (--deploy: apply committed migrations only)",
+      "Make the database match the schema: D1 migrations on Cloudflare; prisma migrate dev + generate on Next.js"
     )
-  ).option("--remote", cloudflareOnly("Target the deployed database")).option("--env <name>", cloudflareOnly("Wrangler environment")).option("--database <binding>", cloudflareOnly("D1 binding, when the app has several")).action(async (options2) => {
+  ).option("--remote", cloudflareOnly("Target the deployed database")).option("--env <name>", cloudflareOnly("Wrangler environment")).option("--database <binding>", cloudflareOnly("D1 binding, when the app has several")).option("--name <name>", "Next.js: name the migration, so Prisma doesn't have to ask").option("--deploy", "Next.js: apply committed migrations and invent nothing (CI, production)").example("flare migrate                      # local, writes a migration if the schema changed").example("flare migrate --deploy             # production: apply what is committed, nothing else").action(async (options2) => {
     process.exitCode = await migrate(options2);
   });
   cli.command(
@@ -7981,6 +8006,15 @@ function createCli() {
   cli.command("sync-types", "Regenerate schema, routes, clients, and validators from resource descriptors; report drift").option("--check", "Change nothing; exit 1 if anything is out of sync (CI)").option("--force", "Overwrite generated blocks that were edited by hand").action(async (options2) => {
     process.exitCode = await syncTypes(options2);
   });
+  cli.command("db:seed", "Seed the development admin account (admin@example.com / Password, role admin)").option("--remote", "Against the deployed database rather than the local one (Cloudflare)").example("flare db:seed").action(async (options2) => {
+    process.exitCode = await addUser(SEED_ADMIN.email, {
+      password: SEED_ADMIN.password,
+      name: SEED_ADMIN.name,
+      role: "admin",
+      skipExisting: true,
+      remote: options2.remote
+    });
+  });
   cli.command("user:add <email>", "Create an account from the command line (the way in when signup is closed)").option("--role <role>", "Role to give them, e.g. admin").option("--password <password>", "Their password (generated and printed when omitted)").option("--name <name>", "Display name (default: the part before the @)").option("--remote", "Against the deployed database rather than the local one").option("--env <name>", "Wrangler environment").option("--skip-existing", "Succeed quietly if the account is already there (for seeds)").example("flare user:add ada@example.com --role admin").action(
     async (email, options2) => {
       process.exitCode = await addUser(email, options2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flaredev/cli",
-  "version": "0.12.2",
+  "version": "0.13.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.12.2"
+    "@flaredev/core": "0.13.0"
   },
   "engines": {
     "node": ">=22"

package/templates/app/README.md

@@ -1,4 +1,4 @@
-# __APP_NAME__
+# __APP_TITLE__
 
 A [Flare](https://flare-docs.codetotech.com) app running on Cloudflare Workers via vinext.
 

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

@@ -55,9 +55,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/app/app/dashboard/page.tsx

@@ -1,24 +1,33 @@
 import Link from "next/link";
-import { count, eq } from "drizzle-orm";
-import { ArrowRightIcon, CheckCircle2Icon, CircleIcon, PlusIcon } from "lucide-react";
+import { count, eq, gte } from "drizzle-orm";
+import { ArrowRightIcon, CheckCircle2Icon, CircleIcon, PlusIcon, UsersIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
 import { PageHeader } from "@/components/dashboard/page-header";
 import { resourceIcon } from "@/components/dashboard/resource-icon";
 import { StatCards, type Stat } from "@/components/dashboard/stat-card";
 import { getDb } from "@/db";
-import { passkey } from "@/db/auth-schema";
+import { passkey, user as userTable } from "@/db/auth-schema";
 import { authConfig, twoFactorAvailable } from "@/lib/auth-config";
-import { adminPermissions, resourcePath, resourceStats, trend, visibleResources } from "@/lib/dashboard";
+import { ADMIN_ROLES, adminPermissions, dashboardSession, resourcePath, resourceStats, trend, visibleResources } from "@/lib/dashboard";
 import { requireSession } from "@/lib/session";
 
 export const metadata = { title: "Dashboard" };
 
+/** The three commands that turn an empty app into one with data, with the stack's real steps. */
+const FIRST_RESOURCE_STEPS = [
+  { command: "npx flare gen resource Contact --fields 'name:string, email:email!'", note: "the table, API and admin screens" },
+  { command: "npx flare migrate", note: "create its table" },
+  { command: "npx flare seed:resource Contact 1000", note: "fill it with sample rows" },
+];
+
 /** The first thing you see when you sign in: how much data there is, and what's left to set up. */
 export default async function DashboardPage() {
   const { user } = await requireSession("/dashboard");
+  const { role } = await dashboardSession();
+  const isAdmin = role !== null && ADMIN_ROLES.includes(role);
   const resources = await visibleResources();
+  const week = new Date(Date.now() - 7 * 86_400_000);
 
   const cards = await Promise.all(
     resources.map(async (resource) => {
@@ -28,16 +37,46 @@ export default async function DashboardPage() {
     }),
   );
 
-  const stats: Stat[] = cards.slice(0, 4).map(({ resource, total, recent }) => ({
-    label: resource.pluralLabel,
-    value: total,
-    hint: recent.current > 0 ? `${recent.current.toLocaleString()} this week` : "none this week",
-    change: trend(recent.current, recent.previous),
-    icon: resourceIcon(resource.icon),
-    href: resourcePath(resource),
-  }));
+  // The one table every app has from its first sign-in. Admin only, because it links to
+  // the accounts page, which is.
+  const db = getDb();
+  const [people, peopleThisWeek] = isAdmin
+    ? await Promise.all([
+        db
+          .select({ n: count() })
+          .from(userTable)
+          .then(([row]) => row?.n ?? 0),
+        db
+          .select({ n: count() })
+          .from(userTable)
+          .where(gte(userTable.createdAt, week))
+          .then(([row]) => row?.n ?? 0),
+      ])
+    : [0, 0];
+
+  const stats: Stat[] = [
+    ...(isAdmin
+      ? [
+          {
+            label: "Users",
+            value: people,
+            hint: peopleThisWeek > 0 ? `${peopleThisWeek.toLocaleString()} this week` : "none this week",
+            icon: UsersIcon,
+            href: "/dashboard/users",
+          } satisfies Stat,
+        ]
+      : []),
+    ...cards.slice(0, isAdmin ? 3 : 4).map(({ resource, total, recent }) => ({
+      label: resource.pluralLabel,
+      value: total,
+      hint: recent.current > 0 ? `${recent.current.toLocaleString()} this week` : "none this week",
+      change: trend(recent.current, recent.previous),
+      icon: resourceIcon(resource.icon),
+      href: resourcePath(resource),
+    })),
+  ];
 
-  const [{ passkeys } = { passkeys: 0 }] = await getDb().select({ passkeys: count() }).from(passkey).where(eq(passkey.userId, user.id));
+  const [{ passkeys } = { passkeys: 0 }] = await db.select({ passkeys: count() }).from(passkey).where(eq(passkey.userId, user.id));
   const twoFactorOn = Boolean((user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled);
   const steps = [
     { done: user.emailVerified, label: "Verify your email address", href: "/verify-email" },
@@ -50,31 +89,67 @@ export default async function DashboardPage() {
     <>
       <PageHeader
         title={`Welcome${user.name ? `, ${user.name.split(" ")[0]}` : ""}`}
-        description={resources.length > 0 ? "Everything in your app, and how it's moving." : "Your app is running. Add a resource to fill this page."}
+        description={resources.length > 0 ? "Everything in your app, and how it's moving." : "Your app is running. Add a resource and this page fills in."}
       />
 
       <StatCards stats={stats} />
 
       {resources.length === 0 && (
-        <Empty className="rounded-xl 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>, then fill it with{" "}
-              <code>flare seed:resource Contact --count 1000</code>.
-            </EmptyDescription>
-          </EmptyHeader>
-        </Empty>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Add your first resource</CardTitle>
+            <CardDescription>
+              A resource is a table, its API and its admin screens, generated from one line. Three commands from a terminal in this
+              app:
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col">
+            {FIRST_RESOURCE_STEPS.map((step, index) => (
+              <div key={step.command} className="flex flex-wrap items-baseline gap-x-3 gap-y-1 border-b py-3 last:border-b-0 last:pb-0">
+                <span className="grid size-6 shrink-0 translate-y-0.5 place-items-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
+                  {index + 1}
+                </span>
+                <code className="rounded bg-muted px-2 py-1 font-mono text-[13px]">{step.command}</code>
+                <span className="text-xs text-muted-foreground">{step.note}</span>
+              </div>
+            ))}
+            <p className="mt-4 text-xs text-muted-foreground">
+              Then refresh this page: the sidebar, these cards and the admin screens are already wired to it.
+            </p>
+          </CardContent>
+        </Card>
       )}
 
       <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
-        {cards.length > 0 && (
+        {(cards.length > 0 || isAdmin) && (
           <Card>
             <CardHeader>
               <CardTitle className="text-base">Your data</CardTitle>
-              <CardDescription>Every resource you can see.</CardDescription>
+              <CardDescription>Every table in the app, and who it belongs to.</CardDescription>
             </CardHeader>
             <CardContent className="flex flex-col">
+              {isAdmin && (
+                <div className="flex items-center gap-3 border-b py-3 last:border-b-0 last:pb-0">
+                  <span className="grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground">
+                    <UsersIcon className="size-4.5" />
+                  </span>
+                  <div className="flex min-w-0 flex-col">
+                    <Link href="/dashboard/users" className="truncate text-sm font-medium hover:underline">
+                      Users
+                    </Link>
+                    <span className="text-xs text-muted-foreground">
+                      {people.toLocaleString()} {people === 1 ? "account" : "accounts"}
+                    </span>
+                  </div>
+                  <div className="ml-auto flex items-center gap-1">
+                    <Button variant="ghost" size="icon" aria-label="Open users" asChild>
+                      <Link href="/dashboard/users">
+                        <ArrowRightIcon />
+                      </Link>
+                    </Button>
+                  </div>
+                </div>
+              )}
               {cards.map(({ resource, total, permissions }) => {
                 const Icon = resourceIcon(resource.icon);
                 return (

package/templates/app/app/dashboard/users/actions.ts

@@ -0,0 +1,86 @@
+"use server";
+
+import { headers } from "next/headers";
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { dashboardSession } from "@/lib/dashboard";
+
+/**
+ * Managing accounts, through Better Auth's admin API.
+ *
+ * The same `admin` plugin that gives users a role also enforces who may call these:
+ * only roles in its `adminRoles` (see lib/auth.ts — "admin" out of the box). The check
+ * here is only for a clean sentence; the API would refuse anyway, which means these
+ * actions are exactly as powerful as the `flare user:add` / `flare user:role` commands
+ * and no more.
+ */
+
+export type UserActionResult = { ok: true } | { ok: false; error: string };
+
+function failed(error: unknown): UserActionResult {
+  const message = error instanceof Error ? error.message : String(error);
+  // Better Auth's refusal for a non-admin caller, said in this page's words.
+  if (/not.*(allowed|permitted)|unauthorized|forbidden/i.test(message)) {
+    return { ok: false, error: "Only an admin can manage accounts." };
+  }
+  return { ok: false, error: message || "That didn't work." };
+}
+
+async function signedIn(): Promise<UserActionResult | undefined> {
+  const { session } = await dashboardSession();
+  if (!session) return { ok: false, error: "You're signed out." };
+}
+
+/** Make an account, exactly as `flare user:add` would: usable immediately. */
+export async function createUserAction(input: { name: string; email: string; password: string; role: string }): Promise<UserActionResult> {
+  const out = await signedIn();
+  if (out) return out;
+  const role = input.role.trim() || "user";
+  if (!/^[a-z][a-z0-9_-]{0,31}$/.test(role)) {
+    return { ok: false, error: "A role is lowercase letters, digits, _ or -, e.g. admin or support-agent." };
+  }
+  try {
+    await auth.api.createUser({
+      body: { name: input.name.trim(), email: input.email.trim(), password: input.password, role: role as "user" },
+      headers: await headers(),
+    });
+  } catch (error) {
+    return failed(error);
+  }
+  revalidatePath("/dashboard/users");
+  return { ok: true };
+}
+
+/** Change what someone is allowed to do. Takes effect on their next request. */
+export async function setRoleAction(input: { userId: string; role: string }): Promise<UserActionResult> {
+  const out = await signedIn();
+  if (out) return out;
+  const role = input.role.trim();
+  if (!/^[a-z][a-z0-9_-]{0,31}$/.test(role)) {
+    return { ok: false, error: "A role is lowercase letters, digits, _ or -, e.g. admin or support-agent." };
+  }
+  try {
+    await auth.api.setRole({ body: { userId: input.userId, role: role as "user" }, headers: await headers() });
+  } catch (error) {
+    return failed(error);
+  }
+  revalidatePath("/dashboard/users");
+  return { ok: true };
+}
+
+/** A banned account keeps its data and loses its way in; unban restores it. */
+export async function setBannedAction(input: { userId: string; banned: boolean }): Promise<UserActionResult> {
+  const out = await signedIn();
+  if (out) return out;
+  try {
+    if (input.banned) {
+      await auth.api.banUser({ body: { userId: input.userId }, headers: await headers() });
+    } else {
+      await auth.api.unbanUser({ body: { userId: input.userId }, headers: await headers() });
+    }
+  } catch (error) {
+    return failed(error);
+  }
+  revalidatePath("/dashboard/users");
+  return { ok: true };
+}

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

@@ -0,0 +1,54 @@
+import { redirect } from "next/navigation";
+import { count, desc } from "drizzle-orm";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { CreateUserButton } from "@/components/dashboard/user-actions";
+import { UsersTable } from "@/components/dashboard/users-table";
+import { getDb } from "@/db";
+import { user } from "@/db/auth-schema";
+import { ADMIN_ROLES, dashboardSession } from "@/lib/dashboard";
+
+export const metadata = { title: "Users" };
+
+/**
+ * Everyone with an account — there from the first sign-in, before any resource exists.
+ *
+ * Admin only: the resource policies decide who sees data, but the account list is about
+ * the people themselves, so it follows ADMIN_ROLES rather than any one policy.
+ */
+export default async function UsersPage() {
+  const { session, role } = await dashboardSession();
+  if (!session) redirect("/sign-in?next=/dashboard/users");
+  if (!role || !ADMIN_ROLES.includes(role)) redirect("/dashboard");
+
+  const db = getDb();
+  const [rows, [{ total } = { total: 0 }]] = await Promise.all([
+    db
+      .select({
+        id: user.id,
+        name: user.name,
+        email: user.email,
+        image: user.image,
+        role: user.role,
+        banned: user.banned,
+        emailVerified: user.emailVerified,
+        twoFactorEnabled: user.twoFactorEnabled,
+        createdAt: user.createdAt,
+      })
+      .from(user)
+      .orderBy(desc(user.createdAt))
+      .limit(200),
+    db.select({ total: count() }).from(user),
+  ]);
+
+  return (
+    <>
+      <PageHeader
+        title="Users"
+        description="Everyone who can sign in, newest first — and what each of them is allowed to be."
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Users" }]}
+        actions={<CreateUserButton />}
+      />
+      <UsersTable rows={rows} total={total} currentUserId={session.user.id} />
+    </>
+  );
+}

package/templates/app/components/dashboard/dashboard-header.tsx

@@ -30,7 +30,7 @@ function applyTheme(theme: Theme) {
   if (theme !== "system") root.classList.add(theme);
 }
 
-export function DashboardHeader({ user, initialTheme, notices = [] }: { user: DashboardUser; initialTheme: Theme; notices?: Notice[] }) {
+export function DashboardHeader({ user, initialTheme, notices = [], isAdmin = false }: { user: DashboardUser; initialTheme: Theme; notices?: Notice[]; isAdmin?: boolean }) {
   const [theme, setTheme] = useState<Theme>(initialTheme);
   const dark = theme === "dark" || (theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
   const needsAttention = notices.some((notice) => notice.tone === "warning");
@@ -106,7 +106,7 @@ export function DashboardHeader({ user, initialTheme, notices = [] }: { user: Da
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-60">
-            <UserMenuItems user={user} />
+            <UserMenuItems user={user} isAdmin={isAdmin} />
           </DropdownMenuContent>
         </DropdownMenu>
       </div>

package/templates/app/components/dashboard/dashboard-sidebar.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
-import { ActivityIcon, LayoutDashboardIcon, UserCircleIcon } from "lucide-react";
+import { ActivityIcon, LayoutDashboardIcon, UserCircleIcon, UsersIcon } from "lucide-react";
 import { ChevronsUpDownIcon } from "lucide-react";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import {
@@ -56,8 +56,11 @@ function byGroup(resources: NavResource[]): [string, NavResource[]][] {
 /** Sections every dashboard has, whatever resources the app defines. */
 const ACCOUNT_LINKS = [{ href: "/dashboard/account", label: "Account", icon: UserCircleIcon }];
 // Security has its own page once `flare gen security` runs, which adds its link to
-// lib/dashboard-nav.ts; observability ships with every app.
-const ADMIN_LINKS = [{ href: "/dashboard/observability", label: "Observability", icon: ActivityIcon }];
+// lib/dashboard-nav.ts; users and observability ship with every app.
+const ADMIN_LINKS = [
+  { href: "/dashboard/users", label: "Users", icon: UsersIcon },
+  { href: "/dashboard/observability", label: "Observability", icon: ActivityIcon },
+];
 
 export function DashboardSidebar({
   appName,
@@ -113,8 +116,8 @@ export function DashboardSidebar({
         </SidebarGroup>
 
         {byGroup(resources).map(([heading, group]) => (
-          <SidebarGroup key={heading} className="px-2 py-1">
-            <SidebarGroupLabel className="mt-1 h-6">{heading}</SidebarGroupLabel>
+          <SidebarGroup key={heading} className="border-t px-2 py-1">
+            <SidebarGroupLabel className="mt-1 h-6 text-[11px] font-medium uppercase tracking-wider">{heading}</SidebarGroupLabel>
             <SidebarGroupContent>
               <SidebarMenu>
                 {group.map((resource) => {
@@ -149,8 +152,8 @@ export function DashboardSidebar({
           </SidebarGroup>
         ))}
 
-        <SidebarGroup className="px-2 py-1">
-          <SidebarGroupLabel className="mt-1 h-6">Manage</SidebarGroupLabel>
+        <SidebarGroup className="border-t px-2 py-1">
+          <SidebarGroupLabel className="mt-1 h-6 text-[11px] font-medium uppercase tracking-wider">Manage</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
               {manage.map((link) => (
@@ -168,8 +171,8 @@ export function DashboardSidebar({
         </SidebarGroup>
 
         {links.length > 0 && (
-          <SidebarGroup className="px-2 py-1">
-            <SidebarGroupLabel className="mt-1 h-6">Platform</SidebarGroupLabel>
+          <SidebarGroup className="border-t px-2 py-1">
+            <SidebarGroupLabel className="mt-1 h-6 text-[11px] font-medium uppercase tracking-wider">Platform</SidebarGroupLabel>
             <SidebarGroupContent>
               <SidebarMenu>
                 {links.map((link) => {
@@ -217,7 +220,7 @@ export function DashboardSidebar({
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent side="top" align="start" className="w-60">
-                <UserMenuItems user={user} />
+                <UserMenuItems user={user} isAdmin={isAdmin} />
               </DropdownMenuContent>
             </DropdownMenu>
           </SidebarMenuItem>