wave-code 0.12.1 → 0.12.2

package/dist/utils/throttle.js

@@ -0,0 +1,55 @@
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds.
+ */
+export function throttle(func, wait, options = { leading: true, trailing: true }) {
+    let timeoutId = null;
+    let lastArgs = null;
+    let lastCallTime = 0;
+    const invokeFunc = () => {
+        if (lastArgs) {
+            func(...lastArgs);
+            lastCallTime = Date.now();
+            lastArgs = null;
+        }
+    };
+    const throttled = (...args) => {
+        const now = Date.now();
+        const remaining = wait - (now - lastCallTime);
+        lastArgs = args;
+        if (remaining <= 0 || remaining > wait) {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            if (options.leading !== false || lastCallTime !== 0) {
+                invokeFunc();
+            }
+            else {
+                lastCallTime = now;
+            }
+        }
+        else if (!timeoutId && options.trailing !== false) {
+            timeoutId = setTimeout(() => {
+                timeoutId = null;
+                invokeFunc();
+            }, remaining);
+        }
+    };
+    throttled.cancel = () => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+        lastArgs = null;
+        lastCallTime = 0;
+    };
+    throttled.flush = () => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+        invokeFunc();
+    };
+    return throttled;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "CLI-based code assistant powered by AI, built with React and Ink",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
     "semver": "^7.7.4",
     "yargs": "^17.7.2",
     "zod": "^3.23.8",
-    "wave-agent-sdk": "0.12.1"
+    "wave-agent-sdk": "0.12.2"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",

package/src/components/App.tsx

@@ -112,7 +112,7 @@ const AppWithProviders: React.FC<AppWithProvidersProps> = ({
   );
 };
 
-const ChatInterfaceWithRemount: React.FC = () => {
+export const ChatInterfaceWithRemount: React.FC = () => {
   const { stdout } = useStdout();
   const { isExpanded, rewindId, wasLastDetailsTooTall, sessionId } = useChat();
 
@@ -121,6 +121,7 @@ const ChatInterfaceWithRemount: React.FC = () => {
   );
 
   const prevSessionId = useRef(sessionId);
+  const isRemountScheduled = useRef(false);
 
   useEffect(() => {
     const newKey =
@@ -131,13 +132,16 @@ const ChatInterfaceWithRemount: React.FC = () => {
         ? sessionId
         : "");
 
-    if (newKey !== remountKey) {
+    if (newKey !== remountKey && !isRemountScheduled.current) {
+      isRemountScheduled.current = true;
+
       const timeout = setTimeout(() => {
         stdout?.write("\u001b[2J\u001b[3J\u001b[0;0H", (err?: Error | null) => {
           if (err) {
             console.error("Failed to clear terminal:", err);
           }
           setRemountKey(newKey);
+          isRemountScheduled.current = false;
         });
       }, 100);
 

package/src/components/BackgroundTaskManager.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
 import { useChat } from "../contexts/useChat.js";
+import { getLastLines } from "wave-agent-sdk";
 
 interface Task {
   id: string;
@@ -207,9 +208,7 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
               OUTPUT (last 10 lines):
             </Text>
             <Box borderStyle="single" borderColor="green" padding={1}>
-              <Text>
-                {detailOutput.stdout.split("\n").slice(-10).join("\n")}
-              </Text>
+              <Text>{getLastLines(detailOutput.stdout, 10)}</Text>
             </Box>
           </Box>
         )}
@@ -220,9 +219,7 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
               ERRORS:
             </Text>
             <Box borderStyle="single" borderColor="red" padding={1}>
-              <Text color="red">
-                {detailOutput.stderr.split("\n").slice(-10).join("\n")}
-              </Text>
+              <Text color="red">{getLastLines(detailOutput.stderr, 10)}</Text>
             </Box>
           </Box>
         )}

package/src/components/BangDisplay.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { Box, Text } from "ink";
 import type { BangBlock } from "wave-agent-sdk";
+import { getLastLines } from "wave-agent-sdk";
 
 interface BangDisplayProps {
   block: BangBlock;
@@ -12,17 +13,8 @@ export const BangDisplay: React.FC<BangDisplayProps> = ({
   isExpanded = false,
 }) => {
   const { command, output, isRunning, exitCode } = block;
-  const [isOverflowing, setIsOverflowing] = useState(false);
   const MAX_LINES = 3; // Set maximum display lines
 
-  // Detect if content is overflowing
-  useEffect(() => {
-    if (output) {
-      const lines = output.split("\n");
-      setIsOverflowing(!isExpanded && lines.length > MAX_LINES);
-    }
-  }, [output, isExpanded]);
-
   const getStatusColor = () => {
     if (isRunning) return "yellow";
     if (exitCode === 0) return "green";
@@ -38,19 +30,9 @@ export const BangDisplay: React.FC<BangDisplayProps> = ({
       </Box>
 
       {output && (
-        <Box
-          paddingLeft={2}
-          height={
-            isExpanded
-              ? undefined
-              : Math.min(output.split("\n").length, MAX_LINES)
-          }
-          overflow="hidden"
-        >
+        <Box paddingLeft={2} overflow="hidden">
           <Text color="gray">
-            {isOverflowing
-              ? output.split("\n").slice(-MAX_LINES).join("\n")
-              : output}
+            {isExpanded ? output : getLastLines(output, MAX_LINES)}
           </Text>
         </Box>
       )}

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/MessageList.tsx

@@ -1,6 +1,6 @@
-import React, { useLayoutEffect, useRef } from "react";
+import React from "react";
 import os from "os";
-import { Box, Text, Static, measureElement } from "ink";
+import { Box, Text, Static } from "ink";
 import type { Message, MessageBlock } from "wave-agent-sdk";
 import { MessageBlockItem } from "./MessageBlockItem.js";
 
@@ -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}>
@@ -74,17 +72,6 @@ export const MessageList = React.memo(
     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,
@@ -130,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/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;

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";
 
@@ -156,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<
@@ -170,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("");
@@ -298,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]);
@@ -415,6 +434,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     worktreeSession,
     model,
     initialPermissionMode,
+    throttledSetMessages,
   ]);
 
   // Cleanup on unmount
@@ -471,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);
             }
@@ -661,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 {

package/src/utils/logger.ts

@@ -10,6 +10,7 @@
 
 import * as fs from "fs";
 import { Chalk } from "chalk";
+import { getLastLines } from "wave-agent-sdk";
 import { LOG_FILE, DATA_DIRECTORY } from "./constants.js";
 
 const chalk = new Chalk({ level: 3 });
@@ -269,19 +270,14 @@ const truncateLogFileIfNeeded = (config: LogCleanupConfig): void => {
     // If file size exceeds limit, truncate file
     if (stats.size > config.maxFileSize) {
       const content = fs.readFileSync(logFile, "utf8");
-      const lines = content.split("\n");
-
-      // Keep the last specified number of lines
-      const keepLines = Math.min(config.keepLines, lines.length);
-      const truncatedContent = lines.slice(-keepLines).join("\n");
+      const truncatedContent = getLastLines(content, config.keepLines);
 
       // Write truncated content
       fs.writeFileSync(logFile, truncatedContent);
 
       // Record truncation operation
-      const removedLines = lines.length - keepLines;
       logger.debug(
-        `Log file truncated: removed ${removedLines} lines, kept last ${keepLines} lines`,
+        `Log file truncated: file size ${stats.size} exceeded limit ${config.maxFileSize}, kept last ${config.keepLines} lines`,
       );
     }
   } catch (error) {