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

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

@@ -2,7 +2,7 @@
  * Component prop types
  */
 
-import type { ButtonHTMLAttributes, ComponentType, HTMLAttributes, TextareaHTMLAttributes } from 'react'
+import type { ComponentType, HTMLAttributes, TextareaHTMLAttributes } from 'react'
 import type { AssistantType, AuthorType, ChatApprovalStatus, ConnectionStatus } from './chat.types'
 import type { ApprovalRequestData, Message, MessageSegment, ToolExecutionData } from './message.types'
 import type { ChatRef } from '../chat-ref.types'
@@ -242,7 +242,7 @@ export interface ChatTypingIndicatorProps extends HTMLAttributes<HTMLDivElement>
 
 // ========== Tool Execution Display Props ==========
 
-export interface ToolExecutionDisplayProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ToolExecutionDisplayProps extends HTMLAttributes<HTMLDivElement> {
   message: ToolExecutionData
 }
 

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

@@ -38,6 +38,12 @@ export interface ToolExecutionData {
   parameters?: Record<string, any>
   result?: string
   success?: boolean
+  /**
+   * Backend-issued id (matches `PendingToolCallData.toolExecutionRequestId`).
+   * When present, lets the accumulator merge this execution event into the
+   * matching approval batch row instead of emitting a standalone segment.
+   */
+  toolExecutionRequestId?: string
 }
 
 // ========== Approval Request Types ==========
@@ -57,6 +63,45 @@ export interface ApprovalResultData {
   approvalType?: string
 }
 
+/**
+ * Single tool call inside a batch approval request.
+ * Mirrors backend PendingToolCallDto.
+ */
+export interface PendingToolCallData {
+  toolExecutionRequestId: string
+  toolName: string
+  toolTitle?: string
+  toolExplanation?: string
+  toolType?: string
+  requiresApproval: boolean
+  approvalType?: string | null
+  toolCallArguments?: Record<string, any> | null
+}
+
+/**
+ * Per-tool execution state inside an approval batch.
+ * Populated by EXECUTING_TOOL / EXECUTED_TOOL chunks that carry a
+ * `toolExecutionRequestId` matching one of the batch's tool calls.
+ */
+export interface ApprovalBatchExecutionState {
+  status: 'executing' | 'done'
+  result?: string
+  success?: boolean
+}
+
+export interface ApprovalBatchData {
+  approvalRequestId: string
+  /** Highest approval type required across the batch (e.g. ADMIN beats CLIENT). */
+  approvalType: string
+  toolCalls: PendingToolCallData[]
+  /**
+   * Keyed by `PendingToolCallData.toolExecutionRequestId`. Absent before
+   * approval; rows without an entry render as "queued" (loader) once the
+   * batch itself is approved.
+   */
+  executions?: Record<string, ApprovalBatchExecutionState>
+}
+
 // ========== Message Segment Types ==========
 
 export type TextSegment = {
@@ -82,6 +127,14 @@ export type ApprovalRequestSegment = {
   onReject?: (requestId?: string) => void | Promise<void>
 }
 
+export type ApprovalBatchSegment = {
+  type: 'approval_batch'
+  data: ApprovalBatchData
+  status?: ChatApprovalStatus
+  onApprove?: (requestId?: string) => void | Promise<void>
+  onReject?: (requestId?: string) => void | Promise<void>
+}
+
 export type ErrorSegment = {
   type: 'error'
   title: string
@@ -94,7 +147,7 @@ export type ContextCompactionSegment = {
   summary?: string
 }
 
-export type MessageSegment = TextSegment | ThinkingSegment | ToolExecutionSegment | ApprovalRequestSegment | ErrorSegment | ContextCompactionSegment
+export type MessageSegment = TextSegment | ThinkingSegment | ToolExecutionSegment | ApprovalRequestSegment | ApprovalBatchSegment | ErrorSegment | ContextCompactionSegment
 
 export type MessageContent = string | MessageSegment[]
 
@@ -119,6 +172,7 @@ export interface ExecutingToolMessageData extends MessageDataBase {
   integratedToolType?: string
   toolFunction?: string
   parameters?: Record<string, any>
+  toolExecutionRequestId?: string
 }
 
 export interface ExecutedToolMessageData extends MessageDataBase {
@@ -128,6 +182,7 @@ export interface ExecutedToolMessageData extends MessageDataBase {
   parameters?: Record<string, any>
   result?: string
   success?: boolean
+  toolExecutionRequestId?: string
 }
 
 export interface ApprovalRequestMessageData extends MessageDataBase {
@@ -136,6 +191,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[]
 }
 
 export interface ApprovalResultMessageData extends MessageDataBase {

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

@@ -41,6 +41,7 @@ export interface ChunkData {
   parameters?: Record<string, any>
   result?: string
   success?: boolean
+  toolExecutionRequestId?: string
   error?: string
   details?: string
   approvalRequestId?: string
@@ -49,6 +50,7 @@ export interface ChunkData {
   command?: string
   explanation?: string
   approved?: boolean
+  toolCalls?: any[]
   modelName?: string
   providerName?: string
   provider?: string

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

@@ -3,7 +3,7 @@
  * Contains types for message parsing, accumulation, and processing
  */
 
-import type { MessageSegment, ProcessedMessage, ToolExecutionSegment, TokenUsageData } from './message.types'
+import type { MessageSegment, ProcessedMessage, ToolExecutionSegment, TokenUsageData, PendingToolCallData } from './message.types'
 import type { ChatApprovalStatus, AssistantType } from './chat.types'
 import type { ChunkData, NatsMessageType } from './network.types'
 
@@ -18,6 +18,7 @@ export type ParsedChunkAction =
   | { action: 'thinking'; text: string }
   | { action: 'tool_execution'; segment: ToolExecutionSegment }
   | { action: 'approval_request'; requestId: string; command: string; explanation?: string; approvalType: string }
+  | { action: 'approval_batch'; requestId: string; approvalType: string; toolCalls: PendingToolCallData[] }
   | { action: 'approval_result'; requestId: string; approved: boolean; approvalType: string }
   | { action: 'message_request'; text: string; ownerType?: string; displayName?: string }
   | { action: 'token_usage'; data: TokenUsageData }
@@ -43,7 +44,10 @@ export interface AccumulatorState {
     toolFunction: string
     parameters?: Record<string, any>
   }>
-  escalatedApprovals?: Map<string, { command: string; explanation?: string; approvalType: string }>
+  escalatedApprovals?: Map<
+    string,
+    { command: string; explanation?: string; approvalType: string; toolCalls?: PendingToolCallData[] }
+  >
 }
 
 // ========== Message Processing Options ==========
@@ -65,6 +69,13 @@ export interface MessageProcessingOptions {
   approvalStatuses?: Record<string, ChatApprovalStatus>
   /** Approval types to display directly (others get escalated) - defaults to all types */
   displayApprovalTypes?: string[]
+  /**
+   * Consumer-owned. Forwarded by the host app (e.g. oss-tenant chat client
+   * reads its `'batch-approvals'` feature flag and passes it down). The lib
+   * defaults to legacy single-card rendering when this is omitted — it will
+   * not enable the batch UI on its own.
+   */
+  batchApprovalsEnabled?: boolean
 }
 
 // ========== Chunk Processing Types ==========

package/src/components/chat/utils/chunk-parser.ts

@@ -2,7 +2,26 @@
  * Utilities for parsing NATS chunks into structured actions
  */
 
-import { MESSAGE_TYPE, type ChunkData, type ParsedChunkAction, type ToolExecutionSegment } from '../types'
+import { MESSAGE_TYPE, type ChunkData, type ParsedChunkAction, type ToolExecutionSegment, type PendingToolCallData } from '../types'
+
+function normalizeToolCalls(raw: unknown): PendingToolCallData[] {
+  if (!Array.isArray(raw)) return []
+  return raw
+    .filter((item): item is Record<string, any> => !!item && typeof item === 'object')
+    .map((item) => ({
+      toolExecutionRequestId: String(item.toolExecutionRequestId ?? ''),
+      toolName: String(item.toolName ?? ''),
+      toolTitle: typeof item.toolTitle === 'string' ? item.toolTitle : undefined,
+      toolExplanation: typeof item.toolExplanation === 'string' ? item.toolExplanation : undefined,
+      toolType: typeof item.toolType === 'string' ? item.toolType : undefined,
+      requiresApproval: item.requiresApproval === true,
+      approvalType: typeof item.approvalType === 'string' ? item.approvalType : null,
+      toolCallArguments:
+        item.toolCallArguments && typeof item.toolCallArguments === 'object'
+          ? (item.toolCallArguments as Record<string, any>)
+          : null,
+    }))
+}
 
 /**
  * Parse a raw NATS chunk into a structured action
@@ -56,10 +75,11 @@ export function parseChunkToAction(chunk: unknown): ParsedChunkAction | null {
             integratedToolType: data.integratedToolType || '',
             toolFunction: data.toolFunction || '',
             parameters: data.parameters,
+            toolExecutionRequestId: typeof data.toolExecutionRequestId === 'string' ? data.toolExecutionRequestId : undefined,
           }
         }
       }
-      
+
     case MESSAGE_TYPE.EXECUTED_TOOL:
       return {
         action: 'tool_execution',
@@ -72,18 +92,33 @@ export function parseChunkToAction(chunk: unknown): ParsedChunkAction | null {
             parameters: data.parameters,
             result: data.result,
             success: data.success,
+            toolExecutionRequestId: typeof data.toolExecutionRequestId === 'string' ? data.toolExecutionRequestId : undefined,
           }
         }
       }
       
-    case MESSAGE_TYPE.APPROVAL_REQUEST:
+    case MESSAGE_TYPE.APPROVAL_REQUEST: {
+      const requestId = data.approvalRequestId || data.approval_request_id || ''
+      const approvalType = data.approvalType || 'USER'
+      const toolCalls = normalizeToolCalls(data.toolCalls)
+
+      if (toolCalls.length > 0) {
+        return {
+          action: 'approval_batch',
+          requestId,
+          approvalType,
+          toolCalls,
+        }
+      }
+
       return {
         action: 'approval_request',
-        requestId: data.approvalRequestId || data.approval_request_id || '',
+        requestId,
         command: data.command || '',
         explanation: data.explanation,
-        approvalType: data.approvalType || 'USER',
+        approvalType,
       }
+    }
       
     case MESSAGE_TYPE.APPROVAL_RESULT:
       return {

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

@@ -33,7 +33,9 @@ export function extractIncompleteMessageState(
     switch (segment.type) {
       case 'tool_execution':
         if (segment.data.type === 'EXECUTING_TOOL') {
-          const toolKey = `${segment.data.integratedToolType}-${segment.data.toolFunction}`
+          const toolKey =
+            segment.data.toolExecutionRequestId ||
+            `${segment.data.integratedToolType}-${segment.data.toolFunction}`
           executingTools.set(toolKey, {
             integratedToolType: segment.data.integratedToolType,
             toolFunction: segment.data.toolFunction,
@@ -54,6 +56,22 @@ export function extractIncompleteMessageState(
         }
         break
 
+      case 'approval_batch': {
+        // Treat a batch as in-progress until every tool call has a
+        // `done` execution OR the batch was rejected. Otherwise the realtime
+        // accumulator won't hold the segment and post-approval EXECUTED_TOOL
+        // chunks won't be able to merge into it via `applyExecutionToBatch`.
+        const allDone =
+          !!segment.data.executions &&
+          segment.data.toolCalls.every(
+            (c) => segment.data.executions?.[c.toolExecutionRequestId]?.status === 'done',
+          )
+        if (segment.status !== 'rejected' && !allDone) {
+          hasIncompleteState = true
+        }
+        break
+      }
+
       case 'context_compaction':
         if (segment.status === 'started') {
           hasIncompleteState = true

package/src/components/chat/utils/index.ts

@@ -30,3 +30,6 @@ export {
 export {
   extractIncompleteMessageState,
 } from './extract-incomplete-message-state'
+
+// Tool call helpers
+export { getCommandText } from './tool-call-helpers'

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

@@ -12,9 +12,12 @@ import type {
   MessageSegment,
   ToolExecutionSegment,
   ApprovalRequestSegment,
+  ApprovalBatchSegment,
+  ApprovalBatchExecutionState,
   ContextCompactionSegment,
   ErrorSegment,
   PendingApproval,
+  PendingToolCallData,
   AccumulatorState,
   ChatApprovalStatus,
 } from '../types'
@@ -136,13 +139,27 @@ export class MessageSegmentAccumulator {
   }
 
   /**
-   * Add a tool execution segment
-   * If adding EXECUTED_TOOL, replace the matching EXECUTING_TOOL
+   * Add a tool execution segment.
+   *
+   * Routing:
+   *  1) If `toolExecutionRequestId` matches a tool call inside an existing
+   *     `approval_batch` segment, merge the state into that batch's
+   *     `executions` map (no standalone segment is pushed).
+   *  2) Otherwise: pair EXECUTING ↔ EXECUTED by `toolExecutionRequestId`.
+   *     If no id is present (older backends), fall back to
+   *     `(integratedToolType, toolFunction)` so repeat calls of the same
+   *     function don't all bucket under one key.
    */
   addToolExecution(segment: ToolExecutionSegment): MessageSegment[] {
     const toolData = segment.data
-    const toolKey = `${toolData.integratedToolType}-${toolData.toolFunction}`
-    
+    const execId = toolData.toolExecutionRequestId
+
+    if (execId && this.applyExecutionToBatch(execId, toolData)) {
+      return this.getSegments()
+    }
+
+    const toolKey = execId || `${toolData.integratedToolType}-${toolData.toolFunction}`
+
     if (toolData.type === 'EXECUTING_TOOL') {
       this.executingTools.set(toolKey, {
         integratedToolType: toolData.integratedToolType,
@@ -155,10 +172,12 @@ export class MessageSegmentAccumulator {
         (s): s is ToolExecutionSegment =>
           s.type === 'tool_execution' &&
           s.data.type === 'EXECUTING_TOOL' &&
-          s.data.integratedToolType === toolData.integratedToolType &&
-          s.data.toolFunction === toolData.toolFunction
+          (execId
+            ? s.data.toolExecutionRequestId === execId
+            : s.data.integratedToolType === toolData.integratedToolType &&
+              s.data.toolFunction === toolData.toolFunction),
       )
-      
+
       const executingTool = this.executingTools.get(toolKey)
       const mergedSegment: ToolExecutionSegment = {
         type: 'tool_execution',
@@ -167,19 +186,50 @@ export class MessageSegmentAccumulator {
           parameters: toolData.parameters || executingTool?.parameters,
         }
       }
-      
+
       if (existingIndex !== -1) {
         this.segments[existingIndex] = mergedSegment
       } else {
         this.segments.push(mergedSegment)
       }
-      
+
       this.executingTools.delete(toolKey)
     }
-    
+
     return this.getSegments()
   }
 
+  /**
+   * Try to merge a tool execution event into an existing approval_batch
+   * segment whose `toolCalls` contains the same `toolExecutionRequestId`.
+   * Returns true when a batch was updated, false when no batch matches.
+   */
+  private applyExecutionToBatch(execId: string, toolData: ToolExecutionSegment['data']): boolean {
+    let matched = false
+    this.segments = this.segments.map((seg) => {
+      if (matched) return seg
+      if (seg.type !== 'approval_batch') return seg
+      const hasCall = seg.data.toolCalls.some((c) => c.toolExecutionRequestId === execId)
+      if (!hasCall) return seg
+
+      const prev: ApprovalBatchExecutionState | undefined = seg.data.executions?.[execId]
+      const next: ApprovalBatchExecutionState =
+        toolData.type === 'EXECUTED_TOOL'
+          ? { status: 'done', result: toolData.result, success: toolData.success }
+          : { status: 'executing', result: prev?.result, success: prev?.success }
+
+      matched = true
+      return {
+        ...seg,
+        data: {
+          ...seg.data,
+          executions: { ...(seg.data.executions ?? {}), [execId]: next },
+        },
+      }
+    })
+    return matched
+  }
+
   /**
    * Track a pending approval request
    */
@@ -209,7 +259,67 @@ export class MessageSegmentAccumulator {
       onApprove: this.callbacks.onApprove,
       onReject: this.callbacks.onReject,
     }
-    
+
+    this.segments.push(segment)
+    return this.getSegments()
+  }
+
+  /**
+   * Add a batch approval segment containing multiple tool calls. Upserts by
+   * `approvalRequestId`: when a batch with the same id is already in the
+   * accumulator, the existing segment is updated in place rather than a
+   * second segment being pushed. This matters for the consumer-store replay
+   * path, which feeds `[existing..., new...]` into `replaySegments` and would
+   * otherwise produce two batch segments for the same approval after a
+   * status flip or per-tool execution merge.
+   *
+   * `approvalType` is the highest-privilege type required across the batch.
+   * `executions` is forwarded as-is. On upsert, a new `executions` object
+   * overrides the existing one (so the latest replay wins).
+   */
+  addApprovalBatch(
+    approvalRequestId: string,
+    approvalType: string,
+    toolCalls: PendingToolCallData[],
+    status: ChatApprovalStatus = 'pending',
+    executions?: Record<string, ApprovalBatchExecutionState>,
+  ): MessageSegment[] {
+    const existingIndex = this.segments.findIndex(
+      (s): s is ApprovalBatchSegment =>
+        s.type === 'approval_batch' && s.data.approvalRequestId === approvalRequestId,
+    )
+
+    if (existingIndex !== -1) {
+      const existing = this.segments[existingIndex] as ApprovalBatchSegment
+      const mergedExecutions = executions ?? existing.data.executions
+      this.segments[existingIndex] = {
+        ...existing,
+        data: {
+          approvalRequestId,
+          approvalType,
+          toolCalls,
+          ...(mergedExecutions ? { executions: mergedExecutions } : {}),
+        },
+        status,
+        onApprove: this.callbacks.onApprove,
+        onReject: this.callbacks.onReject,
+      }
+      return this.getSegments()
+    }
+
+    const segment: ApprovalBatchSegment = {
+      type: 'approval_batch',
+      data: {
+        approvalRequestId,
+        approvalType,
+        toolCalls,
+        ...(executions ? { executions } : {}),
+      },
+      status,
+      onApprove: this.callbacks.onApprove,
+      onReject: this.callbacks.onReject,
+    }
+
     this.segments.push(segment)
     return this.getSegments()
   }
@@ -249,13 +359,16 @@ export class MessageSegmentAccumulator {
   }
 
   /**
-   * Update status of an existing approval segment
+   * Update status of an existing approval segment (single or batch)
    */
   updateApprovalStatus(requestId: string, status: ChatApprovalStatus): MessageSegment[] {
     this.segments = this.segments.map(segment => {
       if (segment.type === 'approval_request' && segment.data.requestId === requestId) {
         return { ...segment, status }
       }
+      if (segment.type === 'approval_batch' && segment.data.approvalRequestId === requestId) {
+        return { ...segment, status }
+      }
       return segment
     })
     return this.getSegments()
@@ -366,6 +479,17 @@ export class MessageSegmentAccumulator {
           )
           break
         }
+        case 'approval_batch': {
+          const { data, status } = segment
+          this.addApprovalBatch(
+            data.approvalRequestId,
+            data.approvalType,
+            data.toolCalls,
+            status,
+            data.executions,
+          )
+          break
+        }
         case 'error':
           this.addError(segment.title, segment.details)
           break