wave-code 0.12.0 → 0.12.2

package/src/components/ChatInterface.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useCallback, useLayoutEffect } from "react";
-import { Box, useStdout } from "ink";
+import React, { useState, useCallback, useLayoutEffect, useRef } from "react";
+import { Box, useStdout, measureElement } from "ink";
 import { MessageList } from "./MessageList.js";
 import { BtwDisplay } from "./BtwDisplay.js";
 import { InputBox } from "./InputBox.js";
@@ -14,9 +14,6 @@ import type { PermissionDecision } from "wave-agent-sdk";
 
 export const ChatInterface: React.FC = () => {
   const { stdout } = useStdout();
-  const [detailsHeight, setDetailsHeight] = useState(0);
-  const [selectorHeight, setSelectorHeight] = useState(0);
-  const [dynamicBlocksHeight, setDynamicBlocksHeight] = useState(0);
   const [isConfirmationTooTall, setIsConfirmationTooTall] = useState(false);
 
   const {
@@ -44,26 +41,11 @@ export const ChatInterface: React.FC = () => {
     btwState,
   } = useChat();
 
-  const displayMessages = messages;
-
-  const handleDetailsHeightMeasured = useCallback((height: number) => {
-    setDetailsHeight(height);
-  }, []);
-
-  const handleSelectorHeightMeasured = useCallback((height: number) => {
-    setSelectorHeight(height);
-  }, []);
-
-  const handleDynamicBlocksHeightMeasured = useCallback((height: number) => {
-    setDynamicBlocksHeight(height);
-  }, []);
+  const interfaceRef = useRef(null);
 
   useLayoutEffect(() => {
     if (!isConfirmationVisible) {
       setIsConfirmationTooTall(false);
-      setDetailsHeight(0);
-      setSelectorHeight(0);
-      setDynamicBlocksHeight(0);
       return;
     }
 
@@ -71,20 +53,26 @@ export const ChatInterface: React.FC = () => {
       return;
     }
 
-    const terminalHeight = stdout?.rows || 24;
-    const totalHeight = detailsHeight + selectorHeight + dynamicBlocksHeight;
-    if (totalHeight > terminalHeight - 3) {
-      setIsConfirmationTooTall(true);
+    if (interfaceRef.current) {
+      const { height } = measureElement(interfaceRef.current);
+      const terminalHeight = stdout?.rows || 24;
+      if (height > terminalHeight - 3) {
+        setIsConfirmationTooTall(true);
+      }
     }
   }, [
-    detailsHeight,
-    selectorHeight,
-    dynamicBlocksHeight,
-    stdout?.rows,
+    messages,
+    isLoading,
+    isCommandRunning,
+    isCompressing,
+    isExpanded,
     isConfirmationVisible,
     isConfirmationTooTall,
+    stdout?.rows,
   ]);
 
+  const displayMessages = messages;
+
   const handleConfirmationCancel = useCallback(() => {
     if (isConfirmationTooTall) {
       setWasLastDetailsTooTall((prev) => prev + 1);
@@ -115,14 +103,13 @@ export const ChatInterface: React.FC = () => {
   if (!sessionId) return null;
 
   return (
-    <Box flexDirection="column">
+    <Box ref={interfaceRef} flexDirection="column">
       <MessageList
         messages={displayMessages}
         isExpanded={isExpanded}
         forceStatic={isConfirmationVisible && isConfirmationTooTall}
         version={version}
         workdir={workdir}
-        onDynamicBlocksHeightMeasured={handleDynamicBlocksHeightMeasured}
       />
 
       {!isConfirmationVisible && !isExpanded && (
@@ -159,7 +146,6 @@ export const ChatInterface: React.FC = () => {
             toolInput={confirmingTool!.input}
             planContent={confirmingTool!.planContent}
             isExpanded={isExpanded}
-            onHeightMeasured={handleDetailsHeightMeasured}
             isStatic={isConfirmationTooTall}
           />
           <ConfirmationSelector
@@ -171,7 +157,6 @@ export const ChatInterface: React.FC = () => {
             onDecision={wrappedHandleConfirmationDecision}
             onCancel={handleConfirmationCancel}
             onAbort={abortMessage}
-            onHeightMeasured={handleSelectorHeightMeasured}
           />
         </>
       )}

package/src/components/ConfirmationDetails.tsx

@@ -1,5 +1,5 @@
-import React, { useLayoutEffect, useRef } from "react";
-import { Box, Text, useStdout, measureElement, Static } from "ink";
+import React from "react";
+import { Box, Text, Static } from "ink";
 import {
   BASH_TOOL_NAME,
   EDIT_TOOL_NAME,
@@ -41,7 +41,6 @@ export interface ConfirmationDetailsProps {
   toolInput?: Record<string, unknown>;
   planContent?: string;
   isExpanded?: boolean;
-  onHeightMeasured?: (height: number) => void;
   isStatic?: boolean;
 }
 
@@ -50,26 +49,14 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
   toolInput,
   planContent,
   isExpanded = false,
-  onHeightMeasured,
   isStatic = false,
 }) => {
-  const { stdout } = useStdout();
-  const boxRef = useRef(null);
-
   const startLineNumber =
     (toolInput?.startLineNumber as number | undefined) ??
     (toolName === WRITE_TOOL_NAME ? 1 : undefined);
 
-  useLayoutEffect(() => {
-    if (boxRef.current) {
-      const { height } = measureElement(boxRef.current);
-      onHeightMeasured?.(height);
-    }
-  }, [stdout?.rows, onHeightMeasured, toolInput, isExpanded]);
-
   const content = (
     <Box
-      ref={boxRef}
       flexDirection="column"
       borderStyle="single"
       borderColor="yellow"

package/src/components/ConfirmationSelector.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Box, Text, useInput, useStdout, measureElement } from "ink";
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Text, useInput } from "ink";
 import type { PermissionDecision, AskUserQuestionInput } from "wave-agent-sdk";
 import {
   BASH_TOOL_NAME,
@@ -25,7 +25,6 @@ export interface ConfirmationSelectorProps {
   onDecision: (decision: PermissionDecision) => void;
   onCancel: () => void;
   onAbort: () => void;
-  onHeightMeasured?: (height: number) => void;
 }
 
 interface ConfirmationState {
@@ -44,18 +43,7 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
   onDecision,
   onCancel,
   onAbort,
-  onHeightMeasured,
 }) => {
-  const { stdout } = useStdout();
-  const boxRef = useRef(null);
-
-  useLayoutEffect(() => {
-    if (boxRef.current) {
-      const { height } = measureElement(boxRef.current);
-      onHeightMeasured?.(height);
-    }
-  }, [stdout?.rows, onHeightMeasured, toolName, toolInput, isExpanded]);
-
   const [state, setState] = useState<ConfirmationState>({
     selectedOption: toolName === EXIT_PLAN_MODE_TOOL_NAME ? "clear" : "allow",
     alternativeText: "",
@@ -497,7 +485,7 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
     state.selectedOption === "alternative" && !state.hasUserInput;
 
   return (
-    <Box ref={boxRef} flexDirection="column">
+    <Box flexDirection="column">
       {toolName === ASK_USER_QUESTION_TOOL_NAME &&
         currentQuestion &&
         !isExpanded && (

package/src/components/DiffDisplay.tsx

@@ -1,14 +1,8 @@
 import React, { useMemo } from "react";
 import { Box, Text } from "ink";
-import {
-  WRITE_TOOL_NAME,
-  EDIT_TOOL_NAME,
-  type WriteToolParameters,
-} from "wave-agent-sdk";
+import { WRITE_TOOL_NAME, EDIT_TOOL_NAME } from "wave-agent-sdk";
 import { transformToolBlockToChanges } from "../utils/toolParameterTransforms.js";
 import { diffLines, diffWords } from "diff";
-import path from "path";
-import { Markdown } from "./Markdown.js";
 
 interface DiffDisplayProps {
   toolName?: string;
@@ -103,23 +97,6 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
     }
   };
 
-  // Render highlighted code for Write tool
-  const renderWriteContent = () => {
-    if (!parameters) return null;
-    try {
-      const parsed = JSON.parse(parameters) as WriteToolParameters;
-      const content = parsed.content || "";
-      const filePath = parsed.file_path || "";
-      const ext = path.extname(filePath).slice(1);
-
-      const markdown = `\`\`\`${ext}\n${content}\n\`\`\``;
-      return <Markdown>{markdown}</Markdown>;
-    } catch (error) {
-      console.warn("Error rendering write content:", error);
-      return null;
-    }
-  };
-
   // Render expanded diff display
   const renderExpandedDiff = () => {
     try {
@@ -375,9 +352,7 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
   return (
     <Box flexDirection="column">
       <Box paddingLeft={2} borderLeft borderColor="cyan" flexDirection="column">
-        {toolName === WRITE_TOOL_NAME
-          ? renderWriteContent()
-          : renderExpandedDiff()}
+        {renderExpandedDiff()}
       </Box>
     </Box>
   );

package/src/components/MessageList.tsx

@@ -1,7 +1,7 @@
-import React, { useLayoutEffect, useRef } from "react";
+import React from "react";
 import os from "os";
-import { Box, Text, Static, measureElement } from "ink";
-import type { Message } from "wave-agent-sdk";
+import { Box, Text, Static } from "ink";
+import type { Message, MessageBlock } from "wave-agent-sdk";
 import { MessageBlockItem } from "./MessageBlockItem.js";
 
 export interface MessageListProps {
@@ -10,7 +10,6 @@ export interface MessageListProps {
   forceStatic?: boolean;
   version?: string;
   workdir?: string;
-  onDynamicBlocksHeightMeasured?: (height: number) => void;
 }
 
 export const MessageList = React.memo(
@@ -20,7 +19,6 @@ export const MessageList = React.memo(
     forceStatic = false,
     version,
     workdir,
-    onDynamicBlocksHeightMeasured,
   }: MessageListProps) => {
     const welcomeMessage = (
       <Box flexDirection="column" paddingTop={1}>
@@ -39,6 +37,18 @@ export const MessageList = React.memo(
     // Filter out meta messages
     const visibleMessages = messages.filter((m) => !m.isMeta);
 
+    const isRunning = (b: MessageBlock) =>
+      (b.type === "tool" && b.stage === "running") ||
+      (b.type === "bang" && b.isRunning) ||
+      (b.type === "slash" && b.stage === "running");
+
+    const messagesWithRunningBlocks = new Set(
+      visibleMessages
+        .map((m, i) => ({ m, i }))
+        .filter(({ m }) => m.blocks.some(isRunning))
+        .map(({ i }) => i),
+    );
+
     // Flatten messages into blocks with metadata
     const allBlocks = visibleMessages.flatMap((message, messageIndex) => {
       return message.blocks.map((block, blockIndex) => ({
@@ -55,26 +65,13 @@ export const MessageList = React.memo(
       const { block } = item;
       const isDynamic =
         !forceStatic &&
-        ((block.type === "tool" && block.stage === "running") ||
-          (block.type === "bang" && block.isRunning) ||
-          (block.type === "slash" && block.stage === "running"));
+        (messagesWithRunningBlocks.has(item.messageIndex) || isRunning(block));
       return { ...item, isDynamic };
     });
 
     const staticBlocks = blocksWithStatus.filter((b) => !b.isDynamic);
     const dynamicBlocks = blocksWithStatus.filter((b) => b.isDynamic);
 
-    const dynamicBlocksRef = useRef(null);
-
-    useLayoutEffect(() => {
-      if (dynamicBlocksRef.current) {
-        const { height } = measureElement(dynamicBlocksRef.current);
-        onDynamicBlocksHeightMeasured?.(height);
-      } else {
-        onDynamicBlocksHeightMeasured?.(0);
-      }
-    }, [dynamicBlocks, isExpanded, onDynamicBlocksHeightMeasured]);
-
     const staticItems = [
       {
         isWelcome: true,
@@ -120,7 +117,7 @@ export const MessageList = React.memo(
 
         {/* Dynamic blocks */}
         {dynamicBlocks.length > 0 && (
-          <Box ref={dynamicBlocksRef} flexDirection="column">
+          <Box flexDirection="column">
             {dynamicBlocks.map((item) => (
               <MessageBlockItem
                 key={item.key}

package/src/components/RewindCommand.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Box, Text, useInput } from "ink";
-import type { Message, TextBlock } from "wave-agent-sdk";
+import type { Message } from "wave-agent-sdk";
+import { getMessageContent } from "wave-agent-sdk";
 
 export interface RewindCommandProps {
   messages: Message[];
@@ -131,10 +132,7 @@ export const RewindCommand: React.FC<RewindCommandProps> = ({
         {visibleCheckpoints.map((checkpoint, index) => {
           const actualIndex = startIndex + index;
           const isSelected = actualIndex === selectedIndex;
-          const content = checkpoint.msg.blocks
-            .filter((b): b is TextBlock => b.type === "text")
-            .map((b) => b.content)
-            .join(" ")
+          const content = getMessageContent(checkpoint.msg)
             .replace(/\n/g, "\\n")
             .substring(0, 60);
 

package/src/components/StatusCommand.tsx

@@ -86,6 +86,13 @@ export const StatusCommand: React.FC<StatusCommandProps> = ({ onCancel }) => {
         <Text color="white">{modelConfig.model}</Text>
       </Box>
 
+      <Box>
+        <Box width={20}>
+          <Text color="yellow">Fast model:</Text>
+        </Box>
+        <Text color="white">{modelConfig.fastModel}</Text>
+      </Box>
+
       <Box marginTop={1}>
         <Text dimColor>Esc to cancel</Text>
       </Box>

package/src/components/ToolDisplay.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Box, Text } from "ink";
 import type { ToolBlock } from "wave-agent-sdk";
+import { getLastLines } from "wave-agent-sdk";
 import { DiffDisplay } from "./DiffDisplay.js";
 
 interface ToolDisplayProps {
@@ -45,11 +46,7 @@ export const ToolDisplay: React.FC<ToolDisplayProps> = ({
 
     // If no shortResult but has result, return last 5 lines
     if (block.result) {
-      const lines = block.result.split("\n");
-      if (lines.length > 5) {
-        return lines.slice(-5).join("\n");
-      }
-      return block.result;
+      return getLastLines(block.result, 5);
     }
 
     return null;
@@ -81,7 +78,7 @@ export const ToolDisplay: React.FC<ToolDisplayProps> = ({
           flexDirection="column"
         >
           {shortResult.split("\n").map((line, index) => (
-            <Text key={index} color="gray">
+            <Text key={index} color="gray" wrap="truncate-end">
               {line}
             </Text>
           ))}

package/src/contexts/useChat.tsx

@@ -5,6 +5,7 @@ import React, {
   useRef,
   useEffect,
   useState,
+  useMemo,
 } from "react";
 import { useInput } from "ink";
 import { useAppConfig } from "./useAppConfig.js";
@@ -22,8 +23,10 @@ import {
   AgentCallbacks,
   type ToolPermissionContext,
   OPERATION_CANCELLED_BY_USER,
+  cloneMessage,
 } from "wave-agent-sdk";
 import { logger } from "../utils/logger.js";
+import { throttle } from "../utils/throttle.js";
 import { displayUsageSummary } from "../utils/usageSummary.js";
 import { expandLongTextPlaceholders } from "../managers/inputHandlers.js";
 
@@ -77,9 +80,6 @@ export interface ChatContextType {
   // Slash Command functionality
   slashCommands: SlashCommand[];
   hasSlashCommand: (commandId: string) => boolean;
-  // Subagent messages
-  subagentMessages: Record<string, Message[]>;
-  subagentLatestTokens: Record<string, number>;
   // Permission functionality
   permissionMode: PermissionMode;
   setPermissionMode: (mode: PermissionMode) => void;
@@ -159,10 +159,6 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   const [isExpanded, setIsExpanded] = useState(false);
   const isExpandedRef = useRef(isExpanded);
 
-  useEffect(() => {
-    isExpandedRef.current = isExpanded;
-  }, [isExpanded]);
-
   const [isTaskListVisible, setIsTaskListVisible] = useState(true);
 
   const [queuedMessages, setQueuedMessages] = useState<
@@ -173,9 +169,31 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     }>
   >([]);
 
-  // AI State
   const [messages, setMessages] = useState<Message[]>([]);
 
+  const throttledSetMessages = useMemo(
+    () =>
+      throttle(() => {
+        if (!isExpandedRef.current && agentRef.current) {
+          setMessages([...agentRef.current.messages]);
+        }
+      }, 300),
+    [],
+  );
+
+  useEffect(() => {
+    isExpandedRef.current = isExpanded;
+    if (isExpanded) {
+      throttledSetMessages.cancel();
+    }
+  }, [isExpanded, throttledSetMessages]);
+
+  useEffect(() => {
+    return () => {
+      throttledSetMessages.cancel();
+    };
+  }, [throttledSetMessages]);
+
   const [isLoading, setIsLoading] = useState(false);
   const [latestTotalTokens, setlatestTotalTokens] = useState(0);
   const [sessionId, setSessionId] = useState("");
@@ -195,14 +213,6 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   // Command state
   const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
 
-  // Subagent messages state
-  const [subagentMessages, setSubagentMessages] = useState<
-    Record<string, Message[]>
-  >({});
-  const [subagentLatestTokens, setSubagentLatestTokens] = useState<
-    Record<string, number>
-  >({});
-
   // Permission state
   const [permissionMode, setPermissionModeState] = useState<PermissionMode>(
     initialPermissionMode ||
@@ -276,20 +286,6 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     !!bypassPermissions || initialPermissionMode === "bypassPermissions";
 
   const agentRef = useRef<Agent | null>(null);
-  const taskUpdateTimerRef = useRef<NodeJS.Timeout | null>(null);
-
-  const debouncedSetTasks = useCallback(
-    (newTasks: Task[]) => {
-      if (taskUpdateTimerRef.current) {
-        clearTimeout(taskUpdateTimerRef.current);
-      }
-      taskUpdateTimerRef.current = setTimeout(() => {
-        setTasks([...newTasks]);
-        taskUpdateTimerRef.current = null;
-      }, 100);
-    },
-    [setTasks],
-  );
 
   // Permission confirmation methods with queue support
   const showConfirmation = useCallback(
@@ -323,9 +319,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     const initializeAgent = async () => {
       const callbacks: AgentCallbacks = {
         onMessagesChange: () => {
-          if (!isExpandedRef.current && agentRef.current) {
-            setMessages([...agentRef.current.messages]);
-          }
+          throttledSetMessages();
         },
         onServersChange: (servers) => {
           setMcpServers([...servers]);
@@ -343,23 +337,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
           setBackgroundTasks([...tasks]);
         },
         onTasksChange: (tasks) => {
-          debouncedSetTasks(tasks);
-        },
-        onSubagentMessagesChange: (subagentId: string, messages: Message[]) => {
-          logger.debug("onSubagentMessagesChange", subagentId, messages.length);
-          setSubagentMessages((prev) => ({
-            ...prev,
-            [subagentId]: [...messages],
-          }));
-        },
-        onSubagentLatestTotalTokensChange: (
-          subagentId: string,
-          tokens: number,
-        ) => {
-          setSubagentLatestTokens((prev) => ({
-            ...prev,
-            [subagentId]: tokens,
-          }));
+          setTasks([...tasks]);
         },
         onPermissionModeChange: (mode) => {
           setPermissionModeState(mode);
@@ -455,17 +433,13 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     workdir,
     worktreeSession,
     model,
-    debouncedSetTasks,
     initialPermissionMode,
+    throttledSetMessages,
   ]);
 
   // Cleanup on unmount
   useEffect(() => {
     return () => {
-      if (taskUpdateTimerRef.current) {
-        clearTimeout(taskUpdateTimerRef.current);
-      }
-
       if (agentRef.current) {
         try {
           // Display usage summary before cleanup
@@ -517,7 +491,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
           if (command) {
             setIsCommandRunning(true);
             try {
-              await agentRef.current?.executeBashCommand(command);
+              await agentRef.current?.bang(command);
             } finally {
               setIsCommandRunning(false);
             }
@@ -707,13 +681,16 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
       // Clear terminal screen when expanded state changes
       setIsExpanded((prev) => {
         const newExpanded = !prev;
+        isExpandedRef.current = newExpanded;
         if (newExpanded) {
           // Transitioning to EXPANDED: Freeze the current view
+          // Cancel any pending throttled updates to avoid overwriting the frozen state
+          throttledSetMessages.cancel();
           // Deep copy the last message to ensure it doesn't update if the agent is still writing to it
           setMessages((currentMessages) => {
             if (currentMessages.length === 0) return currentMessages;
             const lastMessage = currentMessages[currentMessages.length - 1];
-            const frozenLastMessage = JSON.parse(JSON.stringify(lastMessage));
+            const frozenLastMessage = cloneMessage(lastMessage);
             return [...currentMessages.slice(0, -1), frozenLastMessage];
           });
         } else {
@@ -772,8 +749,6 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     stopBackgroundTask,
     slashCommands,
     hasSlashCommand,
-    subagentMessages,
-    subagentLatestTokens,
     permissionMode,
     setPermissionMode,
     allowBypassInCycle,

package/src/index.ts

@@ -1,6 +1,7 @@
 import yargs from "yargs";
 import { hideBin } from "yargs/helpers";
 import { startCli } from "./cli.js";
+import { logger } from "./utils/logger.js";
 import { Scope, generateRandomName, type PermissionMode } from "wave-agent-sdk";
 import { createWorktree, type WorktreeSession } from "./utils/worktree.js";
 import path from "path";
@@ -14,6 +15,18 @@ const version = packageJson.version;
 
 // Export main function for external use
 export async function main() {
+  // Start memory monitoring in debug mode
+  if (process.env.LOG_LEVEL === "DEBUG") {
+    setInterval(() => {
+      const usage = process.memoryUsage();
+      logger.debug(
+        `[Memory] RSS: ${Math.round(usage.rss / 1024 / 1024)}MB, ` +
+          `Heap: ${Math.round(usage.heapUsed / 1024 / 1024)}/${Math.round(usage.heapTotal / 1024 / 1024)}MB, ` +
+          `External: ${Math.round(usage.external / 1024 / 1024)}MB`,
+      );
+    }, 10000).unref();
+  }
+
   try {
     const originalCwd = process.cwd();
     const argv = await yargs(hideBin(process.argv))

package/src/utils/highlightUtils.ts

@@ -49,14 +49,6 @@ function nodeToAnsi(node: Node): string {
 
     for (const className of classes) {
       if (theme[className]) {
-        // If content has newlines, split it and apply style to each line
-        // to ensure ANSI codes are correctly applied when splitting the final string by lines.
-        if (content.includes("\n")) {
-          return content
-            .split("\n")
-            .map((line) => theme[className](line))
-            .join("\n");
-        }
         return theme[className](content);
       }
     }