@optilogic/chat 1.0.0-beta.1 → 1.0.0-beta.11

package/dist/index.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
-var React = require('react');
+var React11 = require('react');
 var core = require('@optilogic/core');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
+var editor = require('@optilogic/editor');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -23,14 +24,34 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
 
 // src/components/agent-response/AgentResponse.tsx
-var ActivityIndicators = React__namespace.forwardRef(
-  ({ toolCalls, knowledge, memory, className, ...props }, ref) => {
-    const hasAnyActivity = toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0;
+var ActivityIndicators = React11__namespace.forwardRef(
+  ({ toolCalls, knowledge, memory, statusUpdates = [], className, ...props }, ref) => {
+    const hasAnyActivity = toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0 || statusUpdates.length > 0;
     if (!hasAnyActivity) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: core.cn("flex items-center gap-2", className), ...props, children: [
+      statusUpdates.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(core.Popover, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "w-3.5 h-3.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: statusUpdates.length })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.PopoverContent, { className: "w-80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-sm", children: "Status Updates" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 max-h-60 overflow-auto", children: statusUpdates.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 bg-muted rounded text-xs", children: [
+            item.agent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground", children: item.agent }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: item.agent ? "mt-1" : "", children: item.message })
+          ] }, item.id)) })
+        ] }) })
+      ] }),
       toolCalls.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(core.Popover, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(core.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
@@ -125,7 +146,7 @@ function formatTotalTime(seconds) {
   const minutes = seconds / 60;
   return `${minutes.toFixed(1)}m`;
 }
-var MetadataRow = React__namespace.forwardRef(
+var MetadataRow = React11__namespace.forwardRef(
   ({
     hasThinking,
     isExpanded,
@@ -133,6 +154,8 @@ var MetadataRow = React__namespace.forwardRef(
     toolCalls,
     knowledge,
     memory,
+    statusUpdates = [],
+    statusContent,
     status,
     elapsedTime,
     className,
@@ -140,7 +163,7 @@ var MetadataRow = React__namespace.forwardRef(
   }, ref) => {
     const isProcessing = status === "processing";
     const isComplete = status === "complete";
-    const hasActivity = toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0;
+    const hasActivity = toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0 || statusUpdates.length > 0;
     const renderLeftContent = () => {
       if (hasThinking) {
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
@@ -157,7 +180,7 @@ var MetadataRow = React__namespace.forwardRef(
       return null;
     };
     const leftContent = renderLeftContent();
-    if (!leftContent && !hasActivity) {
+    if (!leftContent && !hasActivity && !statusContent) {
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -171,16 +194,18 @@ var MetadataRow = React__namespace.forwardRef(
             "button",
             {
               onClick: onToggle,
-              className: "flex items-center gap-1.5 hover:bg-muted/50 -ml-1.5 pl-1.5 pr-2 py-0.5 rounded transition-colors",
+              className: "flex items-center gap-1.5 hover:bg-muted/50 -ml-1.5 pl-1.5 pr-2 py-0.5 rounded transition-colors shrink-0",
               children: leftContent
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5", children: leftContent }),
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 shrink-0", children: leftContent }),
+          statusContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 mx-2", children: statusContent }),
           /* @__PURE__ */ jsxRuntime.jsx(
             ActivityIndicators,
             {
               toolCalls,
               knowledge,
-              memory
+              memory,
+              statusUpdates
             }
           )
         ]
@@ -189,24 +214,61 @@ var MetadataRow = React__namespace.forwardRef(
   }
 );
 MetadataRow.displayName = "MetadataRow";
-var ThinkingSection = React__namespace.forwardRef(
-  ({ content, isExpanded, className, ...props }, ref) => {
-    if (!isExpanded || !content) {
+var ThinkingStepItem = ({ step, renderMarkdown }) => {
+  const [isCollapsed, setIsCollapsed] = React11.useState(step.isCollapsed ?? false);
+  const toggleCollapse = React11.useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+  const indentPadding = step.depth * 16;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border/50 last:border-b-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: toggleCollapse,
+        className: "w-full flex items-center gap-1.5 py-1.5 px-2 hover:bg-muted/50 transition-colors text-left",
+        style: { paddingLeft: `${indentPadding + 8}px` },
+        children: [
+          isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground/80", children: step.label })
+        ]
+      }
+    ),
+    !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "pb-2 px-2",
+        style: { paddingLeft: `${indentPadding + 28}px` },
+        children: renderMarkdown ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: renderMarkdown(step.content) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap font-mono", children: step.content })
+      }
+    )
+  ] });
+};
+var ThinkingSection = React11__namespace.forwardRef(
+  ({ content, isExpanded, renderMarkdown, className, ...props }, ref) => {
+    if (!isExpanded || !content || Array.isArray(content) && content.length === 0) {
       return null;
     }
+    const isStructured = Array.isArray(content);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className: core.cn("px-3 pb-3 border-t border-border", className),
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 max-h-[200px] overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap font-mono", children: content }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 max-h-[200px] overflow-y-auto scrollbar-thin", children: isStructured ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0", children: content.map((step) => /* @__PURE__ */ jsxRuntime.jsx(
+          ThinkingStepItem,
+          {
+            step,
+            renderMarkdown
+          },
+          step.id
+        )) }) : renderMarkdown ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: renderMarkdown(content) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap font-mono", children: content }) })
       }
     );
   }
 );
 ThinkingSection.displayName = "ThinkingSection";
-var ActionBar = React__namespace.forwardRef(
+var ActionBar = React11__namespace.forwardRef(
   ({
     response,
     isVisible,
@@ -217,8 +279,8 @@ var ActionBar = React__namespace.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [copied, setCopied] = React.useState(false);
-    const handleCopy = React.useCallback(async () => {
+    const [copied, setCopied] = React11.useState(false);
+    const handleCopy = React11.useCallback(async () => {
       try {
         await navigator.clipboard.writeText(response);
         setCopied(true);
@@ -228,11 +290,11 @@ var ActionBar = React__namespace.forwardRef(
         console.error("Failed to copy response:", err);
       }
     }, [response, onResponseCopy]);
-    const handleThumbsUp = React.useCallback(() => {
+    const handleThumbsUp = React11.useCallback(() => {
       const newValue = feedback === "up" ? null : "up";
       onFeedbackChange?.(newValue);
     }, [feedback, onFeedbackChange]);
-    const handleThumbsDown = React.useCallback(() => {
+    const handleThumbsDown = React11.useCallback(() => {
       const newValue = feedback === "down" ? null : "down";
       onFeedbackChange?.(newValue);
     }, [feedback, onFeedbackChange]);
@@ -295,13 +357,320 @@ var ActionBar = React__namespace.forwardRef(
   }
 );
 ActionBar.displayName = "ActionBar";
+function buildResponseString(questions, selectedOptions, freeformText) {
+  const parts = [];
+  for (const q of questions) {
+    const answer = selectedOptions[q];
+    if (answer) {
+      parts.push(`Q: ${q}
+A: ${answer}`);
+    }
+  }
+  const trimmed = freeformText.trim();
+  if (trimmed) {
+    parts.push(`Additional context: ${trimmed}`);
+  }
+  return parts.join("\n\n");
+}
+var HITLQuestionPanel = React11__namespace.forwardRef(({ question, onSubmit, onStop, className, ...props }, ref) => {
+  const [freeformText, setFreeformText] = React11.useState("");
+  const [selectedOptions, setSelectedOptions] = React11.useState({});
+  const hasTimeout = question.timeoutSeconds != null;
+  const [secondsLeft, setSecondsLeft] = React11.useState(
+    () => hasTimeout ? Math.max(
+      0,
+      Math.round(
+        question.timeoutSeconds - (Date.now() - question.receivedAt) / 1e3
+      )
+    ) : Infinity
+  );
+  const textareaRef = React11.useRef(null);
+  React11.useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+  React11.useEffect(() => {
+    if (!hasTimeout) return;
+    const interval = setInterval(() => {
+      const remaining = Math.max(
+        0,
+        Math.round(
+          question.timeoutSeconds - (Date.now() - question.receivedAt) / 1e3
+        )
+      );
+      setSecondsLeft(remaining);
+      if (remaining <= 0) clearInterval(interval);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [hasTimeout, question.timeoutSeconds, question.receivedAt]);
+  const timedOut = hasTimeout && secondsLeft <= 0;
+  const questionsWithOptions = React11.useMemo(
+    () => question.questions.filter((q) => question.options?.[q]?.length),
+    [question.questions, question.options]
+  );
+  const allOptionsSelected = questionsWithOptions.length > 0 && questionsWithOptions.every((q) => selectedOptions[q]);
+  const hasFreeformText = freeformText.trim().length > 0;
+  const canSubmit = !timedOut && (allOptionsSelected || hasFreeformText);
+  const handleOptionClick = React11.useCallback(
+    (questionText, option) => {
+      if (timedOut) return;
+      setSelectedOptions((prev) => {
+        if (prev[questionText] === option) {
+          const next = { ...prev };
+          delete next[questionText];
+          return next;
+        }
+        return { ...prev, [questionText]: option };
+      });
+    },
+    [timedOut]
+  );
+  const handleSubmit = React11.useCallback(() => {
+    if (!canSubmit) return;
+    const combined = buildResponseString(
+      question.questions,
+      selectedOptions,
+      freeformText
+    );
+    onSubmit(combined, { selectedOptions, freeformText });
+  }, [canSubmit, question.questions, selectedOptions, freeformText, onSubmit]);
+  const handleKeyDown = React11.useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const formatTime2 = (s) => {
+    const m = Math.floor(s / 60);
+    const sec = s % 60;
+    return `${m}:${sec.toString().padStart(2, "0")}`;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: core.cn(
+        "rounded-lg border border-border bg-muted p-4 space-y-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: question.reason }) }),
+          hasTimeout && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: core.cn(
+                "text-xs font-mono whitespace-nowrap",
+                secondsLeft <= 30 ? "text-destructive" : "text-muted-foreground"
+              ),
+              children: timedOut ? "Timed out" : formatTime2(secondsLeft)
+            }
+          )
+        ] }),
+        question.context && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground bg-background rounded p-2 border border-border max-h-24 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap font-mono", children: question.context }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: question.questions.map((q, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: q }),
+          question.options?.[q] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mt-1.5", children: question.options[q].map((option, j) => {
+            const isSelected = selectedOptions[q] === option;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              core.Button,
+              {
+                variant: isSelected ? "primary" : "outline",
+                size: "sm",
+                onClick: () => handleOptionClick(q, option),
+                disabled: timedOut,
+                children: option
+              },
+              j
+            );
+          }) })
+        ] }, i)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.Textarea,
+          {
+            ref: textareaRef,
+            value: freeformText,
+            onChange: (e) => setFreeformText(e.target.value),
+            onKeyDown: handleKeyDown,
+            disabled: timedOut,
+            placeholder: "Add additional context or type a full response...",
+            rows: 2,
+            className: "resize-none"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: onStop,
+              className: "text-destructive hover:text-destructive hover:bg-destructive/10",
+              children: "Stop agent"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Button,
+            {
+              variant: "primary",
+              size: "sm",
+              onClick: handleSubmit,
+              disabled: !canSubmit,
+              children: "Send response"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+HITLQuestionPanel.displayName = "HITLQuestionPanel";
+function parseResponse(response) {
+  const answers = {};
+  let additionalContext = null;
+  const blocks = response.split("\n\n");
+  for (const block of blocks) {
+    const qaMatch = block.match(/^Q: (.+)\nA: (.+)$/s);
+    if (qaMatch) {
+      answers[qaMatch[1].trim()] = qaMatch[2].trim();
+    } else if (block.startsWith("Additional context: ")) {
+      additionalContext = block.slice("Additional context: ".length).trim();
+    }
+  }
+  return { answers, additionalContext };
+}
+var HITLInteractionRecord = React11__namespace.forwardRef(({ interaction, className, ...props }, ref) => {
+  const { question, response, respondedAt } = interaction;
+  const timestamp = new Date(respondedAt).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+  const { answers, additionalContext } = React11.useMemo(
+    () => parseResponse(response),
+    [response]
+  );
+  const hasParsedAnswers = Object.keys(answers).length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: core.cn(
+        "rounded-lg border border-border bg-muted p-3 space-y-2 text-sm",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-muted-foreground", children: "Clarifying Question" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: timestamp })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground font-medium", children: question.reason }),
+        question.context && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground bg-background rounded p-2 border border-border", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap font-mono", children: question.context }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: question.questions.map((q, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground", children: q }),
+          question.options?.[q] && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground ml-2", children: [
+            "Options: ",
+            question.options[q].join(", ")
+          ] }),
+          hasParsedAnswers && answers[q] && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-foreground ml-2 mt-0.5 bg-background rounded px-2 py-1 border border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Answer: " }),
+            answers[q]
+          ] })
+        ] }, i)) }),
+        hasParsedAnswers && additionalContext && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs", children: "Additional context:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground mt-0.5", children: additionalContext })
+        ] }),
+        !hasParsedAnswers && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs", children: "Response:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground mt-0.5", children: response })
+        ] })
+      ]
+    }
+  );
+});
+HITLInteractionRecord.displayName = "HITLInteractionRecord";
+var HITLSection = React11__namespace.forwardRef(
+  ({
+    interactions,
+    defaultExpanded = false,
+    isExpanded: controlledExpanded,
+    onExpandedChange,
+    className,
+    ...props
+  }, ref) => {
+    const [uncontrolledExpanded, setUncontrolledExpanded] = React11.useState(defaultExpanded);
+    const isControlled = controlledExpanded !== void 0;
+    const isExpanded = isControlled ? controlledExpanded : uncontrolledExpanded;
+    const toggleExpanded = React11.useCallback(() => {
+      const newValue = !isExpanded;
+      if (isControlled) {
+        onExpandedChange?.(newValue);
+      } else {
+        setUncontrolledExpanded(newValue);
+      }
+    }, [isExpanded, isControlled, onExpandedChange]);
+    if (!interactions || interactions.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: core.cn("border-t border-border", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: toggleExpanded,
+              className: "w-full flex items-center gap-2 py-2 px-3 hover:bg-muted/50 transition-colors text-left",
+              children: [
+                isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleQuestion, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground/80", children: [
+                  "Clarifying Questions (",
+                  interactions.length,
+                  ")"
+                ] })
+              ]
+            }
+          ),
+          isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-3 space-y-2", children: interactions.map((interaction, i) => /* @__PURE__ */ jsxRuntime.jsx(HITLInteractionRecord, { interaction }, i)) })
+        ]
+      }
+    );
+  }
+);
+HITLSection.displayName = "HITLSection";
+var TruncatedMessage = React11__namespace.forwardRef(
+  ({ message, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: core.cn(
+          "text-xs text-muted-foreground truncate min-w-0",
+          className
+        ),
+        title: message,
+        ...props,
+        children: message
+      }
+    );
+  }
+);
+TruncatedMessage.displayName = "TruncatedMessage";
 function useThinkingTimer({
   startTime,
   endTime,
   status
 }) {
-  const [elapsed, setElapsed] = React.useState(0);
-  React.useEffect(() => {
+  const [elapsed, setElapsed] = React11.useState(0);
+  React11.useEffect(() => {
     if (!startTime) {
       setElapsed(0);
       return;
@@ -329,17 +698,138 @@ var initialAgentResponseState = {
   toolCalls: [],
   knowledge: [],
   memory: [],
+  statusUpdates: [],
   response: "",
   thinkingStartTime: null,
   responseCompleteTime: null,
   firstMessageTime: null
 };
 
+// src/components/agent-timeline/utils.ts
+function buildTimelineEntries(state) {
+  const entries = [];
+  if (state.thinkingSteps) {
+    let idx = 0;
+    for (const step of state.thinkingSteps) {
+      entries.push({
+        id: `tl-think-${idx++}`,
+        type: "thinking",
+        agentName: step.agentName ?? null,
+        parentAgent: step.parentAgent ?? null,
+        depth: step.depth ?? 0,
+        content: step.content,
+        title: step.label,
+        timestamp: step.timestamp ?? 0
+      });
+    }
+  } else if (state.thinking) {
+    entries.push({
+      id: "tl-think-0",
+      type: "thinking",
+      agentName: null,
+      parentAgent: null,
+      depth: 0,
+      content: state.thinking,
+      title: null,
+      timestamp: state.thinkingStartTime ?? 0
+    });
+  }
+  let toolIdx = 0;
+  for (const tool of state.toolCalls) {
+    entries.push({
+      id: `tl-tool-${toolIdx++}`,
+      type: "tool_call",
+      agentName: tool.agentName ?? null,
+      parentAgent: tool.parentAgent ?? null,
+      depth: tool.depth ?? 0,
+      content: tool.name,
+      title: null,
+      timestamp: tool.timestamp
+    });
+  }
+  let knowIdx = 0;
+  for (const item of state.knowledge) {
+    entries.push({
+      id: `tl-know-${knowIdx++}`,
+      type: "knowledge",
+      agentName: item.agentName ?? null,
+      parentAgent: item.parentAgent ?? null,
+      depth: item.depth ?? 0,
+      content: item.content,
+      title: item.source,
+      timestamp: item.timestamp
+    });
+  }
+  let memIdx = 0;
+  for (const item of state.memory) {
+    entries.push({
+      id: `tl-mem-${memIdx++}`,
+      type: "memory",
+      agentName: item.agentName ?? null,
+      parentAgent: item.parentAgent ?? null,
+      depth: item.depth ?? 0,
+      content: item.content,
+      title: item.type,
+      timestamp: item.timestamp
+    });
+  }
+  let statIdx = 0;
+  for (const item of state.statusUpdates) {
+    entries.push({
+      id: `tl-stat-${statIdx++}`,
+      type: "status_update",
+      agentName: item.agentName ?? item.agent ?? null,
+      parentAgent: item.parentAgent ?? null,
+      depth: item.depth ?? 0,
+      content: item.message,
+      title: null,
+      timestamp: item.timestamp
+    });
+  }
+  entries.sort((a, b) => a.timestamp - b.timestamp);
+  return entries;
+}
+function groupIntoAgentRuns(entries) {
+  const runs = [];
+  let currentRun = null;
+  for (const entry of entries) {
+    const name = entry.agentName || "Agent";
+    if (!currentRun || currentRun.agentName !== name) {
+      currentRun = {
+        agentName: name,
+        parentAgent: entry.parentAgent,
+        depth: entry.depth,
+        entries: []
+      };
+      runs.push(currentRun);
+    }
+    currentRun.entries.push({ entry, count: 1 });
+  }
+  for (const run of runs) {
+    run.entries = deduplicateEntries(run.entries);
+  }
+  return runs;
+}
+function deduplicateEntries(entries) {
+  if (entries.length === 0) return [];
+  const result = [entries[0]];
+  for (let i = 1; i < entries.length; i++) {
+    const prev = result[result.length - 1];
+    const curr = entries[i];
+    if (prev.entry.type === curr.entry.type && prev.entry.content === curr.entry.content) {
+      prev.count += curr.count;
+    } else {
+      result.push({ ...curr });
+    }
+  }
+  return result;
+}
+
 // src/components/agent-response/hooks/useAgentResponseAccumulator.ts
 function useAgentResponseAccumulator(options) {
-  const [state, setState] = React.useState(initialAgentResponseState);
+  const [state, setState] = React11.useState(initialAgentResponseState);
   const topic = options?.topic;
-  const handleMessage = React.useCallback(
+  const handleMessage = React11.useCallback(
     (message) => {
       let payload;
       if (topic) {
@@ -363,16 +853,49 @@ function useAgentResponseAccumulator(options) {
             }
             return { ...prev, status: newStatus };
           case "thinking": {
+            if (payload.thinkingStep) {
+              const newStep = {
+                id: payload.thinkingStep.id || `step-${Date.now()}`,
+                label: payload.thinkingStep.label,
+                content: payload.thinkingStep.content,
+                depth: payload.thinkingStep.depth ?? payload.depth ?? 0,
+                isCollapsed: payload.thinkingStep.isCollapsed,
+                timestamp: Date.now(),
+                agentName: payload.agentName,
+                parentAgent: payload.parentAgent
+              };
+              const thinkingStartTime2 = prev.thinkingStartTime ?? Date.now();
+              const next2 = {
+                ...prev,
+                status: newStatus,
+                thinkingSteps: [...prev.thinkingSteps || [], newStep],
+                thinkingStartTime: thinkingStartTime2,
+                firstMessageTime
+              };
+              return { ...next2, timelineEntries: buildTimelineEntries(next2) };
+            }
             const newThinking = payload.message || payload.content || "";
             const separator = prev.thinking && newThinking ? "\n\n" : "";
             const thinkingStartTime = prev.thinkingStartTime ?? (newThinking ? Date.now() : null);
-            return {
+            const prevSteps = prev.thinkingSteps || [];
+            const plainStep = {
+              id: `step-${prevSteps.length}`,
+              label: newThinking,
+              content: newThinking,
+              depth: payload.depth ?? 0,
+              timestamp: Date.now(),
+              agentName: payload.agentName,
+              parentAgent: payload.parentAgent
+            };
+            const next = {
               ...prev,
               status: newStatus,
               thinking: prev.thinking + separator + newThinking,
+              thinkingSteps: [...prevSteps, plainStep],
               thinkingStartTime,
               firstMessageTime
             };
+            return { ...next, timelineEntries: buildTimelineEntries(next) };
           }
           case "tool_call": {
             const toolName = payload.message || payload.tool?.name;
@@ -381,14 +904,18 @@ function useAgentResponseAccumulator(options) {
                 id: payload.tool?.id || `tool-${Date.now()}`,
                 name: toolName,
                 arguments: payload.tool?.arguments,
-                timestamp: Date.now()
+                timestamp: Date.now(),
+                agentName: payload.agentName,
+                parentAgent: payload.parentAgent,
+                depth: payload.depth
               };
-              return {
+              const next = {
                 ...prev,
                 status: newStatus,
                 toolCalls: [...prev.toolCalls, newToolCall],
                 firstMessageTime
               };
+              return { ...next, timelineEntries: buildTimelineEntries(next) };
             }
             return { ...prev, status: newStatus, firstMessageTime };
           }
@@ -399,14 +926,18 @@ function useAgentResponseAccumulator(options) {
                 id: payload.knowledge?.id || `knowledge-${Date.now()}`,
                 source: payload.knowledge?.source || "unknown",
                 content: knowledgeContent,
-                timestamp: Date.now()
+                timestamp: Date.now(),
+                agentName: payload.agentName,
+                parentAgent: payload.parentAgent,
+                depth: payload.depth
               };
-              return {
+              const next = {
                 ...prev,
                 status: newStatus,
                 knowledge: [...prev.knowledge, newKnowledge],
                 firstMessageTime
               };
+              return { ...next, timelineEntries: buildTimelineEntries(next) };
             }
             return { ...prev, status: newStatus, firstMessageTime };
           }
@@ -417,14 +948,18 @@ function useAgentResponseAccumulator(options) {
                 id: payload.memory?.id || `memory-${Date.now()}`,
                 type: payload.memory?.type || "unknown",
                 content: memoryContent,
-                timestamp: Date.now()
+                timestamp: Date.now(),
+                agentName: payload.agentName,
+                parentAgent: payload.parentAgent,
+                depth: payload.depth
               };
-              return {
+              const next = {
                 ...prev,
                 status: newStatus,
                 memory: [...prev.memory, newMemory],
                 firstMessageTime
               };
+              return { ...next, timelineEntries: buildTimelineEntries(next) };
             }
             return { ...prev, status: newStatus, firstMessageTime };
           }
@@ -436,6 +971,28 @@ function useAgentResponseAccumulator(options) {
               responseCompleteTime: Date.now(),
               firstMessageTime: prev.firstMessageTime ?? Date.now()
             };
+          case "status_update": {
+            const statusMessage = payload.message || payload.statusUpdate?.message;
+            if (statusMessage) {
+              const newStatusItem = {
+                id: payload.statusUpdate?.id || `status-${Date.now()}`,
+                message: statusMessage,
+                agent: payload.statusUpdate?.agent,
+                timestamp: Date.now(),
+                agentName: payload.agentName,
+                parentAgent: payload.parentAgent,
+                depth: payload.depth
+              };
+              const next = {
+                ...prev,
+                status: newStatus,
+                statusUpdates: [...prev.statusUpdates, newStatusItem],
+                firstMessageTime
+              };
+              return { ...next, timelineEntries: buildTimelineEntries(next) };
+            }
+            return { ...prev, status: newStatus, firstMessageTime };
+          }
           default:
             return { ...prev, status: newStatus, firstMessageTime };
         }
@@ -443,12 +1000,293 @@ function useAgentResponseAccumulator(options) {
     },
     [topic]
   );
-  const reset = React.useCallback(() => {
+  const reset = React11.useCallback(() => {
     setState(initialAgentResponseState);
   }, []);
   return { state, handleMessage, reset };
 }
-var AgentResponse = React__namespace.forwardRef(
+var ICON_MAP = {
+  thinking: lucideReact.Brain,
+  tool_call: lucideReact.Wrench,
+  knowledge: lucideReact.BookOpen,
+  memory: lucideReact.HardDrive,
+  status_update: lucideReact.Activity,
+  ai_response: lucideReact.MessageSquare,
+  error: lucideReact.AlertCircle
+};
+function TimelineItem({
+  displayEntry,
+  renderMarkdown,
+  isExpanded,
+  onToggleExpanded
+}) {
+  const { entry, count } = displayEntry;
+  const Icon = ICON_MAP[entry.type] ?? lucideReact.Activity;
+  const isLong = entry.content.length > 200 || entry.content.split("\n").length > 3;
+  const canExpand = isLong || entry.type === "ai_response";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1 flex items-start gap-2 group", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0 mt-0.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: isExpanded && entry.type === "ai_response" && renderMarkdown ? (
+      // Expanded AI response: rendered markdown
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        renderMarkdown(entry.content),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onToggleExpanded,
+            className: "text-[10px] text-muted-foreground/70 hover:text-muted-foreground mt-1",
+            children: "Show less"
+          }
+        )
+      ] })
+    ) : isExpanded ? (
+      // Expanded non-AI: plain text
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap font-mono", children: entry.content }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onToggleExpanded,
+            className: "text-[10px] text-muted-foreground/70 hover:text-muted-foreground mt-1",
+            children: "Show less"
+          }
+        )
+      ] })
+    ) : (
+      // Collapsed: truncated with optional expand
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-1.5 min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `text-xs text-muted-foreground min-w-0 ${canExpand ? "line-clamp-2 cursor-pointer hover:text-foreground/80" : ""}`,
+            onClick: canExpand ? onToggleExpanded : void 0,
+            children: entry.content
+          }
+        ),
+        count > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground/60 whitespace-nowrap flex-shrink-0", children: [
+          "(x",
+          count,
+          ")"
+        ] })
+      ] })
+    ) })
+  ] });
+}
+function TimelineAgentBlock({
+  block,
+  renderMarkdown,
+  isSingleAgent,
+  isCollapsed,
+  onToggleCollapsed,
+  expandedItems,
+  onToggleItemExpanded
+}) {
+  const indentPx = block.depth * 16;
+  if (isSingleAgent && block.depth === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: `${indentPx}px` }, children: block.entries.map((displayEntry, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineItem,
+      {
+        displayEntry,
+        renderMarkdown,
+        isExpanded: expandedItems.has(displayEntry.entry.id),
+        onToggleExpanded: () => onToggleItemExpanded(displayEntry.entry.id)
+      },
+      displayEntry.entry.id + "-" + i
+    )) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: `${indentPx}px` }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onToggleCollapsed,
+        className: "w-full flex items-center gap-1.5 py-1 hover:bg-muted/50 -ml-1 pl-1 pr-2 rounded transition-colors text-left",
+        children: [
+          isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground/80", children: block.agentName }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground/60", children: [
+            "(",
+            block.entries.reduce((sum, e) => sum + e.count, 0),
+            ")"
+          ] })
+        ]
+      }
+    ),
+    !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4", children: block.entries.map((displayEntry, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineItem,
+      {
+        displayEntry,
+        renderMarkdown,
+        isExpanded: expandedItems.has(displayEntry.entry.id),
+        onToggleExpanded: () => onToggleItemExpanded(displayEntry.entry.id)
+      },
+      displayEntry.entry.id + "-" + i
+    )) })
+  ] });
+}
+function createTimelineUIState() {
+  return {
+    expandedItems: /* @__PURE__ */ new Set(),
+    collapsedRuns: /* @__PURE__ */ new Set(),
+    activeFilters: /* @__PURE__ */ new Set()
+  };
+}
+var TYPE_CONFIG = [
+  { type: "status_update", icon: lucideReact.Activity, label: "Status" },
+  { type: "thinking", icon: lucideReact.Brain, label: "Thinking" },
+  { type: "tool_call", icon: lucideReact.Wrench, label: "Tools" },
+  { type: "knowledge", icon: lucideReact.BookOpen, label: "Knowledge" },
+  { type: "memory", icon: lucideReact.HardDrive, label: "Memory" },
+  { type: "ai_response", icon: lucideReact.MessageSquare, label: "AI" },
+  { type: "error", icon: lucideReact.AlertCircle, label: "Errors" }
+];
+function AgentTimeline({ entries, renderMarkdown, uiState, maxHeight = "300px" }) {
+  const containerRef = React11.useRef(null);
+  const [renderTick, setRenderTick] = React11.useState(0);
+  const forceRender = React11.useCallback(() => setRenderTick((t) => t + 1), []);
+  const [internalExpandedItems] = React11.useState(() => /* @__PURE__ */ new Set());
+  const [internalCollapsedRuns] = React11.useState(() => /* @__PURE__ */ new Set());
+  const [internalActiveFilters] = React11.useState(() => /* @__PURE__ */ new Set());
+  const expandedItems = uiState?.expandedItems ?? internalExpandedItems;
+  const collapsedRuns = uiState?.collapsedRuns ?? internalCollapsedRuns;
+  const activeFilters = uiState?.activeFilters ?? internalActiveFilters;
+  const availableTypes = React11.useMemo(() => {
+    const types = /* @__PURE__ */ new Set();
+    for (const entry of entries) {
+      types.add(entry.type);
+    }
+    return types;
+  }, [entries]);
+  const filteredEntries = React11.useMemo(
+    () => activeFilters.size === 0 ? entries : entries.filter((e) => activeFilters.has(e.type)),
+    [entries, activeFilters, renderTick]
+  );
+  const agentRuns = React11.useMemo(() => groupIntoAgentRuns(filteredEntries), [filteredEntries, renderTick]);
+  const toggleFilter = React11.useCallback((type) => {
+    if (activeFilters.has(type)) {
+      activeFilters.delete(type);
+    } else {
+      activeFilters.add(type);
+    }
+    forceRender();
+  }, [activeFilters, forceRender]);
+  const clearFilters = React11.useCallback(() => {
+    activeFilters.clear();
+    forceRender();
+  }, [activeFilters, forceRender]);
+  const toggleItemExpanded = React11.useCallback((entryId) => {
+    if (expandedItems.has(entryId)) {
+      expandedItems.delete(entryId);
+    } else {
+      expandedItems.add(entryId);
+    }
+    forceRender();
+  }, [expandedItems, forceRender]);
+  const collapseAll = React11.useCallback(() => {
+    collapsedRuns.clear();
+    agentRuns.forEach((run, i) => {
+      collapsedRuns.add(`${run.agentName}-${i}`);
+    });
+    expandedItems.clear();
+    forceRender();
+  }, [agentRuns, collapsedRuns, expandedItems, forceRender]);
+  const expandAll = React11.useCallback(() => {
+    collapsedRuns.clear();
+    agentRuns.forEach((run, i) => {
+      collapsedRuns.add(`${run.agentName}-${i}:expanded`);
+    });
+    forceRender();
+  }, [agentRuns, collapsedRuns, forceRender]);
+  if (entries.length === 0) return null;
+  const isSingle = agentRuns.length === 1;
+  const hasActiveFilter = activeFilters.size > 0;
+  const scrollStyle = maxHeight !== "none" ? { maxHeight } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `-mt-1 ${maxHeight !== "none" ? "overflow-y-auto scrollbar-thin" : ""}`,
+      style: scrollStyle,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-10 bg-background flex items-center gap-1 py-1.5 mb-1 border-b border-border/50 flex-wrap", children: [
+          TYPE_CONFIG.filter((tc) => availableTypes.has(tc.type)).map((tc) => {
+            const isActive = activeFilters.has(tc.type);
+            const count = entries.filter((e) => e.type === tc.type).length;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => toggleFilter(tc.type),
+                className: `inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] transition-colors ${isActive ? "bg-accent text-accent-foreground ring-1 ring-accent-foreground/20" : "text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted/50"}`,
+                title: `${isActive ? "Hide" : "Show only"} ${tc.label}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(tc.icon, { className: "w-3 h-3" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: count })
+                ]
+              },
+              tc.type
+            );
+          }),
+          hasActiveFilter && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: clearFilters,
+              className: "text-[10px] text-muted-foreground/60 hover:text-muted-foreground px-1",
+              children: "Clear"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+          !isSingle && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: collapseAll,
+                className: "inline-flex items-center gap-0.5 text-[10px] text-muted-foreground/60 hover:text-muted-foreground px-1 py-0.5 rounded hover:bg-muted/50 transition-colors",
+                title: "Collapse all",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUp, { className: "w-3 h-3" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: expandAll,
+                className: "inline-flex items-center gap-0.5 text-[10px] text-muted-foreground/60 hover:text-muted-foreground px-1 py-0.5 rounded hover:bg-muted/50 transition-colors",
+                title: "Expand all",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-3 h-3" })
+              }
+            )
+          ] })
+        ] }),
+        filteredEntries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-muted-foreground/50 py-2 text-center", children: "No entries match the selected filters" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: agentRuns.map((run, i) => {
+          const runKey = `${run.agentName}-${i}`;
+          const defaultCollapsed = run.depth > 0;
+          const isCollapsed = collapsedRuns.has(runKey) ? true : collapsedRuns.has(`${runKey}:expanded`) ? false : defaultCollapsed;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            TimelineAgentBlock,
+            {
+              block: run,
+              renderMarkdown,
+              isSingleAgent: isSingle,
+              isCollapsed,
+              onToggleCollapsed: () => {
+                if (isCollapsed) {
+                  collapsedRuns.delete(runKey);
+                  collapsedRuns.add(`${runKey}:expanded`);
+                } else {
+                  collapsedRuns.delete(`${runKey}:expanded`);
+                  collapsedRuns.add(runKey);
+                }
+                forceRender();
+              },
+              expandedItems,
+              onToggleItemExpanded: toggleItemExpanded
+            },
+            runKey
+          );
+        }) })
+      ]
+    }
+  );
+}
+var AgentResponse = React11__namespace.forwardRef(
   ({
     state,
     id,
@@ -460,14 +1298,19 @@ var AgentResponse = React__namespace.forwardRef(
     thinkingExpanded: controlledThinkingExpanded,
     onThinkingExpandedChange,
     actionsVisible = "hover",
+    hitlInteractions,
+    defaultHITLExpanded = false,
+    statusContent,
     renderMarkdown,
+    renderThinkingMarkdown,
     className,
     ...props
   }, ref) => {
-    const [uncontrolledExpanded, setUncontrolledExpanded] = React.useState(defaultThinkingExpanded);
+    const timelineUIStateRef = React11.useRef(createTimelineUIState());
+    const [uncontrolledExpanded, setUncontrolledExpanded] = React11.useState(defaultThinkingExpanded);
     const isThinkingControlled = controlledThinkingExpanded !== void 0;
     const thinkingExpanded = isThinkingControlled ? controlledThinkingExpanded : uncontrolledExpanded;
-    const toggleThinking = React.useCallback(() => {
+    const toggleThinking = React11.useCallback(() => {
       const newValue = !thinkingExpanded;
       if (isThinkingControlled) {
         onThinkingExpandedChange?.(newValue);
@@ -475,18 +1318,21 @@ var AgentResponse = React__namespace.forwardRef(
         setUncontrolledExpanded(newValue);
       }
     }, [thinkingExpanded, isThinkingControlled, onThinkingExpandedChange]);
-    const [isHovered, setIsHovered] = React.useState(false);
+    const [isHovered, setIsHovered] = React11.useState(false);
     const elapsedTime = useThinkingTimer({
       startTime: state.thinkingStartTime,
       endTime: state.responseCompleteTime,
       status: state.status
     });
-    const totalTimeSeconds = React.useMemo(() => {
+    const totalTimeSeconds = React11.useMemo(() => {
       if (!state.firstMessageTime || !state.responseCompleteTime) return 0;
       return (state.responseCompleteTime - state.firstMessageTime) / 1e3;
     }, [state.firstMessageTime, state.responseCompleteTime]);
-    const hasAnyContent = state.thinking || state.toolCalls.length > 0 || state.knowledge.length > 0 || state.memory.length > 0 || state.response;
-    const showMetadataRow = state.thinking || state.toolCalls.length > 0 || state.knowledge.length > 0 || state.memory.length > 0 || state.status === "processing";
+    const hasTimelineEntries = !!(state.timelineEntries && state.timelineEntries.length > 0);
+    const hasThinkingContent = !!state.thinking || state.thinkingSteps && state.thinkingSteps.length > 0 || hasTimelineEntries || false;
+    const hasHITLInteractions = hitlInteractions && hitlInteractions.length > 0;
+    const hasAnyContent = hasThinkingContent || state.toolCalls.length > 0 || state.knowledge.length > 0 || state.memory.length > 0 || state.statusUpdates.length > 0 || hasHITLInteractions || state.response;
+    const showMetadataRow = hasThinkingContent || state.toolCalls.length > 0 || state.knowledge.length > 0 || state.memory.length > 0 || state.statusUpdates.length > 0 || state.status === "processing";
     const showActionBar = state.status === "complete" && state.response;
     const isActionBarVisible = actionsVisible === true || actionsVisible === "hover" && isHovered;
     if (!hasAnyContent) {
@@ -506,24 +1352,41 @@ var AgentResponse = React__namespace.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx(
                 MetadataRow,
                 {
-                  hasThinking: !!state.thinking,
+                  hasThinking: hasThinkingContent,
                   isExpanded: thinkingExpanded,
                   onToggle: toggleThinking,
                   toolCalls: state.toolCalls,
                   knowledge: state.knowledge,
                   memory: state.memory,
+                  statusUpdates: state.statusUpdates,
+                  statusContent,
                   status: state.status,
                   elapsedTime
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
+              hasTimelineEntries ? thinkingExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-3 border-t border-border mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                AgentTimeline,
+                {
+                  entries: state.timelineEntries,
+                  renderMarkdown: renderThinkingMarkdown,
+                  uiState: timelineUIStateRef.current
+                }
+              ) }) : /* @__PURE__ */ jsxRuntime.jsx(
                 ThinkingSection,
                 {
-                  content: state.thinking,
-                  isExpanded: thinkingExpanded
+                  content: state.thinkingSteps && state.thinkingSteps.length > 0 ? state.thinkingSteps : state.thinking,
+                  isExpanded: thinkingExpanded,
+                  renderMarkdown: renderThinkingMarkdown
                 }
               )
             ] }),
+            hasHITLInteractions && /* @__PURE__ */ jsxRuntime.jsx(
+              HITLSection,
+              {
+                interactions: hitlInteractions,
+                defaultExpanded: defaultHITLExpanded
+              }
+            ),
             state.response && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -552,15 +1415,401 @@ var AgentResponse = React__namespace.forwardRef(
   }
 );
 AgentResponse.displayName = "AgentResponse";
+var UserPrompt = React11__namespace.forwardRef(
+  ({ content, timestamp, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: core.cn(
+          "w-fit max-w-[80%] rounded-lg px-4 pt-3.5 pb-3",
+          "bg-secondary text-secondary-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap", children: content }),
+          timestamp && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-secondary-foreground/70 mt-1", children: timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit"
+          }) })
+        ]
+      }
+    );
+  }
+);
+UserPrompt.displayName = "UserPrompt";
+function createCodeBlockDecorate(entry) {
+  const [node, path] = entry;
+  const ranges = [];
+  if (!editor.Text.isText(node)) {
+    return ranges;
+  }
+  const { text } = node;
+  const backtickPositions = [];
+  let searchStart = 0;
+  while (true) {
+    const pos = text.indexOf("```", searchStart);
+    if (pos === -1) break;
+    backtickPositions.push(pos);
+    searchStart = pos + 3;
+  }
+  let i = 0;
+  while (i < backtickPositions.length) {
+    const openPos = backtickPositions[i];
+    const closePos = backtickPositions[i + 1];
+    ranges.push({
+      anchor: { path, offset: openPos },
+      focus: { path, offset: openPos + 3 },
+      codeDelimiter: true
+    });
+    if (closePos !== void 0) {
+      if (closePos > openPos + 3) {
+        ranges.push({
+          anchor: { path, offset: openPos + 3 },
+          focus: { path, offset: closePos },
+          codeBlock: true
+        });
+      }
+      ranges.push({
+        anchor: { path, offset: closePos },
+        focus: { path, offset: closePos + 3 },
+        codeDelimiter: true
+      });
+      i += 2;
+    } else {
+      if (text.length > openPos + 3) {
+        ranges.push({
+          anchor: { path, offset: openPos + 3 },
+          focus: { path, offset: text.length },
+          codeBlock: true
+        });
+      }
+      i += 1;
+    }
+  }
+  return ranges;
+}
+function CodeBlockLeaf({ attributes, children, leaf }) {
+  const leafAny = leaf;
+  if (leafAny.codeBlock) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ...attributes,
+        className: "bg-muted/50 text-muted-foreground font-mono text-sm rounded px-1",
+        children
+      }
+    );
+  }
+  if (leafAny.codeDelimiter) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ...attributes,
+        className: "text-muted-foreground/50 font-mono text-sm",
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, children });
+}
+var UserPromptInput = React11__namespace.forwardRef(
+  ({
+    value = "",
+    onChange,
+    onSubmit,
+    clearOnSubmit = true,
+    placeholder = "Type your message...",
+    disabled = false,
+    isSubmitting = false,
+    onStop,
+    disableWhileSubmitting = true,
+    autoFocus = false,
+    refocusAfterSubmit = false,
+    onReady,
+    minRows = 1,
+    maxRows = 6,
+    renderActions,
+    enableTags = false,
+    onTagCreate,
+    onTagDelete,
+    className,
+    ...props
+  }, ref) => {
+    const editorRef = React11__namespace.useRef(null);
+    const [internalValue, setInternalValue] = React11__namespace.useState(value);
+    const prevIsSubmitting = React11__namespace.useRef(isSubmitting);
+    const hasEmittedReady = React11__namespace.useRef(false);
+    React11__namespace.useEffect(() => {
+      setInternalValue(value);
+    }, [value]);
+    React11__namespace.useEffect(() => {
+      if (autoFocus) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            editorRef.current?.focus();
+          });
+        });
+      }
+    }, [autoFocus]);
+    React11__namespace.useEffect(() => {
+      if (!hasEmittedReady.current && onReady) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            hasEmittedReady.current = true;
+            onReady();
+          });
+        });
+      }
+    }, [onReady]);
+    React11__namespace.useEffect(() => {
+      if (refocusAfterSubmit && prevIsSubmitting.current && !isSubmitting) {
+        requestAnimationFrame(() => {
+          editorRef.current?.focus();
+        });
+      }
+      prevIsSubmitting.current = isSubmitting;
+    }, [isSubmitting, refocusAfterSubmit]);
+    React11__namespace.useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => {
+          try {
+            editorRef.current?.focus();
+          } catch {
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => {
+                editorRef.current?.focus();
+              });
+            });
+          }
+        },
+        clear: () => {
+          editorRef.current?.clear();
+          setInternalValue("");
+        },
+        getText: () => editorRef.current?.getText() ?? "",
+        insertText: (text) => editorRef.current?.insertText(text)
+      }),
+      []
+    );
+    const handleChange = React11__namespace.useCallback(
+      (newValue) => {
+        setInternalValue(newValue);
+        onChange?.(newValue);
+      },
+      [onChange]
+    );
+    const handleSubmit = React11__namespace.useCallback(
+      (text) => {
+        if (disabled || isSubmitting) return;
+        if (!text.trim()) return;
+        onSubmit?.(text.trim());
+        if (clearOnSubmit) {
+          editorRef.current?.clear();
+          setInternalValue("");
+        }
+      },
+      [disabled, isSubmitting, onSubmit, clearOnSubmit]
+    );
+    const handleSendClick = React11__namespace.useCallback(() => {
+      const text = editorRef.current?.getText() ?? "";
+      handleSubmit(text);
+    }, [handleSubmit]);
+    const hasContent = internalValue.trim().length > 0;
+    const canSubmit = hasContent && !disabled && !isSubmitting;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: core.cn(
+          "rounded-lg border border-input bg-background",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-2 pr-0 pt-1 pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            editor.SlateEditor,
+            {
+              ref: editorRef,
+              value: internalValue,
+              onChange: handleChange,
+              onSubmit: handleSubmit,
+              clearOnSubmit: false,
+              placeholder,
+              disabled: disabled || disableWhileSubmitting && isSubmitting,
+              enableTags,
+              onTagCreate,
+              onTagDelete,
+              minRows,
+              maxRows,
+              decorate: createCodeBlockDecorate,
+              renderLeaf: CodeBlockLeaf
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pl-2 pr-1 pb-1 pt-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: renderActions?.() }),
+            isSubmitting && onStop ? /* @__PURE__ */ jsxRuntime.jsx(
+              core.IconButton,
+              {
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, {}),
+                variant: "filled",
+                size: "sm",
+                "aria-label": "Stop",
+                onClick: onStop
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              core.IconButton,
+              {
+                icon: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, {}),
+                variant: "filled",
+                size: "sm",
+                "aria-label": isSubmitting ? "Sending..." : "Send message",
+                disabled: !canSubmit,
+                onClick: handleSendClick
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+UserPromptInput.displayName = "UserPromptInput";
+
+// src/components/inline-actions/parseResponseSegments.ts
+var ACTION_BLOCK_REGEX = /```json:action\s*\n([\s\S]*?)```/g;
+function parseResponseSegments(text) {
+  if (!text) return [];
+  const segments = [];
+  let lastIndex = 0;
+  ACTION_BLOCK_REGEX.lastIndex = 0;
+  let match;
+  while ((match = ACTION_BLOCK_REGEX.exec(text)) !== null) {
+    const before = text.slice(lastIndex, match.index);
+    if (before.trim()) {
+      segments.push({ kind: "markdown", content: before });
+    }
+    const jsonContent = match[1].trim();
+    let parsed = null;
+    try {
+      parsed = JSON.parse(jsonContent);
+    } catch {
+    }
+    if (parsed && typeof parsed === "object" && typeof parsed.type === "string") {
+      segments.push({
+        kind: "action",
+        actionType: parsed.type,
+        payload: parsed
+      });
+    } else {
+      const rawBlock = match[0];
+      segments.push({ kind: "markdown", content: rawBlock });
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  const trailing = text.slice(lastIndex);
+  if (trailing.trim()) {
+    segments.push({ kind: "markdown", content: trailing });
+  }
+  return segments;
+}
+function ActionMarkdownRenderer({
+  content,
+  registry,
+  renderMarkdown,
+  onAction,
+  isLatest
+}) {
+  const segments = React11.useMemo(() => parseResponseSegments(content), [content]);
+  if (segments.length === 1 && segments[0].kind === "markdown") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderMarkdown(segments[0].content) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: segments.map((segment, index) => {
+    if (segment.kind === "markdown") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderMarkdown(segment.content) }, `md-${index}`);
+    }
+    const Component = registry[segment.actionType];
+    if (!Component) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "pre",
+        {
+          className: "my-4 p-4 rounded-lg border border-border bg-muted text-sm font-mono overflow-x-auto",
+          children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: JSON.stringify(segment.payload, null, 2) })
+        },
+        `action-fallback-${index}`
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        payload: segment.payload,
+        onAction,
+        isLatest
+      },
+      `action-${segment.actionType}-${index}`
+    );
+  }) });
+}
+
+// src/components/inline-actions/prompts.ts
+var INLINE_ACTION_PROMPT = `
+<inline_actions>
+When your response should include interactive components (like query viewers,
+data tables, or executable actions), embed them as fenced code blocks using
+the \`json:action\` language tag:
+
+\`\`\`json:action
+{
+  "type": "action-type-here",
+  ...action-specific fields
+}
+\`\`\`
+
+Rules:
+- Each block must contain valid JSON with a "type" field.
+- The "type" must match a registered action component on the frontend.
+- Multiple action blocks per response are allowed.
+- Surround action blocks with normal markdown text for user context.
+- The action block is rendered as an interactive component in the chat UI.
+- SQL strings inside JSON must be properly escaped (newlines as \\n, quotes as \\").
+
+Available action types:
+
+- "optimap-query": Displays SQL queries with a button to execute them and
+  update the 3D globe map.
+  Required fields:
+    - type: "optimap-query"
+    - locations_sql: string (the validated locations SQL query)
+    - routes_sql: string (the validated routes SQL query)
+    - database_name: string (the target database name)
+</inline_actions>
+`;
 
 exports.ActionBar = ActionBar;
+exports.ActionMarkdownRenderer = ActionMarkdownRenderer;
 exports.ActivityIndicators = ActivityIndicators;
 exports.AgentResponse = AgentResponse;
+exports.AgentTimeline = AgentTimeline;
+exports.HITLInteractionRecord = HITLInteractionRecord;
+exports.HITLQuestionPanel = HITLQuestionPanel;
+exports.HITLSection = HITLSection;
+exports.INLINE_ACTION_PROMPT = INLINE_ACTION_PROMPT;
 exports.MetadataRow = MetadataRow;
 exports.ThinkingSection = ThinkingSection;
+exports.TruncatedMessage = TruncatedMessage;
+exports.UserPrompt = UserPrompt;
+exports.UserPromptInput = UserPromptInput;
+exports.buildResponseString = buildResponseString;
+exports.buildTimelineEntries = buildTimelineEntries;
+exports.createTimelineUIState = createTimelineUIState;
+exports.deduplicateEntries = deduplicateEntries;
 exports.formatTime = formatTime;
 exports.formatTotalTime = formatTotalTime;
+exports.groupIntoAgentRuns = groupIntoAgentRuns;
 exports.initialAgentResponseState = initialAgentResponseState;
+exports.parseResponseSegments = parseResponseSegments;
 exports.useAgentResponseAccumulator = useAgentResponseAccumulator;
 exports.useThinkingTimer = useThinkingTimer;
 //# sourceMappingURL=index.cjs.map