@agents24/chat-react 0.5.35 → 0.5.37

package/dist/ui/index.cjs

@@ -69,6 +69,17 @@ __export(ui_exports, {
   ChatMessageAction: () => ChatMessageAction,
   ChatMessageActions: () => ChatMessageActions,
   ChatMessageContent: () => ChatMessageContent,
+  CodeBlock: () => CodeBlock,
+  CodeBlockActions: () => CodeBlockActions,
+  CodeBlockContent: () => CodeBlockContent,
+  CodeBlockCopyButton: () => CodeBlockCopyButton,
+  CodeBlockDownloadButton: () => CodeBlockDownloadButton,
+  CodeBlockFooter: () => CodeBlockFooter,
+  CodeBlockHeader: () => CodeBlockHeader,
+  CodeBlockLine: () => CodeBlockLine,
+  CodeBlockTitle: () => CodeBlockTitle,
+  CodeBlockWrapButton: () => CodeBlockWrapButton,
+  HitlSubmissionStatus: () => HitlSubmissionStatus,
   Marker: () => Marker,
   MarkerContent: () => MarkerContent,
   MarkerIcon: () => MarkerIcon,
@@ -95,10 +106,12 @@ __export(ui_exports, {
   cn: () => cn,
   contextStatusMetrics: () => contextStatusMetrics,
   createAgentChatComposerFile: () => createAgentChatComposerFile,
+  defaultHitlSubmissionLabels: () => defaultHitlSubmissionLabels,
   hitlActionLabel: () => hitlActionLabel,
   hitlTitle: () => hitlTitle,
   isAgentChatSubagent: () => isAgentChatSubagent,
   isAgentChatToolRunning: () => isAgentChatToolRunning,
+  isHitlSubmissionCompact: () => isHitlSubmissionCompact,
   latestRunningAgentChatToolId: () => latestRunningAgentChatToolId,
   markerVariants: () => markerVariants,
   partitionAgentChatToolTimeline: () => partitionAgentChatToolTimeline,
@@ -110,6 +123,7 @@ __export(ui_exports, {
   useAudioRecorder: () => useAudioRecorder,
   useChatComposerFocus: () => useChatComposerFocus,
   useCompletionActionEntrance: () => useCompletionActionEntrance,
+  useHighlightedCode: () => useHighlightedCode,
   useLiveCompletionRuns: () => useLiveCompletionRuns
 });
 module.exports = __toCommonJS(ui_exports);
@@ -850,13 +864,12 @@ function uploadByteSize(data) {
 function inputMimeTypes(contract) {
   if (!contract) return [];
   return [
-    ...contract.modalities.files.allowed_mime_types,
-    ...contract.modalities.images.allowed_mime_types,
-    ...contract.modalities.audio.allowed_mime_types
+    ...["files", "images", "audio"].flatMap((key) => contract.modalities[key].enabled ? contract.modalities[key].allowed_mime_types : [])
   ];
 }
 function validateAgentChatSubmission(contract, text, files) {
   const { modalities, limits } = contract;
+  if (files.length && contract.validation_issues?.length) return contract.validation_issues[0].message;
   const normalizedText = text.trim();
   if (normalizedText && !modalities.text.enabled) return "This agent does not accept text input.";
   if (modalities.text.required && !normalizedText) return "Text input is required.";
@@ -947,47 +960,69 @@ function useChatComposerFocus({ textareaRef, disabled, focusKey, restoredDraft,
 
 // src/ui/use-audio-recorder.ts
 var React3 = __toESM(require("react"), 1);
+var import_client4 = require("@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((0, import_client4.normalizeAttachmentMimeType)(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;
       }
@@ -999,48 +1034,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((0, import_client4.normalizeAttachmentMimeType)(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
@@ -1052,16 +1093,29 @@ 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);
+  React4.useLayoutEffect(() => {
+    mountedRef.current = true;
+    submittingRef.current = false;
+    setIsSubmitting(false);
+    return () => {
+      mountedRef.current = false;
+      generationRef.current += 1;
+    };
+  }, [options.scopeKey]);
   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),
@@ -1069,7 +1123,10 @@ 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);
     }
@@ -1077,52 +1134,80 @@ function useAgentChatComposer(options) {
   const attachmentMimeTypes = inputMimeTypes(options.inputContract);
   const setText = (value) => {
     revisionRef.current += 1;
+    textRef.current = value;
     setTextState(value);
   };
   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 {
@@ -1139,6 +1224,7 @@ function useAgentChatComposer(options) {
     attachmentMimeTypes,
     validationError,
     recorder,
+    isProcessing: recorder.isProcessing,
     recordingAllowed: options.recordingEnabled ?? options.inputContract?.modalities.audio.recording_enabled ?? false,
     fileAccept: (0, import_client2.attachmentFileAccept)(attachmentMimeTypes),
     onKeyDown: (event) => {
@@ -1272,6 +1358,7 @@ function AgentChatComposer({
   disabled = false,
   forceExpanded = false,
   focusKey,
+  scopeKey,
   inputToolbarContent,
   isRunning = false,
   isCancelling = false,
@@ -1290,6 +1377,7 @@ function AgentChatComposer({
     disabled,
     isRunning,
     isCancelling,
+    scopeKey,
     focusKey,
     restoredDraft,
     textareaRef: localTextareaRef,
@@ -1524,7 +1612,7 @@ function QueueRow({ message, onRemove, onEdit }) {
 }
 function AgentChatQueue({ pending, queue, onRemove, onEdit, onResume, className }) {
   const [resumeError, setResumeError] = React7.useState(null);
-  if (!pending.length && !queue?.paused) return null;
+  if (!pending.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { "aria-label": "Message queue", className: cn("a24-queue relative z-0 -mb-2 overflow-visible rounded-t-xl border border-b-0 border-border/50 bg-background pb-2", className), children: [
     queue?.paused ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-h-9 items-center justify-between gap-2 px-3 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Queue paused" }),
@@ -1771,11 +1859,68 @@ function AgentChatDefaultActions({
 }
 
 // src/ui/agent-chat-message.tsx
-var React13 = __toESM(require("react"), 1);
-var import_lucide_react7 = require("lucide-react");
+var React17 = __toESM(require("react"), 1);
+var import_lucide_react9 = require("lucide-react");
+
+// src/ui/hitl-submission-status.tsx
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime7 = require("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__ */ (0, import_jsx_runtime7.jsxs)(
+    "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__ */ (0, import_jsx_runtime7.jsx)("span", { children: text }),
+        state.status === "uncertain" && state.retry && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "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
-var React12 = __toESM(require("react"), 1);
+var React16 = __toESM(require("react"), 1);
 
 // src/streaming-text.ts
 var import_react = require("react");
@@ -1960,7 +2105,7 @@ function useStreamingText({
 }
 
 // src/ui/ask-user-interaction.tsx
-var React9 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var import_lucide_react5 = require("lucide-react");
 
 // src/ui/ask-user-interaction-state.ts
@@ -2017,7 +2162,7 @@ function askUserAnswersFromDrafts(questions, drafts) {
 }
 
 // src/ui/ask-user-interaction.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function resolvedAnswerText(question, answer) {
   if (!answer) return ["No response recorded"];
   const labels = answer.selectedOptionIds.flatMap((optionId) => {
@@ -2031,7 +2176,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) => [
@@ -2039,8 +2184,8 @@ function ResolvedQuestions({
       answer
     ])
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "a24-ask-user a24-ask-user--resolved w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-ask-user a24-ask-user--resolved w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "button",
       {
         "aria-expanded": open,
@@ -2049,13 +2194,13 @@ function ResolvedQuestions({
         ref: buttonRef,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
             "Asked ",
             count,
             " question",
             count === 1 ? "" : "s"
           ] }),
-          open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.ChevronDown, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.ChevronDown, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             import_lucide_react5.ChevronRight,
             {
               "aria-hidden": "true",
@@ -2065,12 +2210,12 @@ function ResolvedQuestions({
         ]
       }
     ),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-2 space-y-3 ps-4", children: part.questions.map((question) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm font-medium text-foreground", children: question.question }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-1 space-y-1 text-sm text-muted-foreground", children: resolvedAnswerText(
+    open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mt-2 space-y-3 ps-4", children: part.questions.map((question) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm font-medium text-foreground", children: question.question }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mt-1 space-y-1 text-sm text-muted-foreground", children: resolvedAnswerText(
         question,
         answers.get(question.id)
-      ).map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ).map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
           className: "whitespace-pre-wrap break-words",
@@ -2083,40 +2228,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__ */ (0, import_jsx_runtime8.jsx)(HitlSubmissionStatus, { state: submission, labels: submissionLabels, onPaint: onSubmissionPaint });
+  }
   if (part.status !== "pending") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ResolvedQuestions, { buttonRef: resolvedButtonRef, part });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ResolvedQuestions, { buttonRef: resolvedButtonRef, part });
   }
   const question = questions[step];
   if (!question) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm text-destructive", role: "alert", children: "This question request is unavailable." });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm text-destructive", role: "alert", children: "This question request is unavailable." });
   }
   const draft = drafts[question.id] || {
     customText: "",
@@ -2150,9 +2305,9 @@ function AskUserInteraction({
       })
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "a24-ask-user space-y-3 rounded-xl border border-border/50 bg-background p-4 shadow-sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 items-start justify-between gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-ask-user space-y-3 rounded-xl border border-border/50 bg-background p-4 shadow-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex min-w-0 items-start justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "h3",
         {
           className: "min-w-0 flex-1 text-base font-medium leading-6 text-foreground outline-none",
@@ -2161,8 +2316,8 @@ function AskUserInteraction({
           children: question.question
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "button",
           {
             "aria-label": "Previous question",
@@ -2170,7 +2325,7 @@ function AskUserInteraction({
             disabled: isBusy || step === 0,
             onClick: () => setStep((current) => Math.max(0, current - 1)),
             type: "button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               import_lucide_react5.ChevronLeft,
               {
                 "aria-hidden": "true",
@@ -2179,7 +2334,7 @@ function AskUserInteraction({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "span",
           {
             "aria-label": `Question ${step + 1} of ${questions.length}`,
@@ -2191,7 +2346,7 @@ function AskUserInteraction({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "button",
           {
             "aria-label": isLastQuestion ? "Submit answers" : "Next question",
@@ -2199,7 +2354,7 @@ function AskUserInteraction({
             disabled: isBusy || !onSubmit || !canMoveForward,
             onClick: () => completeStep(drafts),
             type: "button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               import_lucide_react5.ChevronRight,
               {
                 "aria-hidden": "true",
@@ -2210,10 +2365,10 @@ function AskUserInteraction({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1", children: [
       question.options.map((option, index) => {
         const selected = draft.selectedOptionIds.includes(option.id);
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "button",
           {
             "aria-pressed": selected,
@@ -2225,7 +2380,7 @@ function AskUserInteraction({
             onClick: () => selectOption(option.id),
             type: "button",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "span",
                 {
                   className: cn(
@@ -2235,8 +2390,8 @@ function AskUserInteraction({
                   children: index + 1
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0 flex-1 font-medium text-foreground", children: option.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "min-w-0 flex-1 font-medium text-foreground", children: option.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 import_lucide_react5.ChevronRight,
                 {
                   "aria-hidden": "true",
@@ -2248,11 +2403,12 @@ function AskUserInteraction({
           option.id
         );
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("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__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.Pencil, { "aria-hidden": "true", className: "size-4" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("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__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.Pencil, { "aria-hidden": "true", className: "size-4" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "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",
@@ -2269,7 +2425,7 @@ function AskUserInteraction({
             value: draft.customText
           }
         ),
-        draft.customText.trim() ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        draft.customText.trim() ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "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",
@@ -2281,12 +2437,12 @@ function AskUserInteraction({
         ) : null
       ] })
     ] }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm text-destructive", role: "alert", children: error }) : null
+    error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm text-destructive", role: "alert", children: error }) : null
   ] });
 }
 
 // src/ui/agent-chat-context-compression-row.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function compressionPresentation(part) {
   if (part.status === "failed") {
     return { label: "Could not compact message history", status: "failed" };
@@ -2301,7 +2457,7 @@ function AgentChatContextCompressionRow({
   part
 }) {
   const presentation = compressionPresentation(part);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       "aria-live": "polite",
@@ -2309,11 +2465,11 @@ function AgentChatContextCompressionRow({
       "data-agents24-context-compression": "",
       "data-status": part.status,
       role: "status",
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn(
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn(
+      ), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn(
         "a24-tool-trigger__label",
         presentation.status === "running" && "a24-tool-shimmer"
       ), children: presentation.label }) }) })
@@ -2322,7 +2478,7 @@ function AgentChatContextCompressionRow({
 }
 
 // src/ui/message-response.tsx
-var React10 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 var import_streamdown = require("streamdown");
 
 // src/active-content.ts
@@ -2346,18 +2502,492 @@ function safeChatMarkdownHref(value) {
   }
 }
 
+// src/ui/message-code.tsx
+var React13 = __toESM(require("react"), 1);
+var import_lucide_react7 = require("lucide-react");
+
+// src/ui/code-block.tsx
+var React11 = __toESM(require("react"), 1);
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var codeBlockVariants = (0, import_class_variance_authority2.cva)(
+  "a24-code-block",
+  {
+    variants: {
+      variant: {
+        default: "a24-code-block--default",
+        destructive: "a24-code-block--destructive"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function CodeBlock({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      "data-slot": "code-block",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(codeBlockVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function CodeBlockHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      "data-slot": "code-block-header",
+      className: cn(
+        "a24-code-block__header",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CodeBlockTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      "data-slot": "code-block-title",
+      className: cn(
+        "a24-code-block__title",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CodeBlockActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      "data-slot": "code-block-actions",
+      className: cn(
+        "a24-code-block__actions",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CodeBlockCopyButton({
+  value,
+  className,
+  onClick,
+  ...props
+}) {
+  const [copied, setCopied] = React11.useState(false);
+  React11.useEffect(() => {
+    if (!copied) {
+      return;
+    }
+    const timeout = setTimeout(() => setCopied(false), 2e3);
+    return () => clearTimeout(timeout);
+  }, [copied]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        type: "button",
+        "data-slot": "code-block-copy-button",
+        "data-copied": copied || void 0,
+        "aria-label": copied ? "Copied" : "Copy",
+        title: copied ? "Copied" : "Copy code",
+        className: cn("a24-code-block__action", className),
+        onClick: (event) => {
+          onClick?.(event);
+          if (event.defaultPrevented || !navigator.clipboard) return;
+          navigator.clipboard.writeText(value).then(() => setCopied(true)).catch(() => {
+          });
+        },
+        ...props,
+        children: copied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.CheckIcon, { size: 12, strokeWidth: 1.5 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.CopyIcon, { size: 12, strokeWidth: 1.5 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "aria-live": "polite", className: "a24-code-block__announcement", children: copied ? "Copied" : "" })
+  ] });
+}
+function CodeBlockWrapButton({
+  wrap,
+  onWrapChange,
+  className,
+  onClick,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "button",
+    {
+      type: "button",
+      "data-slot": "code-block-wrap-button",
+      "aria-label": "Wrap lines",
+      "aria-pressed": wrap,
+      title: wrap ? "Unwrap lines" : "Wrap lines",
+      className: cn("a24-code-block__action", className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) onWrapChange(!wrap);
+      },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.WrapTextIcon, { size: 12, strokeWidth: 1.5 })
+    }
+  );
+}
+function CodeBlockDownloadButton({
+  value,
+  filename = "code.txt",
+  className,
+  onClick,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "button",
+    {
+      type: "button",
+      "data-slot": "code-block-download-button",
+      "aria-label": "Download code",
+      title: "Download code",
+      className: cn("a24-code-block__action", className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        const url = URL.createObjectURL(new Blob([value], { type: "text/plain;charset=utf-8" }));
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = filename;
+        document.body.append(link);
+        link.click();
+        link.remove();
+        setTimeout(() => URL.revokeObjectURL(url), 1e3);
+      },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.DownloadIcon, { size: 12, strokeWidth: 1.5 })
+    }
+  );
+}
+function CodeBlockContent({
+  className,
+  children,
+  style,
+  wrap = false,
+  lineNumbers = false,
+  startLine = 1,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "pre",
+    {
+      "data-slot": "code-block-content",
+      "data-wrap": wrap || void 0,
+      "data-numbered": lineNumbers || void 0,
+      dir: "ltr",
+      tabIndex: 0,
+      style: { counterReset: `line ${startLine - 1}`, ...style },
+      className: cn(
+        "a24-code-block__content",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "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__ */ (0, import_jsx_runtime10.jsx)(CodeBlockLine, { children: line }, index)) : children
+        }
+      )
+    }
+  );
+}
+var codeBlockLineVariants = (0, import_class_variance_authority2.cva)(
+  "a24-code-block__line",
+  {
+    variants: {
+      variant: {
+        default: "",
+        added: "a24-code-block__line--added",
+        removed: "a24-code-block__line--removed",
+        highlighted: "a24-code-block__line--highlighted"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function CodeBlockLine({
+  className,
+  variant = "default",
+  children,
+  ...props
+}) {
+  const empty = children === void 0 || children === null || children === "" || Array.isArray(children) && children.length === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "span",
+    {
+      "data-slot": "code-block-line",
+      "data-variant": variant,
+      className: cn(codeBlockLineVariants({ variant }), className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "data-slot": "code-block-line-content", className: "a24-code-block__line-content", children: empty ? "\n" : children })
+    }
+  );
+}
+function CodeBlockFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      "data-slot": "code-block-footer",
+      className: cn(
+        "a24-code-block__footer",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/use-highlighted-code.ts
+var React12 = __toESM(require("react"), 1);
+
+// src/ui/code-highlighter.tsx
+var import_core = require("shiki/core");
+var import_javascript = require("shiki/engine/javascript");
+var import_langs = require("shiki/langs");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var languageLoaders = {
+  ...import_langs.bundledLanguages,
+  ...import_langs.bundledLanguagesAlias
+};
+var highlighter;
+function getHighlighter() {
+  highlighter ?? (highlighter = (0, import_core.createHighlighterCore)({
+    themes: [
+      import("shiki/themes/github-light.mjs"),
+      import("shiki/themes/github-dark.mjs")
+    ],
+    langs: [],
+    engine: (0, import_javascript.createJavaScriptRegexEngine)({ forgiving: true })
+  }));
+  return highlighter;
+}
+function getLanguage(language) {
+  const name = language.toLowerCase();
+  if (name === "ansi") return name;
+  if (Object.prototype.hasOwnProperty.call(languageLoaders, name)) return name;
+  return null;
+}
+async function loadHighlighter(language) {
+  const lang = getLanguage(language);
+  if (!lang) {
+    return null;
+  }
+  const shiki = await getHighlighter();
+  if (lang !== "ansi" && !shiki.getLoadedLanguages().includes(lang)) {
+    await shiki.loadLanguage(languageLoaders[lang]);
+  }
+  return {
+    // Returns one React node per line, and the grammar state after the last
+    // line. Pass that state back to continue where the code left off.
+    highlight(code, state) {
+      const tokenize = (text) => shiki.codeToTokens(text, {
+        lang,
+        themes: { light: "github-light", dark: "github-dark" },
+        defaultColor: false,
+        grammarState: state
+      }).tokens;
+      const tokens = lang === "ansi" ? code.split("\n").flatMap((line) => tokenize(line)) : tokenize(code);
+      return {
+        lines: tokens.map(
+          (line) => line.map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "span",
+            {
+              style: token.htmlStyle,
+              className: "a24-code-token",
+              children: token.content
+            },
+            index
+          ))
+        ),
+        state: shiki.getLastGrammarState(tokens)
+      };
+    }
+  };
+}
+
+// src/ui/use-highlighted-code.ts
+function useHighlightedCode(value, language) {
+  const code = value.endsWith("\n") ? value.slice(0, -1) : value;
+  const [loaded, setLoaded] = React12.useState(null);
+  const highlighter2 = loaded?.language === language ? loaded.highlighter : null;
+  React12.useEffect(() => {
+    let cancelled = false;
+    loadHighlighter(language).then((next2) => {
+      if (!cancelled) {
+        setLoaded({ language, highlighter: next2 });
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [language]);
+  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: [] };
+  }
+  const end = code.lastIndexOf("\n") + 1;
+  if (highlighter2 && end > next.text.length) {
+    const result = highlighter2.highlight(
+      code.slice(next.text.length, end - 1),
+      next.state
+    );
+    next = {
+      highlighter: highlighter2,
+      text: code.slice(0, end),
+      lines: [...next.lines, ...result.lines],
+      state: result.state
+    };
+  }
+  if (next !== done) {
+    setDone(next);
+  }
+  const tail = code.slice(end);
+  return React12.useMemo(() => {
+    if (!highlighter2) {
+      return code.split("\n");
+    }
+    return [...next.lines, highlighter2.highlight(tail, next.state).lines[0]];
+  }, [code, highlighter2, next, tail]);
+}
+
+// src/ui/message-code.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var CODE_EXTENSIONS = {
+  bash: "sh",
+  shell: "sh",
+  shellscript: "sh",
+  sh: "sh",
+  zsh: "sh",
+  javascript: "js",
+  js: "js",
+  jsx: "jsx",
+  typescript: "ts",
+  ts: "ts",
+  tsx: "tsx",
+  python: "py",
+  py: "py",
+  ruby: "rb",
+  rust: "rs",
+  rs: "rs",
+  go: "go",
+  java: "java",
+  kotlin: "kt",
+  swift: "swift",
+  c: "c",
+  cpp: "cpp",
+  csharp: "cs",
+  json: "json",
+  jsonc: "jsonc",
+  yaml: "yaml",
+  yml: "yml",
+  toml: "toml",
+  html: "html",
+  xml: "xml",
+  css: "css",
+  scss: "scss",
+  sql: "sql",
+  markdown: "md",
+  md: "md",
+  diff: "diff",
+  text: "txt",
+  plaintext: "txt"
+};
+function MessageCodeBlock({ code, language = "text" }) {
+  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__ */ (0, import_jsx_runtime12.jsxs)(CodeBlock, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(CodeBlockHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(CodeBlockTitle, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.FileCode2Icon, { size: 14, strokeWidth: 1.5, "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: language })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(CodeBlockActions, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CodeBlockWrapButton, { wrap, onWrapChange: setWrap }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CodeBlockDownloadButton, { value: code, filename: `code.${extension}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CodeBlockCopyButton, { value: code })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CodeBlockContent, { "aria-label": `${language} code`, lineNumbers: true, wrap, children: lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(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__ */ (0, import_jsx_runtime12.jsx)("code", { ...props, className: cn("a24-inline-code", className), "data-streamdown": "inline-code", children });
+  }
+  const code = typeof children === "string" ? children.replace(/\n$/, "") : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageCodeBlock, { code, language });
+}
+function formatMessageJson(text) {
+  const trimmed = text.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return null;
+  try {
+    JSON.parse(trimmed);
+  } catch {
+    return null;
+  }
+  const tokens = trimmed.match(/"(?:\\.|[^"\\])*"|[{}\[\],:]|[^\s{}\[\],:]+/g) || [];
+  let depth = 0;
+  let result = "";
+  const newline = () => `
+${"  ".repeat(depth)}`;
+  tokens.forEach((token, index) => {
+    const previous = tokens[index - 1];
+    const next = tokens[index + 1];
+    if (token === "{" || token === "[") {
+      result += token;
+      depth += 1;
+      if (next !== "}" && next !== "]") result += newline();
+    } else if (token === "}" || token === "]") {
+      depth -= 1;
+      if (previous !== "{" && previous !== "[") result += newline();
+      result += token;
+    } else if (token === ",") result += `,${newline()}`;
+    else if (token === ":") result += ": ";
+    else result += token;
+  });
+  return result;
+}
+
 // src/ui/message-response.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function SafeMarkdownLink({ children, href, ...props }) {
   const domProps = { ...props };
   delete domProps.node;
   const safeHref = safeChatMarkdownHref(href);
-  if (!safeHref) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children });
-  if (safeHref.startsWith("#")) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { ...domProps, href: safeHref, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
+  if (!safeHref) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children });
+  if (safeHref.startsWith("#")) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { ...domProps, href: safeHref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
 }
 function BlockedMarkdownImage({ alt }) {
-  return alt ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
+  return alt ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
 }
 var BLOCK_MARKDOWN_TAGS = /* @__PURE__ */ new Set([
   "blockquote",
@@ -2378,7 +3008,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 (!React10.isValidElement(child)) {
+  if (!React14.isValidElement(child)) {
     return false;
   }
   if (typeof child.type === "string" && BLOCK_MARKDOWN_TAGS.has(child.type)) {
@@ -2388,7 +3018,7 @@ function hasBlockMarkdownChild(child) {
   if (BLOCK_MARKDOWN_TAGS.has(props.node?.tagName || "") || isMultilineCodeNode(props.node)) {
     return true;
   }
-  return React10.Children.toArray(props.children).some(hasBlockMarkdownChild);
+  return React14.Children.toArray(props.children).some(hasBlockMarkdownChild);
 }
 function MessageMarkdownParagraph({
   children,
@@ -2396,22 +3026,23 @@ function MessageMarkdownParagraph({
 }) {
   const domProps = { ...props };
   delete domProps.node;
-  const childArray = React10.Children.toArray(children).filter(
+  const childArray = React14.Children.toArray(children).filter(
     (child) => child !== null && child !== ""
   );
-  const isImageOnly = childArray.length === 1 && React10.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__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children });
   }
   if (childArray.some(hasBlockMarkdownChild)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...domProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ...domProps, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { ...domProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { ...domProps, children });
 }
 var MESSAGE_RESPONSE_COMPONENTS = {
   a: SafeMarkdownLink,
   img: BlockedMarkdownImage,
-  p: MessageMarkdownParagraph
+  p: MessageMarkdownParagraph,
+  code: MessageMarkdownCode
 };
 var streamdownDefaultRehypePlugins = import_streamdown.defaultRehypePlugins || {};
 var streamdownHardenPlugin = Array.isArray(
@@ -2426,7 +3057,7 @@ var MESSAGE_RESPONSE_REHYPE_PLUGINS = [
     ]
   ] : []
 ];
-var MessageResponse = React10.memo(
+var MessageResponse = React14.memo(
   ({
     children,
     className,
@@ -2444,11 +3075,21 @@ var MessageResponse = React10.memo(
       maxCatchupChars: 32,
       text
     });
-    const streamdownComponents = React10.useMemo(
+    const streamdownComponents = React14.useMemo(
       () => ({ ...MESSAGE_RESPONSE_COMPONENTS, ...components }),
       [components]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    const json = React14.useMemo(() => formatMessageJson(text), [text]);
+    if (json !== null && !components?.code) {
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("a24-message-response", className), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        MessageCodeBlock,
+        {
+          code: streaming || streamingText.isAnimating ? streamingText.displayedText : json,
+          language: "json"
+        }
+      ) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       import_streamdown.Streamdown,
       {
         className: cn("a24-message-response", className),
@@ -2500,10 +3141,10 @@ function resolvedHitlLabel(part) {
 }
 
 // src/ui/tool-sessions.tsx
-var React11 = __toESM(require("react"), 1);
-var import_lucide_react6 = require("lucide-react");
+var React15 = __toESM(require("react"), 1);
+var import_lucide_react8 = require("lucide-react");
 var import_thinking_orbs = require("thinking-orbs");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function toolSlotContext(isActive2, label, part, slots) {
   return {
     isActive: isActive2,
@@ -2521,7 +3162,7 @@ function ToolResourceAction({ context }) {
   const target = context.resourceTargets[0];
   if (!target) return null;
   const name = resourceTargetName(target);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "button",
     {
       "aria-label": `Open ${target.kind} ${target.path}`,
@@ -2535,8 +3176,8 @@ function ToolResourceAction({ context }) {
   );
 }
 function toolAccessory(context, slots) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    slots?.onResourceAction ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolResourceAction, { context }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    slots?.onResourceAction ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolResourceAction, { context }) : null,
     slots?.renderToolAccessory?.(context)
   ] });
 }
@@ -2613,12 +3254,12 @@ function ToolActivityReel({
 }) {
   const initial = initialLabel && initialLabel !== label ? initialLabel : label;
   const parsedInitialShownAt = initialShownAt ? Date.parse(initialShownAt) : Number.NaN;
-  const [displayed, setDisplayed] = React11.useState(initial);
-  const [previous, setPrevious] = React11.useState(null);
-  const displayedRef = React11.useRef(initial);
-  const latestRef = React11.useRef(label);
-  const shownAtRef = React11.useRef(Number.isFinite(parsedInitialShownAt) ? parsedInitialShownAt : Date.now());
-  React11.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 = () => {
@@ -2638,18 +3279,18 @@ function ToolActivityReel({
     const timer = window.setTimeout(showLatest, remaining);
     return () => window.clearTimeout(timer);
   }, [label]);
-  React11.useEffect(() => {
+  React15.useEffect(() => {
     if (!previous) return;
     const timer = window.setTimeout(() => setPrevious(null), 200);
     return () => window.clearTimeout(timer);
   }, [previous]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "a24-tool-reel", "aria-live": announce ? "polite" : "off", children: [
-    previous ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "aria-hidden": "true", className: "a24-tool-reel__previous", children: previous }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: previous ? "a24-tool-reel__current" : void 0, children: displayed })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "a24-tool-reel", "aria-live": announce ? "polite" : "off", children: [
+    previous ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": "true", className: "a24-tool-reel__previous", children: previous }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: previous ? "a24-tool-reel__current" : void 0, children: displayed })
   ] });
 }
 function ToolActivityOrb({ label = "Working", kind = "tool", part, renderActivityIcon }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-orb", children: renderActivityIcon ? renderActivityIcon({ label, kind, part }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_thinking_orbs.ThinkingOrb, { "aria-label": label, size: 20, speed: 0.8, state: "searching" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-tool-orb", children: renderActivityIcon ? renderActivityIcon({ label, kind, part }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_thinking_orbs.ThinkingOrb, { "aria-label": label, size: 20, speed: 0.8, state: "searching" }) });
 }
 function AgentChatActivityRow({
   label,
@@ -2657,22 +3298,22 @@ function AgentChatActivityRow({
   renderActivityIcon,
   onSelect
 }) {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityOrb, { label, kind: "planning", renderActivityIcon }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label a24-tool-shimmer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityReel, { label }) })
+  const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolActivityOrb, { label, kind: "planning", renderActivityIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-tool-trigger__label a24-tool-shimmer", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolActivityReel, { label }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-trigger-row a24-tool-trigger-row--root", "data-agents24-model-turn": modelTurnId, role: "status", children: onSelect ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", onClick: onSelect, type: "button", children: content }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", children: content }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-tool-trigger-row a24-tool-trigger-row--root", "data-agents24-model-turn": modelTurnId, role: "status", children: onSelect ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", onClick: onSelect, type: "button", children: content }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", children: content }) });
 }
 function AgentChatModelTurnRow({ part }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId });
 }
 function AgentChatNodeActivityRow({
   renderActivityIcon,
   onSelect,
   part
 }) {
-  const [open, setOpen] = React11.useState(false);
-  const contentId = React11.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.";
@@ -2683,18 +3324,18 @@ function AgentChatNodeActivityRow({
     running && "a24-tool-trigger--active",
     failed && "a24-tool-trigger--error"
   );
-  const label = running ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-shimmer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityReel, { label: part.label }) }) : part.label;
+  const label = running ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-tool-shimmer", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolActivityReel, { label: part.label }) }) : part.label;
   if (!failed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-trigger-row", role: "status", children: onSelect ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
-      running ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label", children: label })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: triggerClassName, children: [
-      running ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label", children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-tool-trigger-row", role: "status", children: onSelect ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
+      running ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-tool-trigger__label", children: label })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: triggerClassName, children: [
+      running ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-tool-trigger__label", children: label })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-tool-disclosure", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "a24-tool-disclosure", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "button",
       {
         "aria-controls": contentId,
@@ -2706,12 +3347,12 @@ function AgentChatNodeActivityRow({
         },
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label", children: label }),
-          open ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-tool-trigger__label", children: label }),
+          open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
         ]
       }
     ) }),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-detail a24-tool-detail--error", id: contentId, children: failureMessage }) : null
+    open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-tool-detail a24-tool-detail--error", id: contentId, children: failureMessage }) : null
   ] });
 }
 function toolRowLabel(part, separateResource = false) {
@@ -2738,25 +3379,25 @@ function ToolDisclosure({
   renderActivityIcon,
   accessory
 }) {
-  const [open, setOpen] = React11.useState(false);
-  const contentId = React11.useId();
-  const expandable = React11.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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
-      onSelect && part ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
-        showOrb ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label", children: label })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: triggerClassName, children: [
-        showOrb ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label", children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
+      onSelect && part ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
+        showOrb ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-tool-trigger__label", children: label })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: triggerClassName, children: [
+        showOrb ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-tool-trigger__label", children: label })
       ] }),
       accessory
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-tool-disclosure", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "a24-tool-disclosure", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "button",
         {
           "aria-controls": contentId,
@@ -2770,25 +3411,25 @@ function ToolDisclosure({
           },
           type: "button",
           children: [
-            showOrb ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label", children: label }),
-            open ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+            showOrb ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-tool-trigger__label", children: label }),
+            open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
           ]
         }
       ),
       accessory
     ] }),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-disclosure__content", id: contentId, children }) : null
+    open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-shimmer", children: rendered }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: rendered });
+  return active ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-tool-shimmer", children: rendered }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: rendered });
 }
 function ToolList({ children }) {
-  const listRef = React11.useRef(null);
-  const [fades, setFades] = React11.useState({ bottom: false, top: false });
-  const updateFades = React11.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 = {
@@ -2797,7 +3438,7 @@ function ToolList({ children }) {
     };
     setFades((current) => current.bottom === next.bottom && current.top === next.top ? current : next);
   }, []);
-  React11.useEffect(() => {
+  React15.useEffect(() => {
     updateFades();
     const list = listRef.current;
     if (!list || typeof ResizeObserver === "undefined") return;
@@ -2805,13 +3446,13 @@ function ToolList({ children }) {
     observer.observe(list);
     return () => observer.disconnect();
   }, [children, updateFades]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       className: "a24-tool-list-frame",
       "data-scroll-fade-bottom": fades.bottom ? "" : void 0,
       "data-scroll-fade-top": fades.top ? "" : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-list", onScroll: updateFades, ref: listRef, role: "list", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-tool-list", onScroll: updateFades, ref: listRef, role: "list", children })
     }
   );
 }
@@ -2828,13 +3469,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__ */ (0, import_jsx_runtime10.jsx)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     ToolDisclosure,
     {
       renderActivityIcon: slots?.renderActivityIcon,
       error: failed,
       accessory: toolAccessory(context, slots),
-      label: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolLabel, { active, label: context.label, part, slots }),
+      label: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolLabel, { active, label: context.label, part, slots }),
       loading: active,
       onExpandedChange: slots?.onExpandedChange,
       onSelect: slots?.onToolSelect,
@@ -2843,7 +3484,7 @@ function AgentChatToolRow({
       showOrb: showOrb ?? active,
       statusLabel: active ? context.label : void 0,
       children: [
-        detail ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("a24-tool-detail", failed && "a24-tool-detail--error"), children: detail }) : null,
+        detail ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("a24-tool-detail", failed && "a24-tool-detail--error"), children: detail }) : null,
         hostDetails
       ]
     }
@@ -2863,19 +3504,19 @@ function AgentChatToolSession({
   parts,
   slots
 }) {
-  const presentedLiveRef = React11.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__ */ (0, import_jsx_runtime10.jsx)(AgentChatToolRow, { activeToolId, part: parts[0], slots });
+  if (parts.length === 1 && !modelTurn && !leadingModelTurn) return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(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__ */ (0, import_jsx_runtime10.jsx)("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityReel, { initialLabel: leadingModelTurn ? "Planning next moves" : void 0, initialShownAt: leadingModelTurn?.timestamp, label }) }) : label;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolActivityReel, { initialLabel: leadingModelTurn ? "Planning next moves" : void 0, initialShownAt: leadingModelTurn?.timestamp, label }) }) : label;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     ToolDisclosure,
     {
       renderActivityIcon: slots?.renderActivityIcon,
@@ -2888,7 +3529,7 @@ function AgentChatToolSession({
       root: true,
       showOrb: isLive && isLatestActivity,
       statusLabel: planning ? "Planning next moves" : label,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolList, { children: parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AgentChatToolRow, { activeToolId, part, root: false, showOrb: false, slots }) }, part.id)) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolList, { children: parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatToolRow, { activeToolId, part, root: false, showOrb: false, slots }) }, part.id)) })
     }
   );
 }
@@ -2909,7 +3550,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 = React11.useRef(false);
+  const presentedLiveRef = React15.useRef(false);
   if (isLive && isLatestActivity) presentedLiveRef.current = true;
   const children = part.presentation.childTools || [];
   const state = subagentLabel(part);
@@ -2918,9 +3559,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__ */ (0, import_jsx_runtime10.jsx)("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityReel, { label: state.label }) }) : state.label;
+  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolActivityReel, { label: state.label }) }) : state.label;
   const context = toolSlotContext(presentingActivity, state.label, part, slots);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     ToolDisclosure,
     {
       renderActivityIcon: slots?.renderActivityIcon,
@@ -2934,12 +3575,12 @@ function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part,
       root: true,
       showOrb: isLive && isLatestActivity,
       statusLabel: state.label,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ToolList, { children: [
-        children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("a24-child-tool", child.status === "failed" && "a24-child-tool--error"), role: "listitem", children: slots?.renderChildTool?.(child, part) ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(isLive && isLatestActivity && child.status === "running" && "a24-tool-shimmer"), children: childLabel(child) }),
-          child.detail ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-child-tool__detail", children: child.detail }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ToolList, { children: [
+        children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("a24-child-tool", child.status === "failed" && "a24-child-tool--error"), role: "listitem", children: slots?.renderChildTool?.(child, part) ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn(isLive && isLatestActivity && child.status === "running" && "a24-tool-shimmer"), children: childLabel(child) }),
+          child.detail ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-child-tool__detail", children: child.detail }) : null
         ] }) }, child.id)),
-        failureMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-detail a24-tool-detail--error", children: failureMessage }) : null,
+        failureMessage ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-tool-detail a24-tool-detail--error", children: failureMessage }) : null,
         hostDetails
       ] })
     }
@@ -2947,41 +3588,51 @@ function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part,
 }
 
 // src/ui/agent-response-timeline.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("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__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("inline-block animate-pulse", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("inline-block animate-pulse", className), children });
 }
 function AgentChatToolPart({
   activeToolId,
   part
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatToolRow, { activeToolId, part });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentChatToolRow, { activeToolId, part });
 }
 function AgentChatToolGroup({
   activeToolId,
   parts
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatToolSession, { activeToolId, parts });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentChatToolSession, { activeToolId, parts });
 }
 function HitlPartRow({
   getHitlActionState,
+  hitlLabels,
+  onHitlPaint,
   isLoading,
   onHitlAction,
   part
 }) {
   const state = getHitlActionState?.(part);
-  const [comment, setComment] = React12.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__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       AskUserInteraction,
       {
         error: state?.error,
+        submission: state,
+        submissionLabels: hitlLabels,
+        onSubmissionPaint: onHitlPaint,
         isBusy: isLoading || state?.status === "resuming",
         onSubmit: onHitlAction ? (answers) => onHitlAction(part, {
           action: "respond",
@@ -2995,12 +3646,14 @@ function HitlPartRow({
       }
     );
   }
+  if (isHitlSubmissionCompact(state)) return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(HitlSubmissionStatus, { state, labels: hitlLabels, onPaint: onHitlPaint });
   if (isTerminal) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
-    requireComment ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
+    requireComment ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "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",
@@ -3010,10 +3663,11 @@ function HitlPartRow({
         value: comment
       }
     ) : null,
-    state?.error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    state?.error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "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",
@@ -3035,6 +3689,8 @@ function HitlPartRow({
 function AgentChatPart({
   activeToolId,
   getHitlActionState,
+  hitlLabels,
+  onHitlPaint,
   isLoading,
   isTextStreaming,
   message,
@@ -3044,7 +3700,7 @@ function AgentChatPart({
   toolSlots
 }) {
   if (part.kind === "text") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       MessageResponse,
       {
         ...responseProps,
@@ -3054,44 +3710,46 @@ function AgentChatPart({
       }
     );
   }
-  if (part.kind === "tool") return isAgentChatSubagent(part) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatSubagentGroup, { part, slots: toolSlots }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatToolRow, { activeToolId, part, slots: toolSlots });
-  if (part.kind === "model-turn") return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatModelTurnRow, { part });
+  if (part.kind === "tool") return isAgentChatSubagent(part) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentChatSubagentGroup, { part, slots: toolSlots }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentChatToolRow, { activeToolId, part, slots: toolSlots });
+  if (part.kind === "model-turn") return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentChatModelTurnRow, { part });
   if (part.kind === "reasoning") {
     const label = part.text || part.label || "Thinking";
-    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-sm text-muted-foreground", children: label });
+    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-sm text-muted-foreground", children: label });
   }
   if (part.kind === "context-compression") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatContextCompressionRow, { part });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentChatContextCompressionRow, { part });
   }
   if (part.kind === "ui-blocks") {
     if (part.state === "output-error") {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-timeline-error text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "a24-timeline-error text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
     }
-    return part.bundle ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-sm text-muted-foreground", children: part.state === "input-streaming" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Shimmer, { children: "Rendering UI block" }) : "Rendered UI block" });
+    return part.bundle ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-sm text-muted-foreground", children: part.state === "input-streaming" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Shimmer, { children: "Rendering UI block" }) : "Rendered UI block" });
   }
   if (part.kind === "hitl") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       HitlPartRow,
       {
         getHitlActionState,
+        hitlLabels,
+        onHitlPaint,
         isLoading,
         onHitlAction,
         part
       }
     );
   }
-  if (part.kind === "error") return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-timeline-error text-sm text-destructive", role: "alert", children: part.errorText });
+  if (part.kind === "error") return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "a24-source-link", children: part.title });
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "a24-citation", children: label });
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "a24-citation", children: label });
   }
-  if (part.kind === "attachment") return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
-  if (part.kind === "data") return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
+  if (part.kind === "attachment") return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
+  if (part.kind === "data") return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
   return null;
 }
 function safeExternalUrl(value) {
@@ -3105,28 +3763,28 @@ function safeExternalUrl(value) {
 }
 function SafeUiBlocks({ bundle }) {
   const rows = Array.isArray(bundle.rows) ? bundle.rows : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
-    typeof bundle.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { children: bundle.title }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
+    typeof bundle.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-ui-blocks__row", children: blocks.map((rawBlock, blockIndex) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "a24-ui-block", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h4", { children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { children: String(column) }, index)) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { children: String(cell) }, cellIndex)) }, index)) })
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "a24-ui-block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("th", { children: String(column) }, index)) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("td", { children: String(cell) }, cellIndex)) }, index)) })
             ] }) })
           ] }, String(block.id || blockIndex));
         }
         const value = block.value ?? block.text ?? "";
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "a24-ui-block", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h4", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: String(value) })
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "a24-ui-block", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: String(value) })
         ] }, String(block.id || blockIndex));
       }) }, `row-${rowIndex}`);
     })
@@ -3134,6 +3792,8 @@ function SafeUiBlocks({ bundle }) {
 }
 function AgentResponseTimeline({
   getHitlActionState,
+  hitlLabels,
+  onHitlPaint,
   isLoading = false,
   message,
   nodeActivityMode = "default",
@@ -3146,7 +3806,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(
@@ -3160,42 +3820,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__ */ (0, import_jsx_runtime11.jsx)(AgentChatToolRow, { activeToolId, part: segment.part, showOrb, slots: toolSlots }, segment.part.id));
+      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentChatToolRow, { activeToolId, part: segment.part, showOrb, slots: toolSlots }, segment.part.id));
       continue;
     }
     if (segment.kind === "tool-session") {
-      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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__ */ (0, import_jsx_runtime15.jsx)(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__ */ (0, import_jsx_runtime11.jsx)(AgentChatSubagentGroup, { isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, part: segment.part, slots: toolSlots }, segment.part.id));
+      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(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__ */ (0, import_jsx_runtime11.jsx)(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Planning next moves", modelTurnId: part.modelTurnId }, key));
+      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(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__ */ (0, import_jsx_runtime11.jsx)(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: part.label, onSelect: onNodeSelect ? () => onNodeSelect(part) : void 0 }, key) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatNodeActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, onSelect: onNodeSelect, part }, part.id)
+        part.status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: part.label, onSelect: onNodeSelect ? () => onNodeSelect(part) : void 0 }, key) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentChatNodeActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, onSelect: onNodeSelect, part }, part.id)
       );
       continue;
     }
     if (part.kind === "ui-blocks" && renderUiBlocks) {
-      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(React12.Fragment, { children: renderUiBlocks(part) }, part.id));
+      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(React16.Fragment, { children: renderUiBlocks(part) }, part.id));
       continue;
     }
     rendered.push(
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(React12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(React16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         AgentChatPart,
         {
           activeToolId,
           getHitlActionState,
+          hitlLabels,
+          onHitlPaint,
           isLoading,
           isTextStreaming: part.kind === "text" && part.id === activeTextPartId,
           message,
@@ -3208,16 +3870,16 @@ function AgentResponseTimeline({
     );
   }
   if (rendered.length === 0 && message.content) {
-    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MessageResponse, { children: message.content }, `${message.id}-fallback`));
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MessageResponse, { children: message.content }, `${message.id}-fallback`));
   }
   if (rendered.length === 0 && isLoading) {
-    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Thinking" }, `${message.id}-active-activity`));
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Thinking" }, `${message.id}-active-activity`));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-3", children: rendered });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "space-y-3", children: rendered });
 }
 
 // src/ui/agent-chat-message.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("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) {
@@ -3230,19 +3892,19 @@ function AgentChatUserMessageContent({
   showLessLabel = "Show less",
   showMoreLabel = "Show more"
 }) {
-  const [isExpanded, setIsExpanded] = React13.useState(false);
-  const contentId = React13.useId();
+  const [isExpanded, setIsExpanded] = React17.useState(false);
+  const contentId = React17.useId();
   const shouldCollapse = shouldCollapseUserMessage(content, collapseThreshold);
-  const Icon = isExpanded ? import_lucide_react7.ChevronUp : import_lucide_react7.ChevronDown;
+  const Icon = isExpanded ? import_lucide_react9.ChevronUp : import_lucide_react9.ChevronDown;
   const clampedStyle = shouldCollapse && !isExpanded ? {
     WebkitBoxOrient: "vertical",
     WebkitLineClamp: Math.max(1, collapsedLines),
     display: "-webkit-box",
     overflow: "hidden"
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
-    shouldCollapse ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
+    shouldCollapse ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "button",
       {
         "aria-controls": contentId,
@@ -3255,7 +3917,7 @@ function AgentChatUserMessageContent({
         type: "button",
         children: [
           isExpanded ? showLessLabel : showMoreLabel,
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
         ]
       }
     ) : null
@@ -3265,9 +3927,9 @@ function AgentChatUserMessageActionRow({
   children,
   className
 }) {
-  const rowRef = React13.useRef(null);
-  const [visible, setVisible] = React13.useState(false);
-  React13.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);
@@ -3286,7 +3948,7 @@ function AgentChatUserMessageActionRow({
       message.removeEventListener("focusout", hideWhenFocusLeaves);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       ref: rowRef,
@@ -3306,6 +3968,8 @@ function AgentChatMessage({
   contentClassName,
   dir,
   getHitlActionState,
+  hitlLabels,
+  onHitlPaint,
   message,
   nodeActivityMode,
   onHitlAction,
@@ -3325,7 +3989,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__ */ (0, import_jsx_runtime12.jsx)(
+  const renderedActions = actions ?? (actionHandlers ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     AgentChatDefaultActions,
     {
       additionalActions,
@@ -3335,14 +3999,14 @@ function AgentChatMessage({
     }
   ) : null);
   const defaultUserActions = !actions && Boolean(actionHandlers) && !isAssistant;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     ChatMessage,
     {
       className,
       dir,
       from: message.role,
       children: [
-        showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           ChatAttachmentRows,
           {
             attachments: message.attachments || [],
@@ -3351,17 +4015,19 @@ function AgentChatMessage({
             resolveContent: attachmentContentResolver
           }
         ) : null,
-        shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           ChatMessageContent,
           {
             className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
             dir,
             from: message.role,
             children: [
-              isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 Timeline,
                 {
                   getHitlActionState,
+                  hitlLabels,
+                  onHitlPaint,
                   isLoading: isStreaming,
                   message,
                   nodeActivityMode,
@@ -3369,7 +4035,7 @@ function AgentChatMessage({
                   parts: message.parts
                 }
               ) : null,
-              !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 AgentChatUserMessageContent,
                 {
                   collapsedLines: userMessageCollapsedLines,
@@ -3382,18 +4048,22 @@ function AgentChatMessage({
             ]
           }
         ) : null,
-        renderedActions ? defaultUserActions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AgentChatUserMessageActionRow, { className: actionsClassName, children: renderedActions }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime16.jsx)(AgentChatUserMessageActionRow, { className: actionsClassName, children: renderedActions }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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
       ]
     }
   );
 }
 
 // src/ui/bubble.tsx
-var import_class_variance_authority2 = require("class-variance-authority");
+var import_class_variance_authority3 = require("class-variance-authority");
 var import_react_slot2 = require("@radix-ui/react-slot");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function BubbleGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       "data-slot": "bubble-group",
@@ -3402,7 +4072,7 @@ function BubbleGroup({ className, ...props }) {
     }
   );
 }
-var bubbleVariants = (0, import_class_variance_authority2.cva)(
+var bubbleVariants = (0, import_class_variance_authority3.cva)(
   "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
   {
     variants: {
@@ -3427,7 +4097,7 @@ function Bubble({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       "data-slot": "bubble",
@@ -3444,7 +4114,7 @@ function BubbleContent({
   ...props
 }) {
   const Comp = asChild ? import_react_slot2.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     Comp,
     {
       "data-slot": "bubble-content",
@@ -3456,7 +4126,7 @@ function BubbleContent({
     }
   );
 }
-var bubbleReactionsVariants = (0, import_class_variance_authority2.cva)(
+var bubbleReactionsVariants = (0, import_class_variance_authority3.cva)(
   "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
   {
     variants: {
@@ -3481,7 +4151,7 @@ function BubbleReactions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       "data-slot": "bubble-reactions",
@@ -3494,10 +4164,10 @@ function BubbleReactions({
 }
 
 // src/ui/marker.tsx
-var import_class_variance_authority3 = require("class-variance-authority");
+var import_class_variance_authority4 = require("class-variance-authority");
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var markerVariants = (0, import_class_variance_authority3.cva)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var markerVariants = (0, import_class_variance_authority4.cva)(
   "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",
   {
     variants: {
@@ -3516,7 +4186,7 @@ function Marker({
   ...props
 }) {
   const Comp = asChild ? import_react_slot3.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Comp,
     {
       "data-slot": "marker",
@@ -3527,7 +4197,7 @@ function Marker({
   );
 }
 function MarkerIcon({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "span",
     {
       "data-slot": "marker-icon",
@@ -3541,7 +4211,7 @@ function MarkerIcon({ className, ...props }) {
   );
 }
 function MarkerContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "span",
     {
       "data-slot": "marker-content",
@@ -3555,7 +4225,7 @@ function MarkerContent({ className, ...props }) {
 }
 
 // src/ui/mcp-connect-required-card.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var STATUS_LABELS = {
   pending: "Connect",
   connecting: "Connecting",
@@ -3579,7 +4249,7 @@ function McpConnectRequiredCard({
   const isBusy = loading || status === "connecting" || status === "resuming";
   const isConnected = status === "connected";
   const buttonDisabled = disabled || isBusy || isConnected || !onConnect;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       "data-agents24-mcp-connect-card": true,
@@ -3589,13 +4259,13 @@ function McpConnectRequiredCard({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "truncate text-sm font-medium", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
-          status === "error" && error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "truncate text-sm font-medium", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
+          status === "error" && error ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             type: "button",
@@ -3653,6 +4323,17 @@ function McpConnectRequiredCard({
   ChatMessageAction,
   ChatMessageActions,
   ChatMessageContent,
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockDownloadButton,
+  CodeBlockFooter,
+  CodeBlockHeader,
+  CodeBlockLine,
+  CodeBlockTitle,
+  CodeBlockWrapButton,
+  HitlSubmissionStatus,
   Marker,
   MarkerContent,
   MarkerIcon,
@@ -3679,10 +4360,12 @@ function McpConnectRequiredCard({
   cn,
   contextStatusMetrics,
   createAgentChatComposerFile,
+  defaultHitlSubmissionLabels,
   hitlActionLabel,
   hitlTitle,
   isAgentChatSubagent,
   isAgentChatToolRunning,
+  isHitlSubmissionCompact,
   latestRunningAgentChatToolId,
   markerVariants,
   partitionAgentChatToolTimeline,
@@ -3694,6 +4377,7 @@ function McpConnectRequiredCard({
   useAudioRecorder,
   useChatComposerFocus,
   useCompletionActionEntrance,
+  useHighlightedCode,
   useLiveCompletionRuns
 });
 //# sourceMappingURL=index.cjs.map