@within-7/minto 0.1.7 → 0.2.0

package/dist/screens/REPL.js

@@ -8,25 +8,27 @@ import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 import { Logo } from "../components/Logo.js";
 import { Message } from "../components/Message.js";
 import { MessageResponse } from "../components/MessageResponse.js";
+import { BashStreamingProgress } from "../components/BashStreamingProgress.js";
 import { MessageSelector } from "../components/MessageSelector.js";
+import { MessageBatchBuffer } from "../utils/MessageBatchBuffer.js";
 import {
   PermissionRequest
 } from "../components/permissions/PermissionRequest.js";
 import PromptInput from "../components/PromptInput.js";
-import { Spinner } from "../components/Spinner.js";
 import { getSystemPrompt } from "../constants/prompts.js";
 import { getContext } from "../context.js";
 import { getTotalCost, useCostSummary } from "../cost-tracker.js";
 import { useLogStartupTime } from "../hooks/useLogStartupTime.js";
 import { addToHistory } from "../history.js";
 import { useApiKeyVerification } from "../hooks/useApiKeyVerification.js";
-import { useCancelRequest } from "../hooks/useCancelRequest.js";
 import useCanUseTool from "../hooks/useCanUseTool.js";
 import { useLogMessages } from "../hooks/useLogMessages.js";
 import { PermissionProvider } from "../context/PermissionContext.js";
+import { useFullscreenExitCallback } from "../hooks/useTerminalSize.js";
 import { ModeIndicator } from "../components/ModeIndicator.js";
 import { TodoPanel } from "../components/TodoPanel.js";
-import { getTodos } from "../utils/todoStorage.js";
+import { TurnCompletionIndicator } from "../components/TurnCompletionIndicator.js";
+import { getTodos, initTodoSession } from "../utils/todoStorage.js";
 import {
   setMessagesGetter,
   setMessagesSetter,
@@ -35,7 +37,11 @@ import {
 import {
   query
 } from "../query.js";
-import { getGlobalConfig, saveGlobalConfig } from "../utils/config.js";
+import {
+  getGlobalConfig,
+  saveGlobalConfig,
+  getVerboseLabel
+} from "../utils/config.js";
 import { getNextAvailableLogForkNumber } from "../utils/log.js";
 import {
   getErroredToolUseMessages,
@@ -48,8 +54,10 @@ import {
   normalizeMessages,
   normalizeMessagesForAPI,
   processUserInput,
-  reorderMessages
+  reorderMessages,
+  createAssistantAPIErrorMessage
 } from "../utils/messages.js";
+import { logError } from "../utils/log.js";
 import { ModelManager } from "../utils/model.js";
 import { clearTerminal } from "../utils/terminal.js";
 import { BinaryFeedback } from "../components/binary-feedback/BinaryFeedback.js";
@@ -68,7 +76,14 @@ import {
 } from "../utils/BackgroundShellManager.js";
 import { BackgroundTasksPanel } from "../components/BackgroundTasksPanel.js";
 import { AskUserQuestionDialog } from "../components/AskUserQuestionDialog/AskUserQuestionDialog.js";
+import {
+  getToolUseIdByAgentId,
+  restoreToolUseAgentMappings
+} from "../utils/agentTranscripts.js";
 import useAskUser from "../hooks/useAskUser.js";
+import { useMessageGroups } from "../hooks/useMessageGroups.js";
+import { useAgentTranscripts } from "../hooks/useAgentTranscripts.js";
+import { GroupRenderer } from "../components/messages/GroupRenderer.js";
 const RESUME_VISIBLE_MESSAGE_COUNT = 10;
 function REPL({
   commands,
@@ -89,11 +104,19 @@ function REPL({
   isResumedConversation = false
 }) {
   const [verbose, setVerbose] = useState(
-    () => verboseFromCLI ?? getGlobalConfig().verbose
+    verboseFromCLI === true ? true : false
   );
   const [forkNumber, setForkNumber] = useState(
     getNextAvailableLogForkNumber(messageLogName, initialForkNumber, 0)
   );
+  const [isResizeClearing, setIsResizeClearing] = useState(false);
+  useFullscreenExitCallback(async () => {
+    setIsResizeClearing(true);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    await clearTerminal();
+    setForkNumber((prev) => prev + 1);
+    setIsResizeClearing(false);
+  });
   const [
     forkConvoWithMessagesOnTheNextRender,
     setForkConvoWithMessagesOnTheNextRender
@@ -121,11 +144,52 @@ function REPL({
   const updateAvailableVersion = initialUpdateVersion ?? null;
   const updateCommands = initialUpdateCommands ?? null;
   const [isTodoPanelVisible, setIsTodoPanelVisible] = useState(true);
-  const [startTime] = useState(Date.now());
+  const [verboseToggleMessage, setVerboseToggleMessage] = useState(null);
+  const turnStartTimeRef = useRef(null);
+  const [lastTurnDurationMs, setLastTurnDurationMs] = useState(
+    null
+  );
+  const [queuedPrompts, setQueuedPrompts] = useState([]);
+  const queuedPromptsRef = useRef([]);
+  useEffect(() => {
+    queuedPromptsRef.current = queuedPrompts;
+  }, [queuedPrompts]);
+  useEffect(() => {
+    if (isLoading) {
+      turnStartTimeRef.current = Date.now();
+      setLastTurnDurationMs(null);
+    } else if (turnStartTimeRef.current !== null) {
+      const duration = Date.now() - turnStartTimeRef.current;
+      setLastTurnDurationMs(duration);
+      turnStartTimeRef.current = null;
+    }
+  }, [isLoading]);
   const [backgroundShells, setBackgroundShells] = useState(
     []
   );
   const [showBackgroundPanel, setShowBackgroundPanel] = useState(false);
+  const prevUnresolvedRef = useRef(/* @__PURE__ */ new Set());
+  const messageBatchBufferRef = useRef(null);
+  if (messageBatchBufferRef.current === null) {
+    messageBatchBufferRef.current = new MessageBatchBuffer(
+      (batchedMessages) => {
+        setMessages((prev) => [...prev, ...batchedMessages]);
+      },
+      {
+        flushInterval: 100,
+        // Batch messages for 100ms
+        maxBatchSize: 50,
+        // Force flush if 50+ messages buffered
+        debug: false
+        // Set to true for debugging
+      }
+    );
+  }
+  useEffect(() => {
+    return () => {
+      messageBatchBufferRef.current?.dispose();
+    };
+  }, []);
   const getBinaryFeedbackResponse = useCallback(
     (m1, m2) => {
       return new Promise((resolvePromise) => {
@@ -141,10 +205,13 @@ function REPL({
   const readFileTimestamps = useRef({});
   const hookManagerRef = useRef(null);
   const { status: apiKeyStatus, reverify } = useApiKeyVerification();
-  function onCancel() {
+  function onInterrupt() {
     if (!isLoading) {
       return;
     }
+    setToolJSX(null);
+    setToolUseConfirm(null);
+    setBinaryFeedbackContext(null);
     setIsLoading(false);
     if (toolUseConfirm) {
       toolUseConfirm.onAbort();
@@ -152,15 +219,9 @@ function REPL({
       abortController.abort();
     }
   }
-  useCancelRequest(
-    setToolJSX,
-    setToolUseConfirm,
-    setBinaryFeedbackContext,
-    onCancel,
-    isLoading,
-    isMessageSelectorVisible,
-    abortController?.signal
-  );
+  function onCancel() {
+    onInterrupt();
+  }
   useEffect(() => {
     if (forkConvoWithMessagesOnTheNextRender) {
       setForkNumber((_) => _ + 1);
@@ -184,79 +245,89 @@ function REPL({
     setIsLoading(true);
     const newAbortController = new AbortController();
     setAbortController(newAbortController);
-    const model = new ModelManager(getGlobalConfig()).getModelName("main");
-    const newMessages = await processUserInput(
-      initialPrompt,
-      "prompt",
-      setToolJSX,
-      {
-        abortController: newAbortController,
-        options: {
-          commands,
-          forkNumber,
-          messageLogName,
-          tools,
-          verbose,
-          maxThinkingTokens: 0
-        },
-        messageId: getLastAssistantMessageId(messages),
-        setForkConvoWithMessagesOnTheNextRender,
-        readFileTimestamps: readFileTimestamps.current
-      },
-      null
-    );
-    if (newMessages.length) {
-      for (const message of newMessages) {
-        if (message.type === "user") {
-          addToHistory(initialPrompt);
-        }
-      }
-      setMessages((_) => [..._, ...newMessages]);
-      const lastMessage = newMessages[newMessages.length - 1];
-      if (lastMessage.type === "assistant") {
-        setAbortController(null);
-        setIsLoading(false);
-        return;
-      }
-      const [systemPrompt, context, model2, maxThinkingTokens] = await Promise.all([
-        getSystemPrompt(),
-        getContext(),
-        new ModelManager(getGlobalConfig()).getModelName("main"),
-        getMaxThinkingTokens([...messages, ...newMessages])
-      ]);
-      for await (const message of query(
-        [...messages, ...newMessages],
-        systemPrompt,
-        context,
-        canUseTool,
+    try {
+      const model = new ModelManager(getGlobalConfig()).getModelName("main");
+      const newMessages = await processUserInput(
+        initialPrompt,
+        "prompt",
+        setToolJSX,
         {
+          abortController: newAbortController,
           options: {
             commands,
             forkNumber,
             messageLogName,
             tools,
             verbose,
-            safeMode,
-            maxThinkingTokens
+            maxThinkingTokens: 0
           },
-          messageId: getLastAssistantMessageId([...messages, ...newMessages]),
-          readFileTimestamps: readFileTimestamps.current,
-          abortController: newAbortController,
-          setToolJSX,
-          askUser
+          messageId: getLastAssistantMessageId(messages),
+          setForkConvoWithMessagesOnTheNextRender,
+          readFileTimestamps: readFileTimestamps.current
         },
-        getBinaryFeedbackResponse
-      )) {
-        setMessages((oldMessages) => [...oldMessages, message]);
+        null
+      );
+      if (newMessages.length) {
+        for (const message of newMessages) {
+          if (message.type === "user") {
+            addToHistory(initialPrompt);
+          }
+        }
+        setMessages((_) => [..._, ...newMessages]);
+        const lastMessage = newMessages[newMessages.length - 1];
+        if (lastMessage.type === "assistant") {
+          return;
+        }
+        const [systemPrompt, context, model2, maxThinkingTokens] = await Promise.all([
+          getSystemPrompt(),
+          getContext(),
+          new ModelManager(getGlobalConfig()).getModelName("main"),
+          getMaxThinkingTokens([...messages, ...newMessages])
+        ]);
+        for await (const message of query(
+          [...messages, ...newMessages],
+          systemPrompt,
+          context,
+          canUseTool,
+          {
+            options: {
+              commands,
+              forkNumber,
+              messageLogName,
+              tools,
+              verbose,
+              safeMode,
+              maxThinkingTokens
+            },
+            messageId: getLastAssistantMessageId([...messages, ...newMessages]),
+            readFileTimestamps: readFileTimestamps.current,
+            abortController: newAbortController,
+            setToolJSX,
+            askUser
+          },
+          getBinaryFeedbackResponse
+        )) {
+          messageBatchBufferRef.current?.add(message);
+        }
+        messageBatchBufferRef.current?.flush();
+      } else {
+        addToHistory(initialPrompt);
       }
-    } else {
-      addToHistory(initialPrompt);
+      setHaveShownCostDialog(
+        getGlobalConfig().hasAcknowledgedCostThreshold || false
+      );
+    } catch (error) {
+      logError(error);
+      setMessages((oldMessages) => [
+        ...oldMessages,
+        createAssistantAPIErrorMessage(
+          `Request failed: ${error instanceof Error ? error.message : String(error)}`
+        )
+      ]);
+    } finally {
+      setIsLoading(false);
+      setAbortController(null);
     }
-    setHaveShownCostDialog(
-      getGlobalConfig().hasAcknowledgedCostThreshold || false
-    );
-    setIsLoading(false);
-    setAbortController(null);
   }
   function rollbackConversation() {
     if (messageHistory.length === 0) {
@@ -267,11 +338,14 @@ function REPL({
     setMessageHistory((history) => history.slice(0, -1));
     return true;
   }
+  const processNextQueuedPromptRef = useRef(null);
   async function onQuery(newMessages, passedAbortController) {
     const controllerToUse = passedAbortController || new AbortController();
     if (!passedAbortController) {
       setAbortController(controllerToUse);
     }
+    setIsLoading(true);
+    setVerbose(false);
     const isKodingRequest = newMessages.length > 0 && newMessages[0].type === "user" && "options" in newMessages[0] && newMessages[0].options?.isKodingRequest === true;
     setMessages((oldMessages) => {
       setMessageHistory((history) => [...history, oldMessages].slice(-10));
@@ -286,56 +360,75 @@ function REPL({
       setIsLoading(false);
       return;
     }
-    const [systemPrompt, context, model, maxThinkingTokens] = await Promise.all(
-      [
+    try {
+      const [systemPrompt, context, model, maxThinkingTokens] = await Promise.all([
         getSystemPrompt(),
         getContext(),
         new ModelManager(getGlobalConfig()).getModelName("main"),
         getMaxThinkingTokens([...messages, lastMessage])
-      ]
-    );
-    let lastAssistantMessage = null;
-    for await (const message of query(
-      [...messages, lastMessage],
-      systemPrompt,
-      context,
-      canUseTool,
-      {
-        options: {
-          commands,
-          forkNumber,
-          messageLogName,
-          tools,
-          verbose,
-          safeMode,
-          maxThinkingTokens,
-          // If this came from Koding mode, pass that along
-          isKodingRequest: isKodingRequest || void 0
+      ]);
+      let lastAssistantMessage = null;
+      for await (const message of query(
+        [...messages, lastMessage],
+        systemPrompt,
+        context,
+        canUseTool,
+        {
+          options: {
+            commands,
+            forkNumber,
+            messageLogName,
+            tools,
+            verbose,
+            safeMode,
+            maxThinkingTokens,
+            // If this came from Koding mode, pass that along
+            isKodingRequest: isKodingRequest || void 0
+          },
+          messageId: getLastAssistantMessageId([...messages, lastMessage]),
+          readFileTimestamps: readFileTimestamps.current,
+          abortController: controllerToUse,
+          setToolJSX,
+          askUser
         },
-        messageId: getLastAssistantMessageId([...messages, lastMessage]),
-        readFileTimestamps: readFileTimestamps.current,
-        abortController: controllerToUse,
-        setToolJSX,
-        askUser
-      },
-      getBinaryFeedbackResponse
-    )) {
-      setMessages((oldMessages) => [...oldMessages, message]);
-      if (message.type === "assistant") {
-        lastAssistantMessage = message;
+        getBinaryFeedbackResponse
+      )) {
+        messageBatchBufferRef.current?.add(message);
+        if (message.type === "assistant") {
+          lastAssistantMessage = message;
+        }
       }
-    }
-    if (isKodingRequest && lastAssistantMessage && lastAssistantMessage.type === "assistant") {
-      try {
-        const content = typeof lastAssistantMessage.message.content === "string" ? lastAssistantMessage.message.content : lastAssistantMessage.message.content.filter((block) => block.type === "text").map((block) => block.type === "text" ? block.text : "").join("\n");
-        if (content && content.trim().length > 0) {
-          handleHashCommand(content);
+      if (isKodingRequest && lastAssistantMessage && lastAssistantMessage.type === "assistant") {
+        try {
+          const content = typeof lastAssistantMessage.message.content === "string" ? lastAssistantMessage.message.content : lastAssistantMessage.message.content.filter((block) => block.type === "text").map((block) => block.type === "text" ? block.text : "").join("\n");
+          if (content && content.trim().length > 0) {
+            handleHashCommand(content);
+          }
+        } catch (error) {
+          console.error("Error saving response to project docs:", error);
         }
-      } catch (error) {
-        console.error("Error saving response to project docs:", error);
+      }
+      messageBatchBufferRef.current?.flush();
+    } catch (error) {
+      logError(error);
+      messageBatchBufferRef.current?.flush();
+      setMessages((oldMessages) => [
+        ...oldMessages,
+        createAssistantAPIErrorMessage(
+          `Request failed: ${error instanceof Error ? error.message : String(error)}`
+        )
+      ]);
+    } finally {
+      setIsLoading(false);
+      setAbortController(null);
+      if (queuedPromptsRef.current.length > 0) {
+        setTimeout(() => {
+          if (processNextQueuedPromptRef.current) {
+            processNextQueuedPromptRef.current();
+          }
+        }, 100);
       }
     }
-    setIsLoading(false);
   }
   useCostSummary();
   useEffect(() => {
@@ -343,6 +436,13 @@ function REPL({
     setMessagesGetter(getMessages);
     setMessagesSetter(setMessages);
   }, [messages]);
+  useEffect(() => {
+    const todoSessionId = `${messageLogName}-${forkNumber}`;
+    initTodoSession(todoSessionId);
+    if (initialMessages && initialMessages.length > 0) {
+      restoreToolUseAgentMappings();
+    }
+  }, [messageLogName, forkNumber, initialMessages]);
   useEffect(() => {
     setModelConfigChangeHandler(() => {
       setForkNumber((prev) => prev + 1);
@@ -395,6 +495,9 @@ function REPL({
     () => getUnresolvedToolUseIDs(normalizedMessages),
     [normalizedMessages]
   );
+  useEffect(() => {
+    prevUnresolvedRef.current = new Set(unresolvedToolUseIDs);
+  }, [unresolvedToolUseIDs]);
   const inProgressToolUseIDs = useMemo(
     () => getInProgressToolUseIDs(normalizedMessages),
     [normalizedMessages]
@@ -407,11 +510,37 @@ function REPL({
     ),
     [normalizedMessages]
   );
+  const {
+    groups: messageGroups,
+    getGroupForMessage,
+    getGroupForToolUse,
+    shouldGroupBeStatic,
+    displayConfig
+  } = useMessageGroups(
+    normalizedMessages,
+    unresolvedToolUseIDs,
+    inProgressToolUseIDs,
+    verbose
+  );
+  const { transcripts: agentTranscripts, getTranscript } = useAgentTranscripts();
+  const toolOutputs = useMemo(() => {
+    const outputs = /* @__PURE__ */ new Map();
+    for (const msg of normalizedMessages) {
+      if (msg.type === "user" && msg.message.role === "user") {
+        for (const block of msg.message.content) {
+          if (typeof block === "object" && block.type === "tool_result") {
+            outputs.set(block.tool_use_id, block);
+          }
+        }
+      }
+    }
+    return outputs;
+  }, [normalizedMessages]);
   const messagesJSX = useMemo(() => {
     const reorderedMessages = reorderMessages(normalizedMessages);
     const hiddenMessageCount = isResumedConversation && reorderedMessages.length > RESUME_VISIBLE_MESSAGE_COUNT ? reorderedMessages.length - RESUME_VISIBLE_MESSAGE_COUNT : 0;
     const visibleMessages = hiddenMessageCount > 0 ? reorderedMessages.slice(-RESUME_VISIBLE_MESSAGE_COUNT) : reorderedMessages;
-    return [
+    const result = [
       {
         type: "static",
         jsx: /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", key: `logo${forkNumber}` }, /* @__PURE__ */ React.createElement(
@@ -423,17 +552,102 @@ function REPL({
             updateBannerCommands: updateCommands
           }
         ), /* @__PURE__ */ React.createElement(ProjectOnboarding, { workspaceDir: getOriginalCwd() }))
-      },
-      // Show collapsed history indicator when resuming with hidden messages
-      ...hiddenMessageCount > 0 ? [
-        {
-          type: "static",
-          jsx: /* @__PURE__ */ React.createElement(Box, { key: "collapsed-history", paddingLeft: 2, marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "\xB7\xB7\xB7 ", hiddenMessageCount, " earlier messages hidden \xB7\xB7\xB7"))
+      }
+    ];
+    if (hiddenMessageCount > 0) {
+      result.push({
+        type: "static",
+        jsx: /* @__PURE__ */ React.createElement(Box, { key: "collapsed-history", paddingLeft: 2, marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "\xB7\xB7\xB7 ", hiddenMessageCount, " earlier messages hidden \xB7\xB7\xB7"))
+      });
+    }
+    const renderedGroupIds = /* @__PURE__ */ new Set();
+    const groupToolUseIds = /* @__PURE__ */ new Set();
+    const taskOutputToolUseIdsToSkip = /* @__PURE__ */ new Set();
+    for (const _ of visibleMessages) {
+      const toolUseID = getToolUseID(_);
+      let group = getGroupForMessage(_.uuid);
+      if (!group && _.type === "progress") {
+        group = getGroupForToolUse(_.toolUseID);
+      }
+      if (group && (group.type === "parallel-tasks" || group.type === "task")) {
+        if (renderedGroupIds.has(group.id)) {
+          continue;
+        }
+        renderedGroupIds.add(group.id);
+        if (group.metadata.siblingToolUseIds) {
+          for (const id of group.metadata.siblingToolUseIds) {
+            groupToolUseIds.add(id);
+          }
+        }
+        if (group.metadata.toolUseId) {
+          groupToolUseIds.add(group.metadata.toolUseId);
         }
-      ] : [],
-      ...visibleMessages.map((_) => {
-        const toolUseID = getToolUseID(_);
-        const message = _.type === "progress" ? _.content.message.content[0]?.type === "text" && // TaskTool interrupts use Progress messages without extra ⎿
+        const isGroupStatic = shouldGroupBeStatic(group);
+        const groupType = isGroupStatic ? "static" : "transient";
+        const shouldAnimate = !toolJSX && !toolUseConfirm && !isMessageSelectorVisible && !isGroupStatic;
+        result.push({
+          type: groupType,
+          jsx: /* @__PURE__ */ React.createElement(Box, { key: `group-${group.id}`, width: "100%" }, /* @__PURE__ */ React.createElement(
+            GroupRenderer,
+            {
+              group,
+              context: {
+                depth: 0,
+                isLastChild: true,
+                displayConfig,
+                shouldAnimate,
+                getTranscript
+              },
+              messages: normalizedMessages,
+              transcripts: agentTranscripts,
+              outputs: toolOutputs
+            }
+          ))
+        });
+        continue;
+      }
+      if (_.type === "user" && _.message.role === "user") {
+        const content = _.message.content;
+        if (Array.isArray(content)) {
+          const toolResult = content.find(
+            (block) => typeof block === "object" && block.type === "tool_result"
+          );
+          if (toolResult && (groupToolUseIds.has(toolResult.tool_use_id) || taskOutputToolUseIdsToSkip.has(toolResult.tool_use_id))) {
+            continue;
+          }
+        }
+      }
+      if (_.type === "assistant") {
+        const content = _.message.content;
+        if (Array.isArray(content)) {
+          const taskOutputCall = content.find(
+            (block) => typeof block === "object" && block.type === "tool_use" && block.name === "TaskOutput"
+          );
+          if (taskOutputCall) {
+            const taskId = taskOutputCall.input?.task_id;
+            if (taskId) {
+              const correspondingToolUseId = getToolUseIdByAgentId(taskId);
+              if (correspondingToolUseId && groupToolUseIds.has(correspondingToolUseId)) {
+                taskOutputToolUseIdsToSkip.add(taskOutputCall.id);
+                continue;
+              }
+            }
+          }
+        }
+      }
+      if (_.type === "progress" && "type" in _.content && _.content.type === "streaming" && !unresolvedToolUseIDs.has(_.toolUseID)) {
+        continue;
+      }
+      const message = _.type === "progress" ? (
+        // Check if this is a streaming progress content (e.g., from BashTool)
+        "type" in _.content && _.content.type === "streaming" ? /* @__PURE__ */ React.createElement(
+          BashStreamingProgress,
+          {
+            stdout: _.content.stdout,
+            stderr: _.content.stderr,
+            isStreaming: _.content.isStreaming
+          }
+        ) : _.content.message.content[0]?.type === "text" && // TaskTool interrupts use Progress messages without extra ⎿
         // since <Message /> component already adds the margin
         _.content.message.content[0].text === INTERRUPT_MESSAGE ? /* @__PURE__ */ React.createElement(
           Message,
@@ -472,48 +686,50 @@ function REPL({
               }
             )
           }
-        ) : /* @__PURE__ */ React.createElement(
-          Message,
-          {
-            message: _,
-            messages: normalizedMessages,
-            addMargin: true,
-            tools,
-            verbose,
-            debug,
-            erroredToolUseIDs,
-            inProgressToolUseIDs,
-            shouldAnimate: !toolJSX && !toolUseConfirm && !isMessageSelectorVisible && (!toolUseID || inProgressToolUseIDs.has(toolUseID)),
-            shouldShowDot: true,
-            unresolvedToolUseIDs
-          }
-        );
-        const type = shouldRenderStatically(
-          _,
-          normalizedMessages,
+        )
+      ) : /* @__PURE__ */ React.createElement(
+        Message,
+        {
+          message: _,
+          messages: normalizedMessages,
+          addMargin: true,
+          tools,
+          verbose,
+          debug,
+          erroredToolUseIDs,
+          inProgressToolUseIDs,
+          shouldAnimate: !toolJSX && !toolUseConfirm && !isMessageSelectorVisible && (!toolUseID || inProgressToolUseIDs.has(toolUseID)),
+          shouldShowDot: true,
           unresolvedToolUseIDs
-        ) ? "static" : "transient";
-        if (debug) {
-          return {
-            type,
-            jsx: /* @__PURE__ */ React.createElement(
-              Box,
-              {
-                borderStyle: "single",
-                borderColor: type === "static" ? "green" : "red",
-                key: _.uuid,
-                width: "100%"
-              },
-              message
-            )
-          };
         }
-        return {
+      );
+      const type = shouldRenderStatically(
+        _,
+        normalizedMessages,
+        unresolvedToolUseIDs
+      ) ? "static" : "transient";
+      if (debug) {
+        result.push({
+          type,
+          jsx: /* @__PURE__ */ React.createElement(
+            Box,
+            {
+              borderStyle: "single",
+              borderColor: type === "static" ? "green" : "red",
+              key: _.uuid,
+              width: "100%"
+            },
+            message
+          )
+        });
+      } else {
+        result.push({
           type,
           jsx: /* @__PURE__ */ React.createElement(Box, { key: _.uuid, width: "100%" }, message)
-        };
-      })
-    ];
+        });
+      }
+    }
+    return result;
   }, [
     forkNumber,
     normalizedMessages,
@@ -528,28 +744,120 @@ function REPL({
     unresolvedToolUseIDs,
     mcpClients,
     isDefaultModel,
-    isResumedConversation
+    isResumedConversation,
+    // V1+ dependencies
+    messageGroups,
+    getGroupForMessage,
+    getGroupForToolUse,
+    shouldGroupBeStatic,
+    displayConfig,
+    agentTranscripts,
+    toolOutputs
   ]);
   const showingCostDialog = !isLoading && showCostDialog;
+  const { staticItems, dynamicItems } = useMemo(() => {
+    const staticItems2 = [];
+    const dynamicItems2 = [];
+    for (const item of messagesJSX) {
+      if (item.type === "static") {
+        const key = item.jsx.key?.toString() || `static-${staticItems2.length}`;
+        staticItems2.push({ id: key, jsx: item.jsx });
+      } else if (item.type === "transient") {
+        dynamicItems2.push(item);
+      }
+    }
+    return { staticItems: staticItems2, dynamicItems: dynamicItems2 };
+  }, [messagesJSX]);
+  const handleShowMessageSelector = useCallback(() => {
+    setIsMessageSelectorVisible((prev) => !prev);
+  }, []);
+  const handleToggleTodoPanel = useCallback(() => {
+    setIsTodoPanelVisible((prev) => !prev);
+  }, []);
+  const handleToggleBackgroundPanel = useCallback(() => {
+    setShowBackgroundPanel((prev) => !prev);
+  }, []);
+  const handleModelChange = useCallback(() => {
+    setForkNumber((prev) => prev + 1);
+  }, []);
+  const handleToggleVerbose = useCallback(async (newVerbose) => {
+    const message = `${getVerboseLabel(newVerbose)} (Ctrl+O)`;
+    setVerboseToggleMessage(message);
+    setTimeout(() => setVerboseToggleMessage(null), 2e3);
+    await clearTerminal();
+    setVerbose(newVerbose);
+    setForkNumber((prev) => prev + 1);
+  }, []);
+  const handleQueueAwareQuery = useCallback(
+    async (newMessages, abortController2) => {
+      if (!isLoading) {
+        return onQuery(newMessages, abortController2);
+      }
+      const userMessage = newMessages.find((m) => m.type === "user");
+      if (userMessage && userMessage.type === "user") {
+        const promptText = typeof userMessage.message.content === "string" ? userMessage.message.content : "";
+        if (promptText) {
+          setQueuedPrompts((prev) => [...prev, promptText]);
+        }
+      }
+    },
+    [isLoading]
+  );
+  useEffect(() => {
+    processNextQueuedPromptRef.current = async () => {
+      if (queuedPrompts.length === 0) return;
+      const nextPrompt = queuedPrompts[0];
+      setQueuedPrompts((prev) => prev.slice(1));
+      if (!nextPrompt) return;
+      const userMessage = {
+        type: "user",
+        uuid: randomUUID(),
+        message: {
+          role: "user",
+          content: nextPrompt
+        }
+      };
+      setIsLoading(true);
+      const newAbortController = new AbortController();
+      setAbortController(newAbortController);
+      await onQuery([userMessage], newAbortController);
+    };
+  }, [queuedPrompts]);
   return /* @__PURE__ */ React.createElement(
     PermissionProvider,
     {
       isBypassPermissionsModeAvailable: !safeMode,
-      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ModeIndicator, null), /* @__PURE__ */ React.createElement(React.Fragment, { key: `static-messages-${forkNumber}` }, /* @__PURE__ */ React.createElement(
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(React.Fragment, { key: `mode-indicator-${forkNumber}` }, /* @__PURE__ */ React.createElement(ModeIndicator, null)), /* @__PURE__ */ React.createElement(React.Fragment, { key: `static-wrapper-${forkNumber}` }, /* @__PURE__ */ React.createElement(
         Static,
         {
-          items: messagesJSX.filter((_) => _.type === "static"),
-          children: (item) => item.jsx
+          items: staticItems,
+          children: (item) => /* @__PURE__ */ React.createElement(React.Fragment, { key: item.id }, item.jsx)
         }
-      )), messagesJSX.filter((_) => _.type === "transient").map((_) => _.jsx), /* @__PURE__ */ React.createElement(
+      )), /* @__PURE__ */ React.createElement(React.Fragment, { key: `dynamic-messages-${forkNumber}` }, dynamicItems.map((item) => item.jsx)), /* @__PURE__ */ React.createElement(
         Box,
         {
+          key: `transient-ui-${forkNumber}`,
           borderColor: "red",
           borderStyle: debug ? "single" : void 0,
           flexDirection: "column",
           width: "100%"
         },
-        !toolJSX && !toolUseConfirm && !binaryFeedbackContext && isLoading && /* @__PURE__ */ React.createElement(Spinner, null),
+        !isResizeClearing && !toolJSX && !toolUseConfirm && !binaryFeedbackContext && /* @__PURE__ */ React.createElement(
+          TodoPanel,
+          {
+            todos: getTodos(),
+            isVisible: isTodoPanelVisible,
+            isLoading,
+            showTodoList: isTodoPanelVisible
+          }
+        ),
+        !isResizeClearing && !isLoading && !toolJSX && !toolUseConfirm && !binaryFeedbackContext && /* @__PURE__ */ React.createElement(
+          TurnCompletionIndicator,
+          {
+            durationMs: lastTurnDurationMs,
+            isVisible: lastTurnDurationMs !== null
+          }
+        ),
         toolJSX ? toolJSX.jsx : null,
         !toolJSX && binaryFeedbackContext && !isMessageSelectorVisible && /* @__PURE__ */ React.createElement(
           BinaryFeedback,
@@ -599,15 +907,6 @@ function REPL({
           }
         ),
         !toolUseConfirm && !toolJSX?.shouldHidePromptInput && shouldShowPromptInput && !isMessageSelectorVisible && !binaryFeedbackContext && !askUserQuestionContext && !showingCostDialog && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-          TodoPanel,
-          {
-            todos: getTodos(),
-            isVisible: isTodoPanelVisible,
-            elapsedTime: Math.floor((Date.now() - startTime) / 1e3),
-            tokenCount: 0,
-            isLoading
-          }
-        ), /* @__PURE__ */ React.createElement(
           BackgroundTasksPanel,
           {
             shells: backgroundShells,
@@ -632,6 +931,7 @@ function REPL({
             onQuery,
             debug,
             verbose,
+            verboseToggleMessage,
             messages,
             setToolJSX,
             input: inputValue,
@@ -642,21 +942,30 @@ function REPL({
             onSubmitCountChange: setSubmitCount,
             setIsLoading,
             setAbortController,
-            onShowMessageSelector: () => setIsMessageSelectorVisible((prev) => !prev),
+            onShowMessageSelector: handleShowMessageSelector,
             setForkConvoWithMessagesOnTheNextRender,
             readFileTimestamps: readFileTimestamps.current,
             abortController,
-            onModelChange: () => setForkNumber((prev) => prev + 1),
+            onModelChange: handleModelChange,
             onRollbackConversation: rollbackConversation,
-            onToggleTodoPanel: () => setIsTodoPanelVisible((prev) => !prev),
-            onToggleVerbose: () => setVerbose((prev) => !prev),
-            onToggleBackgroundPanel: () => setShowBackgroundPanel((prev) => !prev),
+            onToggleTodoPanel: handleToggleTodoPanel,
+            onToggleVerbose: handleToggleVerbose,
+            onToggleBackgroundPanel: handleToggleBackgroundPanel,
             backgroundShellCount: backgroundShells.filter((s) => s.status === "running").length,
             isBackgroundPanelOpen: showBackgroundPanel,
-            fallbackMode
+            fallbackMode,
+            queuedPrompts,
+            onQueuePrompt: (prompt) => setQueuedPrompts((prev) => [...prev, prompt]),
+            onPopQueuedPrompt: () => {
+              if (queuedPrompts.length === 0) return void 0;
+              const lastPrompt = queuedPrompts[queuedPrompts.length - 1];
+              setQueuedPrompts((prev) => prev.slice(0, -1));
+              return lastPrompt;
+            },
+            onInterrupt
           }
         ))
-      ), isMessageSelectorVisible && /* @__PURE__ */ React.createElement(
+      ), isMessageSelectorVisible && /* @__PURE__ */ React.createElement(React.Fragment, { key: `message-selector-wrapper-${forkNumber}` }, /* @__PURE__ */ React.createElement(
         MessageSelector,
         {
           erroredToolUseIDs,
@@ -682,7 +991,7 @@ function REPL({
           onEscape: () => setIsMessageSelectorVisible(false),
           tools
         }
-      ), /* @__PURE__ */ React.createElement(Newline, null))
+      )), /* @__PURE__ */ React.createElement(Newline, null))
     }
   );
 }