@flaredev/cli 0.12.2 → 0.14.0

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/components/ui/combobox.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { CheckIcon, ChevronsUpDownIcon, PlusIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  /** A second line, for options whose label is not enough on its own. */
+  hint?: string;
+}
+
+/**
+ * A select you can type into.
+ *
+ * A plain `<select>` is fine for three options and miserable for thirty: you cannot
+ * search it, and on a touch device it becomes a native wheel. This is the pattern the
+ * relation field already used — a popover over a command list — made general, so every
+ * place in the app that chooses one thing from a list behaves the same way.
+ *
+ * `allowCustom` lets the typed text be the answer. That is for values which are not a
+ * fixed set — a role is just a string your policies name, so the list is a convenience
+ * rather than a constraint, and the field must not stop you inventing one.
+ */
+export function Combobox({
+  options,
+  value,
+  onChange,
+  id,
+  name,
+  placeholder = "Select…",
+  searchPlaceholder = "Search…",
+  emptyMessage = "Nothing found.",
+  allowCustom = false,
+  customLabel = (typed: string) => `Use "${typed}"`,
+  disabled,
+  invalid,
+  className,
+}: {
+  options: ComboboxOption[];
+  value: string;
+  onChange: (value: string) => void;
+  id?: string;
+  /** Mirrors the value into a hidden input, so plain `<form>` submission sees it. */
+  name?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  allowCustom?: boolean;
+  customLabel?: (typed: string) => string;
+  disabled?: boolean;
+  invalid?: boolean;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+
+  const selected = options.find((option) => option.value === value);
+  // A custom value is shown as itself rather than falling back to the placeholder,
+  // which would make a perfectly good answer look like no answer.
+  const display = selected?.label ?? (value || null);
+
+  const typed = query.trim();
+  const canCreate = allowCustom && typed.length > 0 && !options.some((option) => option.value.toLowerCase() === typed.toLowerCase());
+
+  const choose = (next: string) => {
+    onChange(next);
+    setQuery("");
+    setOpen(false);
+  };
+
+  const filtered = useMemo(() => {
+    if (!typed) return options;
+    const needle = typed.toLowerCase();
+    return options.filter((option) => option.label.toLowerCase().includes(needle) || option.value.toLowerCase().includes(needle));
+  }, [options, typed]);
+
+  return (
+    <>
+      {name && <input type="hidden" name={name} value={value} />}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            id={id}
+            type="button"
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            aria-invalid={invalid || undefined}
+            disabled={disabled}
+            className={cn("w-full justify-between font-normal", !display && "text-muted-foreground", className)}
+          >
+            <span className="truncate">{display ?? placeholder}</span>
+            <ChevronsUpDownIcon className="opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+          <Command shouldFilter={false}>
+            <CommandInput placeholder={searchPlaceholder} value={query} onValueChange={setQuery} />
+            <CommandList>
+              {filtered.length === 0 && !canCreate && <CommandEmpty>{emptyMessage}</CommandEmpty>}
+              {filtered.length > 0 && (
+                <CommandGroup>
+                  {filtered.map((option) => (
+                    <CommandItem key={option.value} value={option.value} onSelect={() => choose(option.value)}>
+                      <span className="flex min-w-0 flex-col">
+                        <span className="truncate">{option.label}</span>
+                        {option.hint && <span className="truncate text-xs text-muted-foreground">{option.hint}</span>}
+                      </span>
+                      <CheckIcon className={cn("ml-auto", option.value === value ? "opacity-100" : "opacity-0")} />
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+              {canCreate && (
+                <CommandGroup>
+                  <CommandItem value={`__create__${typed}`} onSelect={() => choose(typed)}>
+                    <PlusIcon />
+                    {customLabel(typed)}
+                  </CommandItem>
+                </CommandGroup>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}

package/templates/app/db/flare-schema.ts

@@ -1,5 +1,5 @@
 import { sql } from "drizzle-orm";
-import { index, integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+import { index, integer, sqliteTable, text, uniqueIndex } from "drizzle-orm/sqlite-core";
 
 /**
  * Roles a user can hold (`user.role` from Better Auth's admin plugin).
@@ -14,6 +14,32 @@ export const role = sqliteTable("role", {
     .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`),
 });
 
+/**
+ * Permissions granted from the dashboard, on top of the policies in your code.
+ *
+ * A row says "this role may do this to this resource". It can only ever *widen* what
+ * `policies/*.policy.ts` already allows — see `withGrants` in @flaredev/core. A
+ * resource with no policy file is open to every signed-in user, and no row here changes
+ * that; the roles screen says so rather than pretending otherwise.
+ */
+export const rolePermission = sqliteTable(
+  "role_permission",
+  {
+    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    /** The role's name, as in the `role` table and `user.role`. */
+    role: text("role").notNull(),
+    /** The resource's descriptor name, e.g. "Invoice". */
+    resource: text("resource").notNull(),
+    /** "read", "create", "update" or "delete". */
+    action: text("action").notNull(),
+    createdAt: integer("created_at", { mode: "timestamp_ms" })
+      .notNull()
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`),
+  },
+  // One row per cell of the matrix: ticking a box twice is the same tick.
+  (table) => [uniqueIndex("role_permission_unique").on(table.role, table.resource, table.action)],
+);
+
 /**
  * Who changed what, and when. Written by the dashboard's actions (lib/audit.ts) for
  * every create, update, delete and import, and read by /dashboard/observability.

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/api.ts

@@ -6,6 +6,7 @@ import type { ResourceAction } from "@/lib/resource";
 import { checkRateLimit } from "@/lib/rate-limit";
 import type { Authorize } from "@/lib/resource/handlers";
 import { policies } from "@/policies";
+import { effectivePolicy } from "./permissions";
 import { userFromApiKey } from "./api-keys";
 import { auth } from "./auth";
 
@@ -60,7 +61,9 @@ export const authorize: Authorize = async ({ request, resource, action }) => {
   if (!session && !viaKey) return problemResponse(401, "Sign in required.", PROBLEM_CODES.unauthenticated);
 
   const role = session ? ((session.user as { role?: string | null }).role ?? null) : viaKey!.role;
-  if (!can(policyFor(resource.name), role, action)) {
+  // The effective policy: your policy file, widened by whatever the dashboard's Roles
+  // screen granted. The API and the admin read the same one, so they cannot drift.
+  if (!can(await effectivePolicy(resource.name), role, action)) {
     return problemResponse(403, `Your role can't ${action} ${resource.pluralLabel.toLowerCase()}.`, PROBLEM_CODES.forbidden);
   }
 };

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

@@ -6,6 +6,7 @@ import type { SQLiteTable } from "drizzle-orm/sqlite-core";
 import { createResourceStore, drizzleRows, type ResourceStore } from "@/lib/resource";
 import { getDb } from "@/db";
 import { policies } from "@/policies";
+import { effectivePolicy } from "./permissions";
 import { resourceTables } from "@/resources/server";
 import { currentUser } from "./api";
 import { auth } from "./auth";
@@ -18,6 +19,13 @@ import { cached, resourceTag, revalidateResource, TTL } from "./cache";
  */
 export const ADMIN_ROLES = ["admin", "staff"];
 
+/**
+ * The policy in your code, before the dashboard's grants.
+ *
+ * The store takes this one, because the half of a policy the store enforces is `own` —
+ * per-record ownership — which is a code decision and not something the roles screen
+ * can change. Role checks go through {@link effectivePolicy} instead.
+ */
 export function policyFor(resourceName: string): Policy | undefined {
   return (policies as Record<string, Policy | undefined>)[resourceName];
 }
@@ -26,7 +34,9 @@ export async function dashboardSession() {
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) return { session: null, role: null, allowed: false } as const;
   const role = (session.user as { role?: string | null }).role ?? null;
-  const readable = allResources().some((resource) => can(policyFor(resource.name), role, "read"));
+  const readable = (await Promise.all(allResources().map((resource) => effectivePolicy(resource.name)))).some((policy) =>
+    can(policy, role, "read"),
+  );
   return { session, role, allowed: (role !== null && ADMIN_ROLES.includes(role)) || readable } as const;
 }
 
@@ -45,7 +55,7 @@ export async function requireDashboard(returnTo = "/dashboard") {
  */
 export async function requireAccess(resource: Resource, action: PolicyAction) {
   const { session, role } = await requireDashboard(resourcePath(resource));
-  const policy = policyFor(resource.name);
+  const policy = await effectivePolicy(resource.name);
   if (!can(policy, role, action)) {
     redirect(action !== "read" && can(policy, role, "read") ? resourcePath(resource) : "/dashboard?error=forbidden");
   }
@@ -55,7 +65,7 @@ export async function requireAccess(resource: Resource, action: PolicyAction) {
 /** What the current user may do with a resource, for hiding actions they can't use. */
 export async function adminPermissions(resourceName: string) {
   const { role } = await dashboardSession();
-  return allowedActions(policyFor(resourceName), role);
+  return allowedActions(await effectivePolicy(resourceName), role);
 }
 
 /**
@@ -167,7 +177,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);
 }
@@ -191,7 +205,8 @@ export function allResources(): Resource[] {
 /** Resources the current user may read, for the sidebar and dashboard. */
 export async function visibleResources(): Promise<Resource[]> {
   const { role } = await dashboardSession();
-  return allResources().filter((resource) => can(policyFor(resource.name), role, "read"));
+  const policies = await Promise.all(allResources().map((resource) => effectivePolicy(resource.name)));
+  return allResources().filter((resource, index) => can(policies[index], role, "read"));
 }
 
 export function resourcePath(resource: Resource, ...parts: string[]) {

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/permissions.ts

@@ -0,0 +1,105 @@
+import { revalidateTag } from "next/cache";
+import { and, asc, eq } from "drizzle-orm";
+import { withGrants, type PermissionGrant, type Policy, type PolicyAction } from "@flaredev/core";
+import { getDb } from "@/db";
+import { role as roleTable, rolePermission } from "@/db/flare-schema";
+import { user } from "@/db/auth-schema";
+import { policies } from "@/policies";
+import { cached, TTL } from "./cache";
+
+/**
+ * Permissions managed from the dashboard, on top of the policies in your code.
+ *
+ * `policies/*.policy.ts` is the floor and this only ever widens it — the reasoning is
+ * in `withGrants` (@flaredev/core), and the short version is that a row in a table must
+ * never be able to lock an app out or quietly restrict something the code left open.
+ *
+ * Everything here is cached under one tag and revalidated on every write, so a role
+ * change takes effect on the editor's next request rather than in a minute's time.
+ */
+
+export const GRANTS_TAG = "flare/permissions";
+
+/** The four things a role can be granted. "list" is read, so it is not one of them. */
+export const GRANTABLE: Exclude<PolicyAction, "list">[] = ["read", "create", "update", "delete"];
+
+const readGrants = cached(
+  async (): Promise<PermissionGrant[]> => {
+    const rows = await getDb()
+      .select({ role: rolePermission.role, resource: rolePermission.resource, action: rolePermission.action })
+      .from(rolePermission);
+    return rows as PermissionGrant[];
+  },
+  ["flare", "permissions"],
+  { tags: [GRANTS_TAG], revalidate: TTL.medium },
+);
+
+/** Every grant in the database. */
+export function allGrants(): Promise<PermissionGrant[]> {
+  return readGrants();
+}
+
+/** The policy in your code, before the dashboard's grants. */
+export function codePolicy(resourceName: string): Policy | undefined {
+  return (policies as Record<string, Policy | undefined>)[resourceName];
+}
+
+/**
+ * The policy actually enforced for a resource: the file, widened by the grants.
+ *
+ * Undefined when there is no policy file, which means the resource is open to every
+ * signed-in user — and grants on it do nothing. The roles screen says so.
+ */
+export async function effectivePolicy(resourceName: string): Promise<Policy | undefined> {
+  return withGrants(codePolicy(resourceName), resourceName, await allGrants());
+}
+
+/** Roles that exist, newest last. Registering one is what makes it offerable in the UI. */
+export async function listRoles(): Promise<{ name: string; label: string }[]> {
+  return getDb().select({ name: roleTable.name, label: roleTable.label }).from(roleTable).orderBy(asc(roleTable.createdAt));
+}
+
+/**
+ * Roles that accounts actually hold, registered or not.
+ *
+ * `flare user:role someone@example.com auditor` is a complete way to create a role —
+ * the string on the account is the role. If this screen only listed the `role` table it
+ * would hide the ones already in use, and you could not grant anything to them. So the
+ * two lists are merged, and holding a role is enough to appear.
+ */
+export async function rolesInUse(): Promise<string[]> {
+  const rows = await getDb().selectDistinct({ role: user.role }).from(user);
+  return rows.map((row) => row.role).filter((role): role is string => Boolean(role));
+}
+
+export async function createRole(name: string, label: string): Promise<void> {
+  await getDb().insert(roleTable).values({ name, label }).onConflictDoUpdate({ target: roleTable.name, set: { label } });
+  revalidateTag(GRANTS_TAG, { expire: 0 });
+}
+
+/**
+ * Forget a role.
+ *
+ * Its grants go with it — a grant naming a role nobody holds is noise that will outlive
+ * everyone who remembers what it was for. Accounts keep the role string they have;
+ * `can()` simply stops finding grants for it, and the policy file still decides.
+ */
+export async function deleteRole(name: string): Promise<void> {
+  const db = getDb();
+  await db.delete(rolePermission).where(eq(rolePermission.role, name));
+  await db.delete(roleTable).where(eq(roleTable.name, name));
+  revalidateTag(GRANTS_TAG, { expire: 0 });
+}
+
+/** Tick or untick one cell of the matrix. */
+export async function setGrant(role: string, resource: string, action: string, granted: boolean): Promise<void> {
+  const db = getDb();
+  if (granted) {
+    await db.insert(rolePermission).values({ role, resource, action }).onConflictDoNothing();
+  } else {
+    await db
+      .delete(rolePermission)
+      .where(and(eq(rolePermission.role, role), eq(rolePermission.resource, resource), eq(rolePermission.action, action)));
+  }
+  revalidateTag(GRANTS_TAG, { expire: 0 });
+}

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/lib/stale-chunk.ts

@@ -0,0 +1,50 @@
+/**
+ * Telling "the code in this tab is out of date" apart from a real failure.
+ *
+ * A browser that has loaded one build and is handed another — you updated the app and
+ * it rebuilt, or you started a different Flare app on the same localhost port — can end
+ * up executing a module graph that no longer matches what the server is serving. The
+ * bundler says so in its own words:
+ *
+ *   "... was instantiated because it was required from module <file>, but the module
+ *    factory is not available."
+ *
+ * It reads like a crash in your code, and it is not: nothing is wrong with the app, the
+ * tab is simply holding stale JavaScript. It matters that the error boundary knows the
+ * difference, because the usual remedy — React's `reset()`, which re-renders the
+ * segment without a page load — cannot fix this one. The stale modules are still in
+ * memory afterwards. Only a real reload replaces them.
+ */
+
+/** Phrases every bundler in this family uses for "the code in this tab is out of date". */
+const STALE_CHUNK = [
+  "module factory is not available",
+  "chunkloaderror",
+  "loading chunk",
+  "loading css chunk",
+  "failed to fetch dynamically imported module",
+  "error loading dynamically imported module",
+  "importing a module script failed",
+];
+
+/** Whether this error means the tab's JavaScript is stale rather than the app is broken. */
+export function isStaleChunkError(error: unknown): boolean {
+  if (!error) return false;
+  const name = (error as { name?: unknown }).name;
+  if (typeof name === "string" && name.toLowerCase() === "chunkloaderror") return true;
+  const message = (error as { message?: unknown }).message;
+  if (typeof message !== "string") return false;
+  const haystack = message.toLowerCase();
+  return STALE_CHUNK.some((phrase) => haystack.includes(phrase));
+}
+
+/**
+ * Reload the page, bypassing the cached modules.
+ *
+ * `location.reload()` is enough for the common case, and is what the bundler's own
+ * advice amounts to. It is called from a click handler so the browser treats it as a
+ * user-initiated navigation rather than a redirect loop.
+ */
+export function hardReload(): void {
+  if (typeof window !== "undefined") window.location.reload();
+}

package/templates/app/migrations/0000_init.sql

@@ -108,6 +108,15 @@ CREATE TABLE `role` (
 	`created_at` integer DEFAULT (cast(unixepoch('subsecond') * 1000 as integer)) NOT NULL
 );
 --> statement-breakpoint
+CREATE TABLE `role_permission` (
+	`id` text PRIMARY KEY NOT NULL,
+	`role` text NOT NULL,
+	`resource` text NOT NULL,
+	`action` text NOT NULL,
+	`created_at` integer DEFAULT (cast(unixepoch('subsecond') * 1000 as integer)) NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `role_permission_unique` ON `role_permission` (`role`,`resource`,`action`);--> statement-breakpoint
 CREATE TABLE `saved_view` (
 	`id` text PRIMARY KEY NOT NULL,
 	`user_id` text NOT NULL,