create-astram-app 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-astram-app",
-  "version": "0.2.0",
+  "version": "0.4.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.1.0",
+    "@astram/frontend-core": "^0.3.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,11 @@ 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 GrantsPage from './pages/cross-tenant/GrantsPage';
+import GrantForm from './pages/cross-tenant/GrantForm';
+import InboxPage from './pages/cross-tenant/InboxPage';
 
 /** The single forced-re-enroll screen path (the enforcement's frontend twin). */
 const REENROLL_PATH = '/account/reenroll';
@@ -152,6 +156,38 @@ 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>
+        }
+      />
+      {/* 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). */}
+      <Route
+        path="/cross-tenant"
+        element={
+          <RequireAuth gate="identity:role:read">
+            <GrantsPage />
+          </RequireAuth>
+        }
+      >
+        <Route path="offer" element={<GrantForm />} />
+      </Route>
+      <Route
+        path="/cross-tenant/inbox"
+        element={
+          <RequireAuth gate="identity:role:read">
+            <InboxPage />
+          </RequireAuth>
+        }
+      />
       {/* Audit — read-only, no child add/edit routes (audit events are immutable). */}
       <Route
         path="/audit"

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

@@ -15,7 +15,10 @@ import {
   createAccountService,
   createAuditService,
   createAuthService,
+  createCrossTenantService,
   createIdentityService,
+  createRecordPolicyService,
+  createRecordShareService,
   isAuthenticated,
   principalOf,
 } from '@astram/frontend-core';
@@ -64,6 +67,12 @@ export function AuthProvider({ children }) {
       auth: createAuthService(http),
       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),
       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`.
@@ -79,7 +88,8 @@ export function AuthProvider({ children }) {
       store,
     };
   }
-  const { auth, identity, audit, account, shield, store } = services.current;
+  const { auth, identity, audit, crossTenant, recordPolicy, recordShare, 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.
@@ -279,6 +289,14 @@ export function AuthProvider({ children }) {
       identity,
       // The shared audit-log service (audit viewer) — same injected web http client.
       audit,
+      // 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 self-scoped account service (change-password today; profile/MFA
       // later) — same injected web http client.
       account,
@@ -301,7 +319,7 @@ export function AuthProvider({ children }) {
         ),
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [state, auth, identity, audit, account, shield, profile, mustReenroll, authFacts],
+    [state, auth, identity, audit, crossTenant, recordPolicy, recordShare, account, shield, profile, mustReenroll, authFacts],
   );
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

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