create-astram-app 0.12.9 → 0.13.0

package/template/frontend/src/pages/access/AccessForm.jsx

@@ -8,22 +8,36 @@
  *   /access/edit/:uuid        → edit    (role fixed = :uuid, matrix seeded from its grants)
  *   /access/add?from=<uuid>   → duplicate (matrix seeded from the source, role empty → pick a target)
  *   /access/add               → assign  (empty role, empty matrix)
+ *   /access/add?key=<key>     → assign with that one catalog key pre-ticked (an Announcements
+ *                               task's "Grant…"); a key not in the catalog is ignored silently
  *
  * Save diffs the working matrix vs. the role's loaded grants → grant/revokePermission per
- * key. decide()/grant model unchanged. ⛔ No raw UUIDs: roles shown by name; a uuid is a
- * route param / select value / API arg only.
+ * key. decide()/grant model unchanged. When newly granted keys carry a catalog caution
+ * (G-027), a ConfirmDialog lists "label — caution" BEFORE any grant is sent. ⛔ No raw
+ * UUIDs or keys in text: roles shown by name, permissions by label; a uuid/key is a route
+ * param / select value / API arg only.
  */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useNavigate, useOutletContext, useParams, useSearchParams } from 'react-router-dom';
-import { Check } from 'lucide-react';
+import { Check, TriangleAlert } from 'lucide-react';
 import { toast } from 'sonner';
 import { useAuth } from '@/auth/AuthContext';
+import ConfirmDialog from '@/components/ConfirmDialog';
 import EntityFormModal from '@/components/EntityFormModal';
 import { Input } from '@/components/ui/input';
 import { Checkbox } from '@/components/ui/checkbox';
 import { SearchableSelect } from '@/components/ui/searchable-select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import CollapsibleGroup from '@/components/access/CollapsibleGroup';
-import { actionHeading, extraActionsByType, matrixActions, typeLabelOf } from './accessMatrix';
+import { refreshNotificationCounts } from '@/shell/useNotificationCounts';
+import {
+  actionHeading,
+  cautionsFor,
+  extraActionsByType,
+  matrixActions,
+  mergePicked,
+  typeLabelOf,
+} from './accessMatrix';
 
 const ACTIONS = ['read', 'create', 'update', 'delete'];
 
@@ -55,9 +69,19 @@ export default function AccessForm() {
   const [searchParams] = useSearchParams();
   const { onRefresh } = useOutletContext() ?? {};
 
-  const fromUuid = searchParams.get('from');
+  // `?from=` and `?key=` are read ONCE, at first render: AccessPage (the parent route) rewrites
+  // the URL to its own list params on mount, which drops both before the load effect could
+  // read them again.
+  const [initialParams] = useState(() => ({
+    from: searchParams.get('from'),
+    key: searchParams.get('key'),
+  }));
+  const fromUuid = initialParams.from;
   const mode = uuid ? 'edit' : fromUuid ? 'duplicate' : 'assign';
   const sourceUuid = uuid || fromUuid || null;
+  // `?key=` only pre-ticks in plain assign mode; never rendered.
+  const presetKey = mode === 'assign' ? initialParams.key : null;
+  const idBase = useId();
 
   const [catalog, setCatalog] = useState([]);
   const [bundles, setBundles] = useState([]);
@@ -72,6 +96,12 @@ export default function AccessForm() {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState('');
+  // Cautions awaiting the user's confirm before Save sends anything (null = no dialog).
+  const [pendingCautions, setPendingCautions] = useState(null);
+  // Focus return for the caution confirm: what opened it, and what to refocus after a cancel.
+  const confirmOpener = useRef(null);
+  const restoreFocusTo = useRef(null);
+  const bodyRef = useRef(null);
 
   const moduleName = catalog[0]?.module || 'identity';
 
@@ -96,6 +126,19 @@ export default function AccessForm() {
     for (const c of catalog) m[c.key] = c.label;
     return m;
   }, [catalog]);
+  // key → { label, description, caution } for the cells whose key carries a caution.
+  const cautionOf = useMemo(() => {
+    const descriptionOf = new Map(catalog.map((r) => [r.key, r.description]));
+    const m = {};
+    for (const c of cautionsFor(
+      catalog,
+      catalog.map((r) => r.key),
+    )) {
+      const d = descriptionOf.get(c.key);
+      m[c.key] = { ...c, description: typeof d === 'string' ? d.trim() : '' };
+    }
+    return m;
+  }, [catalog]);
   const keyExists = useCallback((key) => Boolean(labelOf[key]), [labelOf]);
   // The object column shows a name from the catalog labels, never the raw type key.
   const typeLabels = useMemo(
@@ -158,12 +201,16 @@ export default function AccessForm() {
           : Promise.resolve({ ok: false }),
       ]);
       if (!active) return;
-      if (catRes.ok) setCatalog(catRes.catalog || []);
+      const catalogRows = catRes.ok ? catRes.catalog || [] : [];
+      if (catRes.ok) setCatalog(catalogRows);
       else setError(catRes.error || 'Could not load the permission catalog.');
       const bundleList = bundlesRes.ok ? bundlesRes.bundles || [] : [];
       if (bundlesRes.ok) setBundles(bundleList);
 
       const seedKeys = new Set(grantsRes.ok ? grantsRes.grants || [] : []);
+      // `/access/add?key=` (assign only): pre-tick that key when it is a catalog (grantable)
+      // key; anything else is ignored silently.
+      if (presetKey && catalogRows.some((r) => r?.key === presetKey)) seedKeys.add(presetKey);
       if (mode === 'edit') {
         setRoleUuid(sourceUuid);
         setRoleLabel(roleRes.ok ? roleRes.record?.fields?.name || null : null);
@@ -181,17 +228,37 @@ export default function AccessForm() {
     return () => {
       active = false;
     };
-  }, [identity, token, sourceUuid, mode]);
+  }, [identity, token, sourceUuid, mode, presetKey]);
+
+  // Assign mode: the grants of the role currently picked (merged into `working`), and a counter
+  // so a slow response for an earlier pick never overwrites a later one.
+  const pickedGrants = useRef(new Set());
+  const pickSeq = useRef(0);
+
+  // Assign mode shows the picked role's existing grants ticked, plus the keys already ticked in
+  // the form, so Save only adds (revoking needs an explicit untick). Duplicate mode keeps the
+  // source's set as the working matrix (copy semantics); edit mode never picks.
+  const applyPicked = (grants) => {
+    const next = new Set(grants);
+    setLoaded(next);
+    if (mode === 'assign') {
+      const prev = pickedGrants.current;
+      pickedGrants.current = next;
+      setWorking((w) => mergePicked(prev, next, w));
+    }
+  };
 
   const onPickRole = async (picked) => {
+    const seq = ++pickSeq.current;
     setRoleUuid(picked || '');
     if (!picked) {
-      setLoaded(new Set());
+      applyPicked([]);
       return;
     }
     if (mode !== 'edit') {
       const r = await identity.listRolePermissions(token, picked);
-      setLoaded(new Set(r.ok ? r.grants : []));
+      if (seq !== pickSeq.current) return;
+      applyPicked(r.ok ? r.grants || [] : []);
     }
   };
 
@@ -281,12 +348,79 @@ export default function AccessForm() {
     if (failed === 0) {
       toast.success('Access saved');
       onRefresh?.();
+      // The Announcements task badge moves at once (a grant can close an open task).
+      void refreshNotificationCounts();
       close();
     } else {
       setError('Some permissions could not be saved.');
     }
   };
 
+  // Save entry point: when the keys this save newly grants carry a caution, confirm first
+  // (nothing is sent until Confirm). "Newly granted" = every catalog key held after the save
+  // but not before, so a ticked cell, a preset and a wildcard all count.
+  const requestSave = () => {
+    if (!roleUuid) {
+      setError('Select a role first.');
+      return;
+    }
+    const added = catalog
+      .map((r) => r.key)
+      .filter((k) => keyHeld(k, working) && !keyHeld(k, loaded));
+    const cautions = cautionsFor(catalog, added);
+    if (cautions.length > 0) {
+      // Remember what opened the confirm (the Save button, or the field Enter was pressed
+      // in) so a Cancel/Escape can hand focus back to the form.
+      const active = document.activeElement;
+      confirmOpener.current =
+        active instanceof HTMLElement && active !== document.body
+          ? active
+          : (bodyRef.current?.closest('form')?.querySelector('button[type="submit"]') ?? null);
+      setPendingCautions(cautions);
+    } else save();
+  };
+
+  const confirmCautions = () => {
+    confirmOpener.current = null;
+    setPendingCautions(null);
+    save();
+  };
+
+  // Idempotent: ConfirmDialog calls onCancel twice for the Cancel button (its onClick and
+  // onOpenChange(false)); the second call must not clear the focus target the first one saved.
+  const cancelCautions = () => {
+    restoreFocusTo.current = confirmOpener.current ?? restoreFocusTo.current;
+    confirmOpener.current = null;
+    setPendingCautions(null);
+  };
+
+  // The confirm has no Radix trigger, so on close Radix focuses nothing and focus falls to
+  // <body>, outside the form dialog. Once the alert dialog has left the DOM (after its exit
+  // animation and Radix's own deferred focus step), put focus back on the opener, unless
+  // something else already took it.
+  useEffect(() => {
+    if (pendingCautions !== null || !restoreFocusTo.current) return undefined;
+    const target = restoreFocusTo.current;
+    restoreFocusTo.current = null;
+    let frame = 0;
+    let timer = 0;
+    const tick = () => {
+      if (document.querySelector('[role="alertdialog"]')) {
+        frame = requestAnimationFrame(tick);
+        return;
+      }
+      timer = window.setTimeout(() => {
+        const active = document.activeElement;
+        if (target.isConnected && (!active || active === document.body)) target.focus();
+      }, 0);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.clearTimeout(timer);
+    };
+  }, [pendingCautions]);
+
   const matchesSearch = (t) => {
     const q = objectSearch.trim().toLowerCase();
     return !q || t.toLowerCase().includes(q) || (typeLabels[t] ?? '').toLowerCase().includes(q);
@@ -306,190 +440,255 @@ export default function AccessForm() {
         : 'Pick a role, apply a preset, then fine-tune the permissions.';
 
   return (
-    <EntityFormModal
-      title={title}
-      description={description}
-      open
-      onClose={close}
-      onSubmit={save}
-      submitLabel="Save access"
-      busy={saving || loading}
-      error={error}
-      contentClassName="sm:max-w-6xl"
-    >
-      {/* Fills the modal body (`flex-1 min-h-0`); on md+ the single grid row is the full body
+    <>
+      <EntityFormModal
+        title={title}
+        description={description}
+        open
+        onClose={close}
+        onSubmit={requestSave}
+        submitLabel="Save access"
+        busy={saving || loading}
+        error={error}
+        contentClassName="sm:max-w-6xl"
+      >
+        {/* Fills the modal body (`flex-1 min-h-0`); on md+ the single grid row is the full body
           height, so the matrix below can take whatever height the modal has (full screen too). */}
-      <div className="grid min-h-0 flex-1 gap-4 md:grid-cols-[240px_1fr] md:grid-rows-[minmax(0,1fr)]">
-        {/* Left rail — presets (scrolls on its own when there are many) */}
-        <div className="flex flex-col gap-2 md:min-h-0 md:overflow-y-auto md:border-r md:border-border md:pr-4">
-          <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-            Presets
-          </div>
-          {bundles.length === 0 && (
-            <p className="text-xs text-muted-foreground">No presets available.</p>
-          )}
-          {bundles.map((b) => {
-            const isApplied = isBundleApplied(b);
-            return (
-              <button
-                key={b.key}
-                type="button"
-                aria-pressed={isApplied}
-                onClick={() => togglePreset(b)}
-                className={`flex items-start gap-2.5 rounded-lg border p-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
-                  isApplied ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/50'
-                }`}
-              >
-                {/* Checkbox-like: presets stack (multiple can be applied); this reflects +
+        <div
+          ref={bodyRef}
+          className="grid min-h-0 flex-1 gap-4 md:grid-cols-[240px_1fr] md:grid-rows-[minmax(0,1fr)]"
+        >
+          {/* Left rail — presets (scrolls on its own when there are many) */}
+          <div className="flex flex-col gap-2 md:min-h-0 md:overflow-y-auto md:border-r md:border-border md:pr-4">
+            <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Presets
+            </div>
+            {bundles.length === 0 && (
+              <p className="text-xs text-muted-foreground">No presets available.</p>
+            )}
+            {bundles.map((b) => {
+              const isApplied = isBundleApplied(b);
+              return (
+                <button
+                  key={b.key}
+                  type="button"
+                  aria-pressed={isApplied}
+                  onClick={() => togglePreset(b)}
+                  className={`flex items-start gap-2.5 rounded-lg border p-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+                    isApplied ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/50'
+                  }`}
+                >
+                  {/* Checkbox-like: presets stack (multiple can be applied); this reflects +
                     toggles whether ALL of the preset's keys are held. The whole card is ONE
                     toggle button (`aria-pressed`); the box is decorative, not a nested
                     checkbox button (a <button> inside a <button> is invalid HTML). */}
-                <span
-                  aria-hidden="true"
-                  className={`mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs ${
-                    isApplied ? 'border-primary bg-primary text-primary-foreground' : 'border-input'
-                  }`}
-                >
-                  {isApplied && <Check className="size-3.5" />}
-                </span>
-                <div className="min-w-0">
-                  <span className="text-sm font-medium text-foreground">{b.label}</span>
-                  {b.description && (
-                    <p className="mt-0.5 text-xs text-muted-foreground">{b.description}</p>
-                  )}
-                </div>
-              </button>
-            );
-          })}
-          <p className="mt-1 text-xs text-muted-foreground">
-            Presets add their permissions. Tick more than one, then fine-tune below.
-          </p>
-        </div>
-
-        {/* Right pane — role + matrix */}
-        <div className="flex min-h-0 min-w-0 flex-col gap-3">
-          <div className="flex flex-col gap-1">
-            <label className="text-xs font-medium text-muted-foreground">Role</label>
-            <SearchableSelect
-              value={roleUuid || null}
-              selectedLabel={roleLabel}
-              onChange={onPickRole}
-              onLabelChange={(label) => setRoleLabel(label)}
-              fetchPage={fetchRoles}
-              placeholder="Select a role"
-              searchPlaceholder="Search roles"
-              disabled={mode === 'edit'}
-            />
+                  <span
+                    aria-hidden="true"
+                    className={`mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs ${
+                      isApplied
+                        ? 'border-primary bg-primary text-primary-foreground'
+                        : 'border-input'
+                    }`}
+                  >
+                    {isApplied && <Check className="size-3.5" />}
+                  </span>
+                  <div className="min-w-0">
+                    <span className="text-sm font-medium text-foreground">{b.label}</span>
+                    {b.description && (
+                      <p className="mt-0.5 text-xs text-muted-foreground">{b.description}</p>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+            <p className="mt-1 text-xs text-muted-foreground">
+              Presets add their permissions. Tick more than one, then fine-tune below.
+            </p>
           </div>
 
-          <Input
-            value={objectSearch}
-            onChange={(e) => setObjectSearch(e.target.value)}
-            placeholder="Search objects"
-          />
+          {/* Right pane — role + matrix */}
+          <div className="flex min-h-0 min-w-0 flex-col gap-3">
+            <div className="flex flex-col gap-1">
+              <label className="text-xs font-medium text-muted-foreground">Role</label>
+              <SearchableSelect
+                value={roleUuid || null}
+                selectedLabel={roleLabel}
+                onChange={onPickRole}
+                onLabelChange={(label) => setRoleLabel(label)}
+                fetchPage={fetchRoles}
+                placeholder="Select a role"
+                searchPlaceholder="Search roles"
+                disabled={mode === 'edit'}
+              />
+            </div>
+
+            <Input
+              value={objectSearch}
+              onChange={(e) => setObjectSearch(e.target.value)}
+              placeholder="Search objects"
+            />
 
-          {/* The matrix takes the remaining height and scrolls inside itself (it used to be
+            {/* The matrix takes the remaining height and scrolls inside itself (it used to be
               capped at 46vh, so full screen left most of the modal empty). */}
-          <div className="flex min-h-48 flex-1 flex-col gap-2 overflow-y-auto pr-1">
-            {groups.map((group) => {
-              const visibleTypes = group.types.filter(matchesSearch);
-              if (visibleTypes.length === 0) return null;
-              const groupCells = group.types
-                .flatMap((t) => actionsOf(t).map((a) => cellKey(t, a)))
-                .filter(keyExists);
-              // Extra-action columns this group needs (union over its types); empty for a
-              // CRUD-only group, which then renders exactly as before.
-              const columns = [...ACTIONS, ...matrixActions(catalog, group.types)];
-              const heldCount = groupCells.filter((k) => keyHeld(k, working)).length;
-              return (
-                <CollapsibleGroup
-                  key={group.label}
-                  title={group.label}
-                  count={heldCount}
-                  total={groupCells.length}
-                  open={openGroups[group.label] ?? true}
-                  onToggle={() =>
-                    setOpenGroups((p) => ({ ...p, [group.label]: !(p[group.label] ?? true) }))
-                  }
-                  right={
-                    <span
-                      role="button"
-                      tabIndex={0}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        toggleGroupAll(group);
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
+            <div className="flex min-h-48 flex-1 flex-col gap-2 overflow-y-auto pr-1">
+              {groups.map((group) => {
+                const visibleTypes = group.types.filter(matchesSearch);
+                if (visibleTypes.length === 0) return null;
+                const groupCells = group.types
+                  .flatMap((t) => actionsOf(t).map((a) => cellKey(t, a)))
+                  .filter(keyExists);
+                // Extra-action columns this group needs (union over its types); empty for a
+                // CRUD-only group, which then renders exactly as before.
+                const columns = [...ACTIONS, ...matrixActions(catalog, group.types)];
+                const heldCount = groupCells.filter((k) => keyHeld(k, working)).length;
+                return (
+                  <CollapsibleGroup
+                    key={group.label}
+                    title={group.label}
+                    count={heldCount}
+                    total={groupCells.length}
+                    open={openGroups[group.label] ?? true}
+                    onToggle={() =>
+                      setOpenGroups((p) => ({ ...p, [group.label]: !(p[group.label] ?? true) }))
+                    }
+                    right={
+                      <span
+                        role="button"
+                        tabIndex={0}
+                        onClick={(e) => {
                           e.stopPropagation();
                           toggleGroupAll(group);
-                        }
-                      }}
-                      className="text-xs text-primary hover:underline"
-                    >
-                      Toggle all
-                    </span>
-                  }
-                >
-                  <div className="overflow-x-auto">
-                    <table className="w-full text-sm">
-                      <thead>
-                        <tr className="text-left text-xs uppercase tracking-wide text-muted-foreground">
-                          <th className="py-1 pr-3 font-medium">Object</th>
-                          {columns.map((a) => (
-                            <th
-                              key={a}
-                              className="px-2 py-1 text-center font-medium whitespace-nowrap"
-                            >
-                              {actionHeading(a)}
-                            </th>
-                          ))}
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {visibleTypes.map((t) => (
-                          <tr key={t} className="border-t border-border">
-                            <td className="py-1.5 pr-3 whitespace-nowrap text-foreground">
-                              {typeLabels[t] ?? t}
-                            </td>
-                            {columns.map((a) => {
-                              const key = cellKey(t, a);
-                              const exists = keyExists(key);
-                              const covered = keyHeld(key, working) && !working.has(key);
-                              return (
-                                <td key={a} className="px-2 py-1.5 text-center">
-                                  {exists ? (
-                                    <Checkbox
-                                      checked={keyHeld(key, working)}
-                                      disabled={covered}
-                                      title={covered ? 'granted via a wildcard' : labelOf[key]}
-                                      onCheckedChange={() => toggle(key)}
-                                    />
-                                  ) : (
-                                    <span className="text-muted-foreground/50">—</span>
-                                  )}
-                                </td>
-                              );
-                            })}
+                        }}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.stopPropagation();
+                            toggleGroupAll(group);
+                          }
+                        }}
+                        className="text-xs text-primary hover:underline"
+                      >
+                        Toggle all
+                      </span>
+                    }
+                  >
+                    <div className="overflow-x-auto">
+                      <table className="w-full text-sm">
+                        <thead>
+                          <tr className="text-left text-xs uppercase tracking-wide text-muted-foreground">
+                            <th className="py-1 pr-3 font-medium">Object</th>
+                            {columns.map((a) => (
+                              <th
+                                key={a}
+                                className="px-2 py-1 text-center font-medium whitespace-nowrap"
+                              >
+                                {actionHeading(a)}
+                              </th>
+                            ))}
                           </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
-                </CollapsibleGroup>
-              );
-            })}
-          </div>
+                        </thead>
+                        <tbody>
+                          {visibleTypes.map((t) => (
+                            <tr key={t} className="border-t border-border">
+                              <td className="py-1.5 pr-3 whitespace-nowrap text-foreground">
+                                {typeLabels[t] ?? t}
+                              </td>
+                              {columns.map((a) => {
+                                const key = cellKey(t, a);
+                                const exists = keyExists(key);
+                                const covered = keyHeld(key, working) && !working.has(key);
+                                const caution = exists ? cautionOf[key] : undefined;
+                                const cautionId = `${idBase}-caution-${t}-${a}`;
+                                const box = exists ? (
+                                  <Checkbox
+                                    checked={keyHeld(key, working)}
+                                    disabled={covered}
+                                    title={covered ? 'granted via a wildcard' : labelOf[key]}
+                                    aria-describedby={caution ? cautionId : undefined}
+                                    onCheckedChange={() => toggle(key)}
+                                  />
+                                ) : null;
+                                return (
+                                  <td key={a} className="px-2 py-1.5 text-center">
+                                    {caution ? (
+                                      <span className="inline-flex items-center gap-1">
+                                        {box}
+                                        <span id={cautionId} className="sr-only">
+                                          Caution: {caution.caution}
+                                        </span>
+                                        <Tooltip>
+                                          <TooltipTrigger asChild>
+                                            <span
+                                              role="img"
+                                              tabIndex={0}
+                                              aria-label={`Caution for ${caution.label}`}
+                                              className="inline-flex rounded-sm text-warn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                                            >
+                                              <TriangleAlert
+                                                className="size-3.5"
+                                                aria-hidden="true"
+                                              />
+                                            </span>
+                                          </TooltipTrigger>
+                                          <TooltipContent className="max-w-xs text-left">
+                                            <p className="font-semibold">{caution.label}</p>
+                                            {caution.description && <p>{caution.description}</p>}
+                                            <p className="mt-1">Caution: {caution.caution}</p>
+                                          </TooltipContent>
+                                        </Tooltip>
+                                      </span>
+                                    ) : exists ? (
+                                      box
+                                    ) : (
+                                      <span className="text-muted-foreground/50">—</span>
+                                    )}
+                                  </td>
+                                );
+                              })}
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </CollapsibleGroup>
+                );
+              })}
+            </div>
 
-          <div className="text-sm text-muted-foreground">
-            <span className="font-medium text-foreground">
-              {permCount} permission{permCount === 1 ? '' : 's'}
-            </span>{' '}
-            across {objectCount} object{objectCount === 1 ? '' : 's'}
-            {appliedPresetLabels.length > 0 && <span> · {appliedPresetLabels.join(', ')}</span>}
+            <div className="text-sm text-muted-foreground">
+              <span className="font-medium text-foreground">
+                {permCount} permission{permCount === 1 ? '' : 's'}
+              </span>{' '}
+              across {objectCount} object{objectCount === 1 ? '' : 's'}
+              {appliedPresetLabels.length > 0 && <span> · {appliedPresetLabels.join(', ')}</span>}
+            </div>
           </div>
         </div>
-      </div>
-    </EntityFormModal>
+      </EntityFormModal>
+      <ConfirmDialog
+        open={pendingCautions !== null}
+        title="Grant permissions with cautions?"
+        message={
+          roleLabel
+            ? `These permissions carry a caution. Review them before granting them to ${roleLabel}.`
+            : 'These permissions carry a caution. Review them before granting them.'
+        }
+        confirmLabel="Grant"
+        busy={saving}
+        onConfirm={confirmCautions}
+        onCancel={cancelCautions}
+      >
+        <ul className="flex max-h-64 flex-col gap-2 overflow-y-auto text-sm">
+          {(pendingCautions ?? []).map((c) => (
+            <li key={c.key} className="flex items-start gap-2">
+              <TriangleAlert className="mt-0.5 size-4 shrink-0 text-warn" aria-hidden="true" />
+              <span>
+                <span className="font-medium text-foreground">{c.label}</span>
+                <span className="text-muted-foreground"> — {c.caution}</span>
+              </span>
+            </li>
+          ))}
+        </ul>
+      </ConfirmDialog>
+    </>
   );
 }