diff --git a/ui/observe/app/(observe)/agents/[id]/page.tsx b/ui/observe/app/(observe)/agents/[id]/page.tsx
index 40e28155..98056dbf 100644
--- a/ui/observe/app/(observe)/agents/[id]/page.tsx
+++ b/ui/observe/app/(observe)/agents/[id]/page.tsx
@@ -1,18 +1,41 @@
 "use client";
 
-import { useState, useMemo } from "react";
-import { useParams } from "next/navigation";
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { useParams, useSearchParams } from "next/navigation";
 import Link from "next/link";
-import { fetchAgentHistory } from "@/lib/api";
+import { fetchAgentHistory, fetchAllPolicies, fetchSpecs, createPolicy, togglePolicy, deletePolicy } from "@/lib/api";
 import { useSSERefresh, useRelativeTime } from "@/lib/hooks";
-import type { AgentHistoryResponse } from "@/lib/types";
+import type { AgentHistoryResponse, PolicyEntry, SpecSummary } from "@/lib/types";
 import ErrorDisplay from "@/components/ErrorDisplay";
 import StatCard from "@/components/StatCard";
+import VisualPolicyCreator from "@/components/VisualPolicyCreator";
+
+type Tab = "history" | "policies";
 
 export default function AgentDetailPage() {
   const params = useParams();
+  const searchParams = useSearchParams();
   const agentId = decodeURIComponent(params.id as string);
+  const initialTab = (searchParams.get("tab") as Tab) || "history";
+
+  const [activeTab, setActiveTab] = useState<Tab>(initialTab);
   const [entityTypeFilter, setEntityTypeFilter] = useState<string>("all");
+  const [showPolicyCreator, setShowPolicyCreator] = useState(false);
+  const [specs, setSpecs] = useState<SpecSummary[]>([]);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  // Fetch specs for policy creator
+  useEffect(() => {
+    fetchSpecs().then(setSpecs).catch(() => {});
+  }, []);
+
+  const tenants = useMemo(() => {
+    const set = new Set<string>();
+    for (const s of specs) {
+      if (s.tenant && s.tenant !== "temper-system") set.add(s.tenant);
+    }
+    return Array.from(set).sort();
+  }, [specs]);
 
   const historyPoll = useSSERefresh<AgentHistoryResponse>({
     fetcher: () =>
@@ -27,6 +50,22 @@ export default function AgentDetailPage() {
   const data = historyPoll.data;
   const lastUpdated = useRelativeTime(historyPoll.lastUpdated);
 
+  // Fetch policies relevant to this agent
+  const policiesPoll = useSSERefresh<{ policies: PolicyEntry[] }>({
+    fetcher: async () => {
+      const res = await fetchAllPolicies();
+      // Filter to policies that mention this agent ID in cedar text
+      const relevant = res.policies.filter(
+        (p) => p.cedar_text.includes(`"${agentId}"`) || p.cedar_text.includes("principal is Agent"),
+      );
+      return { policies: relevant };
+    },
+    sseKinds: ["Policies"],
+    enabled: activeTab === "policies",
+  });
+
+  const agentPolicies = policiesPoll.data?.policies || [];
+
   const entityTypes = useMemo(() => {
     if (!data) return [];
     const set = new Set<string>();
@@ -49,6 +88,41 @@ export default function AgentDetailPage() {
     return { total: data.total, success, errors, denials };
   }, [data]);
 
+  const handleTogglePolicy = useCallback(
+    async (policy: PolicyEntry) => {
+      setActionError(null);
+      try {
+        await togglePolicy(policy.tenant, policy.policy_id, !policy.enabled);
+        await policiesPoll.refresh();
+      } catch (err) {
+        setActionError(err instanceof Error ? err.message : "Failed to toggle policy");
+      }
+    },
+    [policiesPoll],
+  );
+
+  const handleDeletePolicy = useCallback(
+    async (policy: PolicyEntry) => {
+      setActionError(null);
+      try {
+        await deletePolicy(policy.tenant, policy.policy_id);
+        await policiesPoll.refresh();
+      } catch (err) {
+        setActionError(err instanceof Error ? err.message : "Failed to delete policy");
+      }
+    },
+    [policiesPoll],
+  );
+
+  const handlePolicyCreated = useCallback(
+    async (tenant: string, policyId: string, cedarText: string) => {
+      await createPolicy(tenant, policyId, cedarText);
+      setShowPolicyCreator(false);
+      await policiesPoll.refresh();
+    },
+    [policiesPoll],
+  );
+
   if (historyPoll.error && !data) {
     return (
       <ErrorDisplay
@@ -100,11 +174,11 @@ export default function AgentDetailPage() {
             {agentId}
           </h1>
           <p className="text-sm text-[var(--color-text-muted)] mt-0.5">
-            Action history and authorization events
+            Action history and authorization policies
           </p>
         </div>
         <div className="flex items-center gap-3">
-          {entityTypes.length > 1 && (
+          {activeTab === "history" && entityTypes.length > 1 && (
             <select
               value={entityTypeFilter}
               onChange={(e) => setEntityTypeFilter(e.target.value)}
@@ -146,101 +220,208 @@ export default function AgentDetailPage() {
         />
       </div>
 
-      {/* Timeline */}
-      {data && data.history.length > 0 ? (
+      {/* Tab bar */}
+      <div className="flex gap-1 mb-4 border-b border-[var(--color-border)]">
+        {(["history", "policies"] as Tab[]).map((tab) => (
+          <button
+            key={tab}
+            type="button"
+            onClick={() => setActiveTab(tab)}
+            className={`px-3 py-2 text-xs font-medium transition-colors border-b-2 -mb-px ${
+              activeTab === tab
+                ? "border-[var(--color-accent-teal)] text-[var(--color-accent-teal)]"
+                : "border-transparent text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"
+            }`}
+          >
+            {tab === "history" ? "Action History" : `Policies (${agentPolicies.length})`}
+          </button>
+        ))}
+      </div>
+
+      {/* Action error */}
+      {actionError && (
+        <div className="mb-4 flex items-center justify-between gap-2 rounded bg-[var(--color-accent-pink-dim)] border border-[var(--color-accent-pink)]/20 px-4 py-2.5">
+          <p className="text-sm text-[var(--color-accent-pink)]">{actionError}</p>
+          <button
+            onClick={() => setActionError(null)}
+            className="text-[var(--color-accent-pink)] text-xs flex-shrink-0"
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {/* History tab */}
+      {activeTab === "history" && (
+        <>
+          {data && data.history.length > 0 ? (
+            <div>
+              <div className="glass rounded overflow-hidden max-h-[600px] overflow-y-auto">
+                {data.history.map((entry, i) => {
+                  const ts = new Date(entry.timestamp);
+                  const timeStr = ts.toLocaleString();
+                  const isDenial = entry.authz_denied;
+                  const isError = !entry.success && !entry.authz_denied;
+
+                  return (
+                    <div
+                      key={`${entry.timestamp}-${i}`}
+                      className={`flex items-center gap-3 px-3.5 py-2.5 border-b border-[var(--color-border)] last:border-b-0 ${
+                        isDenial
+                          ? "bg-[var(--color-accent-pink-dim)]"
+                          : isError
+                            ? "bg-[var(--color-accent-pink-dim)]"
+                            : ""
+                      }`}
+                    >
+                      <div
+                        className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
+                          isDenial
+                            ? "bg-[var(--color-accent-pink)]"
+                            : isError
+                              ? "bg-[var(--color-accent-pink)]"
+                              : "bg-[var(--color-accent-teal)]"
+                        }`}
+                      />
+                      <span className="text-[11px] text-[var(--color-text-muted)] font-mono flex-shrink-0 w-36">
+                        {timeStr}
+                      </span>
+                      <span className="font-mono text-[11px] text-[var(--color-accent-teal)] flex-shrink-0 w-28">
+                        {entry.action}
+                      </span>
+                      <span className="text-[10px] font-mono text-[var(--color-text-secondary)] flex-shrink-0 w-24">
+                        {entry.entity_type}
+                      </span>
+                      <span className="text-[10px] font-mono text-[var(--color-text-muted)] flex-shrink-0 w-20 truncate">
+                        {entry.entity_id}
+                      </span>
+                      {entry.from_status && entry.to_status && (
+                        <span className="text-[10px] font-mono text-[var(--color-text-muted)] flex-shrink-0">
+                          {entry.from_status}{" "}
+                          <span className="text-[var(--color-text-muted)]">&rarr;</span>{" "}
+                          {entry.to_status}
+                        </span>
+                      )}
+                      <div className="flex items-center gap-1.5 ml-auto flex-shrink-0">
+                        {isDenial && (
+                          <span className="text-[10px] font-medium bg-[var(--color-accent-pink-dim)] text-[var(--color-accent-pink)] px-1.5 py-0.5 rounded">
+                            denied
+                          </span>
+                        )}
+                        {isError && entry.error && (
+                          <span className="text-[11px] text-[var(--color-accent-pink)] truncate max-w-48">
+                            {entry.error}
+                          </span>
+                        )}
+                        {isDenial && entry.denied_resource && (
+                          <span className="text-[10px] font-mono text-[var(--color-text-muted)] truncate max-w-32">
+                            {entry.denied_resource}
+                          </span>
+                        )}
+                        {entry.tenant && entry.tenant !== "default" && (
+                          <span className="text-[10px] text-[var(--color-text-muted)] font-mono">
+                            {entry.tenant}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ) : (
+            <div className="glass rounded p-6 text-center">
+              <p className="text-sm text-[var(--color-text-secondary)]">
+                No action history recorded for this agent.
+              </p>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Policies tab */}
+      {activeTab === "policies" && (
         <div>
-          <h2 className="text-base font-semibold text-[var(--color-text-primary)] mb-3 tracking-tight">
-            Action Timeline
-          </h2>
-          <div className="glass rounded overflow-hidden max-h-[600px] overflow-y-auto">
-            {data.history.map((entry, i) => {
-              const ts = new Date(entry.timestamp);
-              const timeStr = ts.toLocaleString();
-              const isDenial = entry.authz_denied;
-              const isError = !entry.success && !entry.authz_denied;
-
-              return (
+          <div className="flex items-center justify-between mb-3">
+            <p className="text-xs text-[var(--color-text-muted)]">
+              Policies affecting this agent (direct or broad)
+            </p>
+            <button
+              type="button"
+              onClick={() => setShowPolicyCreator(!showPolicyCreator)}
+              className="px-2.5 py-1.5 text-xs bg-[var(--color-accent-teal-dim)] text-[var(--color-accent-teal)] rounded-sm hover:bg-[var(--color-accent-teal-dim)] transition-colors"
+            >
+              {showPolicyCreator ? "Cancel" : "Add Policy"}
+            </button>
+          </div>
+
+          {showPolicyCreator && (
+            <VisualPolicyCreator
+              specs={specs}
+              tenants={tenants}
+              onCreated={handlePolicyCreated}
+              onCancel={() => setShowPolicyCreator(false)}
+            />
+          )}
+
+          {agentPolicies.length > 0 ? (
+            <div className="space-y-2">
+              {agentPolicies.map((p) => (
                 <div
-                  key={`${entry.timestamp}-${i}`}
-                  className={`flex items-center gap-3 px-3.5 py-2.5 border-b border-[var(--color-border)] last:border-b-0 ${
-                    isDenial
-                      ? "bg-[var(--color-accent-pink-dim)]"
-                      : isError
-                        ? "bg-[var(--color-accent-pink-dim)]"
-                        : ""
-                  }`}
+                  key={`${p.tenant}:${p.policy_id}`}
+                  className="glass rounded px-3.5 py-2.5 flex items-start gap-3"
                 >
-                  {/* Status indicator */}
-                  <div
-                    className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
-                      isDenial
-                        ? "bg-[var(--color-accent-pink)]"
-                        : isError
-                          ? "bg-[var(--color-accent-pink)]"
-                          : "bg-[var(--color-accent-teal)]"
-                    }`}
-                  />
-
-                  {/* Timestamp */}
-                  <span className="text-[11px] text-[var(--color-text-muted)] font-mono flex-shrink-0 w-36">
-                    {timeStr}
-                  </span>
-
-                  {/* Action */}
-                  <span className="font-mono text-[11px] text-[var(--color-accent-teal)] flex-shrink-0 w-28">
-                    {entry.action}
-                  </span>
-
-                  {/* Entity */}
-                  <span className="text-[10px] font-mono text-[var(--color-text-secondary)] flex-shrink-0 w-24">
-                    {entry.entity_type}
-                  </span>
-                  <span className="text-[10px] font-mono text-[var(--color-text-muted)] flex-shrink-0 w-20 truncate">
-                    {entry.entity_id}
-                  </span>
-
-                  {/* State transition */}
-                  {entry.from_status && entry.to_status && (
-                    <span className="text-[10px] font-mono text-[var(--color-text-muted)] flex-shrink-0">
-                      {entry.from_status}{" "}
-                      <span className="text-[var(--color-text-muted)]">&rarr;</span>{" "}
-                      {entry.to_status}
-                    </span>
-                  )}
-
-                  {/* Badges */}
-                  <div className="flex items-center gap-1.5 ml-auto flex-shrink-0">
-                    {isDenial && (
-                      <span className="text-[10px] font-medium bg-[var(--color-accent-pink-dim)] text-[var(--color-accent-pink)] px-1.5 py-0.5 rounded">
-                        denied
-                      </span>
-                    )}
-                    {isError && entry.error && (
-                      <span className="text-[11px] text-[var(--color-accent-pink)] truncate max-w-48">
-                        {entry.error}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="font-mono text-[12px] text-[var(--color-text-primary)] truncate">
+                        {p.policy_id}
                       </span>
-                    )}
-                    {isDenial && entry.denied_resource && (
-                      <span className="text-[10px] font-mono text-[var(--color-text-muted)] truncate max-w-32">
-                        {entry.denied_resource}
+                      <span className={`text-[10px] px-1.5 py-0.5 rounded-full ${
+                        p.enabled
+                          ? "bg-[var(--color-accent-teal-dim)] text-[var(--color-accent-teal)]"
+                          : "bg-[var(--color-bg-elevated)] text-[var(--color-text-muted)]"
+                      }`}>
+                        {p.enabled ? "enabled" : "disabled"}
                       </span>
-                    )}
-                    {entry.tenant && entry.tenant !== "default" && (
                       <span className="text-[10px] text-[var(--color-text-muted)] font-mono">
-                        {entry.tenant}
+                        {p.tenant}
                       </span>
+                      <span className="text-[10px] text-[var(--color-text-muted)]">
+                        {p.source}
+                      </span>
+                    </div>
+                    <pre className="mt-1 text-[10px] font-mono text-[var(--color-text-secondary)] whitespace-pre-wrap truncate max-h-16 overflow-hidden">
+                      {p.cedar_text}
+                    </pre>
+                  </div>
+                  <div className="flex items-center gap-1.5 flex-shrink-0">
+                    <button
+                      type="button"
+                      onClick={() => handleTogglePolicy(p)}
+                      className="text-[10px] px-2 py-1 bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] rounded-sm hover:bg-[var(--color-border)] transition-colors"
+                    >
+                      {p.enabled ? "Disable" : "Enable"}
+                    </button>
+                    {p.source === "manual" && (
+                      <button
+                        type="button"
+                        onClick={() => handleDeletePolicy(p)}
+                        className="text-[10px] px-2 py-1 bg-[var(--color-accent-pink-dim)] text-[var(--color-accent-pink)] rounded-sm hover:bg-[var(--color-accent-pink-dim)] transition-colors"
+                      >
+                        Delete
+                      </button>
                     )}
                   </div>
                 </div>
-              );
-            })}
-          </div>
-        </div>
-      ) : (
-        <div className="glass rounded p-6 text-center">
-          <p className="text-sm text-[var(--color-text-secondary)]">
-            No action history recorded for this agent.
-          </p>
+              ))}
+            </div>
+          ) : (
+            <div className="glass rounded p-6 text-center">
+              <p className="text-sm text-[var(--color-text-secondary)]">
+                No policies found for this agent.
+              </p>
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/ui/observe/app/(observe)/agents/page.tsx b/ui/observe/app/(observe)/agents/page.tsx
index cde2d479..59a9f929 100644
--- a/ui/observe/app/(observe)/agents/page.tsx
+++ b/ui/observe/app/(observe)/agents/page.tsx
@@ -148,6 +148,8 @@ export default function AgentsPage() {
                 <th className="text-right px-3.5 py-2.5 text-[var(--color-text-muted)] font-medium text-xs uppercase tracking-wider">
                   Last Active
                 </th>
+                <th className="text-right px-3.5 py-2.5 text-[var(--color-text-muted)] font-medium text-xs uppercase tracking-wider">
+                </th>
               </tr>
             </thead>
             <tbody>
@@ -201,6 +203,18 @@ export default function AgentsPage() {
                     <td className="px-3.5 py-2.5 text-right font-mono text-[var(--color-text-muted)] text-[11px]">
                       {lastActive}
                     </td>
+                    <td className="px-3.5 py-2.5 text-right">
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          router.push(`/agents/${encodeURIComponent(agent.agent_id)}?tab=policies`);
+                        }}
+                        className="text-[10px] px-2 py-1 bg-[var(--color-accent-teal-dim)] text-[var(--color-accent-teal)] rounded-sm hover:bg-[var(--color-accent-teal-dim)] transition-colors"
+                      >
+                        Permissions
+                      </button>
+                    </td>
                   </tr>
                 );
               })}
diff --git a/ui/observe/app/(observe)/decisions/page.tsx b/ui/observe/app/(observe)/decisions/page.tsx
index 2974d6d0..e6f18973 100644
--- a/ui/observe/app/(observe)/decisions/page.tsx
+++ b/ui/observe/app/(observe)/decisions/page.tsx
@@ -20,10 +20,13 @@ import type {
 import ErrorDisplay from "@/components/ErrorDisplay";
 import StatCard from "@/components/StatCard";
 import PolicyBuilder from "@/components/PolicyBuilder";
+import DecisionGroup from "@/components/DecisionGroup";
+import BatchApproveBar from "@/components/BatchApproveBar";
 import {
   redactSensitiveFields,
   groupByDate,
 } from "@/lib/utils";
+import { groupDecisions, type GroupingStrategy } from "@/lib/decision-grouping";
 
 
 const ALL_TENANTS = "__all__";
@@ -240,6 +243,9 @@ export default function DecisionsPage() {
   const [actingIds, setActingIds] = useState<Set<string>>(new Set());
   const [actionError, setActionError] = useState<string | null>(null);
   const [liveDecisions, setLiveDecisions] = useState<PendingDecision[]>([]);
+  const [batchMode, setBatchMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [groupingStrategy, setGroupingStrategy] = useState<GroupingStrategy>("action_resource");
 
   const loadInitial = useCallback(async () => {
     setInitialLoading(true);
@@ -349,6 +355,71 @@ export default function DecisionsPage() {
     return data.decisions.filter((d) => d.status !== "pending");
   }, [data]);
 
+  const pendingGroups = useMemo(
+    () => groupDecisions(pendingDecisions, groupingStrategy),
+    [pendingDecisions, groupingStrategy],
+  );
+
+  const selectedDecisions = useMemo(
+    () => pendingDecisions.filter((d) => selectedIds.has(d.id)),
+    [pendingDecisions, selectedIds],
+  );
+
+  const handleToggleSelect = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const handleToggleGroup = useCallback((ids: string[]) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      const allSelected = ids.every((id) => next.has(id));
+      if (allSelected) {
+        for (const id of ids) next.delete(id);
+      } else {
+        for (const id of ids) next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleBatchApprove = useCallback(
+    async (ids: string[], matrix: PolicyScopeMatrix) => {
+      setActionError(null);
+      for (const id of ids) {
+        setActingIds((prev) => new Set(prev).add(id));
+      }
+      const allDecisions = data?.decisions || [];
+      const results = await Promise.allSettled(
+        ids.map((id) => {
+          const decision = allDecisions.find((d) => d.id === id);
+          return approveDecision(decision?.tenant || "", id, matrix);
+        }),
+      );
+      const succeeded = results.filter((r) => r.status === "fulfilled").length;
+      const failed = results.filter((r) => r.status === "rejected").length;
+      if (failed > 0) {
+        const firstError = results.find((r) => r.status === "rejected") as PromiseRejectedResult;
+        setActionError(`${failed} approval(s) failed: ${firstError.reason}`);
+      }
+      setSelectedIds(new Set());
+      for (const id of ids) {
+        setActingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      }
+      await decisionsPoll.refresh();
+      return { succeeded, failed };
+    },
+    [decisionsPoll, data],
+  );
+
   const groupedHistory = useMemo(
     () => groupByDate(resolvedDecisions, (d) => d.decided_at),
     [resolvedDecisions],
@@ -425,6 +496,34 @@ export default function DecisionsPage() {
             <option value="denied">Denied</option>
             <option value="expired">Expired</option>
           </select>
+          {pendingDecisions.length > 1 && (
+            <>
+              <button
+                onClick={() => {
+                  setBatchMode(!batchMode);
+                  setSelectedIds(new Set());
+                }}
+                className={`px-2.5 py-1.5 text-xs rounded-sm transition-colors ${
+                  batchMode
+                    ? "bg-[var(--color-accent-teal-dim)] text-[var(--color-accent-teal)] ring-1 ring-[var(--color-accent-teal)]"
+                    : "bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] hover:bg-[var(--color-border-hover)]"
+                }`}
+              >
+                Batch
+              </button>
+              {batchMode && (
+                <select
+                  value={groupingStrategy}
+                  onChange={(e) => setGroupingStrategy(e.target.value as GroupingStrategy)}
+                  className="bg-[var(--color-bg-surface)] text-[var(--color-text-secondary)] text-xs rounded-sm px-2 py-1.5 focus:outline-none"
+                >
+                  <option value="action_resource">By action + type</option>
+                  <option value="agent_action">By agent + action</option>
+                  <option value="agent_type_action">By agent type + action</option>
+                </select>
+              )}
+            </>
+          )}
           {resolvedDecisions.length > 0 && (
             <button
               onClick={() => exportDecisions(data?.decisions ?? [])}
@@ -481,7 +580,7 @@ export default function DecisionsPage() {
 
       {/* Pending Decisions */}
       {pendingDecisions.length > 0 && (
-        <div className="mb-6">
+        <div className={`mb-6 ${batchMode && selectedDecisions.length > 0 ? "pb-24" : ""}`}>
           <div className="flex items-center gap-2 mb-3">
             <div className="w-1.5 h-1.5 bg-[var(--color-accent-pink)] rounded-full animate-pulse" />
             <h2 className="text-base font-semibold text-[var(--color-text-primary)] tracking-tight">
@@ -491,18 +590,35 @@ export default function DecisionsPage() {
               {pendingDecisions.length}
             </span>
           </div>
-          <div className="grid gap-3">
-            {pendingDecisions.map((d) => (
-              <DecisionCard
-                key={d.id}
-                decision={d}
-                onApprove={handleApprove}
-                onDeny={handleDeny}
-                acting={actingIds.has(d.id)}
-                showTenant={showTenantBadge}
-              />
-            ))}
-          </div>
+
+          {batchMode ? (
+            <div className="grid gap-3">
+              {Array.from(pendingGroups.entries()).map(([key, decisions]) => (
+                <DecisionGroup
+                  key={key}
+                  groupKey={key}
+                  strategy={groupingStrategy}
+                  decisions={decisions}
+                  selectedIds={selectedIds}
+                  onToggleSelect={handleToggleSelect}
+                  onToggleGroup={handleToggleGroup}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="grid gap-3">
+              {pendingDecisions.map((d) => (
+                <DecisionCard
+                  key={d.id}
+                  decision={d}
+                  onApprove={handleApprove}
+                  onDeny={handleDeny}
+                  acting={actingIds.has(d.id)}
+                  showTenant={showTenantBadge}
+                />
+              ))}
+            </div>
+          )}
         </div>
       )}
 
@@ -514,6 +630,15 @@ export default function DecisionsPage() {
         </div>
       )}
 
+      {/* Batch approve bar */}
+      {batchMode && (
+        <BatchApproveBar
+          selectedDecisions={selectedDecisions}
+          onApprove={handleBatchApprove}
+          onClear={() => setSelectedIds(new Set())}
+        />
+      )}
+
       {/* History Table — grouped by date */}
       {resolvedDecisions.length > 0 && (
         <div>
diff --git a/ui/observe/app/(observe)/policies/page.tsx b/ui/observe/app/(observe)/policies/page.tsx
index 004a767d..9f2cc9df 100644
--- a/ui/observe/app/(observe)/policies/page.tsx
+++ b/ui/observe/app/(observe)/policies/page.tsx
@@ -17,9 +17,11 @@ import type {
   AllPoliciesResponse,
   PolicySource,
 } from "@/lib/types";
+import type { SpecSummary } from "@/lib/types";
 import ErrorDisplay from "@/components/ErrorDisplay";
 import StatCard from "@/components/StatCard";
 import PolicyCard from "@/components/PolicyCard";
+import VisualPolicyCreator from "@/components/VisualPolicyCreator";
 
 const ALL_TENANTS = "__all__";
 const SOURCE_FILTERS: { value: PolicySource | "all"; label: string }[] = [
@@ -41,16 +43,16 @@ export default function PoliciesPage() {
   const [sourceFilter, setSourceFilter] = useState<PolicySource | "all">("all");
   const [statusFilter, setStatusFilter] = useState<"all" | "enabled" | "disabled">("all");
   const [showCreate, setShowCreate] = useState(false);
-  const [newPolicyId, setNewPolicyId] = useState("");
-  const [newCedarText, setNewCedarText] = useState("");
+  const [specs, setSpecs] = useState<SpecSummary[]>([]);
 
   const loadInitial = useCallback(async () => {
     setInitialLoading(true);
     setInitialError(null);
     try {
-      const specs = await fetchSpecs();
+      const loadedSpecs = await fetchSpecs();
+      setSpecs(loadedSpecs);
       const tenantSet = new Set<string>();
-      for (const s of specs) {
+      for (const s of loadedSpecs) {
         if (s.tenant && s.tenant !== "temper-system") tenantSet.add(s.tenant);
       }
       setTenants(Array.from(tenantSet).sort());
@@ -204,24 +206,14 @@ export default function PoliciesPage() {
     [allPolicies, policiesPoll],
   );
 
-  const handleCreate = useCallback(
-    async () => {
-      if (!newPolicyId.trim() || !newCedarText.trim()) return;
-      const targetTenant = tenant === ALL_TENANTS ? (tenants[0] || "default") : tenant;
+  const handleVisualCreate = useCallback(
+    async (targetTenant: string, policyId: string, cedarText: string) => {
       setActionError(null);
-      try {
-        await createPolicy(targetTenant, newPolicyId.trim(), newCedarText.trim());
-        setNewPolicyId("");
-        setNewCedarText("");
-        setShowCreate(false);
-        await policiesPoll.refresh();
-      } catch (err) {
-        setActionError(
-          err instanceof Error ? err.message : "Failed to create policy",
-        );
-      }
+      await createPolicy(targetTenant, policyId, cedarText);
+      setShowCreate(false);
+      await policiesPoll.refresh();
     },
-    [tenant, tenants, newPolicyId, newCedarText, policiesPoll],
+    [policiesPoll],
   );
 
   if (initialLoading) {
@@ -356,75 +348,14 @@ export default function PoliciesPage() {
         </div>
       )}
 
-      {/* Create new policy form */}
+      {/* Visual policy creator */}
       {showCreate && (
-        <div className="glass rounded p-4 mb-6 animate-fade-in">
-          <h3 className="text-sm font-semibold text-[var(--color-text-primary)] mb-3">
-            Create New Policy
-          </h3>
-          <div className="space-y-3">
-            <div className="flex gap-3">
-              <div className="flex-1">
-                <label className="text-[10px] text-[var(--color-text-muted)] uppercase tracking-wider block mb-1">
-                  Policy ID
-                </label>
-                <input
-                  type="text"
-                  value={newPolicyId}
-                  onChange={(e) => setNewPolicyId(e.target.value)}
-                  placeholder="e.g., custom:my-agent-rules"
-                  className="w-full bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] text-xs rounded-sm px-2.5 py-1.5 font-mono focus:outline-none focus:ring-1 focus:ring-[var(--color-accent-teal)] placeholder:text-[var(--color-text-muted)]"
-                />
-              </div>
-              {tenant === ALL_TENANTS && (
-                <div>
-                  <label className="text-[10px] text-[var(--color-text-muted)] uppercase tracking-wider block mb-1">
-                    Tenant
-                  </label>
-                  <select
-                    className="bg-[var(--color-bg-surface)] text-[var(--color-text-secondary)] text-xs rounded-sm px-2 py-1.5 focus:outline-none"
-                    defaultValue={tenants[0]}
-                  >
-                    {tenants.map((t) => (
-                      <option key={t} value={t}>
-                        {t}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              )}
-            </div>
-            <div>
-              <label className="text-[10px] text-[var(--color-text-muted)] uppercase tracking-wider block mb-1">
-                Cedar Policy Text
-              </label>
-              <textarea
-                value={newCedarText}
-                onChange={(e) => setNewCedarText(e.target.value)}
-                placeholder={'permit(\n  principal is Agent,\n  action == Action::"myAction",\n  resource is MyType\n);'}
-                className="w-full min-h-[120px] p-2.5 bg-black/30 rounded text-[11px] font-mono text-[var(--color-text-primary)] border border-[var(--color-border)] focus:outline-none focus:border-[var(--color-accent-teal)] resize-y placeholder:text-[var(--color-text-muted)]"
-                spellCheck={false}
-              />
-            </div>
-            <div className="flex gap-2">
-              <button
-                type="button"
-                disabled={!newPolicyId.trim() || !newCedarText.trim()}
-                onClick={handleCreate}
-                className="px-3 py-1.5 text-xs bg-[var(--color-accent-teal-dim)] text-[var(--color-accent-teal)] rounded hover:bg-[var(--color-accent-teal-dim)] disabled:opacity-50 transition-colors"
-              >
-                Create Policy
-              </button>
-              <button
-                type="button"
-                onClick={() => setShowCreate(false)}
-                className="px-3 py-1.5 text-xs bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] rounded hover:bg-[var(--color-border)] transition-colors"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </div>
+        <VisualPolicyCreator
+          specs={specs}
+          tenants={tenants}
+          onCreated={handleVisualCreate}
+          onCancel={() => setShowCreate(false)}
+        />
       )}
 
       {/* Policy list */}
diff --git a/ui/observe/components/BatchApproveBar.tsx b/ui/observe/components/BatchApproveBar.tsx
new file mode 100644
index 00000000..7ca95ba2
--- /dev/null
+++ b/ui/observe/components/BatchApproveBar.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import type { PendingDecision, PolicyScopeMatrix } from "@/lib/types";
+import type { PolicyBuilderContext } from "./PolicyBuilder";
+import PolicyBuilder from "./PolicyBuilder";
+import { commonContext } from "@/lib/decision-grouping";
+
+interface BatchApproveBarProps {
+  selectedDecisions: PendingDecision[];
+  onApprove: (ids: string[], matrix: PolicyScopeMatrix) => Promise<{ succeeded: number; failed: number }>;
+  onClear: () => void;
+}
+
+export default function BatchApproveBar({
+  selectedDecisions,
+  onApprove,
+  onClear,
+}: BatchApproveBarProps) {
+  const [showBuilder, setShowBuilder] = useState(false);
+  const [approving, setApproving] = useState(false);
+  const [result, setResult] = useState<{ succeeded: number; failed: number } | null>(null);
+
+  const ctx: PolicyBuilderContext = commonContext(selectedDecisions);
+  const ids = selectedDecisions.map((d) => d.id);
+
+  const handleApprove = useCallback(
+    async (matrix: PolicyScopeMatrix) => {
+      setApproving(true);
+      setResult(null);
+      try {
+        const res = await onApprove(ids, matrix);
+        setResult(res);
+        if (res.failed === 0) {
+          setTimeout(() => {
+            setShowBuilder(false);
+            setResult(null);
+          }, 1500);
+        }
+      } finally {
+        setApproving(false);
+      }
+    },
+    [ids, onApprove],
+  );
+
+  if (selectedDecisions.length === 0) return null;
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 border-t border-[var(--color-border)] bg-[color-mix(in_srgb,var(--color-bg-primary)_95%,transparent)] backdrop-blur-md">
+      <div className="max-w-5xl mx-auto px-6 py-3">
+        {/* Summary row */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-2 h-2 rounded-full bg-[var(--color-accent-teal)] animate-pulse" />
+            <span className="text-sm text-[var(--color-text-primary)]">
+              <span className="font-mono font-semibold">{selectedDecisions.length}</span>{" "}
+              {selectedDecisions.length === 1 ? "decision" : "decisions"} selected
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            {result && (
+              <span className={`text-xs font-mono ${result.failed > 0 ? "text-[var(--color-accent-pink)]" : "text-[var(--color-accent-teal)]"}`}>
+                {result.succeeded} approved{result.failed > 0 ? `, ${result.failed} failed` : ""}
+              </span>
+            )}
+            <button
+              type="button"
+              onClick={() => setShowBuilder(!showBuilder)}
+              className="px-3 py-1.5 text-xs bg-[var(--color-accent-teal-dim)] text-[var(--color-accent-teal)] rounded hover:bg-[var(--color-accent-teal-dim)] transition-colors"
+            >
+              {showBuilder ? "Hide" : "Approve Selected"}
+            </button>
+            <button
+              type="button"
+              onClick={onClear}
+              className="px-3 py-1.5 text-xs bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] rounded hover:bg-[var(--color-border)] transition-colors"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+
+        {/* Expanded PolicyBuilder */}
+        {showBuilder && (
+          <div className="mt-3 pt-3 border-t border-[var(--color-border)]">
+            <PolicyBuilder
+              context={ctx}
+              onApprove={handleApprove}
+              onCancel={() => setShowBuilder(false)}
+              disabled={approving}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/ui/observe/components/DecisionGroup.tsx b/ui/observe/components/DecisionGroup.tsx
new file mode 100644
index 00000000..1a404cca
--- /dev/null
+++ b/ui/observe/components/DecisionGroup.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { useState } from "react";
+import type { PendingDecision } from "@/lib/types";
+import { groupLabel, type GroupingStrategy } from "@/lib/decision-grouping";
+import { redactSensitiveFields } from "@/lib/utils";
+
+interface DecisionGroupProps {
+  groupKey: string;
+  strategy: GroupingStrategy;
+  decisions: PendingDecision[];
+  selectedIds: Set<string>;
+  onToggleSelect: (id: string) => void;
+  onToggleGroup: (ids: string[]) => void;
+}
+
+function DecisionRow({
+  decision,
+  selected,
+  onToggle,
+}: {
+  decision: PendingDecision;
+  selected: boolean;
+  onToggle: () => void;
+}) {
+  const redactedAttrs = redactSensitiveFields(decision.resource_attrs);
+  const hasAttrs = decision.resource_attrs && Object.keys(decision.resource_attrs).length > 0;
+
+  return (
+    <div className="flex items-start gap-2.5 py-2 px-3 border-b border-[var(--color-border)] last:border-b-0">
+      <input
+        type="checkbox"
+        checked={selected}
+        onChange={onToggle}
+        className="mt-1 accent-[var(--color-accent-teal)] flex-shrink-0"
+      />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 text-[12px]">
+          <span className="font-mono text-[var(--color-text-secondary)] truncate max-w-[160px]" title={decision.agent_id}>
+            {decision.agent_id}
+          </span>
+          <span className="text-[var(--color-text-muted)]">/</span>
+          <span className="font-mono text-[var(--color-text-secondary)] truncate max-w-[200px]" title={`${decision.resource_type}::${decision.resource_id}`}>
+            {decision.resource_type}::{decision.resource_id}
+          </span>
+        </div>
+        <div className="text-[11px] text-[var(--color-accent-pink)] mt-0.5">
+          {decision.denial_reason}
+        </div>
+        {hasAttrs && (
+          <pre className="text-[10px] font-mono text-[var(--color-text-muted)] mt-0.5 truncate max-w-[400px]">
+            {JSON.stringify(redactedAttrs)}
+          </pre>
+        )}
+      </div>
+      <span className="text-[10px] text-[var(--color-text-muted)] font-mono flex-shrink-0">
+        {new Date(decision.created_at).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}
+      </span>
+    </div>
+  );
+}
+
+export default function DecisionGroup({
+  groupKey: key,
+  strategy,
+  decisions,
+  selectedIds,
+  onToggleSelect,
+  onToggleGroup,
+}: DecisionGroupProps) {
+  const [expanded, setExpanded] = useState(false);
+  const ids = decisions.map((d) => d.id);
+  const selectedCount = ids.filter((id) => selectedIds.has(id)).length;
+  const allSelected = selectedCount === ids.length;
+  const someSelected = selectedCount > 0 && !allSelected;
+  const label = groupLabel(key, strategy);
+
+  return (
+    <div className="glass rounded animate-fade-in">
+      {/* Group header */}
+      <div className="flex items-center gap-2.5 p-3">
+        <input
+          type="checkbox"
+          checked={allSelected}
+          ref={(el) => {
+            if (el) el.indeterminate = someSelected;
+          }}
+          onChange={() => onToggleGroup(ids)}
+          className="accent-[var(--color-accent-teal)] flex-shrink-0"
+        />
+        <button
+          type="button"
+          onClick={() => setExpanded(!expanded)}
+          className="flex items-center gap-2 flex-1 min-w-0 text-left"
+        >
+          <span className="text-sm font-mono text-[var(--color-text-primary)] truncate">
+            {label}
+          </span>
+          <span className="text-[10px] font-mono px-1.5 py-0.5 rounded-full bg-[var(--color-accent-pink-dim)] text-[var(--color-accent-pink)]">
+            {decisions.length}
+          </span>
+          {selectedCount > 0 && selectedCount < decisions.length && (
+            <span className="text-[10px] text-[var(--color-text-muted)]">
+              {selectedCount} selected
+            </span>
+          )}
+          <span className="ml-auto text-[var(--color-text-muted)] text-[10px]">
+            {expanded ? "\u25B4" : "\u25BE"}
+          </span>
+        </button>
+      </div>
+
+      {/* Expanded decision list */}
+      {expanded && (
+        <div className="border-t border-[var(--color-border)]">
+          {decisions.map((d) => (
+            <DecisionRow
+              key={d.id}
+              decision={d}
+              selected={selectedIds.has(d.id)}
+              onToggle={() => onToggleSelect(d.id)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/ui/observe/components/PermissionsMatrix.tsx b/ui/observe/components/PermissionsMatrix.tsx
new file mode 100644
index 00000000..5883db0e
--- /dev/null
+++ b/ui/observe/components/PermissionsMatrix.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import type { SpecSummary } from "@/lib/types";
+
+/** Which entity types and actions are checked */
+export interface PermissionsSelection {
+  /** Map of entityType -> { allActions: whether header is checked, actions: set of checked actions } */
+  entities: Map<string, { allActions: boolean; actions: Set<string> }>;
+}
+
+export function emptySelection(): PermissionsSelection {
+  return { entities: new Map() };
+}
+
+/** Count how many policies will be generated from a selection */
+export function countPolicies(selection: PermissionsSelection): number {
+  let count = 0;
+  for (const [, entry] of selection.entities) {
+    if (entry.allActions) {
+      count += 1; // one broad policy
+    } else if (entry.actions.size > 0) {
+      count += entry.actions.size; // one per action
+    }
+  }
+  return count;
+}
+
+interface PermissionsMatrixProps {
+  specs: SpecSummary[];
+  tenant: string;
+  value: PermissionsSelection;
+  onChange: (value: PermissionsSelection) => void;
+}
+
+export default function PermissionsMatrix({
+  specs,
+  tenant,
+  value,
+  onChange,
+}: PermissionsMatrixProps) {
+  // Group specs by entity type for the selected tenant
+  const entityGroups = useMemo(() => {
+    const groups = new Map<string, string[]>();
+    for (const s of specs) {
+      if (s.tenant !== tenant) continue;
+      const existing = groups.get(s.entity_type);
+      if (existing) {
+        // Merge actions
+        for (const a of s.actions) {
+          if (!existing.includes(a)) existing.push(a);
+        }
+      } else {
+        groups.set(s.entity_type, [...s.actions]);
+      }
+    }
+    // Sort actions within each group
+    for (const [, actions] of groups) {
+      actions.sort();
+    }
+    return groups;
+  }, [specs, tenant]);
+
+  const toggleEntityType = useCallback(
+    (entityType: string) => {
+      const next = new Map(value.entities);
+      const current = next.get(entityType);
+      if (current?.allActions) {
+        // Uncheck everything for this type
+        next.delete(entityType);
+      } else {
+        // Check "all actions" for this type
+        next.set(entityType, { allActions: true, actions: new Set() });
+      }
+      onChange({ entities: next });
+    },
+    [value, onChange],
+  );
+
+  const toggleAction = useCallback(
+    (entityType: string, action: string) => {
+      const next = new Map(value.entities);
+      const current = next.get(entityType) || { allActions: false, actions: new Set<string>() };
+      const nextActions = new Set(current.actions);
+
+      if (current.allActions) {
+        // Was "all actions" — switching to individual mode, unchecking this action
+        const allActions = entityGroups.get(entityType) || [];
+        for (const a of allActions) {
+          if (a !== action) nextActions.add(a);
+        }
+        next.set(entityType, { allActions: false, actions: nextActions });
+      } else if (nextActions.has(action)) {
+        nextActions.delete(action);
+        if (nextActions.size === 0) {
+          next.delete(entityType);
+        } else {
+          next.set(entityType, { allActions: false, actions: nextActions });
+        }
+      } else {
+        nextActions.add(action);
+        // If all actions are now checked, promote to allActions
+        const allActions = entityGroups.get(entityType) || [];
+        if (nextActions.size === allActions.length) {
+          next.set(entityType, { allActions: true, actions: new Set() });
+        } else {
+          next.set(entityType, { allActions: false, actions: nextActions });
+        }
+      }
+      onChange({ entities: next });
+    },
+    [value, onChange, entityGroups],
+  );
+
+  if (entityGroups.size === 0) {
+    return (
+      <div className="text-xs text-[var(--color-text-muted)] py-2">
+        No entity types found for this tenant.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      <div className="text-[10px] text-[var(--color-text-secondary)] uppercase tracking-wider font-medium mb-1.5">
+        Permissions
+      </div>
+      <div className="bg-[var(--color-bg-surface)] rounded border border-[var(--color-border)] divide-y divide-[var(--color-border)]">
+        {Array.from(entityGroups.entries()).map(([entityType, actions]) => {
+          const entry = value.entities.get(entityType);
+          const isAllActions = entry?.allActions ?? false;
+          const checkedActions = entry?.actions ?? new Set<string>();
+          const someChecked = checkedActions.size > 0 || isAllActions;
+          const isIndeterminate = !isAllActions && checkedActions.size > 0;
+
+          return (
+            <div key={entityType} className="px-3 py-2">
+              {/* Entity type header */}
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={isAllActions}
+                  ref={(el) => {
+                    if (el) el.indeterminate = isIndeterminate;
+                  }}
+                  onChange={() => toggleEntityType(entityType)}
+                  className="accent-[var(--color-accent-teal)] flex-shrink-0"
+                />
+                <span className="font-mono text-[12px] text-[var(--color-text-primary)] font-medium">
+                  {entityType}
+                </span>
+                {isAllActions && (
+                  <span className="text-[10px] text-[var(--color-accent-teal)] ml-1">
+                    (all actions)
+                  </span>
+                )}
+                {isIndeterminate && (
+                  <span className="text-[10px] text-[var(--color-text-muted)] ml-1">
+                    ({checkedActions.size} of {actions.length})
+                  </span>
+                )}
+              </label>
+
+              {/* Individual actions — show when type has some selection or is expanded */}
+              {someChecked && (
+                <div className="ml-5 mt-1.5 flex flex-wrap gap-x-4 gap-y-1">
+                  {actions.map((action) => {
+                    const checked = isAllActions || checkedActions.has(action);
+                    return (
+                      <label key={action} className="flex items-center gap-1.5 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={checked}
+                          onChange={() => toggleAction(entityType, action)}
+                          className="accent-[var(--color-accent-teal)] flex-shrink-0"
+                        />
+                        <span className={`font-mono text-[11px] ${checked ? "text-[var(--color-text-primary)]" : "text-[var(--color-text-muted)]"}`}>
+                          {action}
+                        </span>
+                      </label>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/ui/observe/components/PolicyBuilder.tsx b/ui/observe/components/PolicyBuilder.tsx
index 77f7e5c1..6d6d938a 100644
--- a/ui/observe/components/PolicyBuilder.tsx
+++ b/ui/observe/components/PolicyBuilder.tsx
@@ -10,115 +10,106 @@ import type {
   DurationScope,
 } from "@/lib/types";
 import { generatePolicyPreview } from "@/lib/utils";
+import RadioGroup from "./RadioGroup";
+import {
+  PRINCIPAL_OPTIONS,
+  ACTION_OPTIONS,
+  RESOURCE_OPTIONS,
+  DURATION_OPTIONS,
+} from "@/lib/policy-options";
 
-interface PolicyBuilderProps {
+/** Context derived from a decision or provided explicitly for standalone mode. */
+export interface PolicyBuilderContext {
+  agentId?: string;
+  agentType?: string;
+  action?: string;
+  resourceType?: string;
+  resourceId?: string;
+  sessionId?: string;
+}
+
+interface DecisionModeProps {
   decision: PendingDecision;
+  context?: never;
   onApprove: (matrix: PolicyScopeMatrix) => void;
   onDeny: () => void;
+  onCancel?: never;
   disabled?: boolean;
 }
 
-const PRINCIPAL_OPTIONS: { value: PrincipalScope; label: string; description: string }[] = [
-  { value: "this_agent", label: "This agent", description: "Only the requesting agent" },
-  { value: "agents_of_type", label: "Agents of type", description: "All agents of the same type" },
-  { value: "agents_with_role", label: "Agents with role", description: "All agents sharing a role" },
-  { value: "any_agent", label: "Any agent", description: "Any authenticated agent" },
-];
-
-const ACTION_OPTIONS: { value: ActionScopeOption; label: string; description: string }[] = [
-  { value: "this_action", label: "This action only", description: "Only the denied action" },
-  { value: "all_actions_on_type", label: "All actions on type", description: "Any action on this resource type" },
-  { value: "all_actions", label: "All actions", description: "Any action on any resource" },
-];
-
-const RESOURCE_OPTIONS: { value: ResourceScopeOption; label: string; description: string }[] = [
-  { value: "this_resource", label: "This resource", description: "Only the exact resource" },
-  { value: "any_of_type", label: "Any of type", description: "Any resource of this type" },
-  { value: "any_resource", label: "Any resource", description: "Any resource" },
-];
-
-const DURATION_OPTIONS: { value: DurationScope; label: string; description: string }[] = [
-  { value: "always", label: "Always", description: "Permanent policy" },
-  { value: "session", label: "This session", description: "Only the current session" },
-];
-
-function RadioGroup<T extends string>({
-  label,
-  options,
-  value,
-  onChange,
-}: {
-  label: string;
-  options: { value: T; label: string; description: string }[];
-  value: T;
-  onChange: (v: T) => void;
-}) {
-  return (
-    <div className="space-y-1.5">
-      <div className="text-[10px] text-[var(--color-text-secondary)] uppercase tracking-wider font-medium">{label}</div>
-      <div className="flex flex-wrap gap-1.5">
-        {options.map((opt) => (
-          <button
-            key={opt.value}
-            type="button"
-            onClick={() => onChange(opt.value)}
-            title={opt.description}
-            className={`px-2.5 py-1 text-[11px] rounded-sm transition-colors ${
-              value === opt.value
-                ? "bg-[var(--color-accent-teal-dim)] text-[var(--color-accent-teal)] ring-1 ring-[var(--color-accent-teal)]"
-                : "bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-elevated)] hover:text-[var(--color-text-secondary)]"
-            }`}
-          >
-            {opt.label}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
+interface StandaloneModeProps {
+  decision?: never;
+  context: PolicyBuilderContext;
+  onApprove: (matrix: PolicyScopeMatrix) => void;
+  onDeny?: never;
+  onCancel: () => void;
+  disabled?: boolean;
 }
 
-export default function PolicyBuilder({ decision, onApprove, onDeny, disabled }: PolicyBuilderProps) {
-  const [principal, setPrincipal] = useState<PrincipalScope>("this_agent");
-  const [action, setAction] = useState<ActionScopeOption>("this_action");
-  const [resource, setResource] = useState<ResourceScopeOption>("any_of_type");
+type PolicyBuilderProps = DecisionModeProps | StandaloneModeProps;
+
+export default function PolicyBuilder(props: PolicyBuilderProps) {
+  const { onApprove, disabled } = props;
+
+  // Normalize context from either decision or explicit context
+  const ctx: PolicyBuilderContext = useMemo(() => {
+    if (props.decision) {
+      return {
+        agentId: props.decision.agent_id,
+        agentType: props.decision.agent_type,
+        action: props.decision.action,
+        resourceType: props.decision.resource_type,
+        resourceId: props.decision.resource_id,
+        sessionId: props.decision.session_id,
+      };
+    }
+    return props.context;
+  }, [props.decision, props.context]);
+
+  // Default to broader scopes in standalone mode when fields are missing
+  const defaultPrincipal: PrincipalScope = ctx.agentId ? "this_agent" : "any_agent";
+  const defaultAction: ActionScopeOption = ctx.action ? "this_action" : "all_actions";
+  const defaultResource: ResourceScopeOption = ctx.resourceType ? "any_of_type" : "any_resource";
+
+  const [principal, setPrincipal] = useState<PrincipalScope>(defaultPrincipal);
+  const [action, setAction] = useState<ActionScopeOption>(defaultAction);
+  const [resource, setResource] = useState<ResourceScopeOption>(defaultResource);
   const [duration, setDuration] = useState<DurationScope>("always");
   const [showPreview, setShowPreview] = useState(false);
 
-  // Filter principal options: only show "agents_of_type" when decision has agent_type
   const principalOptions = useMemo(() => {
     return PRINCIPAL_OPTIONS.filter((opt) => {
-      if (opt.value === "agents_of_type" && !decision.agent_type) return false;
+      if (opt.value === "agents_of_type" && !ctx.agentType) return false;
       return true;
     });
-  }, [decision.agent_type]);
+  }, [ctx.agentType]);
 
-  // Filter duration options: only show "session" when session_id is available
   const durationOptions = useMemo(() => {
     return DURATION_OPTIONS.filter((opt) => {
-      if (opt.value === "session" && !decision.session_id) return false;
+      if (opt.value === "session" && !ctx.sessionId) return false;
       return true;
     });
-  }, [decision.session_id]);
+  }, [ctx.sessionId]);
 
   const matrix: PolicyScopeMatrix = useMemo(() => ({
     principal,
     action,
     resource,
     duration,
-    agent_type_value: principal === "agents_of_type" ? decision.agent_type : undefined,
-    session_id: duration === "session" ? decision.session_id : undefined,
-  }), [principal, action, resource, duration, decision.agent_type, decision.session_id]);
+    agent_type_value: principal === "agents_of_type" ? ctx.agentType : undefined,
+    session_id: duration === "session" ? ctx.sessionId : undefined,
+  }), [principal, action, resource, duration, ctx.agentType, ctx.sessionId]);
 
   const preview = useMemo(
     () =>
       generatePolicyPreview(
-        decision.agent_id,
-        decision.action,
-        decision.resource_type,
-        decision.resource_id,
+        ctx.agentId || "agent",
+        ctx.action || "*",
+        ctx.resourceType || "Resource",
+        ctx.resourceId || "*",
         matrix,
       ),
-    [decision, matrix],
+    [ctx, matrix],
   );
 
   return (
@@ -154,14 +145,25 @@ export default function PolicyBuilder({ decision, onApprove, onDeny, disabled }:
         >
           Approve
         </button>
-        <button
-          type="button"
-          disabled={disabled}
-          onClick={onDeny}
-          className="px-3 py-1.5 text-xs bg-[var(--color-accent-pink-dim)] text-[var(--color-accent-pink)] rounded hover:bg-[var(--color-accent-pink-dim)] disabled:opacity-50 transition-colors"
-        >
-          Deny
-        </button>
+        {props.decision ? (
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={props.onDeny}
+            className="px-3 py-1.5 text-xs bg-[var(--color-accent-pink-dim)] text-[var(--color-accent-pink)] rounded hover:bg-[var(--color-accent-pink-dim)] disabled:opacity-50 transition-colors"
+          >
+            Deny
+          </button>
+        ) : (
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={props.onCancel}
+            className="px-3 py-1.5 text-xs bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] rounded hover:bg-[var(--color-border)] disabled:opacity-50 transition-colors"
+          >
+            Cancel
+          </button>
+        )}
       </div>
     </div>
   );
diff --git a/ui/observe/components/RadioGroup.tsx b/ui/observe/components/RadioGroup.tsx
new file mode 100644
index 00000000..6fbd3546
--- /dev/null
+++ b/ui/observe/components/RadioGroup.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+export interface RadioOption<T extends string> {
+  value: T;
+  label: string;
+  description: string;
+}
+
+interface RadioGroupProps<T extends string> {
+  label: string;
+  options: RadioOption<T>[];
+  value: T;
+  onChange: (v: T) => void;
+}
+
+export default function RadioGroup<T extends string>({
+  label,
+  options,
+  value,
+  onChange,
+}: RadioGroupProps<T>) {
+  return (
+    <div className="space-y-1.5">
+      <div className="text-[10px] text-[var(--color-text-secondary)] uppercase tracking-wider font-medium">
+        {label}
+      </div>
+      <div className="flex flex-wrap gap-1.5">
+        {options.map((opt) => (
+          <button
+            key={opt.value}
+            type="button"
+            onClick={() => onChange(opt.value)}
+            title={opt.description}
+            className={`px-2.5 py-1 text-[11px] rounded-sm transition-colors ${
+              value === opt.value
+                ? "bg-[var(--color-accent-teal-dim)] text-[var(--color-accent-teal)] ring-1 ring-[var(--color-accent-teal)]"
+                : "bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-elevated)] hover:text-[var(--color-text-secondary)]"
+            }`}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/ui/observe/components/VisualPolicyCreator.tsx b/ui/observe/components/VisualPolicyCreator.tsx
new file mode 100644
index 00000000..46c7976e
--- /dev/null
+++ b/ui/observe/components/VisualPolicyCreator.tsx
@@ -0,0 +1,340 @@
+"use client";
+
+import { useState, useMemo, useEffect, useCallback } from "react";
+import type {
+  SpecSummary,
+  PrincipalScope,
+  DurationScope,
+  AgentSummary,
+} from "@/lib/types";
+import { fetchAgents } from "@/lib/api";
+import RadioGroup from "./RadioGroup";
+import PermissionsMatrix, {
+  emptySelection,
+  countPolicies,
+  type PermissionsSelection,
+} from "./PermissionsMatrix";
+import { PRINCIPAL_OPTIONS, DURATION_OPTIONS } from "@/lib/policy-options";
+
+interface VisualPolicyCreatorProps {
+  specs: SpecSummary[];
+  tenants: string[];
+  onCreated: (tenant: string, policyId: string, cedarText: string) => Promise<void>;
+  onCancel: () => void;
+}
+
+/** Generate Cedar text for one permission entry */
+function generateCedar(
+  principal: PrincipalScope,
+  agentId: string,
+  agentTypeInput: string,
+  entityType: string,
+  action: string | null, // null = all actions
+  duration: DurationScope,
+  sessionId?: string,
+): string {
+  let principalClause: string;
+  switch (principal) {
+    case "this_agent":
+      principalClause = `principal == Agent::"${agentId}"`;
+      break;
+    case "agents_of_type":
+      principalClause = "principal is Agent";
+      break;
+    case "agents_with_role":
+      principalClause = "principal is Agent";
+      break;
+    case "any_agent":
+      principalClause = "principal is Agent";
+      break;
+  }
+
+  const actionClause = action
+    ? `action == Action::"${action}"`
+    : "action";
+
+  const resourceClause = `resource is ${entityType}`;
+
+  const conditions: string[] = [];
+  if (principal === "agents_of_type" && agentTypeInput) {
+    conditions.push(`context.agentType == "${agentTypeInput}"`);
+  }
+  if (principal === "agents_with_role" && agentTypeInput) {
+    conditions.push(`context.role == "${agentTypeInput}"`);
+  }
+  if (duration === "session" && sessionId) {
+    conditions.push(`context.sessionId == "${sessionId}"`);
+  }
+
+  const whenClause = conditions.length > 0
+    ? `\nwhen { ${conditions.join(" && ")} }`
+    : "";
+
+  return `permit(\n  ${principalClause},\n  ${actionClause},\n  ${resourceClause}\n)${whenClause};`;
+}
+
+/** Generate a policy ID from components */
+function makePolicyId(
+  principal: PrincipalScope,
+  agentValue: string,
+  entityType: string,
+  action: string | null,
+): string {
+  const parts = ["custom"];
+  switch (principal) {
+    case "this_agent":
+      parts.push(agentValue || "agent");
+      break;
+    case "agents_of_type":
+      parts.push(agentValue || "type");
+      break;
+    case "agents_with_role":
+      parts.push(agentValue || "role");
+      break;
+    case "any_agent":
+      parts.push("any-agent");
+      break;
+  }
+  parts.push(entityType);
+  parts.push(action || "all-actions");
+  return parts.join(":");
+}
+
+export default function VisualPolicyCreator({
+  specs,
+  tenants,
+  onCreated,
+  onCancel,
+}: VisualPolicyCreatorProps) {
+  const [principal, setPrincipal] = useState<PrincipalScope>("any_agent");
+  const [duration, setDuration] = useState<DurationScope>("always");
+
+  const [selectedTenant, setSelectedTenant] = useState(tenants[0] || "");
+  const [selectedAgentId, setSelectedAgentId] = useState("");
+  const [agentTypeInput, setAgentTypeInput] = useState("");
+  const [permissions, setPermissions] = useState<PermissionsSelection>(emptySelection());
+  const [showCedar, setShowCedar] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<{ succeeded: number; failed: number } | null>(null);
+
+  // Fetch agents scoped to selected tenant
+  const [agents, setAgents] = useState<AgentSummary[]>([]);
+  useEffect(() => {
+    if (!selectedTenant) return;
+    fetchAgents({ tenant: selectedTenant })
+      .then((res) => setAgents(res.agents))
+      .catch(() => setAgents([]));
+  }, [selectedTenant]);
+
+  // Reset permissions when tenant changes
+  useEffect(() => {
+    setPermissions(emptySelection());
+  }, [selectedTenant]);
+
+  const agentValue = principal === "this_agent"
+    ? selectedAgentId
+    : principal === "agents_of_type" || principal === "agents_with_role"
+      ? agentTypeInput
+      : "";
+
+  const policyCount = countPolicies(permissions);
+
+  // Generate all Cedar policies from current selection
+  const generatedPolicies = useMemo(() => {
+    const policies: { id: string; cedar: string }[] = [];
+    for (const [entityType, entry] of permissions.entities) {
+      if (entry.allActions) {
+        policies.push({
+          id: makePolicyId(principal, agentValue, entityType, null),
+          cedar: generateCedar(principal, selectedAgentId, agentTypeInput, entityType, null, duration),
+        });
+      } else {
+        for (const action of entry.actions) {
+          policies.push({
+            id: makePolicyId(principal, agentValue, entityType, action),
+            cedar: generateCedar(principal, selectedAgentId, agentTypeInput, entityType, action, duration),
+          });
+        }
+      }
+    }
+    return policies;
+  }, [permissions, principal, agentValue, selectedAgentId, agentTypeInput, duration]);
+
+  const handleCreate = useCallback(async () => {
+    if (!selectedTenant || policyCount === 0) return;
+    setCreating(true);
+    setError(null);
+    setResult(null);
+
+    const results = await Promise.allSettled(
+      generatedPolicies.map((p) => onCreated(selectedTenant, p.id, p.cedar)),
+    );
+
+    const succeeded = results.filter((r) => r.status === "fulfilled").length;
+    const failed = results.filter((r) => r.status === "rejected").length;
+
+    if (failed > 0) {
+      const firstError = results.find((r) => r.status === "rejected") as PromiseRejectedResult;
+      setError(`${failed} of ${results.length} failed: ${firstError.reason?.message || "Unknown error"}`);
+    }
+    setResult({ succeeded, failed });
+    setCreating(false);
+
+    if (failed === 0) {
+      setTimeout(() => {
+        setPermissions(emptySelection());
+        setResult(null);
+      }, 1500);
+    }
+  }, [selectedTenant, policyCount, generatedPolicies, onCreated]);
+
+  return (
+    <div className="glass rounded p-4 mb-6 animate-fade-in">
+      <h3 className="text-sm font-semibold text-[var(--color-text-primary)] mb-4">
+        Create Policies
+      </h3>
+
+      <div className="space-y-4">
+        {/* Tenant selector */}
+        <div>
+          <div className="text-[10px] text-[var(--color-text-secondary)] uppercase tracking-wider font-medium mb-1.5">
+            Tenant
+          </div>
+          <select
+            value={selectedTenant}
+            onChange={(e) => setSelectedTenant(e.target.value)}
+            className="bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] text-xs rounded-sm px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-[var(--color-accent-teal)]"
+          >
+            {tenants.map((t) => (
+              <option key={t} value={t}>{t}</option>
+            ))}
+          </select>
+        </div>
+
+        {/* WHO — principal scope */}
+        <div>
+          <RadioGroup
+            label="Allow who"
+            options={PRINCIPAL_OPTIONS}
+            value={principal}
+            onChange={setPrincipal}
+          />
+          {principal === "this_agent" && (
+            <div className="mt-2">
+              <select
+                value={selectedAgentId}
+                onChange={(e) => setSelectedAgentId(e.target.value)}
+                className="bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] text-xs rounded-sm px-2.5 py-1.5 font-mono focus:outline-none focus:ring-1 focus:ring-[var(--color-accent-teal)]"
+              >
+                <option value="">Select agent...</option>
+                {agents.map((a) => (
+                  <option key={a.agent_id} value={a.agent_id}>{a.agent_id}</option>
+                ))}
+              </select>
+              {agents.length === 0 && (
+                <span className="text-[10px] text-[var(--color-text-muted)] ml-2">
+                  No agents found for this tenant
+                </span>
+              )}
+            </div>
+          )}
+          {principal === "agents_of_type" && (
+            <div className="mt-2">
+              <input
+                type="text"
+                value={agentTypeInput}
+                onChange={(e) => setAgentTypeInput(e.target.value)}
+                placeholder="e.g., claude-code"
+                className="bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] text-xs rounded-sm px-2.5 py-1.5 font-mono focus:outline-none focus:ring-1 focus:ring-[var(--color-accent-teal)] placeholder:text-[var(--color-text-muted)] w-48"
+              />
+            </div>
+          )}
+          {principal === "agents_with_role" && (
+            <div className="mt-2">
+              <input
+                type="text"
+                value={agentTypeInput}
+                onChange={(e) => setAgentTypeInput(e.target.value)}
+                placeholder="e.g., operations_agent"
+                className="bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] text-xs rounded-sm px-2.5 py-1.5 font-mono focus:outline-none focus:ring-1 focus:ring-[var(--color-accent-teal)] placeholder:text-[var(--color-text-muted)] w-48"
+              />
+            </div>
+          )}
+        </div>
+
+        {/* PERMISSIONS MATRIX */}
+        <PermissionsMatrix
+          specs={specs}
+          tenant={selectedTenant}
+          value={permissions}
+          onChange={setPermissions}
+        />
+
+        {/* DURATION */}
+        <RadioGroup
+          label="For how long"
+          options={DURATION_OPTIONS}
+          value={duration}
+          onChange={setDuration}
+        />
+
+        {/* Cedar preview */}
+        <div>
+          <button
+            type="button"
+            onClick={() => setShowCedar(!showCedar)}
+            className="text-[10px] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] uppercase tracking-wider"
+          >
+            {showCedar ? "Hide" : "Show"} Cedar preview ({policyCount} {policyCount === 1 ? "policy" : "policies"})
+          </button>
+          {showCedar && generatedPolicies.length > 0 && (
+            <div className="mt-1.5 space-y-2">
+              {generatedPolicies.map((p) => (
+                <div key={p.id}>
+                  <div className="text-[10px] font-mono text-[var(--color-text-muted)] mb-0.5">
+                    {p.id}
+                  </div>
+                  <pre className="p-2.5 bg-black/30 rounded text-[11px] text-[var(--color-accent-teal)] font-mono overflow-x-auto border border-[var(--color-border)]">
+                    {p.cedar}
+                  </pre>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div className="text-xs text-[var(--color-accent-pink)]">{error}</div>
+        )}
+
+        {/* Result */}
+        {result && (
+          <div className={`text-xs font-mono ${result.failed > 0 ? "text-[var(--color-accent-pink)]" : "text-[var(--color-accent-teal)]"}`}>
+            {result.succeeded} created{result.failed > 0 ? `, ${result.failed} failed` : ""}
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-2 pt-1">
+          <button
+            type="button"
+            disabled={creating || !selectedTenant || policyCount === 0}
+            onClick={handleCreate}
+            className="px-3 py-1.5 text-xs bg-[var(--color-accent-teal-dim)] text-[var(--color-accent-teal)] rounded hover:bg-[var(--color-accent-teal-dim)] disabled:opacity-50 transition-colors"
+          >
+            {creating ? "Creating..." : `Create ${policyCount} ${policyCount === 1 ? "policy" : "policies"}`}
+          </button>
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-3 py-1.5 text-xs bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] rounded hover:bg-[var(--color-border)] transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/observe/lib/decision-grouping.ts b/ui/observe/lib/decision-grouping.ts
new file mode 100644
index 00000000..be00c058
--- /dev/null
+++ b/ui/observe/lib/decision-grouping.ts
@@ -0,0 +1,69 @@
+import type { PendingDecision } from "./types";
+
+export type GroupingStrategy = "action_resource" | "agent_action" | "agent_type_action";
+
+function groupKey(decision: PendingDecision, strategy: GroupingStrategy): string {
+  switch (strategy) {
+    case "action_resource":
+      return `${decision.action}::${decision.resource_type}`;
+    case "agent_action":
+      return `${decision.agent_id}::${decision.action}`;
+    case "agent_type_action":
+      return `${decision.agent_type || "unknown"}::${decision.action}`;
+  }
+}
+
+export function groupLabel(key: string, strategy: GroupingStrategy): string {
+  const [first, second] = key.split("::");
+  switch (strategy) {
+    case "action_resource":
+      return `${first} on ${second}`;
+    case "agent_action":
+      return `${first} / ${second}`;
+    case "agent_type_action":
+      return `${first} / ${second}`;
+  }
+}
+
+export function groupDecisions(
+  decisions: PendingDecision[],
+  strategy: GroupingStrategy,
+): Map<string, PendingDecision[]> {
+  const groups = new Map<string, PendingDecision[]>();
+  for (const d of decisions) {
+    const key = groupKey(d, strategy);
+    const list = groups.get(key);
+    if (list) {
+      list.push(d);
+    } else {
+      groups.set(key, [d]);
+    }
+  }
+  return groups;
+}
+
+/** Extract common context from a group of decisions for use in PolicyBuilder standalone mode. */
+export function commonContext(decisions: PendingDecision[]): {
+  agentId?: string;
+  agentType?: string;
+  action?: string;
+  resourceType?: string;
+  sessionId?: string;
+} {
+  if (decisions.length === 0) return {};
+
+  const first = decisions[0];
+  const allSameAgent = decisions.every((d) => d.agent_id === first.agent_id);
+  const allSameAgentType = decisions.every((d) => d.agent_type === first.agent_type);
+  const allSameAction = decisions.every((d) => d.action === first.action);
+  const allSameResourceType = decisions.every((d) => d.resource_type === first.resource_type);
+  const allSameSession = decisions.every((d) => d.session_id === first.session_id);
+
+  return {
+    agentId: allSameAgent ? first.agent_id : undefined,
+    agentType: allSameAgentType ? first.agent_type : undefined,
+    action: allSameAction ? first.action : undefined,
+    resourceType: allSameResourceType ? first.resource_type : undefined,
+    sessionId: allSameSession ? first.session_id : undefined,
+  };
+}
diff --git a/ui/observe/lib/policy-options.ts b/ui/observe/lib/policy-options.ts
new file mode 100644
index 00000000..ead6a397
--- /dev/null
+++ b/ui/observe/lib/policy-options.ts
@@ -0,0 +1,31 @@
+import type { RadioOption } from "@/components/RadioGroup";
+import type {
+  PrincipalScope,
+  ActionScopeOption,
+  ResourceScopeOption,
+  DurationScope,
+} from "./types";
+
+export const PRINCIPAL_OPTIONS: RadioOption<PrincipalScope>[] = [
+  { value: "this_agent", label: "This agent", description: "Only the requesting agent" },
+  { value: "agents_of_type", label: "Agents of type", description: "All agents of the same type" },
+  { value: "agents_with_role", label: "Agents with role", description: "All agents sharing a role" },
+  { value: "any_agent", label: "Any agent", description: "Any authenticated agent" },
+];
+
+export const ACTION_OPTIONS: RadioOption<ActionScopeOption>[] = [
+  { value: "this_action", label: "This action only", description: "Only the denied action" },
+  { value: "all_actions_on_type", label: "All actions on type", description: "Any action on this resource type" },
+  { value: "all_actions", label: "All actions", description: "Any action on any resource" },
+];
+
+export const RESOURCE_OPTIONS: RadioOption<ResourceScopeOption>[] = [
+  { value: "this_resource", label: "This resource", description: "Only the exact resource" },
+  { value: "any_of_type", label: "Any of type", description: "Any resource of this type" },
+  { value: "any_resource", label: "Any resource", description: "Any resource" },
+];
+
+export const DURATION_OPTIONS: RadioOption<DurationScope>[] = [
+  { value: "always", label: "Always", description: "Permanent policy" },
+  { value: "session", label: "This session", description: "Only the current session" },
+];