chat-messages: render and batch-submit multiple HITL approval cards

surfsense_web/features/chat-messages/hitl/approval/pending-interrupt-context.tsx

@@ -3,8 +3,10 @@
 import { createContext, type ReactNode, useContext } from "react";
 import type { HitlDecision } from "../types";
 
-/** Snapshot of one in-flight HITL interrupt; ``null`` when nothing is pending. */
+/** One in-flight HITL interrupt (one paused subagent). */
 export interface PendingInterruptState {
+	/** Stable id keyed by the parent ``tool_call_id`` stamped on the interrupt. */
+	interruptId: string;
 	threadId: number;
 	assistantMsgId: string;
 	interruptData: Record<string, unknown>;
@@ -12,8 +14,19 @@ export interface PendingInterruptState {
 }
 
 export interface PendingInterruptValue {
-	pendingInterrupt: PendingInterruptState | null;
-	onSubmit: (decisions: HitlDecision[]) => void;
+	/**
+	 * Every paused subagent for the current turn, in the order the SSE stream
+	 * delivered them — which matches ``state.interrupts`` traversal on the
+	 * backend, which is the order ``slice_decisions_by_tool_call`` consumes.
+	 */
+	pendingInterrupts: PendingInterruptState[];
+	/**
+	 * Stage one card's decisions. The orchestrator (page-level) batches across
+	 * cards and dispatches the resume only once every pending interrupt has
+	 * submitted, so the backend slicer sees a single concatenated decisions
+	 * list whose total matches the parent state's pending action count.
+	 */
+	onSubmit: (interruptId: string, decisions: HitlDecision[]) => void;
 }
 
 const PendingInterruptContext = createContext<PendingInterruptValue | null>(null);
@@ -24,16 +37,16 @@ const PendingInterruptContext = createContext<PendingInterruptValue | null>(null
  * page root.
  */
 export function PendingInterruptProvider({
-	pendingInterrupt,
+	pendingInterrupts,
 	onSubmit,
 	children,
 }: {
-	pendingInterrupt: PendingInterruptState | null;
-	onSubmit: (decisions: HitlDecision[]) => void;
+	pendingInterrupts: PendingInterruptState[];
+	onSubmit: (interruptId: string, decisions: HitlDecision[]) => void;
 	children: ReactNode;
 }) {
 	return (
-		<PendingInterruptContext.Provider value={{ pendingInterrupt, onSubmit }}>
+		<PendingInterruptContext.Provider value={{ pendingInterrupts, onSubmit }}>
 			{children}
 		</PendingInterruptContext.Provider>
 	);

surfsense_web/features/chat-messages/timeline/data-renderer.tsx

@@ -11,10 +11,9 @@ const noopSubmit = () => {};
 /**
  * assistant-ui data UI for the ``thinking-steps`` data-part.
  *
- * Re-scopes the global ``PendingInterruptProvider`` per message: the
- * approval card only mounts under the assistant message that owns
- * the interrupt (otherwise every message in scrollback would render
- * its own card).
+ * Re-scopes the global ``PendingInterruptProvider`` per message: approval
+ * cards only mount under the assistant message that owns the interrupt
+ * (otherwise every message in scrollback would render its own cards).
  */
 function TimelineDataRenderer({ data }: { name: string; data: unknown }) {
 	const isThreadRunning = useAuiState(({ thread }) => thread.isRunning);
@@ -23,10 +22,10 @@ function TimelineDataRenderer({ data }: { name: string; data: unknown }) {
 	const content = useAuiState(({ message }) => message?.content);
 	const messageId = useAuiState(({ message }) => message?.id);
 	const pendingValue = usePendingInterrupt();
-	const pendingForThisMessage =
-		pendingValue?.pendingInterrupt && pendingValue.pendingInterrupt.assistantMsgId === messageId
-			? pendingValue.pendingInterrupt
-			: null;
+	const pendingForThisMessage = useMemo(
+		() => (pendingValue?.pendingInterrupts ?? []).filter((p) => p.assistantMsgId === messageId),
+		[pendingValue?.pendingInterrupts, messageId]
+	);
 	const onSubmit = pendingValue?.onSubmit ?? noopSubmit;
 
 	const steps = useMemo<ThinkingStepInput[]>(
@@ -39,11 +38,11 @@ function TimelineDataRenderer({ data }: { name: string; data: unknown }) {
 		[steps, content]
 	);
 
-	if (items.length === 0 && !pendingForThisMessage) return null;
+	if (items.length === 0 && pendingForThisMessage.length === 0) return null;
 
 	return (
 		<div className="mb-3 -mx-2 leading-normal">
-			<PendingInterruptProvider pendingInterrupt={pendingForThisMessage} onSubmit={onSubmit}>
+			<PendingInterruptProvider pendingInterrupts={pendingForThisMessage} onSubmit={onSubmit}>
 				<Timeline items={items} isThreadRunning={isMessageStreaming} />
 			</PendingInterruptProvider>
 		</div>

surfsense_web/features/chat-messages/timeline/timeline.tsx

@@ -32,9 +32,9 @@ export const Timeline: FC<{
 	isThreadRunning?: boolean;
 }> = ({ items, isThreadRunning = true }) => {
 	const pendingValue = usePendingInterrupt();
-	const pendingInterrupt = pendingValue?.pendingInterrupt ?? null;
+	const pendingInterrupts = pendingValue?.pendingInterrupts ?? [];
 	const onSubmit = pendingValue?.onSubmit;
-	const hasPending = pendingInterrupt !== null;
+	const hasPending = pendingInterrupts.length > 0;
 
 	// Apply the override here so downstream (grouping, headers, dots)
 	// sees the corrected status without threading a callback. Keeps
@@ -135,9 +135,15 @@ export const Timeline: FC<{
 									/>
 								);
 							})}
-							{pendingInterrupt && onSubmit && (
-								<div className="pl-5">
-									<HitlApprovalCard pendingInterrupt={pendingInterrupt} onSubmit={onSubmit} />
+							{hasPending && onSubmit && (
+								<div className="pl-5 space-y-3">
+									{pendingInterrupts.map((pi) => (
+										<HitlApprovalCard
+											key={pi.interruptId}
+											pendingInterrupt={pi}
+											onSubmit={(decisions) => onSubmit(pi.interruptId, decisions)}
+										/>
+									))}
 								</div>
 							)}
 						</div>