create-astram-app 0.4.0 → 0.6.0

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>
         )}
 

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

@@ -237,20 +237,15 @@ function DeviceRow({ device, onRename, onRemove, disabled, reenrollMode = false
             <p className="truncate font-medium text-foreground">{device.name}</p>
           )}
           <p className="mt-0.5 text-xs text-muted-foreground">
-            Added {formatAdded(device.createdAtMs)} · Last used {formatLastUsed(device.lastUsedAtMs)}
+            Added {formatAdded(device.createdAtMs)} · Last used{' '}
+            {formatLastUsed(device.lastUsedAtMs)}
           </p>
         </div>
       </div>
 
       {!editing && !reenrollMode && (
         <div className="flex items-center gap-1 self-end sm:self-auto">
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={startEdit}
-            disabled={disabled}
-          >
+          <Button type="button" variant="ghost" size="sm" onClick={startEdit} disabled={disabled}>
             <Pencil className="size-4" />
             Rename
           </Button>

package/template/frontend/src/pages/companies/CompaniesPage.jsx

@@ -143,19 +143,13 @@ export default function CompaniesPage() {
   }, [load]);
 
   // Query-change handlers: search/limit reset to page 1; sort toggles asc↔desc.
-  const onSearchChange = useCallback(
-    (search) => setQuery((q) => ({ ...q, search, page: 1 })),
-    [],
-  );
+  const onSearchChange = useCallback((search) => setQuery((q) => ({ ...q, search, page: 1 })), []);
   const onSortChange = useCallback(
     (sortBy, sortOrder) => setQuery((q) => ({ ...q, sortBy, sortOrder })),
     [],
   );
   const onPageChange = useCallback((page) => setQuery((q) => ({ ...q, page })), []);
-  const onLimitChange = useCallback(
-    (limit) => setQuery((q) => ({ ...q, limit, page: 1 })),
-    [],
-  );
+  const onLimitChange = useCallback((limit) => setQuery((q) => ({ ...q, limit, page: 1 })), []);
 
   const onConfirmDelete = async () => {
     if (!deleteTarget) return;
@@ -219,7 +213,11 @@ export default function CompaniesPage() {
 
       <ConfirmDialog
         open={!!deleteTarget}
-        title={deleteTarget ? `Delete “${deleteTarget.fields?.name || 'this company'}”?` : 'Delete company?'}
+        title={
+          deleteTarget
+            ? `Delete “${deleteTarget.fields?.name || 'this company'}”?`
+            : 'Delete company?'
+        }
         message="This permanently removes the company and its memberships. This cannot be undone."
         confirmLabel="Delete"
         destructive

package/template/frontend/src/pages/cross-tenant/GrantForm.jsx

@@ -133,10 +133,19 @@ export default function GrantForm() {
 
   const fetchTenants = useCallback(
     async ({ search: term, page, limit }) => {
-      const r = await identity.listCompanies(token, { page, limit, search: term, sortBy: 'name', sortOrder: 'asc' });
+      const r = await identity.listCompanies(token, {
+        page,
+        limit,
+        search: term,
+        sortBy: 'name',
+        sortOrder: 'asc',
+      });
       if (!r.ok) return { options: [], total: 0, page };
       return {
-        options: (r.rows || []).map((row) => ({ value: row.id, label: row.fields?.name || '(unnamed)' })),
+        options: (r.rows || []).map((row) => ({
+          value: row.id,
+          label: row.fields?.name || '(unnamed)',
+        })),
         total: r.total ?? 0,
         page: r.page ?? page,
       };
@@ -147,18 +156,36 @@ export default function GrantForm() {
   const fetchGrantees = useCallback(
     async ({ search: term, page, limit }) => {
       if (granteeKind === 'role') {
-        const r = await identity.listRoles(token, { page, limit, search: term, sortBy: 'name', sortOrder: 'asc' });
+        const r = await identity.listRoles(token, {
+          page,
+          limit,
+          search: term,
+          sortBy: 'name',
+          sortOrder: 'asc',
+        });
         if (!r.ok) return { options: [], total: 0, page };
         return {
-          options: (r.rows || []).map((row) => ({ value: row.id, label: row.fields?.name || '(unnamed)' })),
+          options: (r.rows || []).map((row) => ({
+            value: row.id,
+            label: row.fields?.name || '(unnamed)',
+          })),
           total: r.total ?? 0,
           page: r.page ?? page,
         };
       }
-      const r = await identity.listUsers(token, { page, limit, search: term, sortBy: 'username', sortOrder: 'asc' });
+      const r = await identity.listUsers(token, {
+        page,
+        limit,
+        search: term,
+        sortBy: 'username',
+        sortOrder: 'asc',
+      });
       if (!r.ok) return { options: [], total: 0, page };
       return {
-        options: (r.rows || []).map((row) => ({ value: row.id, label: row.fields?.username || '(unnamed)' })),
+        options: (r.rows || []).map((row) => ({
+          value: row.id,
+          label: row.fields?.username || '(unnamed)',
+        })),
         total: r.total ?? 0,
         page: r.page ?? page,
       };
@@ -280,7 +307,11 @@ export default function GrantForm() {
         <Label htmlFor="grant-type" variant="field">
           Object type
         </Label>
-        <Select value={typeKey} onValueChange={onTypeChange} disabled={typesLoading || types.length === 0}>
+        <Select
+          value={typeKey}
+          onValueChange={onTypeChange}
+          disabled={typesLoading || types.length === 0}
+        >
           <SelectTrigger id="grant-type">
             <SelectValue placeholder={typesLoading ? 'Loading…' : 'Select an object type'} />
           </SelectTrigger>
@@ -293,7 +324,9 @@ export default function GrantForm() {
           </SelectContent>
         </Select>
         {!typesLoading && types.length === 0 && (
-          <p className="text-xs text-muted-foreground">No object types are available to offer yet.</p>
+          <p className="text-xs text-muted-foreground">
+            No object types are available to offer yet.
+          </p>
         )}
       </div>
 

package/template/frontend/src/pages/cross-tenant/GrantsPage.jsx

@@ -40,7 +40,8 @@ function statusVariant(status) {
 }
 
 function ActionChips({ actions }) {
-  if (!actions || actions.length === 0) return <span className="text-xs text-muted-foreground">—</span>;
+  if (!actions || actions.length === 0)
+    return <span className="text-xs text-muted-foreground">—</span>;
   return (
     <div className="flex flex-wrap gap-1">
       {actions.map((a) => (
@@ -127,7 +128,11 @@ export default function GrantsPage() {
       ),
     },
     { key: 'typeLabel', label: 'Object type' },
-    { key: 'actions', label: 'Actions', render: (row) => <ActionChips actions={row.allowedActions} /> },
+    {
+      key: 'actions',
+      label: 'Actions',
+      render: (row) => <ActionChips actions={row.allowedActions} />,
+    },
     {
       key: 'status',
       label: 'Status',
@@ -176,7 +181,11 @@ export default function GrantsPage() {
       ),
     },
     { key: 'typeLabel', label: 'Object type' },
-    { key: 'actions', label: 'Actions', render: (row) => <ActionChips actions={row.allowedActions} /> },
+    {
+      key: 'actions',
+      label: 'Actions',
+      render: (row) => <ActionChips actions={row.allowedActions} />,
+    },
     { key: 'expiresAtMs', label: 'Expires', render: (row) => formatDate(row.expiresAtMs) },
     { key: 'offeredByName', label: 'Offered by' },
   ];
@@ -190,16 +199,26 @@ export default function GrantsPage() {
           icon={Handshake}
           actions={
             <>
-              <Button type="button" variant="outline" size="sm" onClick={() => navigate('/cross-tenant/inbox')}>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => navigate('/cross-tenant/inbox')}
+              >
                 <Inbox className="size-4" />
                 Inbox
               </Button>
-              <EntityListControls addLabel="Offer grant" onAdd={() => navigate('/cross-tenant/offer')} />
+              <EntityListControls
+                addLabel="Offer grant"
+                onAdd={() => navigate('/cross-tenant/offer')}
+              />
             </>
           }
         />
 
-        <div className="mb-2 text-sm font-medium text-foreground">Outgoing — grants you&apos;ve offered</div>
+        <div className="mb-2 text-sm font-medium text-foreground">
+          Outgoing — grants you&apos;ve offered
+        </div>
         <EntityList
           columns={outgoingColumns}
           rows={rows}
@@ -224,7 +243,11 @@ export default function GrantsPage() {
 
       <ConfirmDialog
         open={!!revokeTarget}
-        title={revokeTarget ? `Revoke the grant to “${revokeTarget.granteeTenantName}”?` : 'Revoke grant?'}
+        title={
+          revokeTarget
+            ? `Revoke the grant to “${revokeTarget.granteeTenantName}”?`
+            : 'Revoke grant?'
+        }
         message="This immediately revokes the grant. The grantee tenant will lose access. This cannot be undone."
         confirmLabel="Revoke"
         destructive

package/template/frontend/src/pages/cross-tenant/InboxPage.jsx

@@ -33,7 +33,8 @@ function formatDate(ms) {
 }
 
 function ActionChips({ actions }) {
-  if (!actions || actions.length === 0) return <span className="text-xs text-muted-foreground">—</span>;
+  if (!actions || actions.length === 0)
+    return <span className="text-xs text-muted-foreground">—</span>;
   return (
     <div className="flex flex-wrap gap-1">
       {actions.map((a) => (
@@ -119,7 +120,11 @@ export default function InboxPage() {
       render: (row) => <span className="font-medium text-foreground">{row.owningTenantName}</span>,
     },
     { key: 'typeLabel', label: 'Object type' },
-    { key: 'actions', label: 'Actions', render: (row) => <ActionChips actions={row.allowedActions} /> },
+    {
+      key: 'actions',
+      label: 'Actions',
+      render: (row) => <ActionChips actions={row.allowedActions} />,
+    },
     { key: 'expiresAtMs', label: 'Expires', render: (row) => formatDate(row.expiresAtMs) },
     { key: 'offeredByName', label: 'Offered by' },
     {
@@ -166,7 +171,11 @@ export default function InboxPage() {
 
       <ConfirmDialog
         open={!!declineTarget}
-        title={declineTarget ? `Decline the offer from “${declineTarget.owningTenantName}”?` : 'Decline this offer?'}
+        title={
+          declineTarget
+            ? `Decline the offer from “${declineTarget.owningTenantName}”?`
+            : 'Decline this offer?'
+        }
         message="This revokes the offer. The offering tenant would need to offer again for you to reconsider. This cannot be undone."
         confirmLabel="Decline"
         destructive

package/template/frontend/src/pages/roles/RolesPage.jsx

@@ -119,19 +119,13 @@ export default function RolesPage() {
     load();
   }, [load]);
 
-  const onSearchChange = useCallback(
-    (search) => setQuery((q) => ({ ...q, search, page: 1 })),
-    [],
-  );
+  const onSearchChange = useCallback((search) => setQuery((q) => ({ ...q, search, page: 1 })), []);
   const onSortChange = useCallback(
     (sortBy, sortOrder) => setQuery((q) => ({ ...q, sortBy, sortOrder })),
     [],
   );
   const onPageChange = useCallback((page) => setQuery((q) => ({ ...q, page })), []);
-  const onLimitChange = useCallback(
-    (limit) => setQuery((q) => ({ ...q, limit, page: 1 })),
-    [],
-  );
+  const onLimitChange = useCallback((limit) => setQuery((q) => ({ ...q, limit, page: 1 })), []);
 
   const onConfirmDelete = async () => {
     if (!deleteTarget) return;
@@ -194,7 +188,9 @@ export default function RolesPage() {
 
       <ConfirmDialog
         open={!!deleteTarget}
-        title={deleteTarget ? `Delete “${deleteTarget.fields?.name || 'this role'}”?` : 'Delete role?'}
+        title={
+          deleteTarget ? `Delete “${deleteTarget.fields?.name || 'this role'}”?` : 'Delete role?'
+        }
         message="This permanently removes the role. Users currently assigned it will lose the grant. This cannot be undone."
         confirmLabel="Delete"
         destructive

package/template/frontend/src/pages/service-accounts/KeyRevealDialog.jsx

@@ -0,0 +1,104 @@
+/**
+ * KeyRevealDialog — the ONE-TIME reveal of a freshly issued/rotated service-account API key
+ * (ADR-0033). The raw `ask_…` key exists on the client only right after issue/rotate and is NEVER
+ * retrievable again, so this modal makes the operator copy it before dismissing.
+ *
+ * Controlled: the parent passes the `IssuedKey` (or null to close). The key is shown in a read-only
+ * field with a Copy button; a prominent warning states it won't be shown again. Closing is deliberate
+ * ("I've copied it") so it isn't dismissed by accident.
+ *
+ * ⛔ The key is a SECRET — it is only ever rendered here, never logged, never persisted client-side.
+ */
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { KeyRound, Copy, Check, TriangleAlert } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+function formatExpiry(ms) {
+  if (!ms) return 'Never expires';
+  try {
+    return `Expires ${new Date(ms).toLocaleString()}`;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * @param {{ issued: import('@astram/frontend-core').IssuedKey | null, onClose: () => void }} props
+ *   `issued` — the one-time key payload, or null (closed). `onClose` — dismiss (after the operator
+ *   has copied the key).
+ */
+export default function KeyRevealDialog({ issued, onClose }) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    if (!issued) return;
+    try {
+      await navigator.clipboard.writeText(issued.apiKey);
+      setCopied(true);
+      toast.success('API key copied to clipboard');
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error('Could not copy — select the key and copy it manually.');
+    }
+  };
+
+  const close = () => {
+    setCopied(false);
+    onClose?.();
+  };
+
+  return (
+    <Dialog open={!!issued} onOpenChange={(next) => !next && close()}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <KeyRound className="h-5 w-5" />
+            API key for “{issued?.accountLabel}”
+          </DialogTitle>
+          <DialogDescription>
+            Copy this key now and store it somewhere safe. For your security, it will{' '}
+            <strong>never be shown again</strong> — if you lose it, rotate the key to get a new one.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex items-start gap-2 rounded-md border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900 dark:border-amber-800/60 dark:bg-amber-950/40 dark:text-amber-200">
+          <TriangleAlert className="mt-0.5 h-4 w-4 shrink-0" />
+          <span>
+            Treat this like a password. Anyone with this key can act as this service account (within
+            its scope). {formatExpiry(issued?.expiresAtMs)} · Version {issued?.version}.
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Input
+            readOnly
+            value={issued?.apiKey ?? ''}
+            onFocus={(e) => e.target.select()}
+            className="font-mono text-xs"
+            aria-label="API key"
+          />
+          <Button type="button" variant="secondary" onClick={copy} className="shrink-0">
+            {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+            <span className="ml-1">{copied ? 'Copied' : 'Copy'}</span>
+          </Button>
+        </div>
+
+        <DialogFooter>
+          <Button type="button" onClick={close}>
+            I’ve copied it
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}