Merge remote-tracking branch 'upstream/dev' into feat/ui-revamp

surfsense_web/features/chat-messages/hitl/approval-cards/generic-approval.tsx

@@ -2,13 +2,11 @@
 
 import { CornerDownLeftIcon, Pencil } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
 import { TextShimmerLoader } from "@/components/prompt-kit/loader";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { getToolDisplayName } from "@/contracts/enums/toolIcons";
-import { connectorsApiService } from "@/lib/apis/connectors-api.service";
 import type { HitlDecision, InterruptResult, PerToolApprovalCard } from "../types";
 import { useHitlDecision } from "../use-hitl-decision";
 import { useHitlPhase } from "../use-hitl-phase";
@@ -81,12 +79,11 @@ function GenericApprovalCardView({
 
 	const mcpServer = interruptData.context?.mcp_server as string | undefined;
 	const toolDescription = interruptData.context?.tool_description as string | undefined;
-	const mcpConnectorId = interruptData.context?.mcp_connector_id as number | undefined;
-	const isMCPTool = mcpConnectorId != null;
 
 	const reviewConfig = interruptData.review_configs?.[0];
 	const allowedDecisions = reviewConfig?.allowed_decisions ?? ["approve", "reject"];
 	const canEdit = allowedDecisions.includes("edit");
+	const canApproveAlways = allowedDecisions.includes("approve_always");
 
 	const hasChanged = useMemo(() => {
 		return JSON.stringify(editedParams) !== JSON.stringify(args);
@@ -113,16 +110,11 @@ function GenericApprovalCardView({
 		editedParams,
 	]);
 
-	const handleAlwaysAllow = useCallback(() => {
-		if (phase !== "pending" || !isMCPTool) return;
+	const handleApproveAlways = useCallback(() => {
+		if (phase !== "pending" || !canApproveAlways) return;
 		setProcessing();
-		onDecision({ type: "approve" });
-		connectorsApiService.trustMCPTool(mcpConnectorId, toolName).catch(() => {
-			toast.error(
-				"Failed to save 'Always Allow' preference. The tool will still require approval next time."
-			);
-		});
-	}, [phase, setProcessing, onDecision, isMCPTool, mcpConnectorId, toolName]);
+		onDecision({ type: "approve_always" });
+	}, [phase, setProcessing, onDecision, canApproveAlways]);
 
 	useEffect(() => {
 		const handler = (e: KeyboardEvent) => {
@@ -214,8 +206,8 @@ function GenericApprovalCardView({
 								<CornerDownLeftIcon className="size-3 opacity-60" />
 							</Button>
 						)}
-						{isMCPTool && (
-							<Button size="sm" className="rounded-lg" onClick={handleAlwaysAllow}>
+						{canApproveAlways && (
+							<Button size="sm" className="rounded-lg" onClick={handleApproveAlways}>
 								Always Allow
 							</Button>
 						)}

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/hitl/types.ts

@@ -7,12 +7,12 @@ export interface InterruptActionRequest {
 
 export interface InterruptReviewConfig {
 	action_name: string;
-	allowed_decisions: Array<"approve" | "edit" | "reject">;
+	allowed_decisions: Array<"approve" | "edit" | "reject" | "approve_always">;
 }
 
 export interface InterruptResult<C extends Record<string, unknown> = Record<string, unknown>> {
 	__interrupt__: true;
-	__decided__?: "approve" | "reject" | "edit";
+	__decided__?: "approve" | "reject" | "edit" | "approve_always";
 	__completed__?: boolean;
 	action_requests: InterruptActionRequest[];
 	review_configs: InterruptReviewConfig[];
@@ -31,7 +31,7 @@ export function isInterruptResult(result: unknown): result is InterruptResult {
 }
 
 export interface HitlDecision {
-	type: "approve" | "reject" | "edit";
+	type: "approve" | "reject" | "edit" | "approve_always";
 	message?: string;
 	edited_action?: {
 		name: string;

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

@@ -33,9 +33,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
@@ -138,9 +138,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>