feat(ui): policy alert cards, notifications, and durable receipts

docs/guides/agent-ui.mdx

@@ -183,6 +183,17 @@ Once the agent finds files — or you drag them into a session — it can index
 
 Create, rename, search, export (Markdown/JSON), and delete sessions. Sessions persist across the CLI (`gaia chat`) and the Agent UI.
 
+### Policy Alerts and Receipts
+
+When a governance-enabled agent blocks a tool call, the Agent UI shows a
+non-actionable policy alert instead of an approval prompt. Policy blocks appear
+as inline **Policy Shield** activity cards, critical notifications, and a toast
+with a **View receipt** link when a receipt ID is available.
+
+Policy alerts are durable session history. If you reload the UI or reconnect
+after a blocked request with no assistant text, the block reason, rule IDs,
+policy version, and receipt ID remain attached to the assistant message.
+
 ---
 
 ## Keyboard Shortcuts

src/gaia/apps/webui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amd-gaia/agent-ui",
-  "version": "0.17.5",
+  "version": "0.17.6",
   "type": "module",
   "productName": "GAIA Agent UI",
   "description": "Privacy-first agentic AI interface with document Q&A - runs 100% locally on AMD Ryzen AI",
@@ -52,6 +52,7 @@
     "preview": "vite preview",
     "start": "electron .",
     "package": "npm run build && electron-builder --config electron-builder.yml",
+    "make": "npm run package",
     "package:win": "npm run build && electron-builder --win --config electron-builder.yml",
     "package:mac": "npm run build && electron-builder --mac --config electron-builder.yml",
     "package:linux": "npm run build && electron-builder --linux --config electron-builder.yml",

src/gaia/apps/webui/src/App.tsx

@@ -13,7 +13,9 @@ import { MobileAccessModal } from './components/MobileAccessModal';
 import { ConnectionBanner } from './components/ConnectionBanner';
 import { UpdateIndicator } from './components/UpdateIndicator';
 import { PermissionPrompt } from './components/PermissionPrompt';
+import { NotificationCenter } from './components/NotificationCenter';
 import { useChatStore } from './stores/chatStore';
+import { useNotificationStore } from './stores/notificationStore';
 import * as api from './services/api';
 import { log, logBanner } from './utils/logger';
 import { getSessionHash, findSessionByHash } from './utils/format';
@@ -71,6 +73,8 @@ function App() {
         setBackendConnected,
         setAgents,
     } = useChatStore();
+    const showNotificationPanel = useNotificationStore((s) => s.showPanel);
+    const setShowNotificationPanel = useNotificationStore((s) => s.setShowPanel);
 
     // Load agent list on mount, then poll every 30s.
     // Fingerprinting avoids re-renders when the list is unchanged.
@@ -542,6 +546,11 @@ function App() {
             <AnimatedPresence show={showFileBrowser}>
                 <FileBrowser />
             </AnimatedPresence>
+            <AnimatedPresence show={showNotificationPanel}>
+                <div className="notification-center-popover">
+                    <NotificationCenter onClose={() => setShowNotificationPanel(false)} />
+                </div>
+            </AnimatedPresence>
 
             {/* Mobile Access Modal */}
             {!isMobile && (

src/gaia/apps/webui/src/components/AgentActivity.css

@@ -50,7 +50,8 @@
 /* When activity is currently streaming or has errors, force full
    opacity — the user genuinely needs to see those states. */
 .agent-activity.active .agent-summary-bar,
-.agent-activity.has-errors .agent-summary-bar {
+.agent-activity.has-errors .agent-summary-bar,
+.agent-activity.has-policy-alerts .agent-summary-bar {
     opacity: 1;
 }
 /* Once expanded, the bar is the title for the panel below it — keep
@@ -82,6 +83,7 @@
 
 .agent-icon-done { color: var(--text-muted); }
 .agent-icon-error { color: var(--amd-red); }
+.agent-activity.has-policy-alerts .agent-icon-done { color: var(--accent-yellow); }
 
 /* Spinner */
 .agent-spinner-wrap {
@@ -491,6 +493,83 @@
     background: rgba(239, 68, 68, 0.06);
 }
 
+/* ── Flow: Policy Alert ─────────────────────────────────────────── */
+.flow-policy-alert {
+    padding: 8px 10px;
+    border-radius: var(--radius-xs);
+    background: rgba(245, 158, 11, 0.06);
+    border: 1px solid rgba(245, 158, 11, 0.22);
+    font-family: var(--font-mono);
+    animation: errorSlideIn 300ms var(--ease);
+}
+
+[data-theme="dark"] .flow-policy-alert {
+    background: rgba(245, 158, 11, 0.08);
+    border-color: rgba(245, 158, 11, 0.28);
+}
+
+.flow-policy-alert-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--accent-yellow);
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.7px;
+}
+
+.flow-policy-alert-title {
+    color: var(--text-primary);
+}
+
+.flow-policy-alert-decision {
+    margin-left: auto;
+    padding: 1px 6px;
+    border-radius: var(--radius-xs);
+    background: rgba(245, 158, 11, 0.14);
+    color: var(--accent-yellow);
+}
+
+.flow-policy-alert-body {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    margin-top: 7px;
+    font-size: 11px;
+    color: var(--text-secondary);
+}
+
+.flow-policy-alert-line {
+    display: flex;
+    gap: 8px;
+    align-items: baseline;
+}
+
+.flow-policy-alert-line span {
+    min-width: 48px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    font-size: 9px;
+    letter-spacing: 0.5px;
+}
+
+.flow-policy-alert-line code {
+    color: var(--text-primary);
+    word-break: break-word;
+}
+
+.flow-policy-alert-line em {
+    color: var(--accent-yellow);
+    font-style: normal;
+}
+
+.flow-policy-alert-reason {
+    color: var(--text-primary);
+    line-height: 1.5;
+    word-break: break-word;
+}
+
 /* ── Shared detail styles (reused from tool detail) ──────────── */
 .detail-section-label {
     display: block;

src/gaia/apps/webui/src/components/AgentActivity.tsx

@@ -24,6 +24,7 @@ import {
     Copy,
     Check,
     File,
+    ShieldAlert,
     type LucideIcon,
 } from 'lucide-react';
 import type { AgentStep, CommandOutput, RetrievalChunk } from '../types';
@@ -155,6 +156,8 @@ export function AgentActivity({ steps, isActive, variant = 'inline' }: AgentActi
     }, [steps]);
 
     const toolSteps = displaySteps.filter((s) => s.type === 'tool');
+    const policySteps = displaySteps.filter((s) => s.type === 'policy_alert');
+    const hasPolicyAlerts = policySteps.length > 0;
 
     // ── Filter state (for MCP tool visualization) ───────────────────
     const [toolNameFilter, setToolNameFilter] = useState('');
@@ -176,6 +179,10 @@ export function AgentActivity({ steps, isActive, variant = 'inline' }: AgentActi
     const errorSteps = displaySteps.filter((s) => s.type === 'error');
     const hasErrors = errorSteps.length > 0;
 
+    useEffect(() => {
+        if (hasPolicyAlerts) setExpanded(true);
+    }, [hasPolicyAlerts]);
+
     // Auto-expand native tools for visibility. MCP tools start collapsed
     // by default (users expand on demand) to reduce noise in busy sessions.
     useEffect(() => {
@@ -213,11 +220,13 @@ export function AgentActivity({ steps, isActive, variant = 'inline' }: AgentActi
     // Build summary — always use stable step count so the bar doesn't
     // visually change when transitioning from thinking to answer streaming.
     const stepCount = displaySteps.length;
-    const summaryText = `${stepCount} step${stepCount !== 1 ? 's' : ''}`
-        + (toolSteps.length > 0 ? ` \u00b7 ${toolSteps.length} tool${toolSteps.length !== 1 ? 's' : ''}` : '');
+    const summaryText = hasPolicyAlerts
+        ? `Blocked by policy \u00b7 ${policySteps.length} alert${policySteps.length !== 1 ? 's' : ''}`
+        : `${stepCount} step${stepCount !== 1 ? 's' : ''}`
+            + (toolSteps.length > 0 ? ` \u00b7 ${toolSteps.length} tool${toolSteps.length !== 1 ? 's' : ''}` : '');
 
     return (
-        <div className={`agent-activity ${variant} ${isActive ? 'active' : 'done'} ${hasErrors ? 'has-errors' : ''}`}>
+        <div className={`agent-activity ${variant} ${isActive ? 'active' : 'done'} ${hasErrors ? 'has-errors' : ''} ${hasPolicyAlerts ? 'has-policy-alerts' : ''}`}>
             {/* Summary bar */}
             <button
                 className="agent-summary-bar"
@@ -290,6 +299,9 @@ export function AgentActivity({ steps, isActive, variant = 'inline' }: AgentActi
                             if (step.type === 'error') {
                                 return <FlowError key={step.id} step={step} />;
                             }
+                            if (step.type === 'policy_alert') {
+                                return <FlowPolicyAlert key={step.id} step={step} />;
+                            }
                             return null;
                         })}
                     </div>
@@ -553,6 +565,41 @@ function FlowError({ step }: { step: AgentStep }) {
     );
 }
 
+function FlowPolicyAlert({ step }: { step: AgentStep }) {
+    return (
+        <div className="flow-policy-alert">
+            <div className="flow-policy-alert-header">
+                <ShieldAlert size={14} />
+                <span className="flow-policy-alert-title">Policy Shield</span>
+                <span className="flow-policy-alert-decision">{step.decision || 'BLOCK'}</span>
+            </div>
+            <div className="flow-policy-alert-body">
+                <div className="flow-policy-alert-line">
+                    <span>Tool</span>
+                    <code>{step.tool || 'unknown tool'}</code>
+                </div>
+                <div className="flow-policy-alert-reason">{step.reason || step.detail}</div>
+                {step.ruleIds && step.ruleIds.length > 0 && (
+                    <div className="flow-policy-alert-line">
+                        <span>Rules</span>
+                        <code>{step.ruleIds.join(', ')}</code>
+                    </div>
+                )}
+                {step.policyVersion && (
+                    <div className="flow-policy-alert-line">
+                        <span>Policy</span>
+                        <code>{step.policyVersion}</code>
+                    </div>
+                )}
+                <div className="flow-policy-alert-line">
+                    <span>Receipt</span>
+                    {step.receiptId ? <code>{step.receiptId}</code> : <em>Receipt unavailable</em>}
+                </div>
+            </div>
+        </div>
+    );
+}
+
 // ── Retrieval Chunks View ──────────────────────────────────────────────
 
 function ChunksView({ chunks }: { chunks: RetrievalChunk[] }) {

src/gaia/apps/webui/src/components/ChatView.css

@@ -968,6 +968,34 @@
     color: white;
 }
 
+/* ── Policy alert toast ─────────────────────────────────────────── */
+.policy-alert-toast {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border-color: rgba(245, 158, 11, 0.35);
+    pointer-events: all;
+    animation: toastIn 200ms var(--ease), toastOut 200ms var(--ease) 5s forwards;
+}
+
+.policy-alert-toast-link {
+    background: none;
+    border: 0;
+    color: var(--accent-yellow);
+    cursor: pointer;
+    font: inherit;
+    font-weight: 700;
+    padding: 0;
+    text-decoration: underline;
+    text-decoration-style: dotted;
+}
+
+.policy-alert-toast-missing {
+    color: var(--accent-yellow);
+    font-family: var(--font-mono);
+    font-size: 11px;
+}
+
 /* ── Responsive ──────────────────────────────────────────────────── */
 
 @media (max-width: 768px) {