@flamingo-stack/openframe-frontend-core 0.0.172 → 0.0.173

package/src/components/chat/hooks/use-delayed-flag.ts

@@ -0,0 +1,56 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+
+interface UseDelayedFlagOptions {
+  /** Wait this long before flipping the returned flag to `true`. Default 200ms. */
+  delay?: number
+  /**
+   * Once the flag has gone `true`, hold it for at least this long even if
+   * the source signal flips back to `false` sooner. Prevents a sub-frame
+   * flash when the operation finishes right after the loader appeared.
+   * Default 400ms.
+   */
+  minDuration?: number
+}
+
+/**
+ * Debounce + min-hold gate for transient boolean flags (most useful for
+ * loading indicators).
+ *
+ *  - source `true`  → wait `delay` ms; if still true, flip output to `true`
+ *  - source `false` → if output is `true`, hold for `minDuration - elapsed`
+ *    ms before flipping back; otherwise flip immediately
+ *
+ * The net effect: fast operations never trigger the indicator, and slow
+ * ones always show it for long enough to avoid a flicker.
+ */
+export function useDelayedFlag(
+  source: boolean,
+  { delay = 200, minDuration = 400 }: UseDelayedFlagOptions = {},
+): boolean {
+  const [active, setActive] = useState(false)
+  const activatedAtRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    if (source) {
+      if (active) return
+      const timer = window.setTimeout(() => {
+        activatedAtRef.current = Date.now()
+        setActive(true)
+      }, delay)
+      return () => window.clearTimeout(timer)
+    }
+
+    if (!active) return
+    const elapsed = activatedAtRef.current ? Date.now() - activatedAtRef.current : minDuration
+    const remaining = Math.max(0, minDuration - elapsed)
+    const timer = window.setTimeout(() => {
+      activatedAtRef.current = null
+      setActive(false)
+    }, remaining)
+    return () => window.clearTimeout(timer)
+  }, [source, active, delay, minDuration])
+
+  return active
+}

package/src/components/chat/hooks/use-realtime-chunk-processor.ts

@@ -12,7 +12,8 @@ import {
   createMessageSegmentAccumulator,
 } from '../utils/message-segment-accumulator'
 import { MESSAGE_TYPE } from '../types'
-import type { UseRealtimeChunkProcessorReturn, UseRealtimeChunkProcessorOptions, ChatApprovalStatus } from '../types'
+import type { UseRealtimeChunkProcessorReturn, UseRealtimeChunkProcessorOptions, ChatApprovalStatus, PendingToolCallData } from '../types'
+import { getCommandText } from '../utils/tool-call-helpers'
 
 /**
  * Hook for processing real-time NATS chunks into message segments
@@ -20,7 +21,17 @@ import type { UseRealtimeChunkProcessorReturn, UseRealtimeChunkProcessorOptions,
 export function useRealtimeChunkProcessor(
   options: UseRealtimeChunkProcessorOptions
 ): UseRealtimeChunkProcessorReturn {
-  const { callbacks, displayApprovalTypes = ['CLIENT'], approvalStatuses = {}, initialState, enableThinking = false } = options
+  const {
+    callbacks,
+    displayApprovalTypes = ['CLIENT'],
+    approvalStatuses = {},
+    initialState,
+    enableThinking = false,
+    // Owned by the consumer (e.g. oss-tenant chat client / openframe-frontend
+    // tickets view). Default ON so consumers that haven't wired the flag yet
+    // get the new batch UI; pass `false` explicitly to fall back to legacy.
+    batchApprovalsEnabled = true,
+  } = options
 
   const accumulatorRef = useRef<MessageSegmentAccumulator>(
     createMessageSegmentAccumulator({
@@ -50,10 +61,10 @@ export function useRealtimeChunkProcessor(
 
   const isInStreamRef = useRef(false)
 
-  // Track pending escalated approvals
-  const pendingEscalatedRef = useRef<Map<string, { command: string; explanation?: string; approvalType: string }>>(
-    new Map()
-  )
+  // Track pending escalated approvals (single or batch)
+  const pendingEscalatedRef = useRef<
+    Map<string, { command: string; explanation?: string; approvalType: string; toolCalls?: PendingToolCallData[] }>
+  >(new Map())
 
   const processChunk = useCallback(
     (chunk: unknown) => {
@@ -128,28 +139,106 @@ export function useRealtimeChunkProcessor(
           break
         }
 
+        case 'approval_batch': {
+          const { requestId, approvalType, toolCalls } = action
+          const status = (approvalStatuses[requestId] || 'pending') as ChatApprovalStatus
+
+          if (!displayApprovalTypes.includes(approvalType)) {
+            // Escalated: keep batch context locally for replay on result; surface a
+            // summary command via the legacy escalation callback.
+            const required = toolCalls.find((c) => c.requiresApproval) ?? toolCalls[0]
+            const summary = required ? getCommandText(required) : `Batch of ${toolCalls.length} tool calls`
+            pendingEscalatedRef.current.set(requestId, {
+              command: summary,
+              explanation: required?.toolExplanation,
+              approvalType,
+              toolCalls,
+            })
+            callbacks.onEscalatedApproval?.(requestId, {
+              command: summary,
+              explanation: required?.toolExplanation,
+              approvalType,
+            })
+            break
+          }
+
+          if (batchApprovalsEnabled) {
+            const segments = accumulator.addApprovalBatch(requestId, approvalType, toolCalls, status)
+            callbacks.onSegmentsUpdate?.(segments)
+            break
+          }
+
+          // Flag OFF — unfold batch into N legacy approval cards. They share
+          // `requestId`, so a click on any will approve the whole batch via a
+          // single backend call, and the resulting APPROVAL_RESULT chunk will
+          // flip status on every matching segment (see updateApprovalStatus).
+          let segments = accumulator.getSegments()
+          for (const call of toolCalls) {
+            if (!call.requiresApproval) continue
+            segments = accumulator.addApprovalRequest(
+              requestId,
+              getCommandText(call),
+              call.toolExplanation,
+              approvalType,
+              status,
+            )
+          }
+          callbacks.onSegmentsUpdate?.(segments)
+          break
+        }
+
         case 'approval_result': {
           const { requestId, approved, approvalType } = action
           const escalatedData = pendingEscalatedRef.current.get(requestId)
+          const status: ChatApprovalStatus = approved ? 'approved' : 'rejected'
+
           if (escalatedData) {
             pendingEscalatedRef.current.delete(requestId)
-            callbacks.onEscalatedApprovalResult?.(requestId, approved, escalatedData)
-
-            const segments = accumulator.addApprovalRequest(
-              requestId,
-              escalatedData.command,
-              escalatedData.explanation,
-              escalatedData.approvalType,
-              approved ? 'approved' : 'rejected'
-            )
-            callbacks.onSegmentsUpdate?.(segments)
+            callbacks.onEscalatedApprovalResult?.(requestId, approved, {
+              command: escalatedData.command,
+              explanation: escalatedData.explanation,
+              approvalType: escalatedData.approvalType,
+            })
+
+            if (escalatedData.toolCalls && escalatedData.toolCalls.length > 0) {
+              if (batchApprovalsEnabled) {
+                const segments = accumulator.addApprovalBatch(
+                  requestId,
+                  escalatedData.approvalType,
+                  escalatedData.toolCalls,
+                  status,
+                )
+                callbacks.onSegmentsUpdate?.(segments)
+              } else {
+                let segments = accumulator.getSegments()
+                for (const call of escalatedData.toolCalls) {
+                  if (!call.requiresApproval) continue
+                  segments = accumulator.addApprovalRequest(
+                    requestId,
+                    getCommandText(call),
+                    call.toolExplanation,
+                    escalatedData.approvalType,
+                    status,
+                  )
+                }
+                callbacks.onSegmentsUpdate?.(segments)
+              }
+            } else {
+              const segments = accumulator.addApprovalRequest(
+                requestId,
+                escalatedData.command,
+                escalatedData.explanation,
+                escalatedData.approvalType,
+                status,
+              )
+              callbacks.onSegmentsUpdate?.(segments)
+            }
           } else {
-            const segments = accumulator.updateApprovalStatus(
-              requestId,
-              approved ? 'approved' : 'rejected'
-            )
+            const segments = accumulator.updateApprovalStatus(requestId, status)
             callbacks.onSegmentsUpdate?.(segments)
           }
+          // approvalType from the result is informational; not consumed downstream yet.
+          void approvalType
           break
         }
 

package/src/components/chat/index.ts

@@ -2,6 +2,7 @@
 
 // Chat components exports
 export * from './approval-request-message'
+export * from './approval-batch-message'
 export * from './context-compaction-display'
 export * from './expand-chevron'
 export * from './thinking-display'
@@ -11,11 +12,13 @@ export * from './chat-input'
 export * from './slash-command-suggestions'
 export * from './chat-message-enhanced'
 export * from './chat-message-list'
+export * from './chat-message-loader'
 export * from './chat-quick-action'
 export * from './chat-ticket-item'
 export * from './chat-ticket-list'
 export * from './chat-typing-indicator'
 export * from './tool-execution-display'
+export * from './tool-call-blocks'
 export * from './model-display'
 export * from './chat-sidebar'
 export type { ChatRef } from './chat-ref.types'

package/src/components/chat/thinking-display.tsx

@@ -4,21 +4,75 @@ import { forwardRef, useState } from "react"
 
 import { cn } from "../../utils/cn"
 import { PulseDots } from "../ui/pulse-dots"
+import { SimpleMarkdownRenderer } from "../ui/simple-markdown-renderer"
 import { ExpandChevron } from "./expand-chevron"
 import { useCollapsible } from "./hooks/use-collapsible"
 import type { ThinkingDisplayProps } from "./types"
 
+// Tame SimpleMarkdownRenderer for the muted "thought" aesthetic:
+//  - all text in secondary tone with small size
+//  - bold pops back to primary so emphasis still reads
+//  - tighter paragraph/list/heading spacing (renderer ships with mt-8 mb-4)
+//  - flatter horizontal rules
+//  - inline-code visually quieter inside thoughts
+//  - fenced code blocks (`.code-block-container`) lose the renderer's `my-6`
+//    and inner `p-4` so they sit flush with surrounding paragraphs
+const thoughtMdClasses = [
+  // Body & lists — muted grey, never white.
+  "[&_p]:!text-sm [&_p]:!text-ods-text-secondary [&_p]:!leading-snug [&_p]:!my-2 [&_p:first-child]:!mt-0 [&_p:last-child]:!mb-0",
+  "[&_li]:!text-sm [&_li]:!text-ods-text-secondary [&_li]:!leading-snug",
+  "[&_ul]:!my-2 [&_ol]:!my-2 [&_ul]:!pl-5 [&_ol]:!pl-5",
+  // Inline emphasis stays grey too. Bold pops via weight (no color shift),
+  // italic via slant — neither is allowed to brighten into white.
+  "[&_strong]:!text-ods-text-secondary [&_strong]:!font-semibold",
+  "[&_em]:!text-ods-text-secondary",
+  // Headings — SimpleMarkdownRenderer paints them `text-ods-text-primary`
+  // by default. Override every level back to secondary grey so headings
+  // don't suddenly turn white inside a thought block.
+  "[&_h1]:!text-sm [&_h1]:!text-ods-text-secondary [&_h1]:!font-semibold [&_h1]:!mt-3 [&_h1]:!mb-1 [&_h1]:!pb-0 [&_h1]:!border-0",
+  "[&_h2]:!text-sm [&_h2]:!text-ods-text-secondary [&_h2]:!font-semibold [&_h2]:!mt-3 [&_h2]:!mb-1 [&_h2]:!pb-0 [&_h2]:!border-0",
+  "[&_h3]:!text-sm [&_h3]:!text-ods-text-secondary [&_h3]:!font-semibold [&_h3]:!mt-3 [&_h3]:!mb-1",
+  "[&_h4]:!text-sm [&_h4]:!text-ods-text-secondary [&_h4]:!font-semibold [&_h4]:!mt-2 [&_h4]:!mb-1",
+  "[&_h5]:!text-sm [&_h5]:!text-ods-text-secondary [&_h5]:!font-semibold [&_h5]:!mt-2 [&_h5]:!mb-1",
+  "[&_h6]:!text-sm [&_h6]:!text-ods-text-secondary [&_h6]:!font-semibold [&_h6]:!mt-2 [&_h6]:!mb-1",
+  // Rules
+  "[&_hr]:!my-3 [&_hr]:!border-ods-border [&_hr]:!opacity-40",
+  // Inline code — Cursor-style chip: no border, background a notch
+  // LIGHTER than the surrounding thought card (`bg-ods-border` is the
+  // brightest neutral grey in the palette and sits above `bg-ods-card`),
+  // small rounded corners, tight padding. Reads as a clearly raised token
+  // without the loud bordered chip of the default renderer.
+  "[&_code]:!text-[12px] [&_code]:!text-ods-text-secondary",
+  "[&_code]:!border-0 [&_code]:!bg-ods-border [&_code]:!rounded",
+  "[&_code]:!px-1.5 [&_code]:!py-0.5",
+  "[&_.code-block-container]:!my-2",
+  "[&_.code-block-container_.code-header]:!py-1 [&_.code-block-container_.code-header]:!px-3",
+  "[&_.code-block-container_>div:last-child]:!p-3",
+].join(" ")
+
 const ThinkingDisplay = forwardRef<HTMLDivElement, ThinkingDisplayProps>(
   ({ className, text, isStreaming = false, ...props }, ref) => {
     const [expanded, setExpanded] = useState(false)
+    // 26px ≈ one line of `text-sm leading-snug` (~19px) + space for the
+    // bordered/padded `<code>` badges that markdown renders inline. With
+    // exact 1lh the bottom of those badges gets clipped.
     const { innerRef, isOverflowing, containerStyle } = useCollapsible({
       expanded,
-      collapsedHeight: "1lh",
+      collapsedHeight: 19,
       disableTransition: isStreaming,
     })
     const label = isStreaming ? "Thinking" : "Thought"
     const canToggle = isOverflowing || expanded
 
+    const toggle = () => canToggle && setExpanded(!expanded)
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (!canToggle) return
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault()
+        setExpanded(!expanded)
+      }
+    }
+
     return (
       <div
         ref={ref}
@@ -28,29 +82,39 @@ const ThinkingDisplay = forwardRef<HTMLDivElement, ThinkingDisplayProps>(
         )}
         {...props}
       >
-        <button
-          type="button"
+        <div
+          role="button"
+          tabIndex={canToggle ? 0 : -1}
+          aria-expanded={expanded}
+          onClick={toggle}
+          onKeyDown={handleKeyDown}
           className={cn(
             "w-full flex items-start gap-3 text-left",
             canToggle ? "cursor-pointer" : "cursor-default"
           )}
-          onClick={() => canToggle && setExpanded(!expanded)}
         >
-          <div className="flex items-center gap-1 shrink-0 pt-0.5">
-            <span className="text-sm font-medium text-ods-text-secondary">
-              {label}
+          <div className="flex items-center gap-1 shrink-0 h-[19px]">
+            <span className="text-sm font-medium leading-snug text-ods-text-secondary">
+              {label}:
             </span>
             {isStreaming && <PulseDots size="sm" />}
           </div>
 
-          <div className="flex-1 min-w-0 pt-0.5" style={containerStyle}>
-            <div ref={innerRef} className="text-sm text-ods-text-secondary whitespace-pre-wrap">
-              {text}
+          <div className="flex-1 min-w-0" style={containerStyle}>
+            <div
+              ref={innerRef}
+              className={cn("text-sm leading-snug text-ods-text-secondary", thoughtMdClasses)}
+            >
+              <SimpleMarkdownRenderer content={text} textSize="compact" />
             </div>
           </div>
 
-          {canToggle && <ExpandChevron expanded={expanded} className="mt-1" />}
-        </button>
+          {canToggle && (
+            <div className="h-[19px] flex items-center shrink-0">
+              <ExpandChevron expanded={expanded} />
+            </div>
+          )}
+        </div>
       </div>
     )
   }

package/src/components/chat/tool-call-blocks.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { cn } from "../../utils/cn"
+import { formatToolArgValue, formatToolResult } from "./utils/tool-call-helpers"
+
+/**
+ * Single arg row: inline `key: value` or labeled `<pre>` block.
+ * Shared between ApprovalBatchMessage and ToolExecutionDisplay so both
+ * surfaces render long script bodies / JSON the same way.
+ */
+export function ArgRow({ argKey, value }: { argKey: string; value: unknown }) {
+  const formatted = formatToolArgValue(value)
+
+  if (formatted.kind === "inline") {
+    return (
+      <div className="flex gap-1 items-start w-full">
+        <span className="shrink-0 text-ods-text-secondary">{argKey}:</span>
+        <span className="flex-1 min-w-0 text-ods-text-primary break-all">{formatted.text}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-1 items-start w-full">
+      <span className="text-ods-text-secondary">{argKey}:</span>
+      <pre className="bg-ods-bg border border-ods-border rounded-md p-3 w-full max-h-64 overflow-auto text-xs leading-5 text-ods-text-primary font-mono whitespace-pre">
+        <code>{formatted.text}</code>
+      </pre>
+    </div>
+  )
+}
+
+/**
+ * Result block for a tool execution. Renders inline for short single-line
+ * output and as a scrollable `<pre>` for code / JSON / multiline output.
+ */
+export function ResultBlock({ result, className }: { result: string | undefined | null; className?: string }) {
+  const formatted = formatToolResult(result)
+  if (!formatted.text) return null
+
+  if (formatted.kind === "inline") {
+    return (
+      <div className={cn("flex flex-col gap-1 items-start w-full", className)}>
+        <span className="text-ods-text-secondary">Result:</span>
+        <span className="text-ods-text-primary break-all">{formatted.text}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-1 items-start w-full", className)}>
+      <span className="text-ods-text-secondary">Result:</span>
+      <pre className="bg-ods-bg border border-ods-border rounded-md p-3 w-full max-h-64 overflow-auto text-xs leading-5 text-ods-text-primary font-mono whitespace-pre">
+        <code>{formatted.text}</code>
+      </pre>
+    </div>
+  )
+}

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

@@ -9,119 +9,98 @@ import { ToolIcon } from "../tool-icon"
 import { PulseDots } from "../ui/pulse-dots"
 import { ExpandChevron } from "./expand-chevron"
 import { useCollapsible } from "./hooks/use-collapsible"
+import { ArgRow, ResultBlock } from "./tool-call-blocks"
+import { COMMAND_BODY_ARG_KEYS } from "./utils/tool-call-helpers"
 import type { ToolExecutionDisplayProps } from "./types"
 
-const ToolExecutionDisplay = forwardRef<HTMLButtonElement, ToolExecutionDisplayProps>(
+const COMMAND_BODY_KEYS = new Set<string>(COMMAND_BODY_ARG_KEYS)
+
+const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProps>(
   ({ className, message, ...props }, ref) => {
     const [expanded, setExpanded] = useState(false)
     const { innerRef, containerStyle } = useCollapsible({ expanded })
 
     const isExecuting = message.type === "EXECUTING_TOOL"
     const isExecuted = message.type === "EXECUTED_TOOL"
-    const integratedToolType = message.integratedToolType || 'OPENFRAME'
+    const integratedToolType = (message.integratedToolType as ToolType) || ("OPENFRAME" as ToolType)
 
     const previewText = useMemo(() => {
       const command = message.parameters?.command ?? message.parameters?.query
       if (command) return String(command)
-      return message.toolFunction ?? ''
+      return message.toolFunction ?? ""
     }, [message.toolFunction, message.parameters])
 
-    const formatValue = (value: unknown): string => {
-      if (typeof value === 'object' && value !== null) {
-        return JSON.stringify(value)
-      }
-      return String(value)
-    }
+    const argEntries = useMemo<Array<[string, unknown]>>(() => {
+      if (!message.parameters || typeof message.parameters !== "object") return []
+      return Object.entries(message.parameters).filter(
+        ([k, v]) => !COMMAND_BODY_KEYS.has(k) && v !== null && v !== undefined && v !== "",
+      )
+    }, [message.parameters])
 
-    const hasParams = message.parameters && Object.keys(message.parameters).length > 0
-    const hasStatus = isExecuting || isExecuted
+    const hasResult = isExecuted && typeof message.result === "string" && message.result.length > 0
+    const hasBody = argEntries.length > 0 || hasResult || isExecuting
 
     const renderStatusIcon = () => {
-      if (isExecuting) {
-        return <PulseDots size="sm" />
-      }
-      if (isExecuted && message.success === true) {
-        return <CheckCircleIcon className="w-4 h-4 text-ods-success" />
-      }
-      if (isExecuted && message.success === false) {
-        return <XmarkCircleIcon className="w-4 h-4 text-ods-error" />
-      }
+      if (isExecuting) return <PulseDots size="sm" />
+      if (isExecuted && message.success === true) return <CheckCircleIcon className="w-4 h-4 text-ods-success" />
+      if (isExecuted && message.success === false) return <XmarkCircleIcon className="w-4 h-4 text-ods-error" />
       return null
     }
 
     return (
-      <button
+      <div
         ref={ref}
-        type="button"
         className={cn(
-          "bg-ods-card border border-ods-border rounded-[6px] flex gap-[var(--spacing-system-xs)] items-start p-[var(--spacing-system-s)] cursor-pointer text-left w-full",
-          className
+          "bg-ods-card border border-ods-border rounded-[6px] overflow-hidden w-full flex flex-col",
+          className,
         )}
-        onClick={() => setExpanded(!expanded)}
         {...props}
       >
-        <div className="flex items-center justify-center shrink-0 w-5 h-5">
-          <ToolIcon toolType={integratedToolType as ToolType} size={16} />
-        </div>
-
-        <div className="flex-1 min-w-0 flex flex-col">
-          <div className="flex gap-2 items-start w-full">
-            <div
-              className={cn(
-                "flex-1 min-w-0 text-sm font-medium leading-5",
-                expanded
-                  ? "text-ods-text-primary whitespace-pre-wrap break-all"
-                  : "text-ods-text-secondary line-clamp-2 max-h-10 break-all"
-              )}
-            >
-              {expanded ? message.toolFunction : previewText}
-            </div>
-            {hasStatus && (
-              <div className="flex items-center justify-center shrink-0 w-5 h-5">
-                {renderStatusIcon()}
-              </div>
+        <button
+          type="button"
+          className="flex gap-[var(--spacing-system-xs)] items-start p-[var(--spacing-system-s)] cursor-pointer text-left w-full"
+          onClick={() => setExpanded((prev) => !prev)}
+        >
+          <div className="flex items-center justify-center shrink-0 w-5 h-5">
+            <ToolIcon toolType={integratedToolType} size={16} />
+          </div>
+          <div
+            className={cn(
+              "flex-1 min-w-0 text-sm font-medium leading-5",
+              expanded
+                ? "text-ods-text-primary whitespace-pre-wrap break-all"
+                : "text-ods-text-secondary line-clamp-2 max-h-10 break-all",
             )}
-            <div className="flex items-center justify-center shrink-0 w-5 h-5">
-              <ExpandChevron expanded={expanded} />
-            </div>
+          >
+            {expanded ? message.toolFunction || previewText : previewText}
           </div>
+          <div className="flex items-center justify-center shrink-0 w-5 h-5">{renderStatusIcon()}</div>
+          <div className="flex items-center justify-center shrink-0 w-5 h-5">
+            <ExpandChevron expanded={expanded} />
+          </div>
+        </button>
 
-          <div className="w-full" style={containerStyle}>
-            <div ref={innerRef} className="flex flex-col gap-2 pt-2">
-              {hasParams && (
-                <div className="flex flex-col items-start w-full text-sm font-medium leading-5">
-                  {Object.entries(message.parameters ?? {}).map(([key, value]) => (
-                    <div key={key} className="flex gap-1 items-start w-full">
-                      <span className="shrink-0 text-ods-text-secondary overflow-hidden text-ellipsis">
-                        {key}:
-                      </span>
-                      <span className="flex-1 min-w-0 text-ods-text-primary break-all">
-                        {formatValue(value)}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {(isExecuting || (isExecuted && message.result)) && (
-                <div className="flex flex-col items-start w-full">
-                  <p className="text-sm font-medium leading-5 text-ods-text-secondary">
-                    Result:
-                  </p>
-                  {isExecuted && message.result && (
-                    <div className="text-sm font-medium leading-5 text-ods-text-primary whitespace-pre-wrap break-all">
-                      {message.result}
-                    </div>
-                  )}
-                  {isExecuting && <PulseDots size="sm" />}
-                </div>
-              )}
-            </div>
+        <div className="w-full" style={containerStyle}>
+          <div ref={innerRef}>
+            {hasBody && (
+              <div className="flex flex-col gap-2 items-start w-full text-sm font-medium leading-5 p-3 bg-ods-card">
+                {argEntries.map(([key, value]) => (
+                  <ArgRow key={key} argKey={key} value={value} />
+                ))}
+                {hasResult && <ResultBlock result={message.result} />}
+                {isExecuting && (
+                  <div className="flex flex-col gap-1 items-start w-full">
+                    <span className="text-ods-text-secondary">Result:</span>
+                    <PulseDots size="sm" />
+                  </div>
+                )}
+              </div>
+            )}
           </div>
         </div>
-      </button>
+      </div>
     )
-  }
+  },
 )
 
 ToolExecutionDisplay.displayName = "ToolExecutionDisplay"

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

@@ -5,7 +5,7 @@
 
 import type { ChunkData, NatsMessageType, FetchChunksFunction } from './network.types'
 import type { ChatType, ChatApprovalStatus } from './chat.types'
-import type { MessageSegment, TokenUsageData } from './message.types'
+import type { MessageSegment, PendingToolCallData, TokenUsageData } from './message.types'
 
 // ========== Hook Options ==========
 
@@ -152,7 +152,10 @@ export interface UseRealtimeChunkProcessorOptions {
     /** Executing tools waiting for completion */
     executingTools?: Map<string, { integratedToolType: string; toolFunction: string; parameters?: Record<string, any> }>
     /** Escalated approvals */
-    escalatedApprovals?: Map<string, { command: string; explanation?: string; approvalType: string }>
+    escalatedApprovals?: Map<
+      string,
+      { command: string; explanation?: string; approvalType: string; toolCalls?: PendingToolCallData[] }
+    >
   }
   /**
    * When true, THINKING chunks are processed into thinking segments. When false
@@ -160,6 +163,19 @@ export interface UseRealtimeChunkProcessorOptions {
    * accumulator or store.
    */
   enableThinking?: boolean
+  /**
+   * Consumer-owned (e.g. set in `openframe-oss-tenant` chat client via the
+   * `'batch-approvals'` feature flag and forwarded here). The lib does NOT
+   * default this to a batch-on behavior — when omitted it falls back to the
+   * legacy single-card rendering.
+   *
+   * When true: `APPROVAL_REQUEST` chunks containing `toolCalls[]` are rendered
+   * as a single batch card. When false / omitted: the batch is split into N
+   * legacy approval cards (one per tool that requires approval), all sharing
+   * the same `approvalRequestId`. Tools with `requiresApproval=false` are
+   * dropped from the UI in the unfolded mode.
+   */
+  batchApprovalsEnabled?: boolean
 }
 
 export interface UseRealtimeChunkProcessorReturn {
@@ -172,7 +188,10 @@ export interface UseRealtimeChunkProcessorReturn {
   /** Update approval status for a request */
   updateApprovalStatus: (requestId: string, status: ChatApprovalStatus) => MessageSegment[]
   /** Get pending approval requests */
-  getPendingApprovals: () => Map<string, { command: string; explanation?: string; approvalType: string }>
+  getPendingApprovals: () => Map<
+    string,
+    { command: string; explanation?: string; approvalType: string; toolCalls?: PendingToolCallData[] }
+  >
 }
 
 // ========== API Request Types ==========