create-astram-app 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-astram-app",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "description": "Scaffolder for a new Astram app — emits a running, framework-enforced consumer project (empty src/features/ + deny-by-default enforcement) that installs the immutable @astram/core, @astram/guard, and @astram/sdk framework.",
   "type": "module",

package/template/frontend/package.json

@@ -12,7 +12,7 @@
     "test": "node --test src/**/*.test.mjs"
   },
   "dependencies": {
-    "@astram/frontend-core": "^0.3.0",
+    "@astram/frontend-core": "^0.4.0",
     "@astram/sdk": "^0.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.19",
     "@radix-ui/react-avatar": "^1.1.10",

package/template/frontend/src/App.jsx

@@ -30,6 +30,7 @@ import AccessPage from './pages/access/AccessPage';
 import AccessForm from './pages/access/AccessForm';
 import RecordPoliciesPage from './pages/access/RecordPoliciesPage';
 import AuditPage from './pages/audit/AuditPage';
+import ServiceAccountsPage from './pages/service-accounts/ServiceAccountsPage';
 import GrantsPage from './pages/cross-tenant/GrantsPage';
 import GrantForm from './pages/cross-tenant/GrantForm';
 import InboxPage from './pages/cross-tenant/InboxPage';
@@ -167,6 +168,18 @@ export default function App() {
           </RequireAuth>
         }
       />
+      {/* Service accounts (ADR-0033) — machine identities + their API keys. Gated
+          identity:service_account:read (service-account.controller.ts `GET service-accounts`);
+          create/edit is service_account:create|update, keys are service_account:manage_keys,
+          all enforced server-side per route. */}
+      <Route
+        path="/service-accounts"
+        element={
+          <RequireAuth gate="identity:service_account:read">
+            <ServiceAccountsPage />
+          </RequireAuth>
+        }
+      />
       {/* Cross-tenant grants — the grant book (mine + incoming) is a LAYOUT route; the
           Offer form (`offer`) renders as a routed-modal overlay under it. The pending
           Inbox is a sibling route. All gated `identity:role:read` (mirrors nav.js). */}

package/template/frontend/src/auth/AuthContext.jsx

@@ -19,6 +19,7 @@ import {
   createIdentityService,
   createRecordPolicyService,
   createRecordShareService,
+  createServiceAccountService,
   isAuthenticated,
   principalOf,
 } from '@astram/frontend-core';
@@ -73,6 +74,9 @@ export function AuthProvider({ children }) {
       recordPolicy: createRecordPolicyService(http),
       // The owner-share surface (§9.2) — share/unshare/list a record's shares (owner-only).
       recordShare: createRecordShareService(http),
+      // Service accounts (ADR-0033) — list/create/edit machine accounts + issue/rotate/revoke
+      // their `ask_…` API keys (the raw key is revealed once on issue/rotate).
+      serviceAccounts: createServiceAccountService(http),
       account: createAccountService(http),
       // The @astram/sdk ShieldClient (Phase E slice 1) — a UX-convenience projection of
       // the caller's OWN coarse grants, fetched once per session via `getAuthFacts`.
@@ -88,7 +92,7 @@ export function AuthProvider({ children }) {
       store,
     };
   }
-  const { auth, identity, audit, crossTenant, recordPolicy, recordShare, account, shield, store } =
+  const { auth, identity, audit, crossTenant, recordPolicy, recordShare, serviceAccounts, account, shield, store } =
     services.current;
 
   const [state, setState] = useState(() => store.load()); // SessionState | null
@@ -297,6 +301,8 @@ export function AuthProvider({ children }) {
       recordPolicy,
       // The shared owner-share service (share/unshare/list a record's shares) — same client.
       recordShare,
+      // The shared service-accounts service (list/create/edit + issue/rotate/revoke keys).
+      serviceAccounts,
       // The shared self-scoped account service (change-password today; profile/MFA
       // later) — same injected web http client.
       account,
@@ -319,7 +325,7 @@ export function AuthProvider({ children }) {
         ),
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [state, auth, identity, audit, crossTenant, recordPolicy, recordShare, account, shield, profile, mustReenroll, authFacts],
+    [state, auth, identity, audit, crossTenant, recordPolicy, recordShare, serviceAccounts, account, shield, profile, mustReenroll, authFacts],
   );
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

package/template/frontend/src/components/MultiSelectChecklist.jsx

@@ -0,0 +1,166 @@
+/**
+ * MultiSelectChecklist — a searchable checkbox list for picking several items (roles, scope nodes).
+ * Shows a selected count and "Select all / None" (applied to the VISIBLE, unlocked options).
+ * Tree-shaped lists pass `depth` per option and are indented by it (a flat tree, no tree widget).
+ *
+ * Options: `{ id, name, depth?, locked? }`. `id` is only the value — never rendered; `name` is shown
+ * (ADR-0012). A `locked` option renders checked + disabled with `lockedHint` (e.g. "assigned by
+ * someone with more access"): it is not part of `value` and never toggled.
+ *
+ * Props:
+ *   id               — base id for the search input + list (a11y)
+ *   label            — field label
+ *   options          — the option list (above)
+ *   value            — array of selected (unlocked) ids
+ *   onChange         — (nextIds) => void
+ *   searchPlaceholder, emptyLabel, lockedHint, hint, error, disabled, loading
+ */
+import { useMemo, useState } from 'react';
+import { Lock } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+
+// Indent steps as literal classes (Tailwind scans literal strings; no inline spacing styles).
+const INDENT = ['pl-0', 'pl-5', 'pl-10', 'pl-14', 'pl-20'];
+const indentClass = (depth) => INDENT[Math.min(Math.max(depth || 0, 0), INDENT.length - 1)];
+
+export default function MultiSelectChecklist({
+  id,
+  label,
+  options,
+  value,
+  onChange,
+  searchPlaceholder = 'Search…',
+  emptyLabel = 'Nothing to choose from.',
+  lockedHint = 'locked',
+  hint,
+  error,
+  disabled = false,
+  loading = false,
+}) {
+  const [query, setQuery] = useState('');
+  const selected = useMemo(() => new Set(value), [value]);
+  const q = query.trim().toLowerCase();
+  // While searching, show matches flat (indent only makes sense for the whole tree).
+  const visible = q ? options.filter((o) => o.name.toLowerCase().includes(q)) : options;
+  const visibleUnlocked = visible.filter((o) => !o.locked);
+  const lockedTotal = options.filter((o) => o.locked).length;
+  const count = selected.size + lockedTotal;
+
+  const toggle = (optId) => {
+    const next = new Set(selected);
+    if (next.has(optId)) next.delete(optId);
+    else next.add(optId);
+    onChange(options.filter((o) => !o.locked && next.has(o.id)).map((o) => o.id));
+  };
+  const selectAll = () => {
+    const next = new Set(selected);
+    for (const o of visibleUnlocked) next.add(o.id);
+    onChange(options.filter((o) => !o.locked && next.has(o.id)).map((o) => o.id));
+  };
+  const selectNone = () => {
+    const drop = new Set(visibleUnlocked.map((o) => o.id));
+    onChange(value.filter((v) => !drop.has(v)));
+  };
+
+  const errorId = error ? `${id}-error` : undefined;
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between gap-2">
+        <Label htmlFor={`${id}-search`} variant="field">
+          {label}
+        </Label>
+        <Badge variant="secondary" aria-live="polite">
+          {count} selected
+        </Badge>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Input
+          id={`${id}-search`}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={searchPlaceholder}
+          disabled={disabled || loading}
+          className="h-8"
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={selectAll}
+          disabled={disabled || loading || visibleUnlocked.length === 0}
+        >
+          Select all
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={selectNone}
+          disabled={disabled || loading || visibleUnlocked.length === 0}
+        >
+          None
+        </Button>
+      </div>
+
+      <div
+        id={id}
+        role="group"
+        aria-label={label}
+        aria-describedby={errorId}
+        className={cn(
+          'max-h-48 overflow-y-auto rounded-md border border-border p-2',
+          error && 'border-destructive',
+        )}
+      >
+        {loading ? (
+          <p className="px-1 py-2 text-xs text-muted-foreground">Loading…</p>
+        ) : visible.length === 0 ? (
+          <p className="px-1 py-2 text-xs text-muted-foreground">
+            {q ? 'No matches.' : emptyLabel}
+          </p>
+        ) : (
+          <ul className="space-y-1">
+            {visible.map((o) => (
+              <li key={o.id} className={cn(!q && indentClass(o.depth))}>
+                <label
+                  className={cn(
+                    'flex items-center gap-2 rounded px-1 py-1 text-sm',
+                    o.locked ? 'text-muted-foreground' : 'cursor-pointer hover:bg-accent',
+                  )}
+                >
+                  <Checkbox
+                    checked={o.locked ? true : selected.has(o.id)}
+                    disabled={disabled || o.locked}
+                    onCheckedChange={() => !o.locked && toggle(o.id)}
+                  />
+                  <span className="truncate">{o.name}</span>
+                  {o.locked && (
+                    <span className="ml-auto inline-flex shrink-0 items-center gap-1 text-xs">
+                      <Lock className="size-3" aria-hidden="true" />
+                      {lockedHint}
+                    </span>
+                  )}
+                </label>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {error ? (
+        <p id={errorId} className="text-xs text-destructive">
+          {error}
+        </p>
+      ) : (
+        hint && <p className="text-xs text-muted-foreground">{hint}</p>
+      )}
+    </div>
+  );
+}

package/template/frontend/src/index.css

@@ -1,7 +1,9 @@
+/* Inter (UI) + JetBrains Mono (code/data) — the professional SaaS standard.
+   Must stay FIRST: `@import 'tailwindcss'` inlines rules, and a url @import after any
+   rule is invalid CSS (the build warns and browsers ignore it). */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 @import 'tailwindcss';
 @import 'tw-animate-css';
-/* Inter (UI) + JetBrains Mono (code/data) — the professional SaaS standard. */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 
 /*
   astram3 design tokens — shadcn/ui + Tailwind v4 (CSS-var driven).

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

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

@@ -0,0 +1,231 @@
+/**
+ * ServiceAccountAccessDialog — create a service account, or edit an existing one's name + access
+ * (roles + scope). Phase 4 of the Service Accounts plan.
+ *
+ * The pickers offer ONLY what the caller may grant: `serviceAccounts.listAssignable` is computed
+ * server-side from the same ADR-0029 ceiling the save enforces. On edit, the agent's roles/nodes the
+ * caller cannot grant are shown checked + locked ("assigned by someone with more access") and are
+ * never sent — the server keeps them. Create defaults the scope to everything the caller reaches;
+ * both create and edit require at least one scope node. Edit sends only the fields that changed.
+ *
+ * Errors: a 403 (over the ceiling) or 409 (edited concurrently) shows the server text inline above the
+ * buttons; a 400 lands on the field it is about. Everything is shown by name, never by id.
+ *
+ * Props: open, account (null ⇒ create), onClose(), onSaved(account). Mount it only while open with a
+ * `key` per target (the page does), so each open starts from fresh state.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { useAuth } from '@/auth/AuthContext';
+import EntityFormModal from '@/components/EntityFormModal';
+import MultiSelectChecklist from '@/components/MultiSelectChecklist';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  LOCKED_HINT,
+  NO_ROLES_WARNING,
+  buildAccessModel,
+  validateAccess,
+  sameIds,
+  hasNoRoles,
+  createBody,
+  editPatch,
+  fieldOfServerError,
+} from './accessModel';
+
+export default function ServiceAccountAccessDialog({ open, account, onClose, onSaved }) {
+  const { tokens, serviceAccounts } = useAuth();
+  const token = tokens?.accessToken;
+  const editing = !!account;
+
+  // The page mounts this dialog fresh (keyed) per open, so state initialises from props here —
+  // no reset-in-effect.
+  const [assignable, setAssignable] = useState(null); // { roles, scopeNodes } | null
+  const [loadingAssignable, setLoadingAssignable] = useState(true);
+  const [assignableError, setAssignableError] = useState('');
+
+  const [label, setLabel] = useState(account?.label ?? '');
+  const [roles, setRoles] = useState([]);
+  const [scope, setScope] = useState([]);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [formError, setFormError] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  // Load what the caller may grant (ignore a stale response).
+  useEffect(() => {
+    if (!open || !token) return undefined;
+    let cancelled = false;
+    serviceAccounts.listAssignable(token).then((r) => {
+      if (cancelled) return;
+      setLoadingAssignable(false);
+      if (!r.ok) {
+        setAssignableError(r.error || 'Could not load the roles and companies you can assign.');
+        return;
+      }
+      const loaded = { roles: r.roles, scopeNodes: r.scopeNodes };
+      const m = buildAccessModel(loaded, account);
+      setAssignable(loaded);
+      setRoles(m.initialRoles);
+      setScope(m.initialScope);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, token, account, serviceAccounts]);
+
+  const model = useMemo(
+    () => (assignable ? buildAccessModel(assignable, account) : null),
+    [assignable, account],
+  );
+
+  const accessReady = !!model;
+
+  const onSubmit = async () => {
+    // Without the assignable set we cannot build a safe access request: create is blocked; edit
+    // can still rename (access fields are then left untouched).
+    if (!accessReady && !editing) {
+      setFormError(assignableError || 'Still loading what you can assign.');
+      return;
+    }
+    // Scope is required whenever it will be SENT: always on create; on edit only if it changed
+    // (an untouched scope is not sent, so an agent whose nodes are all locked can still be renamed).
+    const requireScope = accessReady && (!editing || !sameIds(scope, model.initialScope));
+    const errors = validateAccess({ label, scope, requireScope });
+    setFieldErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+    setFormError('');
+
+    let r;
+    if (!editing) {
+      setBusy(true);
+      r = await serviceAccounts.create(token, createBody({ label, roles, scope }));
+    } else {
+      const patch = accessReady
+        ? editPatch({
+            account,
+            label,
+            roles,
+            scope,
+            initialRoles: model.initialRoles,
+            initialScope: model.initialScope,
+          })
+        : label.trim() !== account.label
+          ? { label: label.trim() }
+          : {};
+      if (Object.keys(patch).length === 0) {
+        toast.message('No changes to save.');
+        onClose?.();
+        return;
+      }
+      setBusy(true);
+      r = await serviceAccounts.update(token, account.id, patch);
+    }
+    setBusy(false);
+
+    if (!r.ok) {
+      if (r.status === 400) {
+        const field = fieldOfServerError(r.error);
+        if (field) {
+          setFieldErrors({ [field]: r.error });
+          return;
+        }
+      }
+      setFormError(r.error || 'The service account could not be saved.');
+      return;
+    }
+    toast.success(editing ? `Saved “${r.account.label}”` : `Created “${r.account.label}”`);
+    onSaved?.(r.account);
+  };
+
+  const noRoles = accessReady && hasNoRoles(roles, model.roleOptions);
+
+  return (
+    <EntityFormModal
+      open={open}
+      onClose={onClose}
+      onSubmit={onSubmit}
+      busy={busy}
+      error={formError}
+      title={editing ? `Edit “${account.label}”` : 'New service account'}
+      description={
+        editing
+          ? 'Rename the agent or change what it can reach. Access you cannot grant stays as it is.'
+          : 'A machine identity for an agent, MCP server, or script, created in your own tenant. Issue its API key next.'
+      }
+      submitLabel={editing ? 'Save' : 'Create'}
+      contentClassName="sm:max-w-lg"
+    >
+      <div className="space-y-1.5">
+        <Label htmlFor="sa-label" variant="field">
+          Name
+        </Label>
+        <Input
+          id="sa-label"
+          value={label}
+          onChange={(e) => setLabel(e.target.value)}
+          placeholder="e.g. Nightly ingest bot"
+          autoFocus
+          aria-invalid={!!fieldErrors.label}
+          aria-describedby={fieldErrors.label ? 'sa-label-error' : undefined}
+        />
+        {fieldErrors.label && (
+          <p id="sa-label-error" className="text-xs text-destructive">
+            {fieldErrors.label}
+          </p>
+        )}
+      </div>
+
+      {assignableError && (
+        <Alert variant="destructive">
+          <AlertDescription>
+            {assignableError}
+            {editing ? ' You can still rename this agent; its access is left unchanged.' : ''}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {!assignableError && (
+        <>
+          <MultiSelectChecklist
+            id="sa-roles"
+            label="Roles"
+            options={model?.roleOptions ?? []}
+            value={roles}
+            onChange={setRoles}
+            loading={loadingAssignable}
+            disabled={busy}
+            searchPlaceholder="Search roles…"
+            emptyLabel="You hold no roles you can give an agent."
+            lockedHint={LOCKED_HINT}
+            hint="Only roles you hold yourself are offered."
+          />
+          {noRoles && (
+            <Alert variant="warning">
+              <AlertDescription>{NO_ROLES_WARNING}</AlertDescription>
+            </Alert>
+          )}
+
+          <MultiSelectChecklist
+            id="sa-scope"
+            label="Scope"
+            options={model?.scopeOptions ?? []}
+            value={scope}
+            onChange={setScope}
+            loading={loadingAssignable}
+            disabled={busy}
+            searchPlaceholder="Search companies…"
+            emptyLabel="No companies in your reach."
+            lockedHint={LOCKED_HINT}
+            hint={
+              editing
+                ? 'The companies this agent can act in (at least one).'
+                : 'Defaults to everything you can reach. Keep at least one.'
+            }
+            error={fieldErrors.scope}
+          />
+        </>
+      )}
+    </EntityFormModal>
+  );
+}

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

@@ -0,0 +1,56 @@
+/**
+ * ServiceAccountActionsMenu — the ⋯ row-action menu on the Service Accounts listing.
+ * Edit access · (sep) · Issue new key · Rotate key · (sep) · Enable/Disable · Revoke all keys
+ * (destructive). The account is named by LABEL; its id is a handle passed to the callbacks, never shown.
+ */
+import { MoreHorizontal, KeyRound, RefreshCw, Power, Trash2, ShieldCheck } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export default function ServiceAccountActionsMenu({
+  account,
+  onEditAccess,
+  onIssueKey,
+  onRotateKey,
+  onToggleStatus,
+  onRevokeKeys,
+}) {
+  const disabled = account.status === 'disabled';
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          aria-label={`Actions for ${account.label}`}
+          className="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <MoreHorizontal className="size-4" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-52">
+        <DropdownMenuItem onClick={() => onEditAccess(account)}>
+          <ShieldCheck className="size-4" /> Edit access
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => onIssueKey(account)}>
+          <KeyRound className="size-4" /> Issue new key
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => onRotateKey(account)}>
+          <RefreshCw className="size-4" /> Rotate key
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => onToggleStatus(account)}>
+          <Power className="size-4" /> {disabled ? 'Enable account' : 'Disable account'}
+        </DropdownMenuItem>
+        <DropdownMenuItem variant="destructive" onClick={() => onRevokeKeys(account)}>
+          <Trash2 className="size-4" /> Revoke all keys
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}