Stabilize HITL bundle UX and resume.

surfsense_web/components/hitl-bundle-pager/index.ts

@@ -0,0 +1,2 @@
+export { PagerChrome } from "./pager-chrome";
+export { withBundleStep } from "./with-bundle-step";

surfsense_web/components/hitl-bundle-pager/pager-chrome.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useHitlBundle } from "@/lib/hitl";
+
+/**
+ * Prev/next nav and Submit for the current step of an active HITL bundle.
+ * Submission is gated on every action_request having a staged decision.
+ */
+export function PagerChrome() {
+	const bundle = useHitlBundle();
+	if (!bundle) return null;
+
+	const total = bundle.toolCallIds.length;
+	const step = bundle.currentStep;
+	const allStaged = bundle.stagedCount === total;
+
+	return (
+		<div className="mt-3 flex items-center gap-2 rounded-md border border-border bg-muted/40 p-2 text-sm">
+			<Button
+				type="button"
+				size="sm"
+				variant="outline"
+				onClick={bundle.prev}
+				disabled={step === 0}
+				aria-label="Previous approval"
+			>
+				<ChevronLeftIcon className="h-4 w-4" />
+			</Button>
+			<span className="font-medium tabular-nums">
+				{step + 1} / {total}
+			</span>
+			<span className="text-muted-foreground">·</span>
+			<span className="text-muted-foreground">
+				{bundle.stagedCount} of {total} decided
+			</span>
+			<Button
+				type="button"
+				size="sm"
+				variant="outline"
+				onClick={bundle.next}
+				disabled={step >= total - 1}
+				aria-label="Next approval"
+			>
+				<ChevronRightIcon className="h-4 w-4" />
+			</Button>
+			<div className="ml-auto">
+				<Button
+					type="button"
+					size="sm"
+					onClick={bundle.submit}
+					disabled={!allStaged}
+					title={allStaged ? "Submit decisions" : "Decide every action first"}
+				>
+					Submit decisions
+				</Button>
+			</div>
+		</div>
+	);
+}

surfsense_web/components/hitl-bundle-pager/with-bundle-step.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import type { ToolCallMessagePartProps } from "@assistant-ui/react";
+import type { ComponentType } from "react";
+import { ToolCallIdProvider, useHitlBundle } from "@/lib/hitl";
+import { PagerChrome } from "./pager-chrome";
+
+/**
+ * Wrap a tool-ui card so that, when a multi-card HITL bundle is active:
+ *  - cards belonging to the bundle but not the current step render ``null``;
+ *  - the current-step card renders normally and is followed by ``PagerChrome``.
+ *
+ * Cards stay completely unchanged — the wrapper provides the
+ * ``ToolCallIdContext`` that ``useHitlDecision`` reads to stage decisions
+ * against the right ``toolCallId`` instead of firing the global event.
+ */
+export function withBundleStep<P extends ToolCallMessagePartProps<any, any>>(
+	Component: ComponentType<P>
+): ComponentType<P> {
+	function BundleStepWrapped(props: P) {
+		const bundle = useHitlBundle();
+		const toolCallId = props.toolCallId;
+		const inBundle = bundle?.isInBundle(toolCallId) ?? false;
+		const isStep = bundle?.isCurrentStep(toolCallId) ?? false;
+
+		if (bundle && inBundle && !isStep) return null;
+
+		return (
+			<ToolCallIdProvider toolCallId={toolCallId}>
+				<Component {...props} />
+				{bundle && isStep ? <PagerChrome /> : null}
+			</ToolCallIdProvider>
+		);
+	}
+	BundleStepWrapped.displayName = `withBundleStep(${Component.displayName ?? Component.name ?? "ToolUI"})`;
+	return BundleStepWrapped as ComponentType<P>;
+}