create-astram-app 0.3.0 → 0.5.0

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

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

@@ -0,0 +1,309 @@
+/**
+ * ServiceAccountsPage — the Service Accounts admin screen (ADR-0033): machine identities (AI agents,
+ * MCP servers, scripts) that authenticate with an `ask_…` API key. List the tenant's accounts (with
+ * their roles + scope BY NAME), create one with roles + scope, edit its access, and per-account
+ * Issue / Rotate / Revoke its keys (+ Enable/Disable). Create/edit live in
+ * {@link ServiceAccountAccessDialog} (pickers limited to what you may grant — Phase 4).
+ *
+ * The KEY lifecycle is the sensitive part: issue/rotate reveal the raw key EXACTLY ONCE via
+ * {@link KeyRevealDialog}; rotate/revoke/disable go through {@link ConfirmDialog} (they're
+ * destructive). Accounts are shown by LABEL (+ created-by name); the id is a handle only (ADR-0012).
+ *
+ * The list is served whole by the server (no server-side paging on this surface), so this page filters
+ * by search client-side and does not use the EntityList pager.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Bot, KeyRound } from 'lucide-react';
+import { toast } from 'sonner';
+import { useAuth } from '@/auth/AuthContext';
+import AppShell from '@/shell/AppShell';
+import PageHeader from '@/components/PageHeader';
+import EntityList, { EntityListControls } from '@/components/EntityList';
+import ConfirmDialog from '@/components/ConfirmDialog';
+import { Badge } from '@/components/ui/badge';
+import ServiceAccountActionsMenu from './ServiceAccountActionsMenu';
+import ServiceAccountAccessDialog from './ServiceAccountAccessDialog';
+import KeyRevealDialog from './KeyRevealDialog';
+import { summarizeNames } from './accessModel';
+
+function formatDate(ms) {
+  if (!ms) return '—';
+  try {
+    return new Date(ms).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+  } catch {
+    return '—';
+  }
+}
+
+export default function ServiceAccountsPage() {
+  const { tokens, serviceAccounts } = useAuth();
+  const token = tokens?.accessToken;
+
+  const [accounts, setAccounts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [search, setSearch] = useState('');
+
+  // Create / edit-access dialog: `null` closed, `{ account: null }` create, `{ account }` edit.
+  const [accessDialog, setAccessDialog] = useState(null);
+
+  // One-time key reveal + destructive-confirm state.
+  const [issuedKey, setIssuedKey] = useState(null);
+  const [pending, setPending] = useState(null); // { kind: 'rotate'|'revoke'|'toggle', account }
+  const [pendingBusy, setPendingBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    if (!token) return;
+    setLoading(true);
+    const r = await serviceAccounts.list(token);
+    if (r.ok) {
+      setAccounts(r.accounts);
+      setError('');
+    } else {
+      setAccounts([]);
+      setError(r.error || 'Could not load service accounts.');
+    }
+    setLoading(false);
+  }, [serviceAccounts, token]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const rows = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    // Match the name OR any role/company name shown on the row.
+    const filtered = q
+      ? accounts.filter((a) =>
+          [a.label, ...(a.roleLabels ?? []), ...(a.scopeLabels ?? [])].some((s) =>
+            (s || '').toLowerCase().includes(q),
+          ),
+        )
+      : accounts;
+    // Adapt to the EntityList `{ id, fields }` row shape; the account rides along for the menu.
+    return filtered.map((a) => ({ id: a.id, fields: a, account: a }));
+  }, [accounts, search]);
+
+  const onSaved = async () => {
+    setAccessDialog(null);
+    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
+  };
+
+  const confirmPending = async () => {
+    if (!pending) return;
+    setPendingBusy(true);
+    const { kind, account } = pending;
+    let r;
+    if (kind === 'rotate') r = await serviceAccounts.rotateKey(token, account.id);
+    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' });
+    setPendingBusy(false);
+    setPending(null);
+    if (!r.ok) {
+      toast.error(r.error || 'The action could not be completed.');
+      return;
+    }
+    if (kind === 'rotate') {
+      setIssuedKey(r.key); // reveal the NEW key ONCE
+      toast.success('Key rotated — the previous key no longer works.');
+    } else if (kind === 'revoke') {
+      toast.success('All keys revoked.');
+    } else {
+      toast.success(account.status === 'disabled' ? 'Account enabled.' : 'Account disabled.');
+    }
+    await load();
+  };
+
+  const COLUMNS = [
+    {
+      key: 'label',
+      label: 'Name',
+      render: (row) => (
+        <div className="flex items-center gap-2">
+          <span className="inline-flex size-8 items-center justify-center rounded-full bg-secondary text-muted-foreground">
+            <Bot className="size-4" />
+          </span>
+          <div className="min-w-0 font-medium">
+            <div className="truncate">{row.fields.label}</div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'roles',
+      label: 'Roles',
+      render: (row) => {
+        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">
+              No roles
+            </Badge>
+          );
+        }
+        return (
+          <div className="flex flex-wrap items-center gap-1">
+            {shown.map((name, i) => (
+              <Badge key={`${name}-${i}`} variant="secondary">
+                {name}
+              </Badge>
+            ))}
+            {more > 0 && (
+              <Badge variant="outline" title={row.fields.roleLabels.slice(3).join(', ')}>
+                +{more}
+              </Badge>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      key: 'scope',
+      label: 'Scope',
+      render: (row) => {
+        const names = row.fields.scopeLabels ?? [];
+        const { shown, more } = summarizeNames(names);
+        if (shown.length === 0) return <span className="text-muted-foreground">—</span>;
+        return (
+          <span className="text-sm text-muted-foreground" title={names.join(', ')}>
+            {shown.join(', ')}
+            {more > 0 ? ` +${more}` : ''}
+          </span>
+        );
+      },
+    },
+    {
+      key: 'status',
+      label: 'Status',
+      render: (row) =>
+        row.fields.status === 'disabled' ? (
+          <Badge variant="outline" className="text-muted-foreground">Disabled</Badge>
+        ) : (
+          <Badge>Active</Badge>
+        ),
+    },
+    {
+      key: 'createdBy',
+      label: 'Created by',
+      render: (row) => row.fields.createdByName || '—',
+    },
+    {
+      key: 'created',
+      label: 'Created',
+      render: (row) => formatDate(row.fields.createdAtMs),
+    },
+    {
+      key: 'actions',
+      label: '',
+      render: (row) => (
+        <div className="flex justify-end">
+          <ServiceAccountActionsMenu
+            account={row.account}
+            onEditAccess={(a) => setAccessDialog({ account: a })}
+            onIssueKey={onIssueKey}
+            onRotateKey={(a) => setPending({ kind: 'rotate', account: a })}
+            onToggleStatus={(a) => setPending({ kind: 'toggle', account: a })}
+            onRevokeKeys={(a) => setPending({ kind: 'revoke', account: a })}
+          />
+        </div>
+      ),
+    },
+  ];
+
+  const confirmCopy = (() => {
+    if (!pending) return { title: '', message: '', confirmLabel: 'Confirm', destructive: false };
+    const name = pending.account.label;
+    if (pending.kind === 'rotate') {
+      return {
+        title: `Rotate the key for “${name}”?`,
+        message:
+          'A new key is generated and shown once. The current key stops working immediately — update any client using it.',
+        confirmLabel: 'Rotate key',
+        destructive: true,
+      };
+    }
+    if (pending.kind === 'revoke') {
+      return {
+        title: `Revoke all keys for “${name}”?`,
+        message:
+          'Every key for this account stops working immediately. Any agent using it will lose access until you issue a new key.',
+        confirmLabel: 'Revoke keys',
+        destructive: true,
+      };
+    }
+    const disabling = pending.account.status !== 'disabled';
+    return {
+      title: disabling ? `Disable “${name}”?` : `Enable “${name}”?`,
+      message: disabling
+        ? 'A disabled account cannot authenticate. Its keys are kept and start working again when you enable it.'
+        : 'The account can authenticate again with its existing keys.',
+      confirmLabel: disabling ? 'Disable' : 'Enable',
+      destructive: disabling,
+    };
+  })();
+
+  return (
+    <AppShell section="Identity" title="Service accounts">
+      <div className="p-4">
+        <PageHeader
+          section="Identity"
+          title="Service accounts"
+          icon={KeyRound}
+          actions={
+            <EntityListControls
+              search={search}
+              onSearchChange={setSearch}
+              searchPlaceholder="Search service accounts…"
+              addLabel="New service account"
+              onAdd={() => setAccessDialog({ account: null })}
+            />
+          }
+        />
+
+        <EntityList
+          columns={COLUMNS}
+          rows={rows}
+          search={search}
+          loading={loading}
+          error={error}
+          emptyLabel="No service accounts yet. Create one to give an agent or script scoped API access."
+        />
+      </div>
+
+      {/* Create + edit access (roles + scope, limited to what you may grant) */}
+      {accessDialog && (
+        <ServiceAccountAccessDialog
+          key={accessDialog.account?.id ?? 'new'}
+          open
+          account={accessDialog.account}
+          onClose={() => setAccessDialog(null)}
+          onSaved={onSaved}
+        />
+      )}
+
+      {/* One-time key reveal (issue + rotate) */}
+      <KeyRevealDialog issued={issuedKey} onClose={() => setIssuedKey(null)} />
+
+      {/* Destructive confirms: rotate / revoke / disable */}
+      <ConfirmDialog
+        open={!!pending}
+        title={confirmCopy.title}
+        message={confirmCopy.message}
+        confirmLabel={confirmCopy.confirmLabel}
+        destructive={confirmCopy.destructive}
+        busy={pendingBusy}
+        onConfirm={confirmPending}
+        onCancel={() => setPending(null)}
+      />
+    </AppShell>
+  );
+}