@flaredev/cli 0.12.2 → 0.14.0

package/templates/app/migrations/meta/0000_snapshot.json

@@ -1,7 +1,7 @@
 {
   "version": "6",
   "dialect": "sqlite",
-  "id": "06909070-5897-4787-87c1-4e86bf5f98d3",
+  "id": "e643eb1a-d0d0-4191-83cf-68129224a23d",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "tables": {
     "account": {
@@ -734,6 +734,62 @@
       "uniqueConstraints": {},
       "checkConstraints": {}
     },
+    "role_permission": {
+      "name": "role_permission",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "resource": {
+          "name": "resource",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "action": {
+          "name": "action",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+        }
+      },
+      "indexes": {
+        "role_permission_unique": {
+          "name": "role_permission_unique",
+          "columns": [
+            "role",
+            "resource",
+            "action"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
     "saved_view": {
       "name": "saved_view",
       "columns": {

package/templates/app/migrations/meta/_journal.json

@@ -5,7 +5,7 @@
     {
       "idx": 0,
       "version": "6",
-      "when": 1790112915429,
+      "when": 1794024182826,
       "tag": "0000_init",
       "breakpoints": true
     }

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/locks/cloudflare/pnpm-lock.yaml

@@ -58,7 +58,7 @@ importers:
         version: 0.45.4(kysely@0.29.8)
       lucide-react:
         specifier: ^1.46.0
-        version: 1.69.0(@types/react@19.3.0)(react@19.3.1)
+        version: 1.70.0(@types/react@19.3.0)(react@19.3.1)
       radix-ui:
         specifier: ^1.6.7
         version: 1.8.1(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
@@ -2527,8 +2527,8 @@ packages:
       sqlite3:
         optional: true
 
-  electron-to-chromium@1.5.477:
-    resolution: {integrity: sha512-PN++F4zWZoVDGWinxMnSCpVqKhqFOJfLXxdU8bYJKudAEsHL/XKVITOKWVbfMt1r276Mi9RDLU9VHx9uKJ4RMQ==}
+  electron-to-chromium@1.5.478:
+    resolution: {integrity: sha512-pftG+ma5Lm8O6/p45bhYT6StBN5ziQymaRzmCZwFl8DwWHKPPD93FdOmP1aqftcepolQYvrcyTLa17kE8Yf+jg==}
 
   emoji-regex-xs@2.0.1:
     resolution: {integrity: sha512-1QFuh8l7LqUcKe24LsPUNzjrzJQ7pgRwp1QMcZ5MX6mFplk2zQ08NVCM84++1cveaUUYtcCYHmeFEuNg16sU4g==}
@@ -2756,8 +2756,8 @@ packages:
   linebreak@1.1.0:
     resolution: {integrity: sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==}
 
-  lucide-react@1.69.0:
-    resolution: {integrity: sha512-UTFECm4yEgkgMN0kfLuxWcmlk+4u02Jrqehgk3ZXRx/Ud68OpP7hjkp67bvkBHmIpMaZCIveF1QDYeupO7XmYQ==}
+  lucide-react@1.70.0:
+    resolution: {integrity: sha512-gCTPPN1MlQUBtUgdsUv+0CAUj+X8hifRUiRBw4E5v7lvDIOIpx0EZezdGQMSimS8pKA6esvullJub4GYr0mCHA==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -5185,7 +5185,7 @@ snapshots:
     dependencies:
       baseline-browser-mapping: 2.11.35
       caniuse-lite: 1.0.30001822
-      electron-to-chromium: 1.5.477
+      electron-to-chromium: 1.5.478
       node-releases: 2.0.63
       update-browserslist-db: 1.3.4(browserslist@4.29.5)
 
@@ -5256,7 +5256,7 @@ snapshots:
     optionalDependencies:
       kysely: 0.29.8
 
-  electron-to-chromium@1.5.477: {}
+  electron-to-chromium@1.5.478: {}
 
   emoji-regex-xs@2.0.1: {}
 
@@ -5495,7 +5495,7 @@ snapshots:
       base64-js: 0.0.8
       unicode-trie: 2.0.0
 
-  lucide-react@1.69.0(@types/react@19.3.0)(react@19.3.1):
+  lucide-react@1.70.0(@types/react@19.3.0)(react@19.3.1):
     dependencies:
       react: 19.3.1
     optionalDependencies:

package/templates/locks/next/pnpm-lock.yaml

@@ -3169,8 +3169,8 @@ packages:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
-  glob@13.0.6:
-    resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
+  glob@13.0.7:
+    resolution: {integrity: sha512-wfsFgXQ8A3SEI9XGf7Nl3Y9l7ffSrGh7SUCT7vU/2CzYPep9kjxAn1S40F9OPKxAMGCVl7HtNlJhrCJUeUq83g==}
     engines: {node: 18 || 20 || >=22}
 
   graceful-fs@4.2.11:
@@ -6412,7 +6412,7 @@ snapshots:
       async-sema: 3.1.1
       bindings: 1.5.0
       estree-walker: 2.0.2
-      glob: 13.0.6
+      glob: 13.0.7
       graceful-fs: 4.2.11
       node-gyp-build: 4.8.4
       picomatch: 4.0.7
@@ -7163,7 +7163,7 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob@13.0.6:
+  glob@13.0.7:
     dependencies:
       minimatch: 10.2.6
       minipass: 7.1.3

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 "—";
+}

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

@@ -1,22 +1,31 @@
 import Link from "next/link";
-import { ArrowRightIcon, CheckCircle2Icon, CircleIcon, PlusIcon } from "lucide-react";
+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 { prisma } from "@/lib/db";
 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) => {
@@ -26,14 +35,33 @@ 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 [people, peopleThisWeek] = isAdmin
+    ? await Promise.all([prisma.user.count(), prisma.user.count({ where: { createdAt: { gte: week } } })])
+    : [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 = await prisma.passkey.count({ where: { userId: user.id } });
   const twoFactorOn = Boolean((user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled);
@@ -48,31 +76,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/next/app/dashboard/users/page.tsx

@@ -0,0 +1,51 @@
+import { redirect } from "next/navigation";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { CreateUserButton } from "@/components/dashboard/user-actions";
+import { UsersTable } from "@/components/dashboard/users-table";
+import { prisma } from "@/lib/db";
+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 [rows, total] = await Promise.all([
+    prisma.user.findMany({
+      orderBy: { createdAt: "desc" },
+      take: 200,
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        image: true,
+        role: true,
+        banned: true,
+        emailVerified: true,
+        twoFactorEnabled: true,
+        createdAt: true,
+      },
+    }),
+    prisma.user.count(),
+  ]);
+
+  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/next/lib/auth.ts

@@ -190,7 +190,7 @@ async function promoteFirstUser() {
 }
 
 export const auth = betterAuth({
-  appName: "__APP_NAME__",
+  appName: "__APP_TITLE__",
   secret: process.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
@@ -263,7 +263,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,
@@ -271,7 +271,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/next/lib/dashboard-nav.ts

@@ -0,0 +1,29 @@
+// Extra dashboard sidebar links (maintained by flare generators such as `flare gen security`).
+// Add your own links outside the generated block.
+// generated:start
+export interface DashboardLink {
+  label: string;
+  href: string;
+  /** A resource icon name, e.g. "shield" (see components/dashboard/resource-icon.tsx). */
+  icon: string;
+}
+
+export const generatedDashboardLinks: DashboardLink[] = [];
+// generated:end
+
+import { authConfig } from "./auth-config";
+
+/**
+ * Links shown under "Platform" in the dashboard sidebar.
+ *
+ * No Costs page on this stack: the estimator prices Workers, D1 and R2 from Cloudflare's
+ * price sheet, and this app runs on Vercel and Neon, whose bills live in their own
+ * dashboards.
+ */
+export const dashboardLinks: DashboardLink[] = [
+  // Only where invitations are the way in; the page explains itself for the other two
+  // modes, but there is no reason to send anybody to it.
+  ...(authConfig.signup === "invite" ? [{ label: "Invitations", href: "/dashboard/invitations", icon: "mail" }] : []),
+  ...generatedDashboardLinks,
+  { label: "API reference", href: "/api/reference", icon: "book" },
+];