@flamingo-stack/openframe-frontend-core 0.0.849 → 0.0.851

package/src/chat-protocol/policy-review.ts

@@ -0,0 +1,71 @@
+import type { PolicyReviewData, PolicyReviewRuleData } from '../components/chat/types/message.types';
+import type { ApprovalLevel } from '../types/permissions';
+import { isRecord } from './wire-narrow';
+
+const APPROVAL_LEVELS: ReadonlySet<string> = new Set<ApprovalLevel>(['ALLOW', 'ASK_USER', 'ASK_TECHNICIAN', 'DENY']);
+
+function text(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+}
+
+function level(value: unknown): ApprovalLevel | undefined {
+  return typeof value === 'string' && APPROVAL_LEVELS.has(value) ? (value as ApprovalLevel) : undefined;
+}
+
+function rules(raw: unknown): PolicyReviewRuleData[] {
+  if (!Array.isArray(raw)) return [];
+  return raw.filter(isRecord).flatMap(rule => {
+    const code = text(rule.code);
+    const label = text(rule.label) ?? code;
+    return label ? [{ code: code ?? label, label }] : [];
+  });
+}
+
+function codes(raw: unknown): string[] {
+  if (!Array.isArray(raw)) return [];
+  return raw.map(text).filter((code): code is string => !!code);
+}
+
+/** `{ policyReview }` when the wire carries one, else `{}`: the key is additive, so a row without a review keeps its
+ *  exact shape (history, the live stream and their golden corpora). */
+export function policyReviewField(raw: unknown): { policyReview?: PolicyReviewData } {
+  const policyReview = normalizePolicyReview(raw);
+  return policyReview ? { policyReview } : {};
+}
+
+/** The first review of the ones given, as an additive field (see {@link policyReviewField}). */
+export function keptPolicyReview(...reviews: Array<PolicyReviewData | undefined>): {
+  policyReview?: PolicyReviewData;
+} {
+  const policyReview = reviews.find(review => review !== undefined);
+  return policyReview ? { policyReview } : {};
+}
+
+/**
+ * The wire's `policyReview` (NATS chunk or history row) as the chat reads it, or `undefined` when there is none.
+ * Rules without a name and blank operation codes are dropped; an approval level this build does not know is dropped
+ * alone, not the review; a review with nothing left in it is `undefined`. `decision` and `source` stay open strings (the backend is folding the two deny kinds into
+ * one `DENY`).
+ */
+export function normalizePolicyReview(raw: unknown): PolicyReviewData | undefined {
+  if (!isRecord(raw)) return undefined;
+  const source = text(raw.source);
+  const decision = text(raw.decision);
+  const approvalLevel = level(raw.approvalLevel);
+  const policyLevel = level(raw.policyLevel);
+  const reason = text(raw.reason);
+  const operationCodes = codes(raw.operationCodes);
+  const matchedRules = rules(raw.matchedRules);
+  if (!decision && !approvalLevel && !policyLevel && !reason && !operationCodes.length && !matchedRules.length) {
+    return undefined;
+  }
+  return {
+    ...(source ? { source } : {}),
+    ...(decision ? { decision } : {}),
+    ...(approvalLevel ? { approvalLevel } : {}),
+    ...(policyLevel ? { policyLevel } : {}),
+    operationCodes,
+    matchedRules,
+    ...(reason ? { reason } : {}),
+  };
+}

package/src/components/chat/approval-batch-message.tsx

@@ -3,7 +3,7 @@
 import { forwardRef, useState } from 'react';
 import type { HTMLAttributes } from 'react';
 import { cn } from '../../utils/cn';
-import { CheckCircleIcon, DotsLoaderIcon, XmarkCircleIcon } from '../icons-v2-generated';
+import { AlertCircleIcon, CheckCircleIcon, DotsLoaderIcon, XmarkCircleIcon } from '../icons-v2-generated';
 import { MediaSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
 import type { ToolType } from '../platform';
 import { ToolIcon } from '../tool-icon';
@@ -13,6 +13,7 @@ import { StatusLine } from '../ui/status-line';
 import { CHAT_BLOCK_CLASS, CHAT_BLOCK_FRAME_CLASS } from './chat-block-frame';
 import { ExpandChevron } from './expand-chevron';
 import { useCollapsible } from './hooks/use-collapsible';
+import { PolicyEscalationAlert, PolicyReviewRows, hasPolicyReviewRows, isPolicyEscalated } from './policy-review';
 import { ArgRow, ResultBlock } from './tool-call-blocks';
 import type {
   ApprovalBlockVariant,
@@ -65,6 +66,11 @@ export interface ApprovalBatchMessageProps extends HTMLAttributes<HTMLDivElement
    * notification tile. Explanation bullets still render.
    */
   showFooterActions?: boolean;
+  /**
+   * Draw the "Mingo Escalated" band under each escalated command. Turn off when the host draws it itself — the
+   * approval notification tile shows it while its commands are folded away. Defaults to on.
+   */
+  showEscalationAlerts?: boolean;
 }
 
 const COMMAND_BODY_KEYS = new Set<string>(COMMAND_BODY_ARG_KEYS);
@@ -106,7 +112,7 @@ function getArgEntries(call: PendingToolCallData): Array<[string, unknown]> {
 
 /**
  * Status icon for one tool call inside an approved/done batch.
- *  - pending batch     → null (chevron-only row, no status icon)
+ *  - pending batch     → null (chevron-only row, no status icon); a warning circle when Mingo escalated the call
  *  - approved, no exec → DotsLoaderIcon (queued / waiting for backend)
  *  - executing         → DotsLoaderIcon
  *  - done + success    → green check
@@ -115,10 +121,15 @@ function getArgEntries(call: PendingToolCallData): Array<[string, unknown]> {
 function ExecutionStatusIcon({
   batchStatus,
   execution,
+  escalated,
 }: {
   batchStatus: ApprovalBatchSegment['status'];
   execution: ApprovalBatchExecutionState | undefined;
+  escalated: boolean;
 }) {
+  if (batchStatus === 'pending' && escalated)
+    // Decorative: the "Mingo Escalated" band under the row says it in words.
+    return <AlertCircleIcon className="h-4 w-4 text-ods-warning" aria-hidden />;
   if (batchStatus !== 'approved') return null;
   if (!execution || execution.status === 'executing')
     return <DotsLoaderIcon size={16} className="text-ods-text-secondary" />;
@@ -133,18 +144,30 @@ interface ToolCallRowProps {
   batchStatus: ApprovalBatchSegment['status'];
   execution: ApprovalBatchExecutionState | undefined;
   showExecutionStatus: boolean;
+  showEscalationAlert: boolean;
 }
 
 // ADMIN-only row: command preview header, expandable args/result. The client
 // variant never renders tool calls — see the `variant === 'client'` branch of
 // `<ApprovalBatchMessage>`.
-function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExecutionStatus }: ToolCallRowProps) {
+function ToolCallRow({
+  call,
+  expanded,
+  onToggle,
+  batchStatus,
+  execution,
+  showExecutionStatus,
+  showEscalationAlert,
+}: ToolCallRowProps) {
   const command = getCommandText(call);
   const args = getArgEntries(call);
   const toolType = (call.toolType as ToolType) || 'OPENFRAME';
   const { innerRef, containerStyle } = useCollapsible({ expanded });
   const result = execution?.status === 'done' ? execution.result : undefined;
-  const hasExpandableBody = args.length > 0 || (typeof result === 'string' && result.length > 0);
+  const review = call.policyReview;
+  const escalated = isPolicyEscalated(review);
+  const reviewRows = hasPolicyReviewRows(review);
+  const hasExpandableBody = args.length > 0 || reviewRows || (typeof result === 'string' && result.length > 0);
 
   return (
     <div className="flex w-full flex-col items-start border-b border-ods-border bg-ods-card last:border-b-0">
@@ -165,9 +188,10 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
         >
           {command}
         </div>
-        {showExecutionStatus && (
+        {/* The escalation mark is the review's, not the run's: it shows where the run status is off too. */}
+        {(showExecutionStatus || (batchStatus === 'pending' && escalated)) && (
           <div className="flex h-5 w-5 shrink-0 items-center justify-center">
-            <ExecutionStatusIcon batchStatus={batchStatus} execution={execution} />
+            <ExecutionStatusIcon batchStatus={batchStatus} execution={execution} escalated={escalated} />
           </div>
         )}
         <div className="flex h-5 w-5 shrink-0 items-center justify-center">
@@ -182,16 +206,25 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
               {args.map(([key, value]) => (
                 <ArgRow key={key} argKey={key} value={value} />
               ))}
+              {reviewRows && (
+                <PolicyReviewRows
+                  review={review}
+                  className={args.length > 0 ? 'mt-[var(--spacing-system-xsf)]' : undefined}
+                />
+              )}
               {result && (
                 <ResultBlock
                   result={result}
-                  className={args.length > 0 ? 'mt-[var(--spacing-system-xsf)]' : undefined}
+                  className={args.length > 0 || reviewRows ? 'mt-[var(--spacing-system-xsf)]' : undefined}
                 />
               )}
             </div>
           )}
         </div>
       </div>
+
+      {/* Outside the collapsible part: an escalation is read before anyone opens the command. */}
+      {showEscalationAlert && <PolicyEscalationAlert review={review} className="border-t border-ods-border" />}
     </div>
   );
 }
@@ -300,6 +333,7 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
       assistantType: _assistantType,
       variant = 'admin',
       showFooterActions = true,
+      showEscalationAlerts = true,
       ...props
     },
     ref,
@@ -323,6 +357,8 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
     }
 
     const explanations = data.toolCalls.map(c => c.toolExplanation?.trim()).filter((s): s is string => !!s);
+    // An approval Mingo escalated is approved in the warning colour (Figma 1374-105483), the admin view only.
+    const escalated = !isClient && data.toolCalls.some(c => isPolicyEscalated(c.policyReview));
 
     const handleApprove = async () => {
       setIsProcessing(true);
@@ -346,12 +382,12 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
       <>
         <Button
           size="small-legacy"
-          variant="accent"
+          variant={escalated ? 'warning' : 'accent'}
           onClick={handleApprove}
           disabled={isProcessing}
           className={cn(
-            'bg-ods-accent hover:bg-ods-accent/90',
-            'text-ods-bg text-h5',
+            !escalated && 'bg-ods-accent text-ods-bg hover:bg-ods-accent/90',
+            'text-h5',
             'h-8 px-[var(--spacing-system-xsf)]',
           )}
         >
@@ -430,6 +466,7 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
                 setExpandedId(prev => (prev === call.toolExecutionRequestId ? null : call.toolExecutionRequestId))
               }
               batchStatus={status}
+              showEscalationAlert={showEscalationAlerts}
               execution={data.executions?.[call.toolExecutionRequestId]}
               showExecutionStatus={showExecutionStatus}
             />

package/src/components/chat/policy-review.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { cn } from '../../utils/cn';
+import { APPROVAL_LEVEL_META } from '../features/approval-level';
+import { AlertTriangleIcon } from '../icons-v2-generated';
+import { Alert } from '../ui/alert';
+import { ArgRow } from './tool-call-blocks';
+import type { PolicyReviewData } from './types';
+
+/** The decisions in which a matched guardrail rule, not the policy, set the level (`DENY` and the two it replaces). */
+const RULE_DECISIONS: ReadonlySet<string> = new Set(['DENY', 'SOFT_DENY', 'HARD_DENY']);
+
+/**
+ * Whether Mingo escalated the call: a guardrail rule, not the policy, set its level. The decision says so; matched rules
+ * stand in only when a backend sends no decision. The one test behind the alert, the row's warning icon and the warning
+ * Approve.
+ */
+export function isPolicyEscalated(review: PolicyReviewData | undefined): boolean {
+  if (!review) return false;
+  return review.decision ? RULE_DECISIONS.has(review.decision) : review.matchedRules.length > 0;
+}
+
+/**
+ * The policy's level as the settings page names it. A call no rule of the policy matched gets the fallback, which the
+ * settings call "Unmatched Actions".
+ */
+function policyLevelText(review: PolicyReviewData): string | undefined {
+  // The level in force is the policy's only when no rule raised it.
+  const level = review.policyLevel ?? (isPolicyEscalated(review) ? undefined : review.approvalLevel);
+  if (!level) return undefined;
+  const label = APPROVAL_LEVEL_META[level].label;
+  return review.decision === 'FALLBACK' ? `${label} (Unmatched Actions)` : label;
+}
+
+/** Whether {@link PolicyReviewRows} draws anything: a body opens only onto rows it has. */
+export function hasPolicyReviewRows(review: PolicyReviewData | undefined): review is PolicyReviewData {
+  return !!review && (!!policyLevelText(review) || review.operationCodes.length > 0);
+}
+
+/**
+ * The review in the command's body, under its arguments (Figma 1374-105458): the policy's level and the operations the
+ * review saw, as `key: value` rows like the arguments above them. The matched rules are the policy's own, so they get
+ * no row of their own; an escalation says why in its band.
+ */
+export function PolicyReviewRows({ review, className }: { review: PolicyReviewData; className?: string }) {
+  const level = policyLevelText(review);
+  if (!hasPolicyReviewRows(review)) return null;
+  return (
+    // A plain block: the rows stack on their own, and a nested flex column costs WebKit a layout pass (WEBVIEW-001).
+    <div className={cn('w-full', className)}>
+      {level && <ArgRow argKey="Guardrail Policy" value={level} />}
+      {review.operationCodes.length > 0 && <ArgRow argKey="Operations" value={review.operationCodes.join(', ')} />}
+    </div>
+  );
+}
+
+/**
+ * "Mingo Escalated": the band under an escalated command, with the review's reason (Figma 1374-105482). Draws nothing
+ * for a call that was not escalated. Without a reason it names the rules instead.
+ */
+export function PolicyEscalationAlert({
+  review,
+  className,
+}: {
+  review: PolicyReviewData | undefined;
+  className?: string;
+}) {
+  if (!review || !isPolicyEscalated(review)) return null;
+  const description = review.reason ?? review.matchedRules.map(rule => rule.label).join(', ');
+  return (
+    // A note, not an `alert`: it is part of the thread, read in place, and a live region would interrupt the reader
+    // for every escalated call on each replay of the history.
+    <Alert
+      role="note"
+      variant="warning"
+      className={cn(
+        'flex items-center gap-[var(--spacing-system-m)] rounded-none border-0 p-[var(--spacing-system-m)]',
+        className,
+      )}
+    >
+      <span className="flex shrink-0" aria-hidden>
+        <AlertTriangleIcon size={20} />
+      </span>
+      <div className="grid min-w-0 flex-1 grid-cols-1 gap-[var(--spacing-system-xxs)]">
+        <p className="break-words text-h3">Mingo Escalated</p>
+        {description && <p className="break-words text-h6">{description}</p>}
+      </div>
+    </Alert>
+  );
+}

package/src/components/chat/stream/message-mutations.ts

@@ -15,6 +15,7 @@
  * Framework-free: no React, no timers.
  */
 
+import { keptPolicyReview } from '../../../chat-protocol/policy-review';
 import type {
   ApprovalBatchExecutionState,
   ChatApprovalStatus,
@@ -381,6 +382,7 @@ function sameToolData(a: ToolExecutionData, b: ToolExecutionData): boolean {
     a.integratedToolType === b.integratedToolType &&
     a.toolFunction === b.toolFunction &&
     a.toolTitle === b.toolTitle &&
+    (a.policyReview === b.policyReview || JSON.stringify(a.policyReview) === JSON.stringify(b.policyReview)) &&
     a.result === b.result &&
     a.success === b.success &&
     a.toolExecutionRequestId === b.toolExecutionRequestId &&
@@ -479,6 +481,8 @@ export function mergeToolExecutionIfPresent(
         const mergedData: ToolExecutionData = {
           ...toolData,
           toolTitle: toolData.toolTitle ?? seg.data.toolTitle,
+          // The review rides the EXECUTING chunk only: the EXECUTED one keeps it.
+          ...keptPolicyReview(toolData.policyReview, seg.data.policyReview),
           parameters: toolData.parameters || seg.data.parameters,
         };
         // Value-level no-op (replayed duplicate) → prior references.

package/src/components/chat/tool-execution-display.tsx

@@ -11,6 +11,7 @@ import { StatusLine, type StatusLineTone } from '../ui/status-line';
 import { CHAT_BLOCK_FRAME_CLASS } from './chat-block-frame';
 import { ExpandChevron } from './expand-chevron';
 import { useCollapsible } from './hooks/use-collapsible';
+import { PolicyEscalationAlert, PolicyReviewRows, hasPolicyReviewRows, isPolicyEscalated } from './policy-review';
 import { ArgRow, ResultBlock } from './tool-call-blocks';
 import type { ToolExecutionDisplayProps } from './types';
 import { COMMAND_BODY_ARG_KEYS } from './utils/tool-call-helpers';
@@ -56,6 +57,9 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
     }, [message.parameters, variant]);
 
     const hasResult = isExecuted && typeof message.result === 'string' && message.result.length > 0;
+    // Admin-only detail, like the command: the end-client card is the static row below, which draws no body.
+    const review = message.policyReview;
+    const reviewRows = hasPolicyReviewRows(review);
 
     // A remote (MCP) read-only tool deliberately publishes NO parameters and NO
     // result — the backend hides both, and sends a human title instead. There is
@@ -67,9 +71,15 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
     // remote rather than one of ours — and guarded on there being a title to
     // show, so a title-less row keeps the old behaviour rather than collapsing
     // to a blank line.
-    const isConciseRemoteRead = !message.integratedToolType && !!previewText && argEntries.length === 0 && !hasResult;
+    const isConciseRemoteRead =
+      !message.integratedToolType &&
+      !!previewText &&
+      argEntries.length === 0 &&
+      !hasResult &&
+      !reviewRows &&
+      !isPolicyEscalated(review);
     const isStaticRow = isClientView || isConciseRemoteRead;
-    const hasBody = argEntries.length > 0 || hasResult || isExecuting;
+    const hasBody = argEntries.length > 0 || reviewRows || hasResult || isExecuting;
     // A run with no arguments and no result has nothing behind a chevron either:
     // its header stays, with no chevron and no click target, so the row never
     // opens onto an empty box. (A run still executing has a body: its live
@@ -166,17 +176,23 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
                     {argEntries.map(([key, value]) => (
                       <ArgRow key={key} argKey={key} value={value} />
                     ))}
+                    {reviewRows && (
+                      <PolicyReviewRows
+                        review={review}
+                        className={argEntries.length > 0 ? 'mt-[var(--spacing-system-xsf)]' : undefined}
+                      />
+                    )}
                     {hasResult && (
                       <ResultBlock
                         result={message.result}
-                        className={argEntries.length > 0 ? 'mt-[var(--spacing-system-xsf)]' : undefined}
+                        className={argEntries.length > 0 || reviewRows ? 'mt-[var(--spacing-system-xsf)]' : undefined}
                       />
                     )}
                     {isExecuting && (
                       <div
                         className={cn(
                           'flex w-full flex-col items-start gap-[var(--spacing-system-xxs)]',
-                          argEntries.length > 0 && 'mt-[var(--spacing-system-xsf)]',
+                          (argEntries.length > 0 || reviewRows) && 'mt-[var(--spacing-system-xsf)]',
                         )}
                       >
                         <span className="text-ods-text-secondary">Result:</span>
@@ -187,6 +203,9 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
                 )}
               </div>
             </div>
+
+            {/* A run Mingo escalated (approved, then run) keeps saying so, outside the collapsible part. */}
+            <PolicyEscalationAlert review={review} className="border-t border-ods-border" />
           </>
         )}
       </div>

package/src/components/chat/types/message.types.ts

@@ -3,6 +3,7 @@
  * Contains all message structures, segments, and content types
  */
 
+import type { ApprovalLevel } from '../../../types/permissions';
 import type { ChatRef } from '../chat-ref.types';
 import type { QuickActionIconSpec } from '../quick-action-chip';
 import type { AssistantType, AuthorType, ChatApprovalStatus, MessageOwner } from './chat.types';
@@ -55,6 +56,36 @@ export const SCROLL_ANCHOR = { TOP: 'top', BOTTOM: 'bottom' } as const;
 
 export type ScrollAnchor = (typeof SCROLL_ANCHOR)[keyof typeof SCROLL_ANCHOR];
 
+// ========== Policy Review Types ==========
+
+/** One guardrail rule the command review matched (ai-agent `PolicyReviewRule`). */
+export interface PolicyReviewRuleData {
+  code: string;
+  /** The rule's name when it matched; the history keeps the name it had then. */
+  label: string;
+}
+
+/**
+ * Why the security policy gave a tool call its approval level (ai-agent `PolicyReview`). Sent only while
+ * the semantic guardrail is on, on approval tool calls and on `EXECUTING_TOOL`. Enum values stay open
+ * strings: the backend is narrowing `decision` (`SOFT_DENY` / `HARD_DENY` become `DENY`), and a value
+ * this build does not know must not drop the review. Normalized by `chat-protocol/policy-review`.
+ */
+export interface PolicyReviewData {
+  /** `CLASSIFIER` (the AI review) or `REGEX`. */
+  source?: string;
+  /** `POLICY`, `FALLBACK` (no rule of the policy matched), or a deny by a matched guardrail rule. */
+  decision?: string;
+  /** The level in force for this call. */
+  approvalLevel?: ApprovalLevel;
+  /** The level the organization's policy sets; differs from `approvalLevel` when a rule raised it. */
+  policyLevel?: ApprovalLevel;
+  operationCodes: string[];
+  matchedRules: PolicyReviewRuleData[];
+  /** The review's one-line reason; absent from a regex review. */
+  reason?: string;
+}
+
 // ========== Tool Execution Types ==========
 
 export interface ToolExecutionData {
@@ -69,6 +100,9 @@ export interface ToolExecutionData {
    * the accumulator restores it onto the merged `EXECUTED_TOOL` segment.
    */
   toolExplanation?: string;
+  /** The security policy's review of this call. Only sent on `EXECUTING_TOOL`, restored onto `EXECUTED_TOOL` like
+   *  `toolExplanation`. */
+  policyReview?: PolicyReviewData;
   parameters?: Record<string, unknown>;
   result?: string;
   success?: boolean;
@@ -100,6 +134,8 @@ export interface ExecutingToolState {
   toolTitle?: string;
   /** Mirrors {@link ToolExecutionData.toolExplanation}; absent on `EXECUTED_TOOL`. */
   toolExplanation?: string;
+  /** Mirrors {@link ToolExecutionData.policyReview}; absent on `EXECUTED_TOOL`. */
+  policyReview?: PolicyReviewData;
   parameters?: Record<string, unknown>;
 }
 
@@ -211,6 +247,8 @@ export interface PendingToolCallData {
   requiresApproval: boolean;
   approvalType?: string | null;
   toolCallArguments?: Record<string, unknown> | null;
+  /** Why the policy gave this call its approval level; absent while the semantic guardrail is off. */
+  policyReview?: PolicyReviewData;
 }
 
 /**
@@ -517,6 +555,8 @@ export interface ExecutingToolMessageData extends MessageDataBase {
   title?: string;
   /** Backend-issued human-readable explanation (what/why) of the tool call. */
   toolExplanation?: string;
+  /** WIRE shape of the policy review: normalized by `normalizePolicyReview` on the way in. */
+  policyReview?: unknown;
   parameters?: Record<string, unknown>;
   toolExecutionRequestId?: string;
 }
@@ -539,8 +579,8 @@ export interface ApprovalRequestMessageData extends MessageDataBase {
   approvalType?: string;
   command?: string;
   explanation?: string;
-  /** Present when the approval is a batch of tool calls (new format). */
-  toolCalls?: PendingToolCallData[];
+  /** Present when the approval is a batch of tool calls (new format). WIRE shape: the review is normalized on replay. */
+  toolCalls?: Array<Omit<PendingToolCallData, 'policyReview'> & { policyReview?: unknown }>;
 }
 
 export interface ApprovalResultMessageData extends MessageDataBase {

package/src/components/chat/utils/extract-incomplete-message-state.ts

@@ -3,6 +3,7 @@
  * Used to continue building messages across realtime connections
  */
 
+import { keptPolicyReview } from '../../../chat-protocol/policy-review';
 import type { InitializeExtras } from '../stream/chat-stream-reducer';
 import type { ProcessedMessage, MessageSegment, PendingApproval, ExecutingToolState } from '../types';
 
@@ -51,6 +52,7 @@ export function extractIncompleteMessageState(
             toolFunction: segment.data.toolFunction,
             toolTitle: segment.data.toolTitle,
             toolExplanation: segment.data.toolExplanation,
+            ...keptPolicyReview(segment.data.policyReview),
             parameters: segment.data.parameters,
           });
           hasIncompleteState = true;

package/src/components/chat/utils/message-segment-accumulator.ts

@@ -8,6 +8,7 @@
  * - Creating approval segments when results arrive
  */
 
+import { keptPolicyReview } from '../../../chat-protocol/policy-review';
 import { applyApprovalStatusToSegment, nextBatchExecution, withBatchExecution } from '../stream/message-mutations';
 import type {
   AskOptionData,
@@ -197,6 +198,7 @@ export class MessageSegmentAccumulator {
         toolFunction: toolData.toolFunction,
         toolTitle: toolData.toolTitle,
         toolExplanation: toolData.toolExplanation,
+        ...keptPolicyReview(toolData.policyReview),
         parameters: toolData.parameters,
       });
       this.segments.push(segment);
@@ -225,6 +227,7 @@ export class MessageSegmentAccumulator {
           toolTitle: toolData.toolTitle ?? existingExecuting?.data.toolTitle ?? executingTool?.toolTitle,
           toolExplanation:
             toolData.toolExplanation ?? existingExecuting?.data.toolExplanation ?? executingTool?.toolExplanation,
+          ...keptPolicyReview(toolData.policyReview, existingExecuting?.data.policyReview, executingTool?.policyReview),
           parameters: toolData.parameters || executingTool?.parameters,
         },
       };

package/src/components/chat/utils/process-historical-messages.ts

@@ -34,6 +34,8 @@ import {
 // One normalizer for ask rows, shared with the live decoder — history and the
 // stream must agree on which options are usable.
 import { normalizeAskOptions } from '../../../chat-protocol/nats-decoder';
+// The same review normalizer as the live decoder, for the same reason.
+import { policyReviewField } from '../../../chat-protocol/policy-review';
 import {
   attachmentsEvent,
   mergeSourceMetadata,
@@ -57,6 +59,14 @@ import { approvalDisplaysInline } from './approval-display';
 import { type MessageSegmentAccumulator, createMessageSegmentAccumulator } from './message-segment-accumulator';
 import { getCommandText } from './tool-call-helpers';
 
+/** A history tool call with its wire `policyReview` normalized (or dropped), as the live decoder does it. */
+function withNormalizedReview(
+  call: Omit<PendingToolCallData, 'policyReview'> & { policyReview?: unknown },
+): PendingToolCallData {
+  const { policyReview: raw, ...rest } = call;
+  return { ...rest, ...policyReviewField(raw) };
+}
+
 function getOwnerDisplayName(owner?: MessageOwner): string {
   if (owner?.type === OWNER_TYPE.ADMIN && owner.user) {
     const { firstName, lastName } = owner.user;
@@ -106,8 +116,8 @@ function pushStandaloneMessages(
  *     the resolver's name as `displayName`);
  *   - `approvalType` defaults to 'CLIENT' (legacy history parity;
  *     realtime defaults APPROVAL_REQUEST to 'USER');
- *   - batch `toolCalls` pass through verbatim (already the persisted
- *     `PendingToolCallData` shape — no normalization pass).
+ *   - batch `toolCalls` pass through as persisted, except `policyReview`,
+ *     normalized as the live decoder does it.
  *
  * Returns `null` for rows the assistant-turn path doesn't decode (SYSTEM
  * is handled by the envelope's standalone path; user TEXT rows are handled
@@ -166,6 +176,7 @@ export function decodeHistoricalMessageData(data: MessageData): ChatStreamEvent
             // EXECUTING chunk only, so a history replay that drops it renders
             // an empty tool card even though the live stream showed one.
             toolExplanation: typeof data.toolExplanation === 'string' ? data.toolExplanation : undefined,
+            ...policyReviewField(data.policyReview),
             parameters: data.parameters,
             toolExecutionRequestId: data.toolExecutionRequestId,
           },
@@ -199,7 +210,7 @@ export function decodeHistoricalMessageData(data: MessageData): ChatStreamEvent
           approvalType: data.approvalType || 'CLIENT',
           command: data.command || '',
           explanation: data.explanation,
-          ...(Array.isArray(data.toolCalls) ? { toolCalls: data.toolCalls } : {}),
+          ...(Array.isArray(data.toolCalls) ? { toolCalls: data.toolCalls.map(withNormalizedReview) } : {}),
         };
       }
       return null;

package/src/components/embeds/embed-viewer-frame.tsx

@@ -72,6 +72,9 @@ export interface EmbedViewerFrameProps {
   loadingActionCount?: number;
 }
 
+/** The header's loading form draws one button by default: most viewers have one action (the PDF viewer passes two). */
+export const EMBED_VIEWER_SKELETON_ACTIONS = 1;
+
 export function EmbedViewerFrame({
   icon,
   title,
@@ -89,7 +92,7 @@ export function EmbedViewerFrame({
   sandbox,
   className,
   fullscreenControl,
-  loadingActionCount = 1,
+  loadingActionCount = EMBED_VIEWER_SKELETON_ACTIONS,
 }: EmbedViewerFrameProps) {
   // ONE switch for the whole frame (header included): a page's loading scope, or the standard `loading` prop. The body
   // alone also waits while the viewer resolves where its frame points.
@@ -157,7 +160,12 @@ export function EmbedViewerFrame({
           <div className="flex w-full items-center gap-2 content-sm:w-auto">
             {Array.from({ length: loadingActionCount }, (_, i) => (
               // biome-ignore lint/suspicious/noArrayIndexKey: loading buttons never reorder
-              <InteractiveSkeleton.Button key={i} size="small-legacy" className="flex-1 content-sm:flex-initial" />
+              <InteractiveSkeleton.Button
+                key={i}
+                data-loading-item
+                size="small-legacy"
+                className="flex-1 content-sm:flex-initial"
+              />
             ))}
           </div>
         ) : fullscreenControl && src ? (

package/src/components/embeds/pdf-viewer.tsx

@@ -16,6 +16,9 @@ export interface PdfViewerProps {
   loading?: boolean;
 }
 
+/** The header's loading form: Preview and Download, the viewer's two actions. */
+const PDF_VIEWER_SKELETON_ACTIONS = 2;
+
 export function PdfViewer({ src, fileName, onPreview, onDownload, height, loading = false }: PdfViewerProps) {
   const displayName = fileName || 'PDF Document';
   // In a loading scope the document is being read: the frame draws its loading form, never "not available".
@@ -62,7 +65,7 @@ export function PdfViewer({ src, fileName, onPreview, onDownload, height, loadin
         </div>
       }
       src={src}
-      loadingActionCount={2}
+      loadingActionCount={PDF_VIEWER_SKELETON_ACTIONS}
       loading={loading}
       height={height}
     />