@agents24/chat-react 0.5.36 → 0.5.38

package/dist/ui/index.js

@@ -7,7 +7,7 @@ import {
   canonicalInputMimeType,
   inputMimeTypes,
   validateAgentChatSubmission
-} from "../chunk-INO5DSSJ.js";
+} from "../chunk-DWDHK4FZ.js";
 
 // src/ui/agent-chat-composer.tsx
 import * as React6 from "react";
@@ -801,47 +801,69 @@ function useChatComposerFocus({ textareaRef, disabled, focusKey, restoredDraft,
 
 // src/ui/use-audio-recorder.ts
 import * as React3 from "react";
+import { normalizeAttachmentMimeType as normalizeAttachmentMimeType2 } from "@agents24/client";
 var RECORDING_CANDIDATES = ["audio/webm;codecs=opus", "audio/webm", "audio/mp4"];
 function useAudioRecorder(onRecorded, options = {}) {
   const recorderRef = React3.useRef(null);
   const streamRef = React3.useRef(null);
+  const operationRef = React3.useRef(null);
   const pendingRef = React3.useRef(false);
-  const generationRef = React3.useRef(0);
-  const onRecordedRef = React3.useRef(onRecorded);
-  const onStreamChangeRef = React3.useRef(options.onStreamChange);
-  React3.useEffect(() => {
-    onRecordedRef.current = onRecorded;
-    onStreamChangeRef.current = options.onStreamChange;
+  const callbacksRef = React3.useRef({ onRecorded, onStreamChange: options.onStreamChange, acceptedMimeTypes: options.acceptedMimeTypes });
+  React3.useLayoutEffect(() => {
+    callbacksRef.current = { onRecorded, onStreamChange: options.onStreamChange, acceptedMimeTypes: options.acceptedMimeTypes };
   });
   const [isRecording, setIsRecording] = React3.useState(false);
+  const [isStarting, setIsStarting] = React3.useState(false);
+  const [isProcessing, setIsProcessing] = React3.useState(false);
   const [error, setError] = React3.useState(null);
   const release = React3.useCallback(() => {
     streamRef.current?.getTracks().forEach((track) => track.stop());
     streamRef.current = null;
     recorderRef.current = null;
-    onStreamChangeRef.current?.(null);
+    callbacksRef.current.onStreamChange?.(null);
   }, []);
+  const discard = React3.useCallback(() => {
+    operationRef.current?.controller.abort();
+    operationRef.current = null;
+    pendingRef.current = false;
+    const recorder = recorderRef.current;
+    if (recorder) {
+      recorder.onstop = null;
+      recorder.onerror = null;
+      recorder.ondataavailable = null;
+      if (recorder.state !== "inactive") recorder.stop();
+    }
+    release();
+  }, [release]);
+  const cancel = React3.useCallback(() => {
+    discard();
+    setIsStarting(false);
+    setIsRecording(false);
+    setIsProcessing(false);
+    setError(null);
+  }, [discard]);
   const stop = React3.useCallback(() => {
     const recorder = recorderRef.current;
     if (recorder && recorder.state !== "inactive") recorder.stop();
   }, []);
-  const start = React3.useCallback(async () => {
-    if (pendingRef.current || recorderRef.current) return;
+  const isCapturing = React3.useCallback(() => pendingRef.current || recorderRef.current !== null, []);
+  const start = React3.useCallback(async (startOptions = {}) => {
+    if (operationRef.current) return;
     setError(null);
     if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === "undefined") {
       setError("Audio recording is not supported in this browser.");
       return;
     }
+    const controller = new AbortController();
+    const operation = { operationId: startOptions.operationId ?? crypto.randomUUID(), signal: controller.signal, controller };
+    operationRef.current = operation;
     pendingRef.current = true;
-    const generation = generationRef.current;
+    setIsStarting(true);
     try {
-      const mimeType = RECORDING_CANDIDATES.find((candidate) => MediaRecorder.isTypeSupported(candidate));
-      if (!mimeType) {
-        setError("Audio recording is not supported in this browser.");
-        return;
-      }
+      const mimeType = RECORDING_CANDIDATES.find((candidate) => MediaRecorder.isTypeSupported(candidate) && (callbacksRef.current.acceptedMimeTypes === void 0 || callbacksRef.current.acceptedMimeTypes.includes(normalizeAttachmentMimeType2(candidate))));
+      if (!mimeType) throw new Error("unsupported");
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      if (generation !== generationRef.current) {
+      if (operation.signal.aborted) {
         stream.getTracks().forEach((track) => track.stop());
         return;
       }
@@ -853,48 +875,54 @@ function useAudioRecorder(onRecorded, options = {}) {
         if (event.data.size) chunks.push(event.data);
       };
       recorder.onstop = () => {
-        if (generation !== generationRef.current) return;
+        if (operation.signal.aborted) return;
         const actualType = recorder.mimeType || mimeType;
-        const extension = actualType.startsWith("audio/mp4") ? "m4a" : "webm";
-        try {
-          onRecordedRef.current(new File([new Blob(chunks, { type: actualType })], `recording-${Date.now()}.${extension}`, { type: actualType }));
-        } finally {
-          release();
-          setIsRecording(false);
+        const accepted = callbacksRef.current.acceptedMimeTypes;
+        if (accepted !== void 0 && !accepted.includes(normalizeAttachmentMimeType2(actualType))) {
+          cancel();
+          setError("This Agent does not accept the recorded audio format.");
+          return;
         }
-      };
-      recorder.onerror = () => {
-        recorder.onstop = null;
-        if (recorder.state !== "inactive") recorder.stop();
+        const extension = actualType.startsWith("audio/mp4") ? "m4a" : "webm";
+        const file = new File(chunks, `recording-${Date.now()}.${extension}`, { type: actualType });
         release();
         setIsRecording(false);
+        setIsProcessing(true);
+        void Promise.resolve().then(() => {
+          if (!operation.signal.aborted) return callbacksRef.current.onRecorded(file, operation);
+        }).catch(() => {
+          if (!operation.signal.aborted) setError("Recording processing failed.");
+        }).finally(() => {
+          if (operationRef.current === operation) {
+            operationRef.current = null;
+            setIsProcessing(false);
+          }
+        });
+      };
+      recorder.onerror = () => {
+        cancel();
         setError("Audio recording failed. Try again.");
       };
       recorder.start();
       setIsRecording(true);
-      onStreamChangeRef.current?.(stream);
+      callbacksRef.current.onStreamChange?.(stream);
     } catch {
-      if (generation === generationRef.current) {
-        release();
-        setIsRecording(false);
-        setError("Microphone access is unavailable.");
+      if (!operation.signal.aborted) {
+        cancel();
+        setError("Microphone access or audio recording is unavailable.");
       }
     } finally {
-      if (generation === generationRef.current) pendingRef.current = false;
-    }
-  }, [release]);
-  React3.useEffect(() => () => {
-    generationRef.current += 1;
-    pendingRef.current = false;
-    const recorder = recorderRef.current;
-    if (recorder) {
-      recorder.onstop = null;
-      recorder.onerror = null;
-      if (recorder.state !== "inactive") recorder.stop();
+      if (!operation.signal.aborted) {
+        pendingRef.current = false;
+        setIsStarting(false);
+      }
     }
-    release();
-  }, [release]);
-  return { error, isRecording, start, stop };
+  }, [cancel, discard, release]);
+  React3.useLayoutEffect(() => {
+    cancel();
+    return discard;
+  }, [options.scopeKey, cancel, discard]);
+  return { error, isRecording, isStarting, isProcessing, isCapturing, start, stop, cancel };
 }
 
 // src/ui/use-agent-chat-composer.ts
@@ -906,16 +934,47 @@ function useAgentChatComposer(options) {
   const localTextareaRef = React4.useRef(null);
   const textareaRef = options.textareaRef ?? localTextareaRef;
   const filesRef = React4.useRef(files);
-  const inFlightFilesRef = React4.useRef([]);
+  const inFlightFilesRef = React4.useRef(/* @__PURE__ */ new Map());
   const revisionRef = React4.useRef(0);
   const submittingRef = React4.useRef(false);
-  React4.useEffect(() => {
-    filesRef.current = files;
-  }, [files]);
+  const generationRef = React4.useRef(0);
+  const mountedRef = React4.useRef(true);
+  const textRef = React4.useRef(text);
+  const scope = React4.useMemo(() => ({ active: false }), [options.scopeKey]);
+  const [textInteraction, setTextInteraction] = React4.useState(null);
+  const handledTextInteractionRef = React4.useRef(textInteraction);
+  React4.useLayoutEffect(() => {
+    scope.active = true;
+    mountedRef.current = true;
+    submittingRef.current = false;
+    setIsSubmitting(false);
+    return () => {
+      scope.active = false;
+      mountedRef.current = false;
+      generationRef.current += 1;
+    };
+  }, [scope]);
+  React4.useLayoutEffect(() => {
+    if (handledTextInteractionRef.current === textInteraction) return;
+    handledTextInteractionRef.current = textInteraction;
+    if (!textInteraction || textInteraction.scope !== scope || !scope.active || textInteraction.revision !== revisionRef.current || options.disabled) return;
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    if (textInteraction.options.focus) textarea.focus({ preventScroll: true });
+    const selection = textInteraction.options.selection;
+    if (selection) {
+      const clamp = (offset) => Math.max(0, Math.min(textRef.current.length, offset));
+      textarea.setSelectionRange(clamp(selection.start), clamp(selection.end), selection.direction);
+    }
+  }, [textInteraction, scope, textareaRef, options.disabled]);
   React4.useEffect(() => () => {
     revokeAgentChatComposerFiles(filesRef.current);
-    revokeAgentChatComposerFiles(inFlightFilesRef.current);
+    revokeAgentChatComposerFiles([...inFlightFilesRef.current.values()].flat());
   }, []);
+  const revokeUnownedFiles = (candidates) => {
+    const retained = new Set([...filesRef.current, ...[...inFlightFilesRef.current.values()].flat()].map((file) => file.url));
+    revokeAgentChatComposerFiles(candidates.filter((file) => !retained.has(file.url)));
+  };
   const focusComposer = useChatComposerFocus({
     textareaRef,
     disabled: Boolean(options.disabled),
@@ -923,60 +982,94 @@ function useAgentChatComposer(options) {
     restoredDraft: options.restoredDraft,
     onRestore: (draft) => {
       revisionRef.current += 1;
-      revokeAgentChatComposerFiles(filesRef.current);
+      const previousFiles = filesRef.current;
+      textRef.current = draft.text;
+      filesRef.current = draft.files;
+      revokeUnownedFiles(previousFiles);
       setTextState(draft.text);
       setFiles(draft.files);
     }
   });
   const attachmentMimeTypes = inputMimeTypes(options.inputContract);
-  const setText = (value) => {
-    revisionRef.current += 1;
+  const setText = React4.useCallback((value, interaction = {}) => {
+    if (!scope.active) return false;
+    const revision = ++revisionRef.current;
+    textRef.current = value;
     setTextState(value);
-  };
+    setTextInteraction({ scope, revision, options: interaction });
+    return true;
+  }, [scope]);
   const addFiles = (selected) => {
     const accepted = selected.filter((file) => attachmentMimeTypes.includes(canonicalInputMimeType(file.type, file.name)));
     revisionRef.current += 1;
-    const additions = accepted.map(createAgentChatComposerFile);
-    setFiles((current) => [...current, ...additions]);
+    const additions = selected.map(createAgentChatComposerFile);
+    filesRef.current = [...filesRef.current, ...additions];
+    setFiles(filesRef.current);
     setAttachmentError(accepted.length === selected.length ? null : "One or more selected file types are not supported by this Agent.");
   };
   const removeFile = (id) => {
     revisionRef.current += 1;
     const removed = filesRef.current.find((file) => file.id === id);
-    if (removed) revokeAgentChatComposerFiles([removed]);
-    setFiles((current) => current.filter((file) => file.id !== id));
+    filesRef.current = filesRef.current.filter((file) => file.id !== id);
+    if (removed) revokeUnownedFiles([removed]);
+    setFiles(filesRef.current);
   };
-  const recorder = useAudioRecorder((file) => addFiles([file]), { onStreamChange: options.onRecordingStreamChange });
+  const recorder = useAudioRecorder(
+    (file, context) => options.onRecordingComplete ? options.onRecordingComplete(file, context) : addFiles([file]),
+    {
+      onStreamChange: options.onRecordingStreamChange,
+      scopeKey: options.scopeKey,
+      acceptedMimeTypes: options.onRecordingComplete ? void 0 : options.inputContract?.modalities.audio.allowed_mime_types ?? []
+    }
+  );
   const validationError = options.inputContract ? validateAgentChatSubmission(
     options.inputContract,
     text,
     files.map((file) => ({ data: file.source || new Uint8Array(), mediaType: file.mediaType, name: file.filename, byteSize: file.byteSize }))
   ) : null;
-  const canSubmit = Boolean(text.trim() || files.length) && !options.disabled && !options.isCancelling && !isSubmitting && !recorder.isRecording && !validationError;
-  const submit = async () => {
-    if (!canSubmit || submittingRef.current) return;
-    const value = text;
-    const selectedFiles = files;
+  const canSubmit = Boolean(text.trim() || files.length) && !options.disabled && !options.isCancelling && !isSubmitting && !recorder.isRecording && !recorder.isStarting && !recorder.isProcessing && !validationError;
+  const submit = async (submission) => {
+    const value = submission?.text ?? textRef.current;
+    const selectedFiles = submission?.files ?? filesRef.current;
+    const suppliedError = options.inputContract ? validateAgentChatSubmission(
+      options.inputContract,
+      value,
+      selectedFiles.map((file) => ({ data: file.source || new Uint8Array(), mediaType: file.mediaType, name: file.filename, byteSize: file.byteSize }))
+    ) : null;
+    if (!mountedRef.current || !value.trim() && !selectedFiles.length || options.disabled || options.isCancelling || submittingRef.current || recorder.isCapturing() || !submission && recorder.isProcessing || suppliedError) return false;
+    const generation = generationRef.current;
     const clearedRevision = ++revisionRef.current;
     submittingRef.current = true;
     setIsSubmitting(true);
-    inFlightFilesRef.current = selectedFiles;
+    const selectedUrls = new Set(selectedFiles.map((file) => file.url));
+    const replacedFiles = filesRef.current.filter((file) => !selectedUrls.has(file.url));
+    const submissionId = /* @__PURE__ */ Symbol();
+    inFlightFilesRef.current.set(submissionId, selectedFiles);
+    textRef.current = "";
+    filesRef.current = [];
+    revokeUnownedFiles(replacedFiles);
     setTextState("");
     setFiles([]);
     focusComposer();
     try {
       await options.onSubmit(value, selectedFiles);
-      revokeAgentChatComposerFiles(selectedFiles);
+      return true;
     } catch {
-      if (revisionRef.current === clearedRevision) {
+      if (mountedRef.current && generationRef.current === generation && revisionRef.current === clearedRevision) {
         revisionRef.current += 1;
+        textRef.current = value;
+        filesRef.current = selectedFiles;
         setTextState(value);
         setFiles(selectedFiles);
-      } else revokeAgentChatComposerFiles(selectedFiles);
+      }
+      return false;
     } finally {
-      inFlightFilesRef.current = [];
-      submittingRef.current = false;
-      setIsSubmitting(false);
+      inFlightFilesRef.current.delete(submissionId);
+      revokeUnownedFiles(selectedFiles);
+      if (mountedRef.current && generationRef.current === generation) {
+        submittingRef.current = false;
+        setIsSubmitting(false);
+      }
     }
   };
   return {
@@ -993,6 +1086,7 @@ function useAgentChatComposer(options) {
     attachmentMimeTypes,
     validationError,
     recorder,
+    isProcessing: recorder.isProcessing,
     recordingAllowed: options.recordingEnabled ?? options.inputContract?.modalities.audio.recording_enabled ?? false,
     fileAccept: attachmentFileAccept(attachmentMimeTypes),
     onKeyDown: (event) => {
@@ -1117,6 +1211,7 @@ function formatFileCount(files) {
 var pillButtonClass = "inline-flex size-8 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-muted text-sm text-muted-foreground shadow-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
 var submitButtonClass = "inline-flex size-9 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-primary text-sm text-primary-foreground shadow-none transition-[background-color,color,opacity,transform] duration-200 hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
 function AgentChatComposer({
+  ref,
   inputContract,
   recordingEnabled,
   contextWindow,
@@ -1126,6 +1221,7 @@ function AgentChatComposer({
   disabled = false,
   forceExpanded = false,
   focusKey,
+  scopeKey,
   inputToolbarContent,
   isRunning = false,
   isCancelling = false,
@@ -1144,12 +1240,14 @@ function AgentChatComposer({
     disabled,
     isRunning,
     isCancelling,
+    scopeKey,
     focusKey,
     restoredDraft,
     textareaRef: localTextareaRef,
     onSubmit: (text2, files2) => onSubmit({ text: text2.trim(), files: files2, attachmentIds: files2.flatMap((file) => file.id ? [file.id] : []) })
   });
   const { text, files, setText, isSubmitting, canSubmit, action, submit } = composer;
+  React6.useImperativeHandle(ref, () => ({ setText }), [setText]);
   const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
   const setTextareaRef = React6.useCallback(
     (node) => {
@@ -1625,14 +1723,71 @@ function AgentChatDefaultActions({
 }
 
 // src/ui/agent-chat-message.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import { ChevronDown as ChevronDown3, ChevronUp } from "lucide-react";
 
+// src/ui/hitl-submission-status.tsx
+import * as React9 from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var defaultHitlSubmissionLabels = {
+  submitting: "Submitting\u2026",
+  checking: "Checking submission\u2026",
+  uncertain: "Submission could not be confirmed.",
+  retry: "Retry submission",
+  accepted: "Accepted; agent continuing",
+  approved: "Approved; agent continuing",
+  rejected: "Rejected"
+};
+function isHitlSubmissionCompact(state) {
+  return ["submitting", "resuming", "checking", "uncertain", "accepted"].includes(state?.status || "");
+}
+function HitlSubmissionStatus({ state, labels: overrides, onPaint }) {
+  const labels = { ...defaultHitlSubmissionLabels, ...overrides };
+  const started = React9.useRef(performance.now());
+  const ref = React9.useRef(null);
+  const paintCallback = React9.useRef(onPaint);
+  paintCallback.current = onPaint;
+  React9.useEffect(() => {
+    const frame = requestAnimationFrame(() => paintCallback.current?.(performance.now() - started.current));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  React9.useEffect(() => {
+    ref.current?.focus({ preventScroll: true });
+  }, []);
+  const text = state.status === "checking" ? labels.checking : state.status === "uncertain" ? labels.uncertain : state.status === "accepted" ? state.action === "approve" ? labels.approved : state.action === "reject" ? labels.rejected : labels.accepted : labels.submitting;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref,
+      tabIndex: -1,
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "data-hitl-submission": state.status,
+      className: "a24-hitl-submission flex items-center gap-2 py-1 text-start text-sm text-muted-foreground outline-none",
+      children: [
+        /* @__PURE__ */ jsx7("span", { children: text }),
+        state.status === "uncertain" && state.retry && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "rounded px-2 py-1 text-foreground underline underline-offset-2",
+            onClick: () => {
+              void state.retry?.().catch(() => void 0);
+            },
+            children: labels.retry
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/ui/agent-response-timeline.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 
 // src/ui/ask-user-interaction.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import {
   ChevronDown,
   ChevronLeft,
@@ -1694,7 +1849,7 @@ function askUserAnswersFromDrafts(questions, drafts) {
 }
 
 // src/ui/ask-user-interaction.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function resolvedAnswerText(question, answer) {
   if (!answer) return ["No response recorded"];
   const labels = answer.selectedOptionIds.flatMap((optionId) => {
@@ -1708,7 +1863,7 @@ function ResolvedQuestions({
   buttonRef,
   part
 }) {
-  const [open, setOpen] = React9.useState(false);
+  const [open, setOpen] = React10.useState(false);
   const count = part.questions.length;
   const answers = new Map(
     (part.resolution?.answers || []).map((answer) => [
@@ -1716,8 +1871,8 @@ function ResolvedQuestions({
       answer
     ])
   );
-  return /* @__PURE__ */ jsxs5("div", { className: "a24-ask-user a24-ask-user--resolved w-full", children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6("div", { className: "a24-ask-user a24-ask-user--resolved w-full", children: [
+    /* @__PURE__ */ jsxs6(
       "button",
       {
         "aria-expanded": open,
@@ -1726,13 +1881,13 @@ function ResolvedQuestions({
         ref: buttonRef,
         type: "button",
         children: [
-          /* @__PURE__ */ jsxs5("span", { children: [
+          /* @__PURE__ */ jsxs6("span", { children: [
             "Asked ",
             count,
             " question",
             count === 1 ? "" : "s"
           ] }),
-          open ? /* @__PURE__ */ jsx7(ChevronDown, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsx7(
+          open ? /* @__PURE__ */ jsx8(ChevronDown, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsx8(
             ChevronRight,
             {
               "aria-hidden": "true",
@@ -1742,12 +1897,12 @@ function ResolvedQuestions({
         ]
       }
     ),
-    open ? /* @__PURE__ */ jsx7("div", { className: "mt-2 space-y-3 ps-4", children: part.questions.map((question) => /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx7("div", { className: "text-sm font-medium text-foreground", children: question.question }),
-      /* @__PURE__ */ jsx7("div", { className: "mt-1 space-y-1 text-sm text-muted-foreground", children: resolvedAnswerText(
+    open ? /* @__PURE__ */ jsx8("div", { className: "mt-2 space-y-3 ps-4", children: part.questions.map((question) => /* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx8("div", { className: "text-sm font-medium text-foreground", children: question.question }),
+      /* @__PURE__ */ jsx8("div", { className: "mt-1 space-y-1 text-sm text-muted-foreground", children: resolvedAnswerText(
         question,
         answers.get(question.id)
-      ).map((value, index) => /* @__PURE__ */ jsx7(
+      ).map((value, index) => /* @__PURE__ */ jsx8(
         "div",
         {
           className: "whitespace-pre-wrap break-words",
@@ -1760,40 +1915,50 @@ function ResolvedQuestions({
 }
 function AskUserInteraction({
   error,
+  submission,
+  submissionLabels,
+  onSubmissionPaint,
   isBusy = false,
   onSubmit,
   part
 }) {
   const questions = part.questions;
-  const [step, setStep] = React9.useState(0);
-  const [drafts, setDrafts] = React9.useState(
+  const [step, setStep] = React10.useState(0);
+  const [drafts, setDrafts] = React10.useState(
     () => emptyAskUserDrafts(questions)
   );
-  const headingRef = React9.useRef(null);
-  const questionsRef = React9.useRef(questions);
-  const resolvedButtonRef = React9.useRef(null);
-  const wasResolvedRef = React9.useRef(part.status !== "pending");
+  const otherRef = React10.useRef(null);
+  const headingRef = React10.useRef(null);
+  const questionsRef = React10.useRef(questions);
+  const resolvedButtonRef = React10.useRef(null);
+  const wasResolvedRef = React10.useRef(part.status !== "pending");
   questionsRef.current = questions;
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     setStep(0);
     setDrafts(emptyAskUserDrafts(questionsRef.current));
   }, [part.interruptId]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     headingRef.current?.focus();
   }, [step]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const isResolved = part.status !== "pending";
     if (isResolved && !wasResolvedRef.current) {
       resolvedButtonRef.current?.focus();
     }
     wasResolvedRef.current = isResolved;
   }, [part.status]);
+  React10.useEffect(() => {
+    if (submission?.status === "error") (otherRef.current?.value ? otherRef.current : headingRef.current)?.focus();
+  }, [submission?.status]);
+  if (part.status === "pending" && isHitlSubmissionCompact(submission)) {
+    return /* @__PURE__ */ jsx8(HitlSubmissionStatus, { state: submission, labels: submissionLabels, onPaint: onSubmissionPaint });
+  }
   if (part.status !== "pending") {
-    return /* @__PURE__ */ jsx7(ResolvedQuestions, { buttonRef: resolvedButtonRef, part });
+    return /* @__PURE__ */ jsx8(ResolvedQuestions, { buttonRef: resolvedButtonRef, part });
   }
   const question = questions[step];
   if (!question) {
-    return /* @__PURE__ */ jsx7("div", { className: "text-sm text-destructive", role: "alert", children: "This question request is unavailable." });
+    return /* @__PURE__ */ jsx8("div", { className: "text-sm text-destructive", role: "alert", children: "This question request is unavailable." });
   }
   const draft = drafts[question.id] || {
     customText: "",
@@ -1827,9 +1992,9 @@ function AskUserInteraction({
       })
     );
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "a24-ask-user space-y-3 rounded-xl border border-border/50 bg-background p-4 shadow-sm", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-start justify-between gap-4", children: [
-      /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs6("div", { className: "a24-ask-user space-y-3 rounded-xl border border-border/50 bg-background p-4 shadow-sm", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsx8(
         "h3",
         {
           className: "min-w-0 flex-1 text-base font-medium leading-6 text-foreground outline-none",
@@ -1838,8 +2003,8 @@ function AskUserInteraction({
           children: question.question
         }
       ),
-      /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsxs6("div", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx8(
           "button",
           {
             "aria-label": "Previous question",
@@ -1847,7 +2012,7 @@ function AskUserInteraction({
             disabled: isBusy || step === 0,
             onClick: () => setStep((current) => Math.max(0, current - 1)),
             type: "button",
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx8(
               ChevronLeft,
               {
                 "aria-hidden": "true",
@@ -1856,7 +2021,7 @@ function AskUserInteraction({
             )
           }
         ),
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "span",
           {
             "aria-label": `Question ${step + 1} of ${questions.length}`,
@@ -1868,7 +2033,7 @@ function AskUserInteraction({
             ]
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "button",
           {
             "aria-label": isLastQuestion ? "Submit answers" : "Next question",
@@ -1876,7 +2041,7 @@ function AskUserInteraction({
             disabled: isBusy || !onSubmit || !canMoveForward,
             onClick: () => completeStep(drafts),
             type: "button",
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx8(
               ChevronRight,
               {
                 "aria-hidden": "true",
@@ -1887,10 +2052,10 @@ function AskUserInteraction({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
       question.options.map((option, index) => {
         const selected = draft.selectedOptionIds.includes(option.id);
-        return /* @__PURE__ */ jsxs5(
+        return /* @__PURE__ */ jsxs6(
           "button",
           {
             "aria-pressed": selected,
@@ -1902,7 +2067,7 @@ function AskUserInteraction({
             onClick: () => selectOption(option.id),
             type: "button",
             children: [
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 "span",
                 {
                   className: cn(
@@ -1912,8 +2077,8 @@ function AskUserInteraction({
                   children: index + 1
                 }
               ),
-              /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 font-medium text-foreground", children: option.label }),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8("span", { className: "min-w-0 flex-1 font-medium text-foreground", children: option.label }),
+              /* @__PURE__ */ jsx8(
                 ChevronRight,
                 {
                   "aria-hidden": "true",
@@ -1925,11 +2090,12 @@ function AskUserInteraction({
           option.id
         );
       }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex min-h-11 items-center gap-2 rounded-xl bg-muted px-2.5 py-1.5 focus-within:ring-1 focus-within:ring-ring", children: [
-        /* @__PURE__ */ jsx7("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/70 text-muted-foreground", children: /* @__PURE__ */ jsx7(Pencil, { "aria-hidden": "true", className: "size-4" }) }),
-        /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsxs6("div", { className: "flex min-h-11 items-center gap-2 rounded-xl bg-muted px-2.5 py-1.5 focus-within:ring-1 focus-within:ring-ring", children: [
+        /* @__PURE__ */ jsx8("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/70 text-muted-foreground", children: /* @__PURE__ */ jsx8(Pencil, { "aria-hidden": "true", className: "size-4" }) }),
+        /* @__PURE__ */ jsx8(
           "input",
           {
+            ref: otherRef,
             "aria-label": "Other response",
             autoComplete: "off",
             className: "h-8 min-w-0 flex-1 bg-transparent px-1 text-sm text-foreground outline-none placeholder:text-muted-foreground",
@@ -1946,7 +2112,7 @@ function AskUserInteraction({
             value: draft.customText
           }
         ),
-        draft.customText.trim() ? /* @__PURE__ */ jsx7(
+        draft.customText.trim() ? /* @__PURE__ */ jsx8(
           "button",
           {
             className: "h-8 shrink-0 rounded-full bg-foreground px-4 text-sm font-medium text-background transition-colors hover:opacity-85 disabled:opacity-50",
@@ -1958,12 +2124,12 @@ function AskUserInteraction({
         ) : null
       ] })
     ] }),
-    error ? /* @__PURE__ */ jsx7("div", { className: "text-sm text-destructive", role: "alert", children: error }) : null
+    error ? /* @__PURE__ */ jsx8("div", { className: "text-sm text-destructive", role: "alert", children: error }) : null
   ] });
 }
 
 // src/ui/agent-chat-context-compression-row.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function compressionPresentation(part) {
   if (part.status === "failed") {
     return { label: "Could not compact message history", status: "failed" };
@@ -1978,7 +2144,7 @@ function AgentChatContextCompressionRow({
   part
 }) {
   const presentation = compressionPresentation(part);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "aria-live": "polite",
@@ -1986,11 +2152,11 @@ function AgentChatContextCompressionRow({
       "data-agents24-context-compression": "",
       "data-status": part.status,
       role: "status",
-      children: /* @__PURE__ */ jsx8("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ jsx8("div", { className: cn(
+      children: /* @__PURE__ */ jsx9("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ jsx9("div", { className: cn(
         "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--without-orb",
         presentation.status === "failed" && "a24-tool-trigger--error",
         presentation.status === "running" && "a24-tool-trigger--active"
-      ), children: /* @__PURE__ */ jsx8("span", { className: cn(
+      ), children: /* @__PURE__ */ jsx9("span", { className: cn(
         "a24-tool-trigger__label",
         presentation.status === "running" && "a24-tool-shimmer"
       ), children: presentation.label }) }) })
@@ -1999,7 +2165,7 @@ function AgentChatContextCompressionRow({
 }
 
 // src/ui/message-response.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { defaultRehypePlugins, Streamdown } from "streamdown";
 
 // src/active-content.ts
@@ -2024,14 +2190,14 @@ function safeChatMarkdownHref(value) {
 }
 
 // src/ui/message-code.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { FileCode2Icon } from "lucide-react";
 
 // src/ui/code-block.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { cva as cva2 } from "class-variance-authority";
 import { CheckIcon, CopyIcon, DownloadIcon, WrapTextIcon } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var codeBlockVariants = cva2(
   "a24-code-block",
   {
@@ -2052,7 +2218,7 @@ function CodeBlock({
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       "data-slot": "code-block",
@@ -2064,7 +2230,7 @@ function CodeBlock({
   );
 }
 function CodeBlockHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       "data-slot": "code-block-header",
@@ -2077,7 +2243,7 @@ function CodeBlockHeader({ className, ...props }) {
   );
 }
 function CodeBlockTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       "data-slot": "code-block-title",
@@ -2093,7 +2259,7 @@ function CodeBlockActions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       "data-slot": "code-block-actions",
@@ -2111,16 +2277,16 @@ function CodeBlockCopyButton({
   onClick,
   ...props
 }) {
-  const [copied, setCopied] = React10.useState(false);
-  React10.useEffect(() => {
+  const [copied, setCopied] = React11.useState(false);
+  React11.useEffect(() => {
     if (!copied) {
       return;
     }
     const timeout = setTimeout(() => setCopied(false), 2e3);
     return () => clearTimeout(timeout);
   }, [copied]);
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -2136,10 +2302,10 @@ function CodeBlockCopyButton({
           });
         },
         ...props,
-        children: copied ? /* @__PURE__ */ jsx9(CheckIcon, { size: 12, strokeWidth: 1.5 }) : /* @__PURE__ */ jsx9(CopyIcon, { size: 12, strokeWidth: 1.5 })
+        children: copied ? /* @__PURE__ */ jsx10(CheckIcon, { size: 12, strokeWidth: 1.5 }) : /* @__PURE__ */ jsx10(CopyIcon, { size: 12, strokeWidth: 1.5 })
       }
     ),
-    /* @__PURE__ */ jsx9("span", { "aria-live": "polite", className: "a24-code-block__announcement", children: copied ? "Copied" : "" })
+    /* @__PURE__ */ jsx10("span", { "aria-live": "polite", className: "a24-code-block__announcement", children: copied ? "Copied" : "" })
   ] });
 }
 function CodeBlockWrapButton({
@@ -2149,7 +2315,7 @@ function CodeBlockWrapButton({
   onClick,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "button",
     {
       type: "button",
@@ -2163,7 +2329,7 @@ function CodeBlockWrapButton({
         if (!event.defaultPrevented) onWrapChange(!wrap);
       },
       ...props,
-      children: /* @__PURE__ */ jsx9(WrapTextIcon, { size: 12, strokeWidth: 1.5 })
+      children: /* @__PURE__ */ jsx10(WrapTextIcon, { size: 12, strokeWidth: 1.5 })
     }
   );
 }
@@ -2174,7 +2340,7 @@ function CodeBlockDownloadButton({
   onClick,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "button",
     {
       type: "button",
@@ -2195,7 +2361,7 @@ function CodeBlockDownloadButton({
         setTimeout(() => URL.revokeObjectURL(url), 1e3);
       },
       ...props,
-      children: /* @__PURE__ */ jsx9(DownloadIcon, { size: 12, strokeWidth: 1.5 })
+      children: /* @__PURE__ */ jsx10(DownloadIcon, { size: 12, strokeWidth: 1.5 })
     }
   );
 }
@@ -2208,7 +2374,7 @@ function CodeBlockContent({
   startLine = 1,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "pre",
     {
       "data-slot": "code-block-content",
@@ -2222,12 +2388,12 @@ function CodeBlockContent({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx10(
         "code",
         {
           "data-slot": "code-block-code",
           className: "a24-code-block__code",
-          children: lineNumbers && typeof children === "string" ? children.replace(/\n$/, "").split("\n").map((line, index) => /* @__PURE__ */ jsx9(CodeBlockLine, { children: line }, index)) : children
+          children: lineNumbers && typeof children === "string" ? children.replace(/\n$/, "").split("\n").map((line, index) => /* @__PURE__ */ jsx10(CodeBlockLine, { children: line }, index)) : children
         }
       )
     }
@@ -2256,19 +2422,19 @@ function CodeBlockLine({
   ...props
 }) {
   const empty = children === void 0 || children === null || children === "" || Array.isArray(children) && children.length === 0;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       "data-slot": "code-block-line",
       "data-variant": variant,
       className: cn(codeBlockLineVariants({ variant }), className),
       ...props,
-      children: /* @__PURE__ */ jsx9("span", { "data-slot": "code-block-line-content", className: "a24-code-block__line-content", children: empty ? "\n" : children })
+      children: /* @__PURE__ */ jsx10("span", { "data-slot": "code-block-line-content", className: "a24-code-block__line-content", children: empty ? "\n" : children })
     }
   );
 }
 function CodeBlockFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       "data-slot": "code-block-footer",
@@ -2282,7 +2448,7 @@ function CodeBlockFooter({ className, ...props }) {
 }
 
 // src/ui/use-highlighted-code.ts
-import * as React11 from "react";
+import * as React12 from "react";
 
 // src/ui/code-highlighter.tsx
 import {
@@ -2290,7 +2456,7 @@ import {
 } from "shiki/core";
 import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
 import { bundledLanguages, bundledLanguagesAlias } from "shiki/langs";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var languageLoaders = {
   ...bundledLanguages,
   ...bundledLanguagesAlias
@@ -2335,7 +2501,7 @@ async function loadHighlighter(language) {
       const tokens = lang === "ansi" ? code.split("\n").flatMap((line) => tokenize(line)) : tokenize(code);
       return {
         lines: tokens.map(
-          (line) => line.map((token, index) => /* @__PURE__ */ jsx10(
+          (line) => line.map((token, index) => /* @__PURE__ */ jsx11(
             "span",
             {
               style: token.htmlStyle,
@@ -2354,9 +2520,9 @@ async function loadHighlighter(language) {
 // src/ui/use-highlighted-code.ts
 function useHighlightedCode(value, language) {
   const code = value.endsWith("\n") ? value.slice(0, -1) : value;
-  const [loaded, setLoaded] = React11.useState(null);
+  const [loaded, setLoaded] = React12.useState(null);
   const highlighter2 = loaded?.language === language ? loaded.highlighter : null;
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     let cancelled = false;
     loadHighlighter(language).then((next2) => {
       if (!cancelled) {
@@ -2368,7 +2534,7 @@ function useHighlightedCode(value, language) {
       cancelled = true;
     };
   }, [language]);
-  const [done, setDone] = React11.useState({ highlighter: null, text: "", lines: [] });
+  const [done, setDone] = React12.useState({ highlighter: null, text: "", lines: [] });
   let next = done;
   if (next.highlighter !== highlighter2 || !code.startsWith(next.text)) {
     next = { highlighter: highlighter2, text: "", lines: [] };
@@ -2390,7 +2556,7 @@ function useHighlightedCode(value, language) {
     setDone(next);
   }
   const tail = code.slice(end);
-  return React11.useMemo(() => {
+  return React12.useMemo(() => {
     if (!highlighter2) {
       return code.split("\n");
     }
@@ -2399,7 +2565,7 @@ function useHighlightedCode(value, language) {
 }
 
 // src/ui/message-code.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var CODE_EXTENSIONS = {
   bash: "sh",
   shell: "sh",
@@ -2441,32 +2607,32 @@ var CODE_EXTENSIONS = {
   plaintext: "txt"
 };
 function MessageCodeBlock({ code, language = "text" }) {
-  const [wrap, setWrap] = React12.useState(false);
+  const [wrap, setWrap] = React13.useState(false);
   const lines = useHighlightedCode(code, language);
   const extension = Object.prototype.hasOwnProperty.call(CODE_EXTENSIONS, language.toLowerCase()) ? CODE_EXTENSIONS[language.toLowerCase()] : "txt";
-  return /* @__PURE__ */ jsxs7(CodeBlock, { children: [
-    /* @__PURE__ */ jsxs7(CodeBlockHeader, { children: [
-      /* @__PURE__ */ jsxs7(CodeBlockTitle, { children: [
-        /* @__PURE__ */ jsx11(FileCode2Icon, { size: 14, strokeWidth: 1.5, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx11("span", { children: language })
+  return /* @__PURE__ */ jsxs8(CodeBlock, { children: [
+    /* @__PURE__ */ jsxs8(CodeBlockHeader, { children: [
+      /* @__PURE__ */ jsxs8(CodeBlockTitle, { children: [
+        /* @__PURE__ */ jsx12(FileCode2Icon, { size: 14, strokeWidth: 1.5, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx12("span", { children: language })
       ] }),
-      /* @__PURE__ */ jsxs7(CodeBlockActions, { children: [
-        /* @__PURE__ */ jsx11(CodeBlockWrapButton, { wrap, onWrapChange: setWrap }),
-        /* @__PURE__ */ jsx11(CodeBlockDownloadButton, { value: code, filename: `code.${extension}` }),
-        /* @__PURE__ */ jsx11(CodeBlockCopyButton, { value: code })
+      /* @__PURE__ */ jsxs8(CodeBlockActions, { children: [
+        /* @__PURE__ */ jsx12(CodeBlockWrapButton, { wrap, onWrapChange: setWrap }),
+        /* @__PURE__ */ jsx12(CodeBlockDownloadButton, { value: code, filename: `code.${extension}` }),
+        /* @__PURE__ */ jsx12(CodeBlockCopyButton, { value: code })
       ] })
     ] }),
-    /* @__PURE__ */ jsx11(CodeBlockContent, { "aria-label": `${language} code`, lineNumbers: true, wrap, children: lines.map((line, index) => /* @__PURE__ */ jsx11(CodeBlockLine, { children: line }, index)) })
+    /* @__PURE__ */ jsx12(CodeBlockContent, { "aria-label": `${language} code`, lineNumbers: true, wrap, children: lines.map((line, index) => /* @__PURE__ */ jsx12(CodeBlockLine, { children: line }, index)) })
   ] });
 }
 function MessageMarkdownCode({ children, className, node, ...props }) {
   const language = className?.match(/(?:^|\s)language-([^\s]+)/)?.[1];
   const multiline = node?.position?.start?.line !== node?.position?.end?.line;
   if (props["data-block"] === void 0 && !language && !multiline) {
-    return /* @__PURE__ */ jsx11("code", { ...props, className: cn("a24-inline-code", className), "data-streamdown": "inline-code", children });
+    return /* @__PURE__ */ jsx12("code", { ...props, className: cn("a24-inline-code", className), "data-streamdown": "inline-code", children });
   }
   const code = typeof children === "string" ? children.replace(/\n$/, "") : "";
-  return /* @__PURE__ */ jsx11(MessageCodeBlock, { code, language });
+  return /* @__PURE__ */ jsx12(MessageCodeBlock, { code, language });
 }
 function formatMessageJson(text) {
   const trimmed = text.trim();
@@ -2500,17 +2666,17 @@ ${"  ".repeat(depth)}`;
 }
 
 // src/ui/message-response.tsx
-import { Fragment as Fragment3, jsx as jsx12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13 } from "react/jsx-runtime";
 function SafeMarkdownLink({ children, href, ...props }) {
   const domProps = { ...props };
   delete domProps.node;
   const safeHref = safeChatMarkdownHref(href);
-  if (!safeHref) return /* @__PURE__ */ jsx12("span", { children });
-  if (safeHref.startsWith("#")) return /* @__PURE__ */ jsx12("a", { ...domProps, href: safeHref, children });
-  return /* @__PURE__ */ jsx12("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
+  if (!safeHref) return /* @__PURE__ */ jsx13("span", { children });
+  if (safeHref.startsWith("#")) return /* @__PURE__ */ jsx13("a", { ...domProps, href: safeHref, children });
+  return /* @__PURE__ */ jsx13("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
 }
 function BlockedMarkdownImage({ alt }) {
-  return alt ? /* @__PURE__ */ jsx12("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
+  return alt ? /* @__PURE__ */ jsx13("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
 }
 var BLOCK_MARKDOWN_TAGS = /* @__PURE__ */ new Set([
   "blockquote",
@@ -2531,7 +2697,7 @@ function isMultilineCodeNode(node) {
   return node?.tagName === "code" && node.position?.start?.line !== void 0 && node.position?.end?.line !== void 0 && node.position.start.line !== node.position.end.line;
 }
 function hasBlockMarkdownChild(child) {
-  if (!React13.isValidElement(child)) {
+  if (!React14.isValidElement(child)) {
     return false;
   }
   if (typeof child.type === "string" && BLOCK_MARKDOWN_TAGS.has(child.type)) {
@@ -2541,7 +2707,7 @@ function hasBlockMarkdownChild(child) {
   if (BLOCK_MARKDOWN_TAGS.has(props.node?.tagName || "") || isMultilineCodeNode(props.node)) {
     return true;
   }
-  return React13.Children.toArray(props.children).some(hasBlockMarkdownChild);
+  return React14.Children.toArray(props.children).some(hasBlockMarkdownChild);
 }
 function MessageMarkdownParagraph({
   children,
@@ -2549,17 +2715,17 @@ function MessageMarkdownParagraph({
 }) {
   const domProps = { ...props };
   delete domProps.node;
-  const childArray = React13.Children.toArray(children).filter(
+  const childArray = React14.Children.toArray(children).filter(
     (child) => child !== null && child !== ""
   );
-  const isImageOnly = childArray.length === 1 && React13.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
+  const isImageOnly = childArray.length === 1 && React14.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
   if (isImageOnly) {
-    return /* @__PURE__ */ jsx12(Fragment3, { children });
+    return /* @__PURE__ */ jsx13(Fragment3, { children });
   }
   if (childArray.some(hasBlockMarkdownChild)) {
-    return /* @__PURE__ */ jsx12("div", { ...domProps, children });
+    return /* @__PURE__ */ jsx13("div", { ...domProps, children });
   }
-  return /* @__PURE__ */ jsx12("p", { ...domProps, children });
+  return /* @__PURE__ */ jsx13("p", { ...domProps, children });
 }
 var MESSAGE_RESPONSE_COMPONENTS = {
   a: SafeMarkdownLink,
@@ -2580,7 +2746,7 @@ var MESSAGE_RESPONSE_REHYPE_PLUGINS = [
     ]
   ] : []
 ];
-var MessageResponse = React13.memo(
+var MessageResponse = React14.memo(
   ({
     children,
     className,
@@ -2598,13 +2764,13 @@ var MessageResponse = React13.memo(
       maxCatchupChars: 32,
       text
     });
-    const streamdownComponents = React13.useMemo(
+    const streamdownComponents = React14.useMemo(
       () => ({ ...MESSAGE_RESPONSE_COMPONENTS, ...components }),
       [components]
     );
-    const json = React13.useMemo(() => formatMessageJson(text), [text]);
+    const json = React14.useMemo(() => formatMessageJson(text), [text]);
     if (json !== null && !components?.code) {
-      return /* @__PURE__ */ jsx12("div", { className: cn("a24-message-response", className), children: /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13("div", { className: cn("a24-message-response", className), children: /* @__PURE__ */ jsx13(
         MessageCodeBlock,
         {
           code: streaming || streamingText.isAnimating ? streamingText.displayedText : json,
@@ -2612,7 +2778,7 @@ var MessageResponse = React13.memo(
         }
       ) });
     }
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Streamdown,
       {
         className: cn("a24-message-response", className),
@@ -2664,10 +2830,10 @@ function resolvedHitlLabel(part) {
 }
 
 // src/ui/tool-sessions.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2 } from "lucide-react";
 import { ThinkingOrb } from "thinking-orbs";
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function toolSlotContext(isActive2, label, part, slots) {
   return {
     isActive: isActive2,
@@ -2685,7 +2851,7 @@ function ToolResourceAction({ context }) {
   const target = context.resourceTargets[0];
   if (!target) return null;
   const name = resourceTargetName(target);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "button",
     {
       "aria-label": `Open ${target.kind} ${target.path}`,
@@ -2699,8 +2865,8 @@ function ToolResourceAction({ context }) {
   );
 }
 function toolAccessory(context, slots) {
-  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    slots?.onResourceAction ? /* @__PURE__ */ jsx13(ToolResourceAction, { context }) : null,
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    slots?.onResourceAction ? /* @__PURE__ */ jsx14(ToolResourceAction, { context }) : null,
     slots?.renderToolAccessory?.(context)
   ] });
 }
@@ -2777,12 +2943,12 @@ function ToolActivityReel({
 }) {
   const initial = initialLabel && initialLabel !== label ? initialLabel : label;
   const parsedInitialShownAt = initialShownAt ? Date.parse(initialShownAt) : Number.NaN;
-  const [displayed, setDisplayed] = React14.useState(initial);
-  const [previous, setPrevious] = React14.useState(null);
-  const displayedRef = React14.useRef(initial);
-  const latestRef = React14.useRef(label);
-  const shownAtRef = React14.useRef(Number.isFinite(parsedInitialShownAt) ? parsedInitialShownAt : Date.now());
-  React14.useEffect(() => {
+  const [displayed, setDisplayed] = React15.useState(initial);
+  const [previous, setPrevious] = React15.useState(null);
+  const displayedRef = React15.useRef(initial);
+  const latestRef = React15.useRef(label);
+  const shownAtRef = React15.useRef(Number.isFinite(parsedInitialShownAt) ? parsedInitialShownAt : Date.now());
+  React15.useEffect(() => {
     latestRef.current = label;
     if (displayedRef.current === label) return;
     const showLatest = () => {
@@ -2802,18 +2968,18 @@ function ToolActivityReel({
     const timer = window.setTimeout(showLatest, remaining);
     return () => window.clearTimeout(timer);
   }, [label]);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     if (!previous) return;
     const timer = window.setTimeout(() => setPrevious(null), 200);
     return () => window.clearTimeout(timer);
   }, [previous]);
-  return /* @__PURE__ */ jsxs8("span", { className: "a24-tool-reel", "aria-live": announce ? "polite" : "off", children: [
-    previous ? /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", className: "a24-tool-reel__previous", children: previous }) : null,
-    /* @__PURE__ */ jsx13("span", { className: previous ? "a24-tool-reel__current" : void 0, children: displayed })
+  return /* @__PURE__ */ jsxs9("span", { className: "a24-tool-reel", "aria-live": announce ? "polite" : "off", children: [
+    previous ? /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", className: "a24-tool-reel__previous", children: previous }) : null,
+    /* @__PURE__ */ jsx14("span", { className: previous ? "a24-tool-reel__current" : void 0, children: displayed })
   ] });
 }
 function ToolActivityOrb({ label = "Working", kind = "tool", part, renderActivityIcon }) {
-  return /* @__PURE__ */ jsx13("span", { className: "a24-tool-orb", children: renderActivityIcon ? renderActivityIcon({ label, kind, part }) : /* @__PURE__ */ jsx13(ThinkingOrb, { "aria-label": label, size: 20, speed: 0.8, state: "searching" }) });
+  return /* @__PURE__ */ jsx14("span", { className: "a24-tool-orb", children: renderActivityIcon ? renderActivityIcon({ label, kind, part }) : /* @__PURE__ */ jsx14(ThinkingOrb, { "aria-label": label, size: 20, speed: 0.8, state: "searching" }) });
 }
 function AgentChatActivityRow({
   label,
@@ -2821,22 +2987,22 @@ function AgentChatActivityRow({
   renderActivityIcon,
   onSelect
 }) {
-  const content = /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsx13(ToolActivityOrb, { label, kind: "planning", renderActivityIcon }),
-    /* @__PURE__ */ jsx13("span", { className: "a24-tool-trigger__label a24-tool-shimmer", children: /* @__PURE__ */ jsx13(ToolActivityReel, { label }) })
+  const content = /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx14(ToolActivityOrb, { label, kind: "planning", renderActivityIcon }),
+    /* @__PURE__ */ jsx14("span", { className: "a24-tool-trigger__label a24-tool-shimmer", children: /* @__PURE__ */ jsx14(ToolActivityReel, { label }) })
   ] });
-  return /* @__PURE__ */ jsx13("div", { className: "a24-tool-trigger-row a24-tool-trigger-row--root", "data-agents24-model-turn": modelTurnId, role: "status", children: onSelect ? /* @__PURE__ */ jsx13("button", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", onClick: onSelect, type: "button", children: content }) : /* @__PURE__ */ jsx13("div", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", children: content }) });
+  return /* @__PURE__ */ jsx14("div", { className: "a24-tool-trigger-row a24-tool-trigger-row--root", "data-agents24-model-turn": modelTurnId, role: "status", children: onSelect ? /* @__PURE__ */ jsx14("button", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", onClick: onSelect, type: "button", children: content }) : /* @__PURE__ */ jsx14("div", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", children: content }) });
 }
 function AgentChatModelTurnRow({ part }) {
-  return /* @__PURE__ */ jsx13(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId });
+  return /* @__PURE__ */ jsx14(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId });
 }
 function AgentChatNodeActivityRow({
   renderActivityIcon,
   onSelect,
   part
 }) {
-  const [open, setOpen] = React14.useState(false);
-  const contentId = React14.useId();
+  const [open, setOpen] = React15.useState(false);
+  const contentId = React15.useId();
   const running = part.status === "running";
   const failed = part.status === "failed";
   const failureMessage = part.failure?.message || "The node could not complete the request.";
@@ -2847,18 +3013,18 @@ function AgentChatNodeActivityRow({
     running && "a24-tool-trigger--active",
     failed && "a24-tool-trigger--error"
   );
-  const label = running ? /* @__PURE__ */ jsx13("span", { className: "a24-tool-shimmer", children: /* @__PURE__ */ jsx13(ToolActivityReel, { label: part.label }) }) : part.label;
+  const label = running ? /* @__PURE__ */ jsx14("span", { className: "a24-tool-shimmer", children: /* @__PURE__ */ jsx14(ToolActivityReel, { label: part.label }) }) : part.label;
   if (!failed) {
-    return /* @__PURE__ */ jsx13("div", { className: "a24-tool-trigger-row", role: "status", children: onSelect ? /* @__PURE__ */ jsxs8("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
-      running ? /* @__PURE__ */ jsx13(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
-      /* @__PURE__ */ jsx13("span", { className: "a24-tool-trigger__label", children: label })
-    ] }) : /* @__PURE__ */ jsxs8("div", { className: triggerClassName, children: [
-      running ? /* @__PURE__ */ jsx13(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
-      /* @__PURE__ */ jsx13("span", { className: "a24-tool-trigger__label", children: label })
+    return /* @__PURE__ */ jsx14("div", { className: "a24-tool-trigger-row", role: "status", children: onSelect ? /* @__PURE__ */ jsxs9("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
+      running ? /* @__PURE__ */ jsx14(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
+      /* @__PURE__ */ jsx14("span", { className: "a24-tool-trigger__label", children: label })
+    ] }) : /* @__PURE__ */ jsxs9("div", { className: triggerClassName, children: [
+      running ? /* @__PURE__ */ jsx14(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
+      /* @__PURE__ */ jsx14("span", { className: "a24-tool-trigger__label", children: label })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs8("div", { className: "a24-tool-disclosure", children: [
-    /* @__PURE__ */ jsx13("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9("div", { className: "a24-tool-disclosure", children: [
+    /* @__PURE__ */ jsx14("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ jsxs9(
       "button",
       {
         "aria-controls": contentId,
@@ -2870,12 +3036,12 @@ function AgentChatNodeActivityRow({
         },
         type: "button",
         children: [
-          /* @__PURE__ */ jsx13("span", { className: "a24-tool-trigger__label", children: label }),
-          open ? /* @__PURE__ */ jsx13(ChevronDown2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ jsx13(ChevronRight2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+          /* @__PURE__ */ jsx14("span", { className: "a24-tool-trigger__label", children: label }),
+          open ? /* @__PURE__ */ jsx14(ChevronDown2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ jsx14(ChevronRight2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
         ]
       }
     ) }),
-    open ? /* @__PURE__ */ jsx13("div", { className: "a24-tool-detail a24-tool-detail--error", id: contentId, children: failureMessage }) : null
+    open ? /* @__PURE__ */ jsx14("div", { className: "a24-tool-detail a24-tool-detail--error", id: contentId, children: failureMessage }) : null
   ] });
 }
 function toolRowLabel(part, separateResource = false) {
@@ -2902,25 +3068,25 @@ function ToolDisclosure({
   renderActivityIcon,
   accessory
 }) {
-  const [open, setOpen] = React14.useState(false);
-  const contentId = React14.useId();
-  const expandable = React14.Children.toArray(children).length > 0;
+  const [open, setOpen] = React15.useState(false);
+  const contentId = React15.useId();
+  const expandable = React15.Children.toArray(children).length > 0;
   if (!expandable) {
     const triggerClassName = cn("a24-tool-trigger", root && "a24-tool-trigger--root", root && !showOrb && "a24-tool-trigger--without-orb", error && "a24-tool-trigger--error", loading && "a24-tool-trigger--active");
-    return /* @__PURE__ */ jsxs8("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
-      onSelect && part ? /* @__PURE__ */ jsxs8("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
-        showOrb ? /* @__PURE__ */ jsx13(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
-        /* @__PURE__ */ jsx13("span", { className: "a24-tool-trigger__label", children: label })
-      ] }) : /* @__PURE__ */ jsxs8("div", { className: triggerClassName, children: [
-        showOrb ? /* @__PURE__ */ jsx13(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
-        /* @__PURE__ */ jsx13("span", { className: "a24-tool-trigger__label", children: label })
+    return /* @__PURE__ */ jsxs9("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
+      onSelect && part ? /* @__PURE__ */ jsxs9("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
+        showOrb ? /* @__PURE__ */ jsx14(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
+        /* @__PURE__ */ jsx14("span", { className: "a24-tool-trigger__label", children: label })
+      ] }) : /* @__PURE__ */ jsxs9("div", { className: triggerClassName, children: [
+        showOrb ? /* @__PURE__ */ jsx14(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
+        /* @__PURE__ */ jsx14("span", { className: "a24-tool-trigger__label", children: label })
       ] }),
       accessory
     ] });
   }
-  return /* @__PURE__ */ jsxs8("div", { className: "a24-tool-disclosure", children: [
-    /* @__PURE__ */ jsxs8("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
-      /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9("div", { className: "a24-tool-disclosure", children: [
+    /* @__PURE__ */ jsxs9("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
+      /* @__PURE__ */ jsxs9(
         "button",
         {
           "aria-controls": contentId,
@@ -2934,25 +3100,25 @@ function ToolDisclosure({
           },
           type: "button",
           children: [
-            showOrb ? /* @__PURE__ */ jsx13(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
-            /* @__PURE__ */ jsx13("span", { className: "a24-tool-trigger__label", children: label }),
-            open ? /* @__PURE__ */ jsx13(ChevronDown2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ jsx13(ChevronRight2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+            showOrb ? /* @__PURE__ */ jsx14(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
+            /* @__PURE__ */ jsx14("span", { className: "a24-tool-trigger__label", children: label }),
+            open ? /* @__PURE__ */ jsx14(ChevronDown2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ jsx14(ChevronRight2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
           ]
         }
       ),
       accessory
     ] }),
-    open ? /* @__PURE__ */ jsx13("div", { className: "a24-tool-disclosure__content", id: contentId, children }) : null
+    open ? /* @__PURE__ */ jsx14("div", { className: "a24-tool-disclosure__content", id: contentId, children }) : null
   ] });
 }
 function ToolLabel({ active, label, part, slots }) {
   const rendered = slots?.renderToolLabel?.(toolSlotContext(active, label, part, slots)) ?? label;
-  return active ? /* @__PURE__ */ jsx13("span", { className: "a24-tool-shimmer", children: rendered }) : /* @__PURE__ */ jsx13(Fragment4, { children: rendered });
+  return active ? /* @__PURE__ */ jsx14("span", { className: "a24-tool-shimmer", children: rendered }) : /* @__PURE__ */ jsx14(Fragment4, { children: rendered });
 }
 function ToolList({ children }) {
-  const listRef = React14.useRef(null);
-  const [fades, setFades] = React14.useState({ bottom: false, top: false });
-  const updateFades = React14.useCallback(() => {
+  const listRef = React15.useRef(null);
+  const [fades, setFades] = React15.useState({ bottom: false, top: false });
+  const updateFades = React15.useCallback(() => {
     const list = listRef.current;
     if (!list) return;
     const next = {
@@ -2961,7 +3127,7 @@ function ToolList({ children }) {
     };
     setFades((current) => current.bottom === next.bottom && current.top === next.top ? current : next);
   }, []);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     updateFades();
     const list = listRef.current;
     if (!list || typeof ResizeObserver === "undefined") return;
@@ -2969,13 +3135,13 @@ function ToolList({ children }) {
     observer.observe(list);
     return () => observer.disconnect();
   }, [children, updateFades]);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       className: "a24-tool-list-frame",
       "data-scroll-fade-bottom": fades.bottom ? "" : void 0,
       "data-scroll-fade-top": fades.top ? "" : void 0,
-      children: /* @__PURE__ */ jsx13("div", { className: "a24-tool-list", onScroll: updateFades, ref: listRef, role: "list", children })
+      children: /* @__PURE__ */ jsx14("div", { className: "a24-tool-list", onScroll: updateFades, ref: listRef, role: "list", children })
     }
   );
 }
@@ -2992,13 +3158,13 @@ function AgentChatToolRow({
   const detail = failed ? failureMessage : optionalText(part.presentation.detail);
   const hostDetails = failed ? null : slots?.renderToolDetails?.(part);
   const context = toolSlotContext(active, toolRowLabel(part, Boolean(slots?.onResourceAction)), part, slots);
-  return /* @__PURE__ */ jsx13("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx14("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ jsxs9(
     ToolDisclosure,
     {
       renderActivityIcon: slots?.renderActivityIcon,
       error: failed,
       accessory: toolAccessory(context, slots),
-      label: /* @__PURE__ */ jsx13(ToolLabel, { active, label: context.label, part, slots }),
+      label: /* @__PURE__ */ jsx14(ToolLabel, { active, label: context.label, part, slots }),
       loading: active,
       onExpandedChange: slots?.onExpandedChange,
       onSelect: slots?.onToolSelect,
@@ -3007,7 +3173,7 @@ function AgentChatToolRow({
       showOrb: showOrb ?? active,
       statusLabel: active ? context.label : void 0,
       children: [
-        detail ? /* @__PURE__ */ jsx13("div", { className: cn("a24-tool-detail", failed && "a24-tool-detail--error"), children: detail }) : null,
+        detail ? /* @__PURE__ */ jsx14("div", { className: cn("a24-tool-detail", failed && "a24-tool-detail--error"), children: detail }) : null,
         hostDetails
       ]
     }
@@ -3027,19 +3193,19 @@ function AgentChatToolSession({
   parts,
   slots
 }) {
-  const presentedLiveRef = React14.useRef(false);
+  const presentedLiveRef = React15.useRef(false);
   if (isLive && isLatestActivity) presentedLiveRef.current = true;
   const activeIndex = parts.findLastIndex((part) => isActive(part, activeToolId));
   const running = activeIndex >= 0;
-  if (parts.length === 1 && !modelTurn && !leadingModelTurn) return /* @__PURE__ */ jsx13(AgentChatToolRow, { activeToolId, part: parts[0], slots });
+  if (parts.length === 1 && !modelTurn && !leadingModelTurn) return /* @__PURE__ */ jsx14(AgentChatToolRow, { activeToolId, part: parts[0], slots });
   const visibleIndex = running ? activeIndex : parts.length - 1;
   const visiblePart = parts[visibleIndex];
   const planning = Boolean(modelTurn);
   const presentingActivity = isLatestActivity && (planning || running || isLive);
   const failed = isLatestActivity && (visiblePart.state === "output-error" || visiblePart.state === "cancelled");
   const label = planning ? "Planning next moves" : isLive && isLatestActivity ? toolRowLabel(visiblePart, true) : sessionLabel(parts, visiblePart, running);
-  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ jsx13("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ jsx13(ToolActivityReel, { initialLabel: leadingModelTurn ? "Planning next moves" : void 0, initialShownAt: leadingModelTurn?.timestamp, label }) }) : label;
-  return /* @__PURE__ */ jsx13(
+  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ jsx14("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ jsx14(ToolActivityReel, { initialLabel: leadingModelTurn ? "Planning next moves" : void 0, initialShownAt: leadingModelTurn?.timestamp, label }) }) : label;
+  return /* @__PURE__ */ jsx14(
     ToolDisclosure,
     {
       renderActivityIcon: slots?.renderActivityIcon,
@@ -3052,7 +3218,7 @@ function AgentChatToolSession({
       root: true,
       showOrb: isLive && isLatestActivity,
       statusLabel: planning ? "Planning next moves" : label,
-      children: /* @__PURE__ */ jsx13(ToolList, { children: parts.map((part) => /* @__PURE__ */ jsx13("div", { role: "listitem", children: /* @__PURE__ */ jsx13(AgentChatToolRow, { activeToolId, part, root: false, showOrb: false, slots }) }, part.id)) })
+      children: /* @__PURE__ */ jsx14(ToolList, { children: parts.map((part) => /* @__PURE__ */ jsx14("div", { role: "listitem", children: /* @__PURE__ */ jsx14(AgentChatToolRow, { activeToolId, part, root: false, showOrb: false, slots }) }, part.id)) })
     }
   );
 }
@@ -3073,7 +3239,7 @@ function subagentLabel(part) {
   return { label: `Agent ${name}, ran ${children.length} ${children.length === 1 ? "tool" : "tools"}`, running: false };
 }
 function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part, slots }) {
-  const presentedLiveRef = React14.useRef(false);
+  const presentedLiveRef = React15.useRef(false);
   if (isLive && isLatestActivity) presentedLiveRef.current = true;
   const children = part.presentation.childTools || [];
   const state = subagentLabel(part);
@@ -3082,9 +3248,9 @@ function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part,
   const hostDetails = failed ? null : slots?.renderToolDetails?.(part);
   const failureMessage = part.failure?.message || null;
   const presentingActivity = isLatestActivity && state.running;
-  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ jsx13("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ jsx13(ToolActivityReel, { label: state.label }) }) : state.label;
+  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ jsx14("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ jsx14(ToolActivityReel, { label: state.label }) }) : state.label;
   const context = toolSlotContext(presentingActivity, state.label, part, slots);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     ToolDisclosure,
     {
       renderActivityIcon: slots?.renderActivityIcon,
@@ -3098,12 +3264,12 @@ function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part,
       root: true,
       showOrb: isLive && isLatestActivity,
       statusLabel: state.label,
-      children: /* @__PURE__ */ jsxs8(ToolList, { children: [
-        children.map((child) => /* @__PURE__ */ jsx13("div", { className: cn("a24-child-tool", child.status === "failed" && "a24-child-tool--error"), role: "listitem", children: slots?.renderChildTool?.(child, part) ?? /* @__PURE__ */ jsxs8(Fragment4, { children: [
-          /* @__PURE__ */ jsx13("span", { className: cn(isLive && isLatestActivity && child.status === "running" && "a24-tool-shimmer"), children: childLabel(child) }),
-          child.detail ? /* @__PURE__ */ jsx13("span", { className: "a24-child-tool__detail", children: child.detail }) : null
+      children: /* @__PURE__ */ jsxs9(ToolList, { children: [
+        children.map((child) => /* @__PURE__ */ jsx14("div", { className: cn("a24-child-tool", child.status === "failed" && "a24-child-tool--error"), role: "listitem", children: slots?.renderChildTool?.(child, part) ?? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx14("span", { className: cn(isLive && isLatestActivity && child.status === "running" && "a24-tool-shimmer"), children: childLabel(child) }),
+          child.detail ? /* @__PURE__ */ jsx14("span", { className: "a24-child-tool__detail", children: child.detail }) : null
         ] }) }, child.id)),
-        failureMessage ? /* @__PURE__ */ jsx13("div", { className: "a24-tool-detail a24-tool-detail--error", children: failureMessage }) : null,
+        failureMessage ? /* @__PURE__ */ jsx14("div", { className: "a24-tool-detail a24-tool-detail--error", children: failureMessage }) : null,
         hostDetails
       ] })
     }
@@ -3111,41 +3277,51 @@ function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part,
 }
 
 // src/ui/agent-response-timeline.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function isInternalAskUserTool(part) {
   return [part.toolName, part.toolKey, part.action].some((value) => value?.trim().toLowerCase() === "runtime__ask_user");
 }
 function Shimmer({ children, className }) {
-  return /* @__PURE__ */ jsx14("span", { className: cn("inline-block animate-pulse", className), children });
+  return /* @__PURE__ */ jsx15("span", { className: cn("inline-block animate-pulse", className), children });
 }
 function AgentChatToolPart({
   activeToolId,
   part
 }) {
-  return /* @__PURE__ */ jsx14(AgentChatToolRow, { activeToolId, part });
+  return /* @__PURE__ */ jsx15(AgentChatToolRow, { activeToolId, part });
 }
 function AgentChatToolGroup({
   activeToolId,
   parts
 }) {
-  return /* @__PURE__ */ jsx14(AgentChatToolSession, { activeToolId, parts });
+  return /* @__PURE__ */ jsx15(AgentChatToolSession, { activeToolId, parts });
 }
 function HitlPartRow({
   getHitlActionState,
+  hitlLabels,
+  onHitlPaint,
   isLoading,
   onHitlAction,
   part
 }) {
   const state = getHitlActionState?.(part);
-  const [comment, setComment] = React15.useState("");
+  const [comment, setComment] = React16.useState("");
+  const commentRef = React16.useRef(null);
+  const retryActionRef = React16.useRef(null);
+  React16.useEffect(() => {
+    if (state?.status === "error") (commentRef.current || retryActionRef.current)?.focus();
+  }, [state?.status]);
   const presentation = part.presentation || {};
   const requireComment = presentation.require_comment === true;
   const isTerminal = part.status !== "pending";
   if (part.hitlKind === "user_input") {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       AskUserInteraction,
       {
         error: state?.error,
+        submission: state,
+        submissionLabels: hitlLabels,
+        onSubmissionPaint: onHitlPaint,
         isBusy: isLoading || state?.status === "resuming",
         onSubmit: onHitlAction ? (answers) => onHitlAction(part, {
           action: "respond",
@@ -3159,12 +3335,14 @@ function HitlPartRow({
       }
     );
   }
+  if (isHitlSubmissionCompact(state)) return /* @__PURE__ */ jsx15(HitlSubmissionStatus, { state, labels: hitlLabels, onPaint: onHitlPaint });
   if (isTerminal) return null;
-  return /* @__PURE__ */ jsxs9("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
-    /* @__PURE__ */ jsx14("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
-    requireComment ? /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs10("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
+    /* @__PURE__ */ jsx15("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
+    requireComment ? /* @__PURE__ */ jsx15(
       "textarea",
       {
+        ref: commentRef,
         "aria-label": "Approval comment",
         autoComplete: "off",
         className: "a24-hitl__comment min-h-20 w-full resize-y rounded-md border border-border/60 bg-background px-3 py-2 text-sm outline-none focus-visible:border-neutral-300 focus-visible:ring-0 dark:focus-visible:border-neutral-600",
@@ -3174,10 +3352,11 @@ function HitlPartRow({
         value: comment
       }
     ) : null,
-    state?.error ? /* @__PURE__ */ jsx14("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
-    /* @__PURE__ */ jsx14("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ jsx14(
+    state?.error ? /* @__PURE__ */ jsx15("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
+    /* @__PURE__ */ jsx15("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ jsx15(
       "button",
       {
+        ref: state?.action === action || !state?.action && action === part.allowedActions[0] ? retryActionRef : void 0,
         "aria-label": hitlActionLabel(part, action),
         className: cn(
           "a24-hitl__action min-h-10 rounded-md px-3 text-sm font-medium transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.96] disabled:pointer-events-none disabled:opacity-60",
@@ -3199,6 +3378,8 @@ function HitlPartRow({
 function AgentChatPart({
   activeToolId,
   getHitlActionState,
+  hitlLabels,
+  onHitlPaint,
   isLoading,
   isTextStreaming,
   message,
@@ -3208,7 +3389,7 @@ function AgentChatPart({
   toolSlots
 }) {
   if (part.kind === "text") {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       MessageResponse,
       {
         ...responseProps,
@@ -3218,44 +3399,46 @@ function AgentChatPart({
       }
     );
   }
-  if (part.kind === "tool") return isAgentChatSubagent(part) ? /* @__PURE__ */ jsx14(AgentChatSubagentGroup, { part, slots: toolSlots }) : /* @__PURE__ */ jsx14(AgentChatToolRow, { activeToolId, part, slots: toolSlots });
-  if (part.kind === "model-turn") return /* @__PURE__ */ jsx14(AgentChatModelTurnRow, { part });
+  if (part.kind === "tool") return isAgentChatSubagent(part) ? /* @__PURE__ */ jsx15(AgentChatSubagentGroup, { part, slots: toolSlots }) : /* @__PURE__ */ jsx15(AgentChatToolRow, { activeToolId, part, slots: toolSlots });
+  if (part.kind === "model-turn") return /* @__PURE__ */ jsx15(AgentChatModelTurnRow, { part });
   if (part.kind === "reasoning") {
     const label = part.text || part.label || "Thinking";
-    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ jsx14(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ jsx14("div", { className: "text-sm text-muted-foreground", children: label });
+    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ jsx15(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ jsx15("div", { className: "text-sm text-muted-foreground", children: label });
   }
   if (part.kind === "context-compression") {
-    return /* @__PURE__ */ jsx14(AgentChatContextCompressionRow, { part });
+    return /* @__PURE__ */ jsx15(AgentChatContextCompressionRow, { part });
   }
   if (part.kind === "ui-blocks") {
     if (part.state === "output-error") {
-      return /* @__PURE__ */ jsx14("div", { className: "a24-timeline-error text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
+      return /* @__PURE__ */ jsx15("div", { className: "a24-timeline-error text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
     }
-    return part.bundle ? /* @__PURE__ */ jsx14(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ jsx14("div", { className: "text-sm text-muted-foreground", children: part.state === "input-streaming" ? /* @__PURE__ */ jsx14(Shimmer, { children: "Rendering UI block" }) : "Rendered UI block" });
+    return part.bundle ? /* @__PURE__ */ jsx15(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ jsx15("div", { className: "text-sm text-muted-foreground", children: part.state === "input-streaming" ? /* @__PURE__ */ jsx15(Shimmer, { children: "Rendering UI block" }) : "Rendered UI block" });
   }
   if (part.kind === "hitl") {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       HitlPartRow,
       {
         getHitlActionState,
+        hitlLabels,
+        onHitlPaint,
         isLoading,
         onHitlAction,
         part
       }
     );
   }
-  if (part.kind === "error") return /* @__PURE__ */ jsx14("div", { className: "a24-timeline-error text-sm text-destructive", role: "alert", children: part.errorText });
+  if (part.kind === "error") return /* @__PURE__ */ jsx15("div", { className: "a24-timeline-error text-sm text-destructive", role: "alert", children: part.errorText });
   if (part.kind === "source") {
     const href = safeExternalUrl(part.url);
-    return href ? /* @__PURE__ */ jsx14("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ jsx14("span", { className: "a24-source-link", children: part.title });
+    return href ? /* @__PURE__ */ jsx15("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ jsx15("span", { className: "a24-source-link", children: part.title });
   }
   if (part.kind === "citation") {
     const href = safeExternalUrl(part.url);
     const label = part.label || "Citation";
-    return href ? /* @__PURE__ */ jsx14("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ jsx14("span", { className: "a24-citation", children: label });
+    return href ? /* @__PURE__ */ jsx15("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ jsx15("span", { className: "a24-citation", children: label });
   }
-  if (part.kind === "attachment") return /* @__PURE__ */ jsx14("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
-  if (part.kind === "data") return /* @__PURE__ */ jsx14("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
+  if (part.kind === "attachment") return /* @__PURE__ */ jsx15("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
+  if (part.kind === "data") return /* @__PURE__ */ jsx15("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
   return null;
 }
 function safeExternalUrl(value) {
@@ -3269,28 +3452,28 @@ function safeExternalUrl(value) {
 }
 function SafeUiBlocks({ bundle }) {
   const rows = Array.isArray(bundle.rows) ? bundle.rows : [];
-  return /* @__PURE__ */ jsxs9("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
-    typeof bundle.title === "string" ? /* @__PURE__ */ jsx14("h3", { children: bundle.title }) : null,
+  return /* @__PURE__ */ jsxs10("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
+    typeof bundle.title === "string" ? /* @__PURE__ */ jsx15("h3", { children: bundle.title }) : null,
     rows.map((rawRow, rowIndex) => {
       const row = rawRow && typeof rawRow === "object" && !Array.isArray(rawRow) ? rawRow : {};
       const blocks = Array.isArray(row.blocks) ? row.blocks : [];
-      return /* @__PURE__ */ jsx14("div", { className: "a24-ui-blocks__row", children: blocks.map((rawBlock, blockIndex) => {
+      return /* @__PURE__ */ jsx15("div", { className: "a24-ui-blocks__row", children: blocks.map((rawBlock, blockIndex) => {
         const block = rawBlock && typeof rawBlock === "object" && !Array.isArray(rawBlock) ? rawBlock : {};
         const title = typeof block.title === "string" ? block.title : "Result";
         const kind = String(block.kind || "note");
         if (kind === "table" && Array.isArray(block.columns) && Array.isArray(block.rows)) {
-          return /* @__PURE__ */ jsxs9("div", { className: "a24-ui-block", children: [
-            /* @__PURE__ */ jsx14("h4", { children: title }),
-            /* @__PURE__ */ jsx14("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ jsxs9("table", { children: [
-              /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ jsx14("th", { children: String(column) }, index)) }) }),
-              /* @__PURE__ */ jsx14("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ jsx14("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ jsx14("td", { children: String(cell) }, cellIndex)) }, index)) })
+          return /* @__PURE__ */ jsxs10("div", { className: "a24-ui-block", children: [
+            /* @__PURE__ */ jsx15("h4", { children: title }),
+            /* @__PURE__ */ jsx15("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ jsxs10("table", { children: [
+              /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ jsx15("th", { children: String(column) }, index)) }) }),
+              /* @__PURE__ */ jsx15("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ jsx15("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ jsx15("td", { children: String(cell) }, cellIndex)) }, index)) })
             ] }) })
           ] }, String(block.id || blockIndex));
         }
         const value = block.value ?? block.text ?? "";
-        return /* @__PURE__ */ jsxs9("div", { className: "a24-ui-block", children: [
-          /* @__PURE__ */ jsx14("h4", { children: title }),
-          /* @__PURE__ */ jsx14("p", { children: String(value) })
+        return /* @__PURE__ */ jsxs10("div", { className: "a24-ui-block", children: [
+          /* @__PURE__ */ jsx15("h4", { children: title }),
+          /* @__PURE__ */ jsx15("p", { children: String(value) })
         ] }, String(block.id || blockIndex));
       }) }, `row-${rowIndex}`);
     })
@@ -3298,6 +3481,8 @@ function SafeUiBlocks({ bundle }) {
 }
 function AgentResponseTimeline({
   getHitlActionState,
+  hitlLabels,
+  onHitlPaint,
   isLoading = false,
   message,
   nodeActivityMode = "default",
@@ -3310,7 +3495,7 @@ function AgentResponseTimeline({
   toolViewMode = "closed"
 }) {
   isLoading = isLoading && !message.responseCompletion;
-  const parts = (displayParts || message.parts || []).filter((part) => (part.kind !== "tool" || !isInternalAskUserTool(part)) && (part.kind !== "hitl" || part.hitlKind === "user_input" || part.status === "pending") && (part.kind !== "model-turn" || part.turnKind === "agent") && (part.kind !== "node-activity" || nodeActivityMode === "all" || nodeActivityMode === "default" && part.defaultChatVisible));
+  const parts = (displayParts || message.parts || []).filter((part) => (part.kind !== "tool" || !isInternalAskUserTool(part)) && (part.kind !== "hitl" || part.hitlKind === "user_input" || part.status === "pending" || getHitlActionState?.(part)?.status === "accepted") && (part.kind !== "model-turn" || part.turnKind === "agent") && (part.kind !== "node-activity" || nodeActivityMode === "all" || nodeActivityMode === "default" && part.defaultChatVisible));
   const toolParts = parts.filter((part) => part.kind === "tool");
   const activeToolId = latestRunningAgentChatToolId(toolParts);
   const activeTextPartId = getActiveStreamingTextPartId(
@@ -3324,42 +3509,44 @@ function AgentResponseTimeline({
     if (segment.kind === "tool") {
       const isLatestActivity = segmentIndex === segments.length - 1;
       const showOrb = toolViewMode === "closed" ? isLoading && isLatestActivity : Boolean(activeToolId && (segment.part.id === activeToolId || segment.part.toolCallId === activeToolId));
-      rendered.push(/* @__PURE__ */ jsx14(AgentChatToolRow, { activeToolId, part: segment.part, showOrb, slots: toolSlots }, segment.part.id));
+      rendered.push(/* @__PURE__ */ jsx15(AgentChatToolRow, { activeToolId, part: segment.part, showOrb, slots: toolSlots }, segment.part.id));
       continue;
     }
     if (segment.kind === "tool-session") {
-      rendered.push(/* @__PURE__ */ jsx14(AgentChatToolSession, { activeToolId, isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, leadingModelTurn: segment.leadingModelTurn, modelTurn: segment.modelTurn, parts: segment.parts, slots: toolSlots }, `tool-session-${segment.parts[0].id}`));
+      rendered.push(/* @__PURE__ */ jsx15(AgentChatToolSession, { activeToolId, isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, leadingModelTurn: segment.leadingModelTurn, modelTurn: segment.modelTurn, parts: segment.parts, slots: toolSlots }, `tool-session-${segment.parts[0].id}`));
       continue;
     }
     if (segment.kind === "subagent") {
-      rendered.push(/* @__PURE__ */ jsx14(AgentChatSubagentGroup, { isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, part: segment.part, slots: toolSlots }, segment.part.id));
+      rendered.push(/* @__PURE__ */ jsx15(AgentChatSubagentGroup, { isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, part: segment.part, slots: toolSlots }, segment.part.id));
       continue;
     }
     const part = segment.part;
     if (part.kind === "model-turn") {
       const key = activeActivityClaimed ? part.id : `${message.id}-active-activity`;
       activeActivityClaimed = true;
-      rendered.push(/* @__PURE__ */ jsx14(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Planning next moves", modelTurnId: part.modelTurnId }, key));
+      rendered.push(/* @__PURE__ */ jsx15(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Planning next moves", modelTurnId: part.modelTurnId }, key));
       continue;
     }
     if (part.kind === "node-activity") {
       const key = activeActivityClaimed ? part.id : `${message.id}-active-activity`;
       if (part.status === "running") activeActivityClaimed = true;
       rendered.push(
-        part.status === "running" ? /* @__PURE__ */ jsx14(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: part.label, onSelect: onNodeSelect ? () => onNodeSelect(part) : void 0 }, key) : /* @__PURE__ */ jsx14(AgentChatNodeActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, onSelect: onNodeSelect, part }, part.id)
+        part.status === "running" ? /* @__PURE__ */ jsx15(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: part.label, onSelect: onNodeSelect ? () => onNodeSelect(part) : void 0 }, key) : /* @__PURE__ */ jsx15(AgentChatNodeActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, onSelect: onNodeSelect, part }, part.id)
       );
       continue;
     }
     if (part.kind === "ui-blocks" && renderUiBlocks) {
-      rendered.push(/* @__PURE__ */ jsx14(React15.Fragment, { children: renderUiBlocks(part) }, part.id));
+      rendered.push(/* @__PURE__ */ jsx15(React16.Fragment, { children: renderUiBlocks(part) }, part.id));
       continue;
     }
     rendered.push(
-      /* @__PURE__ */ jsx14(React15.Fragment, { children: /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(React16.Fragment, { children: /* @__PURE__ */ jsx15(
         AgentChatPart,
         {
           activeToolId,
           getHitlActionState,
+          hitlLabels,
+          onHitlPaint,
           isLoading,
           isTextStreaming: part.kind === "text" && part.id === activeTextPartId,
           message,
@@ -3372,16 +3559,16 @@ function AgentResponseTimeline({
     );
   }
   if (rendered.length === 0 && message.content) {
-    rendered.push(/* @__PURE__ */ jsx14(MessageResponse, { children: message.content }, `${message.id}-fallback`));
+    rendered.push(/* @__PURE__ */ jsx15(MessageResponse, { children: message.content }, `${message.id}-fallback`));
   }
   if (rendered.length === 0 && isLoading) {
-    rendered.push(/* @__PURE__ */ jsx14(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Thinking" }, `${message.id}-active-activity`));
+    rendered.push(/* @__PURE__ */ jsx15(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Thinking" }, `${message.id}-active-activity`));
   }
-  return /* @__PURE__ */ jsx14("div", { className: "space-y-3", children: rendered });
+  return /* @__PURE__ */ jsx15("div", { className: "space-y-3", children: rendered });
 }
 
 // src/ui/agent-chat-message.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD = 360;
 var DEFAULT_USER_MESSAGE_COLLAPSED_LINES = 4;
 function shouldCollapseUserMessage(content, threshold = DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD) {
@@ -3394,8 +3581,8 @@ function AgentChatUserMessageContent({
   showLessLabel = "Show less",
   showMoreLabel = "Show more"
 }) {
-  const [isExpanded, setIsExpanded] = React16.useState(false);
-  const contentId = React16.useId();
+  const [isExpanded, setIsExpanded] = React17.useState(false);
+  const contentId = React17.useId();
   const shouldCollapse = shouldCollapseUserMessage(content, collapseThreshold);
   const Icon = isExpanded ? ChevronUp : ChevronDown3;
   const clampedStyle = shouldCollapse && !isExpanded ? {
@@ -3404,9 +3591,9 @@ function AgentChatUserMessageContent({
     display: "-webkit-box",
     overflow: "hidden"
   } : void 0;
-  return /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-col gap-3", children: [
-    /* @__PURE__ */ jsx15("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
-    shouldCollapse ? /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-col gap-3", children: [
+    /* @__PURE__ */ jsx16("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
+    shouldCollapse ? /* @__PURE__ */ jsxs11(
       "button",
       {
         "aria-controls": contentId,
@@ -3419,7 +3606,7 @@ function AgentChatUserMessageContent({
         type: "button",
         children: [
           isExpanded ? showLessLabel : showMoreLabel,
-          /* @__PURE__ */ jsx15(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
+          /* @__PURE__ */ jsx16(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
         ]
       }
     ) : null
@@ -3429,9 +3616,9 @@ function AgentChatUserMessageActionRow({
   children,
   className
 }) {
-  const rowRef = React16.useRef(null);
-  const [visible, setVisible] = React16.useState(false);
-  React16.useEffect(() => {
+  const rowRef = React17.useRef(null);
+  const [visible, setVisible] = React17.useState(false);
+  React17.useEffect(() => {
     const message = rowRef.current?.closest('[data-slot="message"]');
     if (!message) return;
     const show = () => setVisible(true);
@@ -3450,7 +3637,7 @@ function AgentChatUserMessageActionRow({
       message.removeEventListener("focusout", hideWhenFocusLeaves);
     };
   }, []);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       ref: rowRef,
@@ -3470,6 +3657,8 @@ function AgentChatMessage({
   contentClassName,
   dir,
   getHitlActionState,
+  hitlLabels,
+  onHitlPaint,
   message,
   nodeActivityMode,
   onHitlAction,
@@ -3489,7 +3678,7 @@ function AgentChatMessage({
   const resolvedUserContent = userMessageContent ?? message.content;
   const shouldRenderContent = isAssistant || Boolean(renderUserContent || resolvedUserContent);
   const showAttachments = Boolean(message.attachments?.length) && (message.role === "user" || showAssistantAttachments);
-  const renderedActions = actions ?? (actionHandlers ? /* @__PURE__ */ jsx15(
+  const renderedActions = actions ?? (actionHandlers ? /* @__PURE__ */ jsx16(
     AgentChatDefaultActions,
     {
       additionalActions,
@@ -3499,14 +3688,14 @@ function AgentChatMessage({
     }
   ) : null);
   const defaultUserActions = !actions && Boolean(actionHandlers) && !isAssistant;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     ChatMessage,
     {
       className,
       dir,
       from: message.role,
       children: [
-        showAttachments ? /* @__PURE__ */ jsx15(
+        showAttachments ? /* @__PURE__ */ jsx16(
           ChatAttachmentRows,
           {
             attachments: message.attachments || [],
@@ -3515,17 +3704,19 @@ function AgentChatMessage({
             resolveContent: attachmentContentResolver
           }
         ) : null,
-        shouldRenderContent ? /* @__PURE__ */ jsxs10(
+        shouldRenderContent ? /* @__PURE__ */ jsxs11(
           ChatMessageContent,
           {
             className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
             dir,
             from: message.role,
             children: [
-              isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ jsx15(
+              isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ jsx16(
                 Timeline,
                 {
                   getHitlActionState,
+                  hitlLabels,
+                  onHitlPaint,
                   isLoading: isStreaming,
                   message,
                   nodeActivityMode,
@@ -3533,7 +3724,7 @@ function AgentChatMessage({
                   parts: message.parts
                 }
               ) : null,
-              !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ jsx15(
+              !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ jsx16(
                 AgentChatUserMessageContent,
                 {
                   collapsedLines: userMessageCollapsedLines,
@@ -3546,7 +3737,11 @@ function AgentChatMessage({
             ]
           }
         ) : null,
-        renderedActions ? defaultUserActions ? /* @__PURE__ */ jsx15(AgentChatUserMessageActionRow, { className: actionsClassName, children: renderedActions }) : /* @__PURE__ */ jsx15("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
+        renderedActions ? defaultUserActions ? /* @__PURE__ */ jsx16(AgentChatUserMessageActionRow, { className: actionsClassName, children: renderedActions }) : /* @__PURE__ */ jsx16("div", { className: cn(
+          dir === "rtl" ? "mt-1 h-9 w-full" : "mt-1 h-9 w-full -translate-x-2",
+          isAssistant && "a24-chat-message-action-row--assistant",
+          actionsClassName
+        ), children: renderedActions }) : null
       ]
     }
   );
@@ -3555,9 +3750,9 @@ function AgentChatMessage({
 // src/ui/bubble.tsx
 import { cva as cva3 } from "class-variance-authority";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function BubbleGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "bubble-group",
@@ -3591,7 +3786,7 @@ function Bubble({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "bubble",
@@ -3608,7 +3803,7 @@ function BubbleContent({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "div";
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Comp,
     {
       "data-slot": "bubble-content",
@@ -3645,7 +3840,7 @@ function BubbleReactions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "bubble-reactions",
@@ -3660,7 +3855,7 @@ function BubbleReactions({
 // src/ui/marker.tsx
 import { cva as cva4 } from "class-variance-authority";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var markerVariants = cva4(
   "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
   {
@@ -3680,7 +3875,7 @@ function Marker({
   ...props
 }) {
   const Comp = asChild ? Slot3 : "div";
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Comp,
     {
       "data-slot": "marker",
@@ -3691,7 +3886,7 @@ function Marker({
   );
 }
 function MarkerIcon({ className, ...props }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "span",
     {
       "data-slot": "marker-icon",
@@ -3705,7 +3900,7 @@ function MarkerIcon({ className, ...props }) {
   );
 }
 function MarkerContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "span",
     {
       "data-slot": "marker-content",
@@ -3719,7 +3914,7 @@ function MarkerContent({ className, ...props }) {
 }
 
 // src/ui/mcp-connect-required-card.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var STATUS_LABELS = {
   pending: "Connect",
   connecting: "Connecting",
@@ -3743,7 +3938,7 @@ function McpConnectRequiredCard({
   const isBusy = loading || status === "connecting" || status === "resuming";
   const isConnected = status === "connected";
   const buttonDisabled = disabled || isBusy || isConnected || !onConnect;
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       "data-agents24-mcp-connect-card": true,
@@ -3753,13 +3948,13 @@ function McpConnectRequiredCard({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
-        /* @__PURE__ */ jsxs11("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx18("div", { className: "truncate text-sm font-medium", children: label }),
-          /* @__PURE__ */ jsx18("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
-          status === "error" && error ? /* @__PURE__ */ jsx18("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
+      children: /* @__PURE__ */ jsxs12("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx19("div", { className: "truncate text-sm font-medium", children: label }),
+          /* @__PURE__ */ jsx19("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
+          status === "error" && error ? /* @__PURE__ */ jsx19("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
         ] }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -3826,6 +4021,7 @@ export {
   CodeBlockLine,
   CodeBlockTitle,
   CodeBlockWrapButton,
+  HitlSubmissionStatus,
   Marker,
   MarkerContent,
   MarkerIcon,
@@ -3852,10 +4048,12 @@ export {
   cn,
   contextStatusMetrics,
   createAgentChatComposerFile,
+  defaultHitlSubmissionLabels,
   hitlActionLabel,
   hitlTitle,
   isAgentChatSubagent,
   isAgentChatToolRunning,
+  isHitlSubmissionCompact,
   latestRunningAgentChatToolId,
   markerVariants,
   partitionAgentChatToolTimeline,