@flaredev/cli 0.12.1 → 0.13.0

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>

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