create-astram-app 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-astram-app",
-  "version": "0.3.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.2.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

@@ -28,7 +28,9 @@ import UsersPage from './pages/users/UsersPage';
 import UserForm from './pages/users/UserForm';
 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';
@@ -155,6 +157,29 @@ export default function App() {
         <Route path="add" element={<AccessForm />} />
         <Route path="edit/:uuid" element={<AccessForm />} />
       </Route>
+      {/* Guided rule-builder — author/list/delete record-access policies (§9.1). Gated
+          identity:role:read (policy authoring IS access administration; the write gate is
+          role:update, enforced server-side on POST/DELETE). */}
+      <Route
+        path="/record-policies"
+        element={
+          <RequireAuth gate="identity:role:read">
+            <RecordPoliciesPage />
+          </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

@@ -17,6 +17,9 @@ import {
   createAuthService,
   createCrossTenantService,
   createIdentityService,
+  createRecordPolicyService,
+  createRecordShareService,
+  createServiceAccountService,
   isAuthenticated,
   principalOf,
 } from '@astram/frontend-core';
@@ -66,6 +69,14 @@ export function AuthProvider({ children }) {
       identity: createIdentityService(http),
       audit: createAuditService(http),
       crossTenant: createCrossTenantService(http),
+      // The guided rule-builder surface (§9.1) — author/list/delete record-access policies +
+      // the field/operator schema that drives the builder's dropdowns.
+      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`.
@@ -81,7 +92,8 @@ export function AuthProvider({ children }) {
       store,
     };
   }
-  const { auth, identity, audit, crossTenant, account, shield, store } = services.current;
+  const { auth, identity, audit, crossTenant, recordPolicy, recordShare, serviceAccounts, account, shield, store } =
+    services.current;
 
   const [state, setState] = useState(() => store.load()); // SessionState | null
   // The signed-in user's DISPLAY profile (name/email/company/roles) from GET /auth/me.
@@ -284,6 +296,13 @@ export function AuthProvider({ children }) {
       // The shared cross-tenant grant service (offer/accept/revoke + inbox/mine +
       // offerable-types) — same injected web http client.
       crossTenant,
+      // The shared guided rule-builder service (author/list/delete record policies + the
+      // field/operator schema) — same injected web http client.
+      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,
@@ -306,7 +325,7 @@ export function AuthProvider({ children }) {
         ),
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [state, auth, identity, audit, crossTenant, 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/components/ShareDialog.jsx

@@ -0,0 +1,269 @@
+/**
+ * ShareDialog — the reusable OWNER-SHARE widget (§9.2 / list-scoping engine Phase 6).
+ *
+ * A record's owner opens this from a record's detail/list to manage WHO can see it: it lists the
+ * record's current shares (grantee NAMES, never raw uuids), lets the owner add a share (grantee
+ * kind → user/role searchable picker → action → Add), and revoke one with a confirm. The server
+ * enforces owner-only (a non-owner gets 403); the tenant + sharer are resolved server-side.
+ *
+ * Props:
+ *   open, onOpenChange — dialog control.
+ *   typeKey, recordId  — the record being shared (the owner-bound is server-enforced).
+ *   recordLabel        — a human label for the title (never the uuid).
+ *   actions            — the action vocabulary to offer (defaults to ['read']).
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { Share2, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { useAuth } from '@/auth/AuthContext';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { SearchableSelect } from '@/components/ui/searchable-select';
+import ConfirmDialog from '@/components/ConfirmDialog';
+
+export default function ShareDialog({
+  open,
+  onOpenChange,
+  typeKey,
+  recordId,
+  recordLabel,
+  actions = ['read'],
+}) {
+  const { tokens, recordShare, identity } = useAuth();
+  const token = tokens?.accessToken;
+
+  const [shares, setShares] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  // The add-share form.
+  const [granteeKind, setGranteeKind] = useState('user');
+  const [grantee, setGrantee] = useState(null); // { value, label }
+  const [action, setAction] = useState(actions[0] ?? 'read');
+  const [adding, setAdding] = useState(false);
+
+  const [revokeTarget, setRevokeTarget] = useState(null);
+  const [revokeBusy, setRevokeBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    if (!token || !open) return;
+    setLoading(true);
+    const r = await recordShare.listShares(token, typeKey, recordId);
+    if (r.ok) {
+      setShares(r.shares);
+      setError('');
+    } else {
+      setShares([]);
+      setError(r.error || 'Could not load the shares.');
+    }
+    setLoading(false);
+  }, [recordShare, token, typeKey, recordId, open]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  // Reset the grantee picker when the kind flips (user vs role are different directories).
+  useEffect(() => {
+    setGrantee(null);
+  }, [granteeKind]);
+
+  // Fetch grantee options (users or roles) for the searchable picker — value=uuid, label=name.
+  const fetchGrantees = useCallback(
+    async ({ search, page }) => {
+      const opts = { page, limit: 10, search };
+      const r =
+        granteeKind === 'role'
+          ? await identity.listRoles(token, opts)
+          : await identity.listUsers(token, opts);
+      if (!r.ok) return { options: [], total: 0, page: page ?? 1 };
+      const options = (r.rows || []).map((row) => ({
+        value: row.id ?? row.uuid,
+        label:
+          granteeKind === 'role'
+            ? row.fields?.name ?? '(role)'
+            : row.fields?.username ?? row.fields?.email ?? '(user)',
+      }));
+      return { options, total: r.total ?? options.length, page: page ?? 1 };
+    },
+    [identity, token, granteeKind],
+  );
+
+  const onAdd = async () => {
+    if (!grantee) {
+      toast.error('Pick a grantee.');
+      return;
+    }
+    setAdding(true);
+    const r = await recordShare.share(token, {
+      typeKey,
+      recordId,
+      granteeKind,
+      granteeUuid: grantee.value,
+      action,
+    });
+    setAdding(false);
+    if (!r.ok) {
+      toast.error(r.error || 'Could not share the record.');
+      return;
+    }
+    toast.success('Shared');
+    setGrantee(null);
+    await load();
+  };
+
+  const onConfirmRevoke = async () => {
+    if (!revokeTarget) return;
+    setRevokeBusy(true);
+    const r = await recordShare.unshare(token, {
+      typeKey,
+      recordId,
+      granteeKind: revokeTarget.granteeKind,
+      granteeUuid: revokeTarget.granteeUuid,
+      action: revokeTarget.action,
+    });
+    setRevokeBusy(false);
+    if (!r.ok) {
+      toast.error(r.error || 'Could not revoke the share.');
+      return;
+    }
+    setRevokeTarget(null);
+    toast.success('Share revoked');
+    await load();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Share2 className="size-4" />
+            Share {recordLabel ? `“${recordLabel}”` : 'record'}
+          </DialogTitle>
+          <DialogDescription>
+            Grant a user or role access to this record. Only you (the owner) can manage its shares.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Current shares */}
+        <div className="space-y-2">
+          <Label>Shared with</Label>
+          {loading ? (
+            <div className="text-sm text-muted-foreground">Loading…</div>
+          ) : error ? (
+            <div className="text-sm text-destructive">{error}</div>
+          ) : shares.length === 0 ? (
+            <div className="text-sm text-muted-foreground">Not shared with anyone yet.</div>
+          ) : (
+            <ul className="divide-y divide-border rounded-md border border-border">
+              {shares.map((s) => (
+                <li
+                  key={`${s.granteeKind}:${s.granteeUuid}:${s.action}`}
+                  className="flex items-center justify-between px-3 py-2"
+                >
+                  <span className="flex items-center gap-2 text-sm">
+                    <span className="font-medium text-foreground">{s.granteeName}</span>
+                    <span className="text-xs text-muted-foreground">({s.granteeKind})</span>
+                    <Badge variant="secondary" className="font-normal">
+                      {s.action}
+                    </Badge>
+                  </span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+                    onClick={() => setRevokeTarget(s)}
+                  >
+                    <Trash2 className="size-4" />
+                    Revoke
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        {/* Add a share */}
+        <div className="mt-2 space-y-3 rounded-md border border-border p-3">
+          <Label>Add access</Label>
+          <div className="flex flex-wrap items-end gap-2">
+            <div className="space-y-1">
+              <Label className="text-xs text-muted-foreground">Grantee kind</Label>
+              <Select value={granteeKind} onValueChange={setGranteeKind}>
+                <SelectTrigger className="w-28">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="user">User</SelectItem>
+                  <SelectItem value="role">Role</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="min-w-48 flex-1 space-y-1">
+              <Label className="text-xs text-muted-foreground">
+                {granteeKind === 'role' ? 'Role' : 'User'}
+              </Label>
+              <SearchableSelect
+                value={grantee?.value ?? null}
+                selectedLabel={grantee?.label ?? null}
+                onChange={(value) =>
+                  setGrantee(value ? { value, label: grantee?.label ?? '' } : null)
+                }
+                onLabelChange={(label) =>
+                  setGrantee((g) => (g ? { ...g, label: label ?? '' } : g))
+                }
+                fetchPage={fetchGrantees}
+                placeholder={`Pick a ${granteeKind}`}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs text-muted-foreground">Action</Label>
+              <Select value={action} onValueChange={setAction}>
+                <SelectTrigger className="w-28">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {actions.map((a) => (
+                    <SelectItem key={a} value={a}>
+                      {a}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <Button type="button" size="sm" onClick={onAdd} disabled={adding || !grantee}>
+              {adding ? 'Adding…' : 'Add'}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+
+      <ConfirmDialog
+        open={!!revokeTarget}
+        title={revokeTarget ? `Revoke ${revokeTarget.granteeName}'s access?` : 'Revoke access?'}
+        message="This removes their access to this record. This cannot be undone."
+        confirmLabel="Revoke"
+        destructive
+        busy={revokeBusy}
+        onConfirm={onConfirmRevoke}
+        onCancel={() => setRevokeTarget(null)}
+      />
+    </Dialog>
+  );
+}

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