wave-code 0.7.0 → 0.7.2

package/dist/contexts/useChat.js

@@ -24,6 +24,7 @@ export const ChatProvider = ({ children, bypassPermissions, pluginDirs, tools, }
     const [isTaskListVisible, setIsTaskListVisible] = useState(true);
     // AI State
     const [messages, setMessages] = useState([]);
+    const messagesUpdateTimerRef = useRef(null);
     const [isLoading, setIsLoading] = useState(false);
     const [latestTotalTokens, setlatestTotalTokens] = useState(0);
     const [sessionId, setSessionId] = useState("");
@@ -71,9 +72,16 @@ export const ChatProvider = ({ children, bypassPermissions, pluginDirs, tools, }
     useEffect(() => {
         const initializeAgent = async () => {
             const callbacks = {
-                onMessagesChange: (newMessages) => {
+                onMessagesChange: () => {
                     if (!isExpandedRef.current) {
-                        setMessages([...newMessages]);
+                        if (!messagesUpdateTimerRef.current) {
+                            messagesUpdateTimerRef.current = setTimeout(() => {
+                                if (agentRef.current) {
+                                    setMessages([...agentRef.current.messages]);
+                                }
+                                messagesUpdateTimerRef.current = null;
+                            }, 50);
+                        }
                     }
                 },
                 onServersChange: (servers) => {
@@ -173,6 +181,9 @@ export const ChatProvider = ({ children, bypassPermissions, pluginDirs, tools, }
     // Cleanup on unmount
     useEffect(() => {
         return () => {
+            if (messagesUpdateTimerRef.current) {
+                clearTimeout(messagesUpdateTimerRef.current);
+            }
             if (agentRef.current) {
                 try {
                     // Display usage summary before cleanup
@@ -332,6 +343,10 @@ export const ChatProvider = ({ children, bypassPermissions, pluginDirs, tools, }
             setIsExpanded((prev) => {
                 const newExpanded = !prev;
                 if (newExpanded) {
+                    if (messagesUpdateTimerRef.current) {
+                        clearTimeout(messagesUpdateTimerRef.current);
+                        messagesUpdateTimerRef.current = null;
+                    }
                     // Transitioning to EXPANDED: Freeze the current view
                     // Deep copy the last message to ensure it doesn't update if the agent is still writing to it
                     setMessages((currentMessages) => {

package/dist/utils/highlightUtils.d.ts

@@ -0,0 +1,2 @@
+export declare function highlightToAnsi(code: string, language?: string): string;
+//# sourceMappingURL=highlightUtils.d.ts.map

package/dist/utils/highlightUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlightUtils.d.ts","sourceRoot":"","sources":["../../src/utils/highlightUtils.ts"],"names":[],"mappings":"AA6DA,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAcvE"}

package/dist/utils/highlightUtils.js

@@ -0,0 +1,69 @@
+import hljs from 'highlight.js';
+import { parse, HTMLElement, TextNode } from 'node-html-parser';
+import chalk from 'chalk';
+const theme = {
+    'hljs-keyword': chalk.blue,
+    'hljs-built_in': chalk.cyan,
+    'hljs-type': chalk.cyan,
+    'hljs-literal': chalk.magenta,
+    'hljs-number': chalk.magenta,
+    'hljs-operator': chalk.white,
+    'hljs-punctuation': chalk.white,
+    'hljs-property': chalk.yellow,
+    'hljs-attr': chalk.yellow,
+    'hljs-variable': chalk.white,
+    'hljs-template-variable': chalk.white,
+    'hljs-string': chalk.green,
+    'hljs-char': chalk.green,
+    'hljs-comment': chalk.gray,
+    'hljs-doctag': chalk.gray,
+    'hljs-function': chalk.yellow,
+    'hljs-title': chalk.yellow,
+    'hljs-params': chalk.white,
+    'hljs-tag': chalk.blue,
+    'hljs-name': chalk.blue,
+    'hljs-selector-tag': chalk.blue,
+    'hljs-selector-id': chalk.blue,
+    'hljs-selector-class': chalk.blue,
+    'hljs-selector-attr': chalk.blue,
+    'hljs-selector-pseudo': chalk.blue,
+    'hljs-subst': chalk.white,
+    'hljs-section': chalk.blue.bold,
+    'hljs-bullet': chalk.magenta,
+    'hljs-emphasis': chalk.italic,
+    'hljs-strong': chalk.bold,
+    'hljs-addition': chalk.green,
+    'hljs-deletion': chalk.red,
+    'hljs-link': chalk.blue.underline,
+};
+function nodeToAnsi(node) {
+    if (node instanceof TextNode) {
+        return node.text;
+    }
+    if (node instanceof HTMLElement) {
+        const content = node.childNodes.map(nodeToAnsi).join('');
+        const classes = node.getAttribute('class')?.split(/\s+/) || [];
+        for (const className of classes) {
+            if (theme[className]) {
+                return theme[className](content);
+            }
+        }
+        return content;
+    }
+    return '';
+}
+export function highlightToAnsi(code, language) {
+    if (!code) {
+        return '';
+    }
+    try {
+        const highlighted = language
+            ? hljs.highlight(code, { language }).value
+            : hljs.highlightAuto(code).value;
+        const root = parse(highlighted);
+        return root.childNodes.map(nodeToAnsi).join('');
+    }
+    catch {
+        return code;
+    }
+}

package/dist/utils/toolParameterTransforms.d.ts

@@ -15,5 +15,5 @@ export declare function transformEditParameters(parameters: EditToolParameters):
  * Transform tool block parameters into standardized Change[] array for diff display
  * Forces type judgment based on tool name using type assertions
  */
-export declare function transformToolBlockToChanges(toolName: string, parameters: string): Change[];
+export declare function transformToolBlockToChanges(toolName: string, parameters: string, startLineNumber?: number): Change[];
 //# sourceMappingURL=toolParameterTransforms.d.ts.map

package/dist/utils/toolParameterTransforms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolParameterTransforms.d.ts","sourceRoot":"","sources":["../../src/utils/toolParameterTransforms.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,KAAK,MAAM,EACX,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACxB,MAAM,gBAAgB,CAAC;AAmBxB;;GAEG;AACH,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,mBAAmB,GAC9B,MAAM,EAAE,CAOV;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,kBAAkB,GAC7B,MAAM,EAAE,CAOV;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,GACjB,MAAM,EAAE,CAsBV"}
+{"version":3,"file":"toolParameterTransforms.d.ts","sourceRoot":"","sources":["../../src/utils/toolParameterTransforms.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,KAAK,MAAM,EACX,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACxB,MAAM,gBAAgB,CAAC;AAmBxB;;GAEG;AACH,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,mBAAmB,GAC9B,MAAM,EAAE,CAOV;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,kBAAkB,GAC7B,MAAM,EAAE,CAOV;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,eAAe,CAAC,EAAE,MAAM,GACvB,MAAM,EAAE,CA8BV"}

package/dist/utils/toolParameterTransforms.js

@@ -44,20 +44,27 @@ export function transformEditParameters(parameters) {
  * Transform tool block parameters into standardized Change[] array for diff display
  * Forces type judgment based on tool name using type assertions
  */
-export function transformToolBlockToChanges(toolName, parameters) {
+export function transformToolBlockToChanges(toolName, parameters, startLineNumber) {
     try {
         if (!toolName) {
             return [];
         }
         const parsedParams = parseToolParameters(parameters);
+        let changes = [];
         switch (toolName) {
             case "Write":
-                return transformWriteParameters(parsedParams);
+                changes = transformWriteParameters(parsedParams);
+                break;
             case "Edit":
-                return transformEditParameters(parsedParams);
+                changes = transformEditParameters(parsedParams);
+                break;
             default:
                 return [];
         }
+        if (changes.length > 0 && startLineNumber !== undefined) {
+            changes[0].startLineNumber = startLineNumber;
+        }
+        return changes;
     }
     catch (error) {
         logger.warn("Failed to transform tool block to changes:", error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "CLI-based code assistant powered by AI, built with React and Ink",
   "repository": {
     "type": "git",
@@ -32,12 +32,14 @@
     "chalk": "^5.6.2",
     "diff": "^8.0.2",
     "glob": "^13.0.0",
+    "highlight.js": "^11.11.1",
     "ink": "^6.7.0",
     "marked": "^17.0.2",
+    "node-html-parser": "^7.0.2",
     "react": "^19.2.4",
     "react-dom": "19.2.4",
     "yargs": "^17.7.2",
-    "wave-agent-sdk": "0.7.0"
+    "wave-agent-sdk": "0.7.2"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",

package/src/components/ChatInterface.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useLayoutEffect } from "react";
 import { Box, useStdout } from "ink";
 import { MessageList } from "./MessageList.js";
 import { InputBox } from "./InputBox.js";
@@ -12,7 +12,9 @@ import type { PermissionDecision } from "wave-agent-sdk";
 
 export const ChatInterface: React.FC = () => {
   const { stdout } = useStdout();
-  const [isDetailsTooTall, setIsDetailsTooTall] = useState(false);
+  const [detailsHeight, setDetailsHeight] = useState(0);
+  const [selectorHeight, setSelectorHeight] = useState(0);
+  const [isConfirmationTooTall, setIsConfirmationTooTall] = useState(false);
 
   const {
     messages,
@@ -36,39 +38,49 @@ export const ChatInterface: React.FC = () => {
     setWasLastDetailsTooTall,
   } = useChat();
 
-  const handleHeightMeasured = useCallback(
-    (height: number) => {
-      const terminalHeight = stdout?.rows || 24;
-      if (height > terminalHeight - 10) {
-        setIsDetailsTooTall(true);
-      } else {
-        setIsDetailsTooTall(false);
-      }
-    },
-    [stdout?.rows],
-  );
+  const handleDetailsHeightMeasured = useCallback((height: number) => {
+    setDetailsHeight(height);
+  }, []);
+
+  const handleSelectorHeightMeasured = useCallback((height: number) => {
+    setSelectorHeight(height);
+  }, []);
+
+  useLayoutEffect(() => {
+    const terminalHeight = stdout?.rows || 24;
+    const totalHeight = detailsHeight + selectorHeight;
+    if (totalHeight > terminalHeight) {
+      setIsConfirmationTooTall(true);
+    } else {
+      setIsConfirmationTooTall(false);
+    }
+  }, [detailsHeight, selectorHeight, stdout?.rows]);
 
   const handleConfirmationCancel = useCallback(() => {
-    if (isDetailsTooTall) {
+    if (isConfirmationTooTall) {
       setWasLastDetailsTooTall((prev) => prev + 1);
-      setIsDetailsTooTall(false);
+      setIsConfirmationTooTall(false);
     }
     originalHandleConfirmationCancel();
   }, [
-    isDetailsTooTall,
+    isConfirmationTooTall,
     originalHandleConfirmationCancel,
     setWasLastDetailsTooTall,
   ]);
 
   const wrappedHandleConfirmationDecision = useCallback(
     (decision: PermissionDecision) => {
-      if (isDetailsTooTall) {
+      if (isConfirmationTooTall) {
         setWasLastDetailsTooTall((prev) => prev + 1);
-        setIsDetailsTooTall(false);
+        setIsConfirmationTooTall(false);
       }
       handleConfirmationDecision(decision);
     },
-    [isDetailsTooTall, handleConfirmationDecision, setWasLastDetailsTooTall],
+    [
+      isConfirmationTooTall,
+      handleConfirmationDecision,
+      setWasLastDetailsTooTall,
+    ],
   );
 
   if (!sessionId) return null;
@@ -77,10 +89,8 @@ export const ChatInterface: React.FC = () => {
     <Box flexDirection="column">
       <MessageList
         messages={messages}
-        isLoading={isLoading}
-        isCommandRunning={isCommandRunning}
         isExpanded={isExpanded}
-        forceStaticLastMessage={isDetailsTooTall}
+        hideDynamicBlocks={isConfirmationVisible}
       />
 
       {(isLoading || isCommandRunning || isCompressing) &&
@@ -101,7 +111,8 @@ export const ChatInterface: React.FC = () => {
             toolName={confirmingTool!.name}
             toolInput={confirmingTool!.input}
             isExpanded={isExpanded}
-            onHeightMeasured={handleHeightMeasured}
+            onHeightMeasured={handleDetailsHeightMeasured}
+            isStatic={isConfirmationTooTall}
           />
           <ConfirmationSelector
             toolName={confirmingTool!.name}
@@ -112,6 +123,7 @@ export const ChatInterface: React.FC = () => {
             onDecision={wrappedHandleConfirmationDecision}
             onCancel={handleConfirmationCancel}
             onAbort={abortMessage}
+            onHeightMeasured={handleSelectorHeightMeasured}
           />
         </>
       )}

package/src/components/ConfirmationDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef, useState } from "react";
+import React, { useLayoutEffect, useRef } from "react";
 import { Box, Text, useStdout, measureElement, Static } from "ink";
 import {
   BASH_TOOL_NAME,
@@ -40,6 +40,7 @@ export interface ConfirmationDetailsProps {
   toolInput?: Record<string, unknown>;
   isExpanded?: boolean;
   onHeightMeasured?: (height: number) => void;
+  isStatic?: boolean;
 }
 
 export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
@@ -47,21 +48,21 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
   toolInput,
   isExpanded = false,
   onHeightMeasured,
+  isStatic = false,
 }) => {
   const { stdout } = useStdout();
-  const [isStatic, setIsStatic] = useState(false);
   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);
-      const terminalHeight = stdout?.rows || 24;
-      if (height > terminalHeight - 10) {
-        setIsStatic(true);
-      }
       onHeightMeasured?.(height);
     }
-  }, [stdout?.rows, onHeightMeasured]);
+  }, [stdout?.rows, onHeightMeasured, toolInput, isExpanded]);
 
   const content = (
     <Box
@@ -72,14 +73,17 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
       borderBottom={false}
       borderLeft={false}
       borderRight={false}
-      paddingTop={1}
     >
       <Text color="yellow" bold>
         Tool: {toolName}
       </Text>
       <Text color="yellow">{getActionDescription(toolName, toolInput)}</Text>
 
-      <DiffDisplay toolName={toolName} parameters={JSON.stringify(toolInput)} />
+      <DiffDisplay
+        toolName={toolName}
+        parameters={JSON.stringify(toolInput)}
+        startLineNumber={startLineNumber}
+      />
 
       {toolName !== ASK_USER_QUESTION_TOOL_NAME &&
         toolName === EXIT_PLAN_MODE_TOOL_NAME &&