create-astram-app 0.5.0 → 0.6.0

package/template/frontend/src/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 function TooltipProvider({
   delayDuration = 0,
@@ -16,9 +16,7 @@ function TooltipProvider({
   );
 }
 
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
   return (
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
@@ -26,9 +24,7 @@ function Tooltip({
   );
 }
 
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
@@ -44,8 +40,8 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className,
         )}
         {...props}
       >

package/template/frontend/src/config/branding.js

@@ -43,10 +43,7 @@ export const branding = {
    * `VITE_APP_SUB_TAGLINE`); falls back to these static strings when the env is unset.
    */
   tagline: envString(import.meta.env.VITE_APP_TAGLINE, 'Welcome back'),
-  subTagline: envString(
-    import.meta.env.VITE_APP_SUB_TAGLINE,
-    'Sign in to your account',
-  ),
+  subTagline: envString(import.meta.env.VITE_APP_SUB_TAGLINE, 'Sign in to your account'),
   poweredBy: 'Astram',
 
   /**

package/template/frontend/src/hooks/useMobile.tsx

@@ -1,20 +1,18 @@
-import * as React from "react";
+import * as React from 'react';
 
 const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined
-  );
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
 
   React.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     };
-    mql.addEventListener("change", onChange);
+    mql.addEventListener('change', onChange);
     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
+    return () => mql.removeEventListener('change', onChange);
   }, []);
 
   return !!isMobile;

package/template/frontend/src/index.css

@@ -182,8 +182,11 @@
 @layer components {
   /* Subtle dot-grid for auth/content backgrounds (astram-tinted). */
   .grid-bg {
-    background-image:
-      radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--primary) 12%, transparent) 1px, transparent 0);
+    background-image: radial-gradient(
+      circle at 1px 1px,
+      color-mix(in oklch, var(--primary) 12%, transparent) 1px,
+      transparent 0
+    );
     background-size: 22px 22px;
   }
 

package/template/frontend/src/pages/Dashboard.jsx

@@ -53,7 +53,8 @@ export default function Dashboard() {
         <div className="mb-4">
           <h1 className="text-xl font-bold tracking-tight">Dashboard</h1>
           <p className="mt-0.5 text-sm text-muted-foreground">
-            You are signed in. Below, the app calls a protected API route as you — the framework enforces it.
+            You are signed in. Below, the app calls a protected API route as you — the framework
+            enforces it.
           </p>
         </div>
 
@@ -67,10 +68,11 @@ export default function Dashboard() {
           </CardHeader>
           <CardContent className="space-y-3">
             <p className="text-sm text-muted-foreground">
-              <code className="rounded bg-muted px-1 py-0.5 text-xs">GET /identity/companies</code> is a{' '}
-              <code className="rounded bg-muted px-1 py-0.5 text-xs">@Classified</code> route — the framework
-              resolves your bearer token to a principal and runs <code className="rounded bg-muted px-1 py-0.5 text-xs">decide()</code>{' '}
-              before the handler.
+              <code className="rounded bg-muted px-1 py-0.5 text-xs">GET /identity/companies</code>{' '}
+              is a <code className="rounded bg-muted px-1 py-0.5 text-xs">@Classified</code> route —
+              the framework resolves your bearer token to a principal and runs{' '}
+              <code className="rounded bg-muted px-1 py-0.5 text-xs">decide()</code> before the
+              handler.
             </p>
             <div className="flex flex-wrap gap-2">
               <Button variant="outline" size="sm" onClick={() => load(true)}>
@@ -104,7 +106,9 @@ export default function Dashboard() {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            {status === 'loading' && <p className="py-6 text-center text-sm text-muted-foreground">Loading…</p>}
+            {status === 'loading' && (
+              <p className="py-6 text-center text-sm text-muted-foreground">Loading…</p>
+            )}
             {status !== 'loading' && rows.length === 0 && (
               <p className="py-6 text-center text-sm text-muted-foreground">
                 No companies visible (or the call was denied).
@@ -115,7 +119,9 @@ export default function Dashboard() {
                 {i > 0 && <Separator />}
                 <div className="flex items-center justify-between py-2.5 text-sm">
                   <span className="font-medium">{r.fields?.name ?? '(unnamed)'}</span>
-                  <span className="font-mono text-xs text-muted-foreground">{r.fields?.status ?? ''}</span>
+                  <span className="font-mono text-xs text-muted-foreground">
+                    {r.fields?.status ?? ''}
+                  </span>
                 </div>
               </div>
             ))}

package/template/frontend/src/pages/ForgotPassword.jsx

@@ -47,7 +47,11 @@ export default function ForgotPassword() {
         <CardContent className="p-8">
           <div className="mb-7 flex flex-col items-center gap-4">
             {/* Brand logo — color in light, white in dark (from branding config). */}
-            <img src={branding.logo.light} alt={branding.appName} className="h-9 w-auto dark:hidden" />
+            <img
+              src={branding.logo.light}
+              alt={branding.appName}
+              className="h-9 w-auto dark:hidden"
+            />
             <img
               src={branding.logo.dark}
               alt={branding.appName}
@@ -92,7 +96,10 @@ export default function ForgotPassword() {
           )}
 
           <div className="mt-6 text-center">
-            <Link to="/login" className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline">
+            <Link
+              to="/login"
+              className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+            >
               <ArrowLeft className="size-4" />
               Back to sign in
             </Link>

package/template/frontend/src/pages/Login.jsx

@@ -171,7 +171,11 @@ export default function Login() {
         <CardContent className="p-8">
           {/* Brand logo — color in light, white in dark (from branding config). */}
           <div className="mb-6 flex justify-center">
-            <img src={branding.logo.light} alt={branding.appName} className="h-9 w-auto dark:hidden" />
+            <img
+              src={branding.logo.light}
+              alt={branding.appName}
+              className="h-9 w-auto dark:hidden"
+            />
             <img
               src={branding.logo.dark}
               alt={branding.appName}
@@ -306,85 +310,96 @@ export default function Login() {
               </button>
             </form>
           ) : (
-          <form onSubmit={onSubmit} className="space-y-4" noValidate>
-            <div className="space-y-1.5">
-              <label
-                htmlFor="identityHint"
-                className="block text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
-              >
-                Email or username
-              </label>
-              <Input
-                id="identityHint"
-                autoComplete="username"
-                autoFocus
-                value={identityHint}
-                onChange={(e) => setIdentityHint(e.target.value)}
-                onKeyDown={onFieldKeyDown}
-                placeholder="you@example.com"
-                className="h-11 bg-secondary/60"
-              />
-            </div>
-
-            <div className="space-y-1.5">
-              <label
-                htmlFor="password"
-                className="block text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
-              >
-                Password
-              </label>
-              <div className="relative">
+            <form onSubmit={onSubmit} className="space-y-4" noValidate>
+              <div className="space-y-1.5">
+                <label
+                  htmlFor="identityHint"
+                  className="block text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
+                >
+                  Email or username
+                </label>
                 <Input
-                  id="password"
-                  type={showPw ? 'text' : 'password'}
-                  autoComplete="current-password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
+                  id="identityHint"
+                  autoComplete="username"
+                  autoFocus
+                  value={identityHint}
+                  onChange={(e) => setIdentityHint(e.target.value)}
                   onKeyDown={onFieldKeyDown}
-                  placeholder="••••••••"
-                  className="h-11 bg-secondary/60 pr-10"
+                  placeholder="you@example.com"
+                  className="h-11 bg-secondary/60"
                 />
-                <button
-                  type="button"
-                  onClick={() => setShowPw((s) => !s)}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:text-foreground"
-                  aria-label={showPw ? 'Hide password' : 'Show password'}
+              </div>
+
+              <div className="space-y-1.5">
+                <label
+                  htmlFor="password"
+                  className="block text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
                 >
-                  {showPw ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
-                </button>
+                  Password
+                </label>
+                <div className="relative">
+                  <Input
+                    id="password"
+                    type={showPw ? 'text' : 'password'}
+                    autoComplete="current-password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    onKeyDown={onFieldKeyDown}
+                    placeholder="••••••••"
+                    className="h-11 bg-secondary/60 pr-10"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPw((s) => !s)}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:text-foreground"
+                    aria-label={showPw ? 'Hide password' : 'Show password'}
+                  >
+                    {showPw ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+                  </button>
+                </div>
               </div>
-            </div>
 
-            {/* Remember me + Forgot password, inline below the password. */}
-            <div className="flex items-center justify-between pt-0.5">
-              <label htmlFor="remember" className="flex items-center gap-2 text-sm text-muted-foreground">
-                <Checkbox id="remember" checked={remember} onCheckedChange={(v) => setRemember(Boolean(v))} />
-                Remember me
-              </label>
-              <Link to="/forgot-password" className="text-sm font-medium text-primary hover:underline">
-                Forgot password?
-              </Link>
-            </div>
+              {/* Remember me + Forgot password, inline below the password. */}
+              <div className="flex items-center justify-between pt-0.5">
+                <label
+                  htmlFor="remember"
+                  className="flex items-center gap-2 text-sm text-muted-foreground"
+                >
+                  <Checkbox
+                    id="remember"
+                    checked={remember}
+                    onCheckedChange={(v) => setRemember(Boolean(v))}
+                  />
+                  Remember me
+                </label>
+                <Link
+                  to="/forgot-password"
+                  className="text-sm font-medium text-primary hover:underline"
+                >
+                  Forgot password?
+                </Link>
+              </div>
 
-            <Button
-              type="submit"
-              disabled={busy}
-              className="h-11 w-full bg-primary font-mono text-xs font-semibold uppercase tracking-widest text-primary-foreground hover:bg-primary/90"
-            >
-              {busy ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <>
-                  <LogIn className="size-4" />
-                  Log in
-                </>
-              )}
-            </Button>
-          </form>
+              <Button
+                type="submit"
+                disabled={busy}
+                className="h-11 w-full bg-primary font-mono text-xs font-semibold uppercase tracking-widest text-primary-foreground hover:bg-primary/90"
+              >
+                {busy ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <>
+                    <LogIn className="size-4" />
+                    Log in
+                  </>
+                )}
+              </Button>
+            </form>
           )}
 
           <p className="mt-6 text-center text-[11px] tracking-wide text-muted-foreground">
-            Powered by <span className="font-semibold text-foreground/70">{branding.poweredBy}</span>
+            Powered by{' '}
+            <span className="font-semibold text-foreground/70">{branding.poweredBy}</span>
           </p>
         </CardContent>
       </Card>

package/template/frontend/src/pages/ResetPassword.jsx

@@ -78,7 +78,11 @@ export default function ResetPassword() {
         <CardContent className="p-8">
           <div className="mb-7 flex flex-col items-center gap-4">
             {/* Brand logo — color in light, white in dark (from branding config). */}
-            <img src={branding.logo.light} alt={branding.appName} className="h-9 w-auto dark:hidden" />
+            <img
+              src={branding.logo.light}
+              alt={branding.appName}
+              className="h-9 w-auto dark:hidden"
+            />
             <img
               src={branding.logo.dark}
               alt={branding.appName}
@@ -147,7 +151,10 @@ export default function ResetPassword() {
           )}
 
           <div className="mt-6 text-center">
-            <Link to="/login" className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline">
+            <Link
+              to="/login"
+              className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+            >
               <ArrowLeft className="size-4" />
               Back to sign in
             </Link>

package/template/frontend/src/pages/access/AccessForm.jsx

@@ -27,7 +27,10 @@ const ACTIONS = ['read', 'create', 'update', 'delete'];
 
 // Object → group mapping. An unmapped typeKey falls into "Other" (fail-safe).
 const GROUPS = [
-  { label: 'Organization', types: ['company', 'company_branch', 'company_department', 'department', 'branch'] },
+  {
+    label: 'Organization',
+    types: ['company', 'company_branch', 'company_department', 'department', 'branch'],
+  },
   { label: 'People & Access', types: ['user', 'role', 'company_membership', 'membership_posting'] },
 ];
 
@@ -66,7 +69,10 @@ export default function AccessForm() {
   }, [catalog]);
   const groups = useMemo(() => {
     const mapped = new Set(GROUPS.flatMap((g) => g.types));
-    const out = GROUPS.map((g) => ({ label: g.label, types: g.types.filter((t) => typeKeys.includes(t)) }));
+    const out = GROUPS.map((g) => ({
+      label: g.label,
+      types: g.types.filter((t) => typeKeys.includes(t)),
+    }));
     const other = typeKeys.filter((t) => !mapped.has(t));
     if (other.length) out.push({ label: 'Other', types: other });
     return out.filter((g) => g.types.length > 0);
@@ -90,9 +96,18 @@ export default function AccessForm() {
   // Paginated + searchable role fetcher for the SearchableSelect.
   const fetchRoles = useCallback(
     async ({ search, page, limit }) => {
-      const r = await identity.listRoles(token, { page, limit, search, sortBy: 'name', sortOrder: 'asc' });
+      const r = await identity.listRoles(token, {
+        page,
+        limit,
+        search,
+        sortBy: 'name',
+        sortOrder: 'asc',
+      });
       if (!r.ok) return { options: [], total: 0, page };
-      const options = (r.rows || []).map((row) => ({ value: row.id, label: row.fields?.name || '(unnamed)' }));
+      const options = (r.rows || []).map((row) => ({
+        value: row.id,
+        label: row.fields?.name || '(unnamed)',
+      }));
       return { options, total: r.total ?? options.length, page: r.page ?? page };
     },
     [identity, token],
@@ -107,7 +122,9 @@ export default function AccessForm() {
       const [catRes, bundlesRes, grantsRes, roleRes] = await Promise.all([
         identity.listPermissionCatalog(token),
         identity.listAccessBundles(token),
-        sourceUuid ? identity.listRolePermissions(token, sourceUuid) : Promise.resolve({ ok: true, grants: [] }),
+        sourceUuid
+          ? identity.listRolePermissions(token, sourceUuid)
+          : Promise.resolve({ ok: true, grants: [] }),
         // In EDIT mode the role is fixed — resolve its NAME so the (disabled) role select
         // shows it on the trigger (a uuid is never displayed).
         mode === 'edit' && sourceUuid
@@ -162,7 +179,9 @@ export default function AccessForm() {
   };
 
   const toggleGroupAll = (group) => {
-    const groupKeys = group.types.flatMap((t) => ACTIONS.map((a) => cellKey(t, a))).filter(keyExists);
+    const groupKeys = group.types
+      .flatMap((t) => ACTIONS.map((a) => cellKey(t, a)))
+      .filter(keyExists);
     const allHeld = groupKeys.every((k) => keyHeld(k, working));
     setWorking((prev) => {
       const next = new Set(prev);
@@ -245,7 +264,12 @@ export default function AccessForm() {
   const matchesSearch = (t) =>
     !objectSearch.trim() || t.toLowerCase().includes(objectSearch.trim().toLowerCase());
 
-  const title = mode === 'edit' ? 'Edit permissions' : mode === 'duplicate' ? 'Duplicate access' : 'Assign access';
+  const title =
+    mode === 'edit'
+      ? 'Edit permissions'
+      : mode === 'duplicate'
+        ? 'Duplicate access'
+        : 'Assign access';
   const description =
     mode === 'edit'
       ? 'Adjust the permissions granted to this role.'
@@ -268,8 +292,12 @@ export default function AccessForm() {
       <div className="grid gap-4 md:grid-cols-[240px_1fr]">
         {/* Left rail — presets */}
         <div className="flex flex-col gap-2 md:border-r md:border-border md:pr-4">
-          <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Presets</div>
-          {bundles.length === 0 && <p className="text-xs text-muted-foreground">No presets available.</p>}
+          <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            Presets
+          </div>
+          {bundles.length === 0 && (
+            <p className="text-xs text-muted-foreground">No presets available.</p>
+          )}
           {bundles.map((b) => {
             const isApplied = isBundleApplied(b);
             return (
@@ -284,7 +312,11 @@ export default function AccessForm() {
                 {/* Checkbox-like: presets stack (multiple can be applied); this reflects +
                     toggles whether ALL of the preset's keys are held. Non-interactive
                     itself (the whole card is the button) — pointer-events-none. */}
-                <Checkbox checked={isApplied} className="pointer-events-none mt-0.5" tabIndex={-1} />
+                <Checkbox
+                  checked={isApplied}
+                  className="pointer-events-none mt-0.5"
+                  tabIndex={-1}
+                />
                 <div className="min-w-0">
                   <span className="text-sm font-medium text-foreground">{b.label}</span>
                   {b.description && (
@@ -325,7 +357,9 @@ export default function AccessForm() {
             {groups.map((group) => {
               const visibleTypes = group.types.filter(matchesSearch);
               if (visibleTypes.length === 0) return null;
-              const groupCells = group.types.flatMap((t) => ACTIONS.map((a) => cellKey(t, a))).filter(keyExists);
+              const groupCells = group.types
+                .flatMap((t) => ACTIONS.map((a) => cellKey(t, a)))
+                .filter(keyExists);
               const heldCount = groupCells.filter((k) => keyHeld(k, working)).length;
               return (
                 <CollapsibleGroup
@@ -334,7 +368,9 @@ export default function AccessForm() {
                   count={heldCount}
                   total={groupCells.length}
                   open={openGroups[group.label] ?? true}
-                  onToggle={() => setOpenGroups((p) => ({ ...p, [group.label]: !(p[group.label] ?? true) }))}
+                  onToggle={() =>
+                    setOpenGroups((p) => ({ ...p, [group.label]: !(p[group.label] ?? true) }))
+                  }
                   right={
                     <span
                       role="button"
@@ -405,9 +441,7 @@ export default function AccessForm() {
               {permCount} permission{permCount === 1 ? '' : 's'}
             </span>{' '}
             across {objectCount} object{objectCount === 1 ? '' : 's'}
-            {appliedPresetLabels.length > 0 && (
-              <span> · {appliedPresetLabels.join(', ')}</span>
-            )}
+            {appliedPresetLabels.length > 0 && <span> · {appliedPresetLabels.join(', ')}</span>}
           </div>
         </div>
       </div>

package/template/frontend/src/pages/access/AccessPage.jsx

@@ -32,11 +32,13 @@ function initialOf(name) {
 function shortDate(iso) {
   if (!iso) return null;
   const d = new Date(iso);
-  return Number.isNaN(d.getTime()) ? null : d.toLocaleDateString(undefined, {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  });
+  return Number.isNaN(d.getTime())
+    ? null
+    : d.toLocaleDateString(undefined, {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+      });
 }
 
 /** Seed the datatable query from the URL so a reload / shared link restores the view. */
@@ -269,7 +271,9 @@ export default function AccessPage() {
 
       <ConfirmDialog
         open={!!revokeTarget}
-        title={revokeTarget ? `Revoke all access from “${revokeTarget.roleName}”?` : 'Revoke all access?'}
+        title={
+          revokeTarget ? `Revoke all access from “${revokeTarget.roleName}”?` : 'Revoke all access?'
+        }
         message="This removes every permission granted to the role. It will no longer appear in this list. This cannot be undone."
         confirmLabel="Revoke all"
         destructive

package/template/frontend/src/pages/access/RecordPoliciesPage.jsx

@@ -184,13 +184,20 @@ export default function RecordPoliciesPage() {
       key: 'effect',
       label: 'Effect',
       render: (row) => (
-        <Badge variant={row.policy.effect === 'deny' ? 'destructive' : 'success'} className="capitalize font-normal">
+        <Badge
+          variant={row.policy.effect === 'deny' ? 'destructive' : 'success'}
+          className="capitalize font-normal"
+        >
           {row.policy.effect}
         </Badge>
       ),
     },
     { key: 'action', label: 'Action', render: (row) => row.policy.action },
-    { key: 'rule', label: 'Rule', render: (row) => <span className="text-sm">{describe(row.policy)}</span> },
+    {
+      key: 'rule',
+      label: 'Rule',
+      render: (row) => <span className="text-sm">{describe(row.policy)}</span>,
+    },
     {
       key: 'rowActions',
       label: '',

package/template/frontend/src/pages/account/AccountLayout.jsx

@@ -24,9 +24,17 @@ import { cn } from '@/lib/utils';
 function initialsOf(name) {
   if (!name) return 'U';
   const clean = name.includes('@') ? name.split('@')[0] : name;
-  const parts = clean.trim().split(/[\s._-]+/).filter(Boolean);
+  const parts = clean
+    .trim()
+    .split(/[\s._-]+/)
+    .filter(Boolean);
   const letters = parts.length >= 2 ? parts[0][0] + parts[1][0] : clean.slice(0, 2);
-  return letters.replace(/[^a-zA-Z0-9]/g, '').slice(0, 2).toUpperCase() || 'U';
+  return (
+    letters
+      .replace(/[^a-zA-Z0-9]/g, '')
+      .slice(0, 2)
+      .toUpperCase() || 'U'
+  );
 }
 
 const TABS = [
@@ -73,10 +81,7 @@ function IdentityCard({ banner = false }) {
       )}
     >
       <Avatar
-        className={cn(
-          'shrink-0 rounded-xl ring-1 ring-primary/20',
-          banner ? 'size-11' : 'size-16',
-        )}
+        className={cn('shrink-0 rounded-xl ring-1 ring-primary/20', banner ? 'size-11' : 'size-16')}
       >
         <AvatarFallback
           className={cn(

package/template/frontend/src/pages/account/ChangePasswordPage.jsx

@@ -126,8 +126,8 @@ export default function ChangePasswordPage() {
           Change password
         </CardTitle>
         <CardDescription>
-          Set a new password. For your security, changing it signs out your other sessions —
-          this one stays active.
+          Set a new password. For your security, changing it signs out your other sessions — this
+          one stays active.
         </CardDescription>
       </CardHeader>
       <CardContent>

package/template/frontend/src/pages/account/ReenrollPage.jsx

@@ -55,9 +55,7 @@ export default function ReenrollPage() {
           )}
           <div className="min-w-0">
             <p className="text-sm font-semibold text-foreground">
-              {secured
-                ? 'Your account is secured again'
-                : 'Finish securing your account'}
+              {secured ? 'Your account is secured again' : 'Finish securing your account'}
             </p>
             <p className="mt-0.5 text-sm text-muted-foreground">
               {secured
@@ -75,8 +73,8 @@ export default function ReenrollPage() {
 
         {!secured && (
           <p className="text-center text-xs text-muted-foreground">
-            You can rename or remove existing devices from your account settings once your account is
-            secured.
+            You can rename or remove existing devices from your account settings once your account
+            is secured.
           </p>
         )}