@flaredev/cli 0.12.2 → 0.14.0

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/roles/actions.ts

@@ -0,0 +1,57 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { createRole, deleteRole, setGrant } from "@/lib/permissions";
+import { ADMIN_ROLES, dashboardSession } from "@/lib/dashboard";
+
+/**
+ * Changing who may do what.
+ *
+ * Admin only, and deliberately not policy-driven: these actions decide what the
+ * policies themselves allow, so gating them on a policy would be circular. ADMIN_ROLES
+ * (lib/dashboard.ts) is the one list that governs the app's own settings.
+ */
+
+export type RoleActionResult = { ok: true } | { ok: false; error: string };
+
+const ROLE_NAME = /^[a-z][a-z0-9_-]{0,31}$/;
+const ACTIONS = new Set(["read", "create", "update", "delete"]);
+
+async function requireAdmin(): Promise<RoleActionResult | undefined> {
+  const { session, role } = await dashboardSession();
+  if (!session) return { ok: false, error: "You're signed out." };
+  if (!role || !ADMIN_ROLES.includes(role)) return { ok: false, error: "Only an admin can change roles." };
+}
+
+export async function createRoleAction(input: { name: string; label: string }): Promise<RoleActionResult> {
+  const denied = await requireAdmin();
+  if (denied) return denied;
+  const name = input.name.trim().toLowerCase();
+  if (!ROLE_NAME.test(name)) {
+    return { ok: false, error: "A role is lowercase letters, digits, _ or -, starting with a letter — e.g. support-agent." };
+  }
+  await createRole(name, input.label.trim() || name);
+  revalidatePath("/dashboard/roles");
+  return { ok: true };
+}
+
+export async function deleteRoleAction(name: string): Promise<RoleActionResult> {
+  const denied = await requireAdmin();
+  if (denied) return denied;
+  // Not admin: the role this screen is gated on cannot be removed from this screen,
+  // which is the one mistake here that cannot be undone from the dashboard.
+  if (ADMIN_ROLES.includes(name)) return { ok: false, error: `"${name}" runs this screen, so it can't be deleted here.` };
+  await deleteRole(name);
+  revalidatePath("/dashboard/roles");
+  return { ok: true };
+}
+
+export async function setGrantAction(input: { role: string; resource: string; action: string; granted: boolean }): Promise<RoleActionResult> {
+  const denied = await requireAdmin();
+  if (denied) return denied;
+  if (!ROLE_NAME.test(input.role)) return { ok: false, error: `"${input.role}" is not a role name.` };
+  if (!ACTIONS.has(input.action)) return { ok: false, error: `"${input.action}" is not an action.` };
+  await setGrant(input.role, input.resource, input.action, input.granted);
+  revalidatePath("/dashboard/roles");
+  return { ok: true };
+}

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

@@ -0,0 +1,56 @@
+import { redirect } from "next/navigation";
+import { grantIndex } from "@flaredev/core";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { RoleMatrix, type MatrixResource } from "@/components/dashboard/role-matrix";
+import { ADMIN_ROLES, allResources, dashboardSession } from "@/lib/dashboard";
+import { allGrants, codePolicy, GRANTABLE, listRoles, rolesInUse } from "@/lib/permissions";
+
+export const metadata = { title: "Roles & permissions" };
+
+/**
+ * Who may do what, per role.
+ *
+ * Admin only, and not governed by a resource policy: this screen decides what the
+ * policies allow, so gating it on one would be circular. It reads the policy files and
+ * the grants together, and shows which ticks came from which — a tick from a file is
+ * locked, because the file is the floor and the dashboard only widens it.
+ */
+export default async function RolesPage() {
+  const { session, role } = await dashboardSession();
+  if (!session) redirect("/sign-in?next=/dashboard/roles");
+  if (!role || !ADMIN_ROLES.includes(role)) redirect("/dashboard");
+
+  const [roles, grants, inUse] = await Promise.all([listRoles(), allGrants(), rolesInUse()]);
+  const index = grantIndex(grants);
+
+  // Every role an account could hold, not only the registered ones: the admin plugin's
+  // default is "user", and a role assigned with `flare user:role` before anybody opened
+  // this screen exists whether or not it was registered here. Showing it is how you
+  // discover you have one.
+  const known = new Map(roles.map((entry) => [entry.name, entry]));
+  for (const name of [...ADMIN_ROLES, "user", ...inUse]) {
+    if (!known.has(name)) known.set(name, { name, label: name });
+  }
+
+  const resources: MatrixResource[] = allResources().map((resource) => {
+    const policy = codePolicy(resource.name);
+    const fromCode: Record<string, string[]> = {};
+    const granted: Record<string, string[]> = {};
+    for (const action of GRANTABLE) {
+      fromCode[action] = policy ? policy[action] : [];
+      granted[action] = [...(index.get(`${resource.name}.${action}`) ?? [])];
+    }
+    return { name: resource.name, pluralLabel: resource.pluralLabel, restricted: Boolean(policy), fromCode, granted };
+  });
+
+  return (
+    <>
+      <PageHeader
+        title="Roles & permissions"
+        description="What each role may do, per resource. Policy files set the floor; what you tick here widens it."
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Roles & permissions" }]}
+      />
+      <RoleMatrix roles={[...known.values()]} resources={resources} adminRoles={ADMIN_ROLES} />
+    </>
+  );
+}

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/app/error.tsx

@@ -3,6 +3,7 @@
 import { useEffect } from "react";
 import Link from "next/link";
 import { RefreshCwIcon, TriangleAlertIcon } from "lucide-react";
+import { hardReload, isStaleChunkError } from "@/lib/stale-chunk";
 
 /**
  * The public error boundary.
@@ -11,6 +12,10 @@ import { RefreshCwIcon, TriangleAlertIcon } from "lucide-react";
  * needs somewhere to hand `reset`, which re-renders the segment without a full page
  * load, and that is usually all a transient failure needs.
  *
+ * Usually, but not always: a tab holding stale JavaScript throws too, and `reset` can
+ * never fix that one — it re-renders the same stale modules. So that case is told
+ * apart and offered a reload, which does fix it. See lib/stale-chunk.ts.
+ *
  * `error.digest` is the only detail shown. The message itself is deliberately not:
  * in production it is replaced by React anyway, and in development the overlay is
  * more use than anything printed here.
@@ -21,17 +26,21 @@ export default function Error({ error, reset }: { error: Error & { digest?: stri
     console.error(error);
   }, [error]);
 
+  const stale = isStaleChunkError(error);
+
   return (
     <main className="mx-auto flex min-h-[70vh] max-w-2xl flex-col items-center justify-center gap-6 px-6 py-20 text-center">
       <div className="flex size-14 items-center justify-center rounded-2xl border border-border bg-surface">
         <TriangleAlertIcon className="size-6 text-danger" aria-hidden="true" />
       </div>
       <div className="flex flex-col gap-3">
-        <h1 className="text-3xl text-balance md:text-4xl">Something went wrong</h1>
+        <h1 className="text-3xl text-balance md:text-4xl">{stale ? "This tab is running old code" : "Something went wrong"}</h1>
         <p className="text-foreground-muted text-pretty">
-          This one is on us. Trying again often works; if it doesn&apos;t, the error has been logged.
+          {stale
+            ? "Nothing is wrong with the app. This tab loaded one build and the server is serving another — usually after an update, or after starting a different app on this port. Reloading fixes it."
+            : "This one is on us. Trying again often works; if it doesn't, the error has been logged."}
         </p>
-        {error.digest && (
+        {!stale && error.digest && (
           <p className="font-mono text-xs text-foreground-muted">
             Reference: <span className="select-all">{error.digest}</span>
           </p>
@@ -40,11 +49,11 @@ export default function Error({ error, reset }: { error: Error & { digest?: stri
       <div className="flex flex-wrap justify-center gap-3">
         <button
           type="button"
-          onClick={reset}
+          onClick={stale ? hardReload : reset}
           className="inline-flex h-11 items-center gap-2 rounded-[var(--button-radius)] bg-brand px-5 font-medium text-brand-foreground [background-image:var(--brand-gradient,none)] hover:brightness-95"
         >
           <RefreshCwIcon className="size-4" aria-hidden="true" />
-          Try again
+          {stale ? "Reload the page" : "Try again"}
         </button>
         <Link href="/" className="inline-flex h-11 items-center rounded-[var(--button-radius)] border border-border px-5 font-medium hover:bg-accent">
           Back home

package/templates/app/components/account/sections.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { renderSVG } from "uqr";
 import { CheckIcon, CopyIcon, FingerprintIcon, LaptopIcon, ShieldCheckIcon, Trash2Icon } from "lucide-react";
 import { AuthInput, AuthLabel, FormMessage, PrimaryButton, SecondaryButton, TextButton } from "@/components/auth/ui";
-import { PasswordField } from "@/components/auth/password-field";
+import { PasswordField, PasswordInput } from "@/components/auth/password-field";
 import { authErrorMessage } from "@/components/auth/sign-in-flow";
 import { PROVIDER_LABELS, ProviderIcon } from "@/components/auth/provider-icons";
 import { authClient } from "@/lib/auth-client";
@@ -50,7 +50,7 @@ function PasswordConfirm({ value, onChange, id }: { value: string; onChange: (va
   return (
     <div className="flex flex-col gap-2">
       <AuthLabel htmlFor={id}>Your password</AuthLabel>
-      <AuthInput id={id} type="password" autoComplete="current-password" value={value} onChange={(event) => onChange(event.target.value)} required />
+      <PasswordInput id={id} autoComplete="current-password" value={value} onChange={(event) => onChange(event.target.value)} required />
     </div>
   );
 }
@@ -459,6 +459,26 @@ function describeDevice(agent?: string | null): string {
   return system ? `${browser} on ${system}` : browser;
 }
 
+/**
+ * Where a session came from, in words rather than a number nobody can read.
+ *
+ * Better Auth records whatever address the request arrived from, and on a machine
+ * talking to itself that is the loopback — which IPv6 writes in full as
+ * 0000:0000:0000:0000:0000:0000:0000:0001. Printing that in a list headed "Sign out of
+ * devices you don't recognise" is worse than printing nothing: it is unreadable, it is
+ * identical on every row, and it looks like a bug. Say "this computer" instead, which
+ * is both true and useful.
+ */
+function describeOrigin(ip?: string | null): string | null {
+  if (!ip) return null;
+  const address = ip.trim().toLowerCase().replace(/^\[|\]$/g, "");
+  // Every spelling of "no address" and "here": IPv4 and IPv6 loopback, the unspecified
+  // address, and the IPv4-mapped forms a dual-stack listener reports.
+  if (/^(::1?|0+(:0+)*|127(\.\d+){3}|::ffff:127(\.\d+){3}|localhost)$/.test(address)) return "this computer";
+  if (/^(10|127)\.|^192\.168\.|^172\.(1[6-9]|2\d|3[01])\.|^fe80:/.test(address)) return `${ip} (local network)`;
+  return ip;
+}
+
 export function Sessions() {
   const [list, setList] = useState<SessionRow[] | null>(null);
   const [current, setCurrent] = useState<string | null>(null);
@@ -488,7 +508,7 @@ export function Sessions() {
             <span className="flex-1">
               <span className="font-medium">{describeDevice(item.userAgent)}</span>
               <span className="block text-xs text-foreground-muted">
-                {item.ipAddress || "Unknown location"}
+                {describeOrigin(item.ipAddress) ?? "Unknown location"}
                 {item.updatedAt && `, last active ${new Date(item.updatedAt).toLocaleString()}`}
               </span>
             </span>

package/templates/app/components/auth/password-field.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useId, useMemo, useState } from "react";
+import { forwardRef, useId, useMemo, useState } from "react";
 import { CheckIcon, EyeIcon, EyeOffIcon } from "lucide-react";
 import { checkPassword, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH } from "@/lib/password-rules";
 import { cn } from "@/lib/utils";
@@ -22,6 +22,40 @@ interface Props {
   avoid?: (string | null | undefined)[];
 }
 
+/**
+ * A password input with the eye that reveals what you typed.
+ *
+ * The one place that knows how to do this, because a password field people cannot see
+ * into is where typos go to hide — and a form that offers the eye in one place and not
+ * the next teaches people not to trust it. {@link PasswordField} wraps this with the
+ * rules and the strength meter; forms that only need the box use it directly.
+ */
+export const PasswordInput = forwardRef<HTMLInputElement, Omit<React.ComponentProps<typeof AuthInput>, "type">>(
+  function PasswordInput({ className, ...props }, ref) {
+    const [visible, setVisible] = useState(false);
+    return (
+      <div className="relative">
+        <AuthInput ref={ref} {...props} type={visible ? "text" : "password"} className={cn("pr-11", className)} />
+        <button
+          type="button"
+          onClick={() => setVisible(!visible)}
+          aria-pressed={visible}
+          aria-controls={props.id}
+          aria-label={visible ? "Hide password" : "Show password"}
+          title={visible ? "Hide password" : "Show password"}
+          // Not in the tab order: the input it belongs to is, and a keyboard user
+          // tabbing from the password to a toggle before the submit button is a worse
+          // path than the one they expect.
+          tabIndex={-1}
+          className="absolute inset-y-0 right-0 grid w-11 place-items-center text-foreground-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+        >
+          {visible ? <EyeOffIcon className="size-4.5" /> : <EyeIcon className="size-4.5" />}
+        </button>
+      </div>
+    );
+  },
+);
+
 const BAR_COLOURS = ["bg-danger", "bg-danger", "bg-warning", "bg-success/70", "bg-success"];
 
 /**
@@ -46,43 +80,28 @@ export function PasswordField({
   const generatedId = useId();
   const fieldId = id ?? generatedId;
   const hintId = `${fieldId}-hint`;
-  const [visible, setVisible] = useState(false);
   const check = useMemo(() => checkPassword(value, avoid), [value, avoid.join("\u0000")]);
   const started = value.length > 0;
 
   return (
     <div className="flex flex-col gap-2">
       <AuthLabel htmlFor={fieldId}>{label}</AuthLabel>
-      <div className="relative">
-        <AuthInput
-          id={fieldId}
-          name={name}
-          type={visible ? "text" : "password"}
-          autoComplete={autoComplete}
-          autoFocus={autoFocus}
-          required={required}
-          placeholder={placeholder}
-          value={value}
-          onChange={(event) => onChange(event.target.value)}
-          minLength={autoComplete === "new-password" ? PASSWORD_MIN_LENGTH : undefined}
-          maxLength={PASSWORD_MAX_LENGTH}
-          aria-describedby={showRules ? hintId : undefined}
-          // A styling hook, so the field can go green without any state plumbing.
-          data-has-passed-validation={showRules && check.valid ? "" : undefined}
-          className={cn("pr-11", showRules && check.valid && "border-success/60")}
-        />
-        <button
-          type="button"
-          onClick={() => setVisible(!visible)}
-          aria-pressed={visible}
-          aria-controls={fieldId}
-          aria-label={visible ? "Hide password" : "Show password"}
-          title={visible ? "Hide password" : "Show password"}
-          className="absolute inset-y-0 right-0 grid w-11 place-items-center text-foreground-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
-        >
-          {visible ? <EyeOffIcon className="size-4.5" /> : <EyeIcon className="size-4.5" />}
-        </button>
-      </div>
+      <PasswordInput
+        id={fieldId}
+        name={name}
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
+        required={required}
+        placeholder={placeholder}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        minLength={autoComplete === "new-password" ? PASSWORD_MIN_LENGTH : undefined}
+        maxLength={PASSWORD_MAX_LENGTH}
+        aria-describedby={showRules ? hintId : undefined}
+        // A styling hook, so the field can go green without any state plumbing.
+        data-has-passed-validation={showRules && check.valid ? "" : undefined}
+        className={cn(showRules && check.valid && "border-success/60")}
+      />
 
       {showRules && (
         <div id={hintId} className="flex flex-col gap-2">