create-astram-app 0.5.0 → 0.6.0

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/ServiceAccountsPage.jsx

@@ -21,15 +21,32 @@ import PageHeader from '@/components/PageHeader';
 import EntityList, { EntityListControls } from '@/components/EntityList';
 import ConfirmDialog from '@/components/ConfirmDialog';
 import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import ServiceAccountActionsMenu from './ServiceAccountActionsMenu';
 import ServiceAccountAccessDialog from './ServiceAccountAccessDialog';
 import KeyRevealDialog from './KeyRevealDialog';
-import { summarizeNames } from './accessModel';
+import {
+  summarizeNames,
+  KEY_EXPIRY_CHOICES,
+  DEFAULT_KEY_EXPIRY,
+  keyExpiryRequest,
+} from './accessModel';
 
 function formatDate(ms) {
   if (!ms) return '—';
   try {
-    return new Date(ms).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+    return new Date(ms).toLocaleDateString(undefined, {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    });
   } catch {
     return '—';
   }
@@ -49,8 +66,9 @@ export default function ServiceAccountsPage() {
 
   // One-time key reveal + destructive-confirm state.
   const [issuedKey, setIssuedKey] = useState(null);
-  const [pending, setPending] = useState(null); // { kind: 'rotate'|'revoke'|'toggle', account }
+  const [pending, setPending] = useState(null); // { kind: 'issue'|'rotate'|'revoke'|'toggle', account }
   const [pendingBusy, setPendingBusy] = useState(false);
+  const [expiryChoice, setExpiryChoice] = useState(DEFAULT_KEY_EXPIRY);
 
   const load = useCallback(async () => {
     if (!token) return;
@@ -89,13 +107,10 @@ export default function ServiceAccountsPage() {
     await load();
   };
 
-  const onIssueKey = async (account) => {
-    const r = await serviceAccounts.issueKey(token, account.id);
-    if (!r.ok) {
-      toast.error(r.error || 'Could not issue a key.');
-      return;
-    }
-    setIssuedKey(r.key); // reveal ONCE
+  // Issue + rotate both ask when the key expires (the server requires a choice; ADR-0033 §4).
+  const openPending = (kind, account) => {
+    setExpiryChoice(DEFAULT_KEY_EXPIRY);
+    setPending({ kind, account });
   };
 
   const confirmPending = async () => {
@@ -103,15 +118,25 @@ export default function ServiceAccountsPage() {
     setPendingBusy(true);
     const { kind, account } = pending;
     let r;
-    if (kind === 'rotate') r = await serviceAccounts.rotateKey(token, account.id);
+    if (kind === 'issue')
+      r = await serviceAccounts.issueKey(token, account.id, keyExpiryRequest(expiryChoice));
+    else if (kind === 'rotate')
+      r = await serviceAccounts.rotateKey(token, account.id, keyExpiryRequest(expiryChoice));
     else if (kind === 'revoke') r = await serviceAccounts.revokeKeys(token, account.id);
-    else r = await serviceAccounts.update(token, account.id, { status: account.status === 'disabled' ? 'active' : 'disabled' });
+    else
+      r = await serviceAccounts.update(token, account.id, {
+        status: account.status === 'disabled' ? 'active' : 'disabled',
+      });
     setPendingBusy(false);
     setPending(null);
     if (!r.ok) {
       toast.error(r.error || 'The action could not be completed.');
       return;
     }
+    if (kind === 'issue') {
+      setIssuedKey(r.key); // reveal ONCE
+      return;
+    }
     if (kind === 'rotate') {
       setIssuedKey(r.key); // reveal the NEW key ONCE
       toast.success('Key rotated — the previous key no longer works.');
@@ -145,7 +170,11 @@ export default function ServiceAccountsPage() {
         const { shown, more } = summarizeNames(row.fields.roleLabels);
         if (shown.length === 0) {
           return (
-            <Badge variant="outline" className="text-muted-foreground" title="Denied everything until it has a role">
+            <Badge
+              variant="outline"
+              className="text-muted-foreground"
+              title="Denied everything until it has a role"
+            >
               No roles
             </Badge>
           );
@@ -186,7 +215,9 @@ export default function ServiceAccountsPage() {
       label: 'Status',
       render: (row) =>
         row.fields.status === 'disabled' ? (
-          <Badge variant="outline" className="text-muted-foreground">Disabled</Badge>
+          <Badge variant="outline" className="text-muted-foreground">
+            Disabled
+          </Badge>
         ) : (
           <Badge>Active</Badge>
         ),
@@ -209,8 +240,8 @@ export default function ServiceAccountsPage() {
           <ServiceAccountActionsMenu
             account={row.account}
             onEditAccess={(a) => setAccessDialog({ account: a })}
-            onIssueKey={onIssueKey}
-            onRotateKey={(a) => setPending({ kind: 'rotate', account: a })}
+            onIssueKey={(a) => openPending('issue', a)}
+            onRotateKey={(a) => openPending('rotate', a)}
             onToggleStatus={(a) => setPending({ kind: 'toggle', account: a })}
             onRevokeKeys={(a) => setPending({ kind: 'revoke', account: a })}
           />
@@ -222,6 +253,14 @@ export default function ServiceAccountsPage() {
   const confirmCopy = (() => {
     if (!pending) return { title: '', message: '', confirmLabel: 'Confirm', destructive: false };
     const name = pending.account.label;
+    if (pending.kind === 'issue') {
+      return {
+        title: `Issue a key for “${name}”?`,
+        message: 'The new key is shown once. Choose when it stops working.',
+        confirmLabel: 'Issue key',
+        destructive: false,
+      };
+    }
     if (pending.kind === 'rotate') {
       return {
         title: `Rotate the key for “${name}”?`,
@@ -293,7 +332,7 @@ export default function ServiceAccountsPage() {
       {/* One-time key reveal (issue + rotate) */}
       <KeyRevealDialog issued={issuedKey} onClose={() => setIssuedKey(null)} />
 
-      {/* Destructive confirms: rotate / revoke / disable */}
+      {/* Confirms: issue / rotate (with the key's expiry) / revoke / disable */}
       <ConfirmDialog
         open={!!pending}
         title={confirmCopy.title}
@@ -303,7 +342,27 @@ export default function ServiceAccountsPage() {
         busy={pendingBusy}
         onConfirm={confirmPending}
         onCancel={() => setPending(null)}
-      />
+      >
+        {(pending?.kind === 'issue' || pending?.kind === 'rotate') && (
+          <div className="space-y-1.5">
+            <Label htmlFor="key-expiry" variant="field">
+              Key expires
+            </Label>
+            <Select value={expiryChoice} onValueChange={setExpiryChoice} disabled={pendingBusy}>
+              <SelectTrigger id="key-expiry" className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {KEY_EXPIRY_CHOICES.map((c) => (
+                  <SelectItem key={c.value} value={c.value}>
+                    {c.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+      </ConfirmDialog>
     </AppShell>
   );
 }

package/template/frontend/src/pages/service-accounts/accessModel.js

@@ -134,3 +134,25 @@ export function summarizeNames(names, max = 3) {
   const list = names || [];
   return { shown: list.slice(0, max), more: Math.max(0, list.length - max) };
 }
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * Key expiry choices for issue/rotate. The server REQUIRES a choice (ADR-0033 §4): a future
+ * `expiresAtMs`, or an explicit `neverExpires: true` — a non-expiring key is never the default.
+ */
+export const KEY_EXPIRY_CHOICES = [
+  { value: '30', label: '30 days' },
+  { value: '90', label: '90 days' },
+  { value: '365', label: '1 year' },
+  { value: 'never', label: 'Never expires (not recommended)' },
+];
+export const DEFAULT_KEY_EXPIRY = '90';
+
+/** The issue/rotate request body for a choice; an unknown choice uses the default. */
+export function keyExpiryRequest(choice, nowMs = Date.now()) {
+  if (choice === 'never') return { neverExpires: true };
+  const known = KEY_EXPIRY_CHOICES.some((c) => c.value === choice && c.value !== 'never');
+  const days = Number(known ? choice : DEFAULT_KEY_EXPIRY);
+  return { expiresAtMs: nowMs + days * DAY_MS };
+}

package/template/frontend/src/pages/service-accounts/accessModel.test.mjs

@@ -17,6 +17,9 @@ import {
   fieldOfServerError,
   summarizeNames,
   SCOPE_REQUIRED,
+  KEY_EXPIRY_CHOICES,
+  DEFAULT_KEY_EXPIRY,
+  keyExpiryRequest,
 } from './accessModel.js';
 
 const ASSIGNABLE = {
@@ -159,3 +162,28 @@ describe('misc', () => {
     assert.deepEqual(summarizeNames(undefined), { shown: [], more: 0 });
   });
 });
+
+describe('key expiry (the server requires an expiry OR an explicit neverExpires)', () => {
+  const NOW = Date.UTC(2026, 0, 1);
+  const DAY = 24 * 60 * 60 * 1000;
+
+  test('every choice maps to exactly one of expiresAtMs (future) / neverExpires', () => {
+    for (const c of KEY_EXPIRY_CHOICES) {
+      const body = keyExpiryRequest(c.value, NOW);
+      const keys = Object.keys(body);
+      assert.equal(keys.length, 1, c.value);
+      if ('expiresAtMs' in body) assert.ok(body.expiresAtMs > NOW, c.value);
+      else assert.deepEqual(body, { neverExpires: true });
+    }
+  });
+
+  test('day choices land N days ahead; the default is a finite expiry', () => {
+    assert.deepEqual(keyExpiryRequest('30', NOW), { expiresAtMs: NOW + 30 * DAY });
+    assert.deepEqual(keyExpiryRequest('never', NOW), { neverExpires: true });
+    assert.ok('expiresAtMs' in keyExpiryRequest(DEFAULT_KEY_EXPIRY, NOW));
+  });
+
+  test('an unknown choice falls back to the default (never silently non-expiring)', () => {
+    assert.deepEqual(keyExpiryRequest('bogus', NOW), keyExpiryRequest(DEFAULT_KEY_EXPIRY, NOW));
+  });
+});

package/template/frontend/src/pages/users/MembershipCard.jsx

@@ -185,7 +185,9 @@ export default function MembershipCard({
             size="sm"
             onClick={onToggleActive}
             disabled={isActive || activating || saving}
-            title={isActive ? 'This is the active login company' : 'Make this the active login company'}
+            title={
+              isActive ? 'This is the active login company' : 'Make this the active login company'
+            }
           >
             {activating ? (
               <Loader2 className="size-4 animate-spin" />

package/template/frontend/src/pages/users/PostingRow.jsx

@@ -115,20 +115,14 @@ export default function PostingRow({
 
   // Department / Branch: small, per-company catalogs (passed in). The SAME control in
   // client-filter mode — `fetchPage` returns the whole list once; the panel filters locally.
-  const fetchDepartments = useCallback(
-    async () => {
-      const options = (departments || []).map((d) => ({ value: d.uuid, label: d.name }));
-      return { options, total: options.length, page: 1 };
-    },
-    [departments],
-  );
-  const fetchBranches = useCallback(
-    async () => {
-      const options = (branches || []).map((b) => ({ value: b.uuid, label: b.name }));
-      return { options, total: options.length, page: 1 };
-    },
-    [branches],
-  );
+  const fetchDepartments = useCallback(async () => {
+    const options = (departments || []).map((d) => ({ value: d.uuid, label: d.name }));
+    return { options, total: options.length, page: 1 };
+  }, [departments]);
+  const fetchBranches = useCallback(async () => {
+    const options = (branches || []).map((b) => ({ value: b.uuid, label: b.name }));
+    return { options, total: options.length, page: 1 };
+  }, [branches]);
 
   // Shared field controls — reused by both the desktop row and the mobile card.
   const roleSelect = (

package/template/frontend/src/pages/users/UsersPage.jsx

@@ -144,19 +144,13 @@ export default function UsersPage() {
     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;
@@ -219,7 +213,11 @@ export default function UsersPage() {
 
       <ConfirmDialog
         open={!!deleteTarget}
-        title={deleteTarget ? `Delete “${deleteTarget.fields?.username || 'this user'}”?` : 'Delete user?'}
+        title={
+          deleteTarget
+            ? `Delete “${deleteTarget.fields?.username || 'this user'}”?`
+            : 'Delete user?'
+        }
         message="This permanently removes the user and all their company memberships. This cannot be undone."
         confirmLabel="Delete"
         destructive

package/template/frontend/src/platform/httpClient.js

@@ -3,6 +3,11 @@
  * contract. Uses the browser `fetch`, same-origin `/api` (proxied by Vite to the
  * server's /auth/* routes). A mobile app provides its OWN adapter (RN fetch + its
  * base URL) implementing the same shape; the shared logic is identical for both.
+ *
+ * This is the RAW transport: it does not refresh tokens. AuthContext wraps it with
+ * @astram/frontend-core's `createRefreshingHttp` (single-flight refresh on a 401, one retry,
+ * cross-tab lock) and hands only the wrapped client to the services and the shield
+ * transport. Use the raw client directly only for the refresh call itself.
  */
 
 const BASE = '/api';