wave-code 0.7.0 → 0.7.1

package/src/components/MessageList.tsx

@@ -1,23 +1,19 @@
 import React from "react";
 import { Box, Text, Static } from "ink";
 import type { Message } from "wave-agent-sdk";
-import { MessageItem } from "./MessageItem.js";
+import { MessageBlockItem } from "./MessageBlockItem.js";
 
 export interface MessageListProps {
   messages: Message[];
-  isLoading?: boolean;
-  isCommandRunning?: boolean;
   isExpanded?: boolean;
-  forceStaticLastMessage?: boolean;
+  hideDynamicBlocks?: boolean;
 }
 
 export const MessageList = React.memo(
   ({
     messages,
-    isLoading = false,
-    isCommandRunning = false,
     isExpanded = false,
-    forceStaticLastMessage = false,
+    hideDynamicBlocks = false,
   }: MessageListProps) => {
     // Empty message state
     if (messages.length === 0) {
@@ -38,59 +34,66 @@ export const MessageList = React.memo(
       ? messages.slice(-maxExpandedMessages)
       : messages;
 
-    // Compute which messages to render statically vs dynamically
-    const lastMessage = displayMessages[displayMessages.length - 1];
-    const hasNonEndTool = lastMessage?.blocks.some(
-      (block) => block.type === "tool" && block.stage !== "end",
-    );
-    const hasRunningCommand = lastMessage?.blocks.some(
-      (block) => block.type === "command_output" && block.isRunning,
-    );
-    const shouldRenderLastDynamic =
-      !forceStaticLastMessage &&
-      (isLoading || isCommandRunning || hasNonEndTool || hasRunningCommand);
-    const staticMessages = shouldRenderLastDynamic
-      ? displayMessages.slice(0, -1)
-      : displayMessages;
-    const dynamicMessages =
-      shouldRenderLastDynamic && displayMessages.length > 0
-        ? [displayMessages[displayMessages.length - 1]]
-        : [];
+    // Flatten messages into blocks with metadata
+    const allBlocks = displayMessages.flatMap((message, index) => {
+      const messageIndex = shouldLimitMessages
+        ? messages.length - maxExpandedMessages + index
+        : index;
+      return message.blocks.map((block, blockIndex) => ({
+        block,
+        message,
+        isLastMessage: messageIndex === messages.length - 1,
+        // Unique key for each block to help Static component
+        key: `${message.id || messageIndex}-${blockIndex}`,
+      }));
+    });
+
+    // Determine which blocks are static vs dynamic
+    const blocksWithStatus = allBlocks.map((item) => {
+      const { block, isLastMessage } = item;
+      const isDynamic =
+        isLastMessage &&
+        ((block.type === "tool" && block.stage !== "end") ||
+          (block.type === "command_output" && block.isRunning));
+      return { ...item, isDynamic };
+    });
+
+    const staticBlocks = blocksWithStatus.filter((b) => !b.isDynamic);
+    const dynamicBlocks = hideDynamicBlocks
+      ? []
+      : blocksWithStatus.filter((b) => b.isDynamic);
 
     return (
       <Box flexDirection="column" paddingBottom={1}>
-        {/* Static messages */}
-        <Static items={staticMessages}>
-          {(message, key) => {
-            // Get previous message
-            const previousMessage =
-              key > 0 ? staticMessages[key - 1] : undefined;
-            return (
-              <MessageItem
-                key={key}
-                message={message}
-                shouldShowHeader={previousMessage?.role !== message.role}
+        {/* Static blocks */}
+        {staticBlocks.length > 0 && (
+          <Static items={staticBlocks}>
+            {(item) => (
+              <MessageBlockItem
+                key={item.key}
+                block={item.block}
+                message={item.message}
                 isExpanded={isExpanded}
+                paddingTop={1}
               />
-            );
-          }}
-        </Static>
+            )}
+          </Static>
+        )}
 
-        {/* Dynamic messages */}
-        {dynamicMessages.map((message, index) => {
-          const messageIndex = staticMessages.length + index;
-          const previousMessage =
-            messageIndex > 0 ? displayMessages[messageIndex - 1] : undefined;
-          return (
-            <Box key={`dynamic-${index}`}>
-              <MessageItem
-                message={message}
-                shouldShowHeader={previousMessage?.role !== message.role}
+        {/* Dynamic blocks */}
+        {dynamicBlocks.length > 0 && (
+          <Box flexDirection="column">
+            {dynamicBlocks.map((item) => (
+              <MessageBlockItem
+                key={item.key}
+                block={item.block}
+                message={item.message}
                 isExpanded={isExpanded}
+                paddingTop={1}
               />
-            </Box>
-          );
-        })}
+            ))}
+          </Box>
+        )}
       </Box>
     );
   },

package/src/components/PluginDetail.tsx

@@ -36,42 +36,41 @@ export const PluginDetail: React.FC = () => {
       );
       actions.setView(isFromDiscover ? "DISCOVER" : "INSTALLED");
     } else if (key.upArrow) {
-      if (isInstalledAndEnabled) {
-        setSelectedActionIndex((prev) =>
-          prev > 0 ? prev - 1 : INSTALLED_ACTIONS.length - 1,
-        );
-      } else {
-        setSelectedScopeIndex((prev) =>
-          prev > 0 ? prev - 1 : SCOPES.length - 1,
-        );
-      }
+      setSelectedActionIndex((prev) =>
+        prev > 0 ? prev - 1 : INSTALLED_ACTIONS.length - 1,
+      );
+      setSelectedScopeIndex((prev) =>
+        prev > 0 ? prev - 1 : SCOPES.length - 1,
+      );
     } else if (key.downArrow) {
-      if (isInstalledAndEnabled) {
-        setSelectedActionIndex((prev) =>
-          prev < INSTALLED_ACTIONS.length - 1 ? prev + 1 : 0,
-        );
-      } else {
-        setSelectedScopeIndex((prev) =>
-          prev < SCOPES.length - 1 ? prev + 1 : 0,
-        );
-      }
+      setSelectedActionIndex((prev) =>
+        prev < INSTALLED_ACTIONS.length - 1 ? prev + 1 : 0,
+      );
+      setSelectedScopeIndex((prev) =>
+        prev < SCOPES.length - 1 ? prev + 1 : 0,
+      );
     } else if (key.return && plugin) {
       if (isInstalledAndEnabled) {
-        const action = INSTALLED_ACTIONS[selectedActionIndex].id;
-        if (action === "uninstall") {
-          actions.uninstallPlugin(plugin.name, plugin.marketplace);
-        } else {
-          actions.updatePlugin(plugin.name, plugin.marketplace);
-        }
-        actions.setView("INSTALLED");
+        setSelectedActionIndex((prev) => {
+          const action = INSTALLED_ACTIONS[prev].id;
+          if (action === "uninstall") {
+            actions.uninstallPlugin(plugin.name, plugin.marketplace);
+          } else {
+            actions.updatePlugin(plugin.name, plugin.marketplace);
+          }
+          return prev;
+        });
       } else {
-        actions.installPlugin(
-          plugin.name,
-          plugin.marketplace,
-          SCOPES[selectedScopeIndex].id,
-        );
-        actions.setView("INSTALLED");
+        setSelectedScopeIndex((prev) => {
+          actions.installPlugin(
+            plugin.name,
+            plugin.marketplace,
+            SCOPES[prev].id,
+          );
+          return prev;
+        });
       }
+      actions.setView("INSTALLED");
     }
   });
 

package/src/components/SessionSelector.tsx

@@ -17,9 +17,12 @@ export const SessionSelector: React.FC<SessionSelectorProps> = ({
 
   useInput((input, key) => {
     if (key.return) {
-      if (sessions.length > 0 && selectedIndex < sessions.length) {
-        onSelect(sessions[selectedIndex].id);
-      }
+      setSelectedIndex((prev) => {
+        if (sessions.length > 0 && prev < sessions.length) {
+          onSelect(sessions[prev].id);
+        }
+        return prev;
+      });
       return;
     }
 
@@ -29,12 +32,12 @@ export const SessionSelector: React.FC<SessionSelectorProps> = ({
     }
 
     if (key.upArrow) {
-      setSelectedIndex(Math.max(0, selectedIndex - 1));
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
       return;
     }
 
     if (key.downArrow) {
-      setSelectedIndex(Math.min(sessions.length - 1, selectedIndex + 1));
+      setSelectedIndex((prev) => Math.min(sessions.length - 1, prev + 1));
       return;
     }
   });

package/src/components/TaskList.tsx

@@ -11,10 +11,7 @@ export const TaskList: React.FC = () => {
     return null;
   }
 
-  const getStatusIcon = (status: string, isBlocked: boolean) => {
-    if (isBlocked) {
-      return <Text color="red">🔒</Text>;
-    }
+  const getStatusIcon = (status: string) => {
     switch (status) {
       case "pending":
         return <Text color="gray">□</Text>;
@@ -48,7 +45,7 @@ export const TaskList: React.FC = () => {
 
         return (
           <Box key={task.id} gap={1}>
-            {getStatusIcon(task.status, isBlocked)}
+            {getStatusIcon(task.status)}
             <Text dimColor={isDimmed}>{fullText}</Text>
           </Box>
         );

package/src/components/ToolDisplay.tsx

@@ -131,7 +131,11 @@ export const ToolDisplay: React.FC<ToolDisplayProps> = ({
 
       {/* Diff display - only show after tool execution completes and was successful */}
       {stage === "end" && success && (
-        <DiffDisplay toolName={name} parameters={parameters} />
+        <DiffDisplay
+          toolName={name}
+          parameters={parameters}
+          startLineNumber={block.startLineNumber}
+        />
       )}
     </Box>
   );

package/src/contexts/useChat.tsx

@@ -131,6 +131,8 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
 
   // AI State
   const [messages, setMessages] = useState<Message[]>([]);
+  const messagesUpdateTimerRef = useRef<NodeJS.Timeout | null>(null);
+
   const [isLoading, setIsLoading] = useState(false);
   const [latestTotalTokens, setlatestTotalTokens] = useState(0);
   const [sessionId, setSessionId] = useState("");
@@ -227,9 +229,16 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   useEffect(() => {
     const initializeAgent = async () => {
       const callbacks: AgentCallbacks = {
-        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) => {
@@ -345,6 +354,9 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   // Cleanup on unmount
   useEffect(() => {
     return () => {
+      if (messagesUpdateTimerRef.current) {
+        clearTimeout(messagesUpdateTimerRef.current);
+      }
       if (agentRef.current) {
         try {
           // Display usage summary before cleanup
@@ -530,6 +542,10 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
       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/src/utils/highlightUtils.ts

@@ -0,0 +1,76 @@
+import hljs from 'highlight.js';
+import { parse, Node, HTMLElement, TextNode } from 'node-html-parser';
+import chalk from 'chalk';
+
+const theme: Record<string, (text: string) => string> = {
+  '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: Node): string {
+  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: string, language?: string): string {
+  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/src/utils/toolParameterTransforms.ts

@@ -61,6 +61,7 @@ export function transformEditParameters(
 export function transformToolBlockToChanges(
   toolName: string,
   parameters: string,
+  startLineNumber?: number,
 ): Change[] {
   try {
     if (!toolName) {
@@ -69,16 +70,24 @@ export function transformToolBlockToChanges(
 
     const parsedParams = parseToolParameters(parameters);
 
+    let changes: Change[] = [];
     switch (toolName) {
       case "Write":
-        return transformWriteParameters(parsedParams as WriteToolParameters);
+        changes = transformWriteParameters(parsedParams as WriteToolParameters);
+        break;
 
       case "Edit":
-        return transformEditParameters(parsedParams as EditToolParameters);
+        changes = transformEditParameters(parsedParams as EditToolParameters);
+        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);
     return [];

package/dist/components/MessageItem.d.ts

@@ -1,8 +0,0 @@
-import type { Message } from "wave-agent-sdk";
-export interface MessageItemProps {
-    message: Message;
-    isExpanded: boolean;
-    shouldShowHeader: boolean;
-}
-export declare const MessageItem: ({ message, isExpanded }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=MessageItem.d.ts.map

package/dist/components/MessageItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageItem.d.ts","sourceRoot":"","sources":["../../src/components/MessageItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,GAAI,yBAAyB,gBAAgB,mDAgEpE,CAAC"}

package/dist/components/MessageItem.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from "ink";
-import { MessageSource } from "wave-agent-sdk";
-import { CommandOutputDisplay } from "./CommandOutputDisplay.js";
-import { ToolDisplay } from "./ToolDisplay.js";
-import { CompressDisplay } from "./CompressDisplay.js";
-import { ReasoningDisplay } from "./ReasoningDisplay.js";
-import { Markdown } from "./Markdown.js";
-export const MessageItem = ({ message, isExpanded }) => {
-    if (message.blocks.length === 0)
-        return null;
-    return (_jsx(Box, { flexDirection: "column", gap: 1, marginTop: 1, children: _jsx(Box, { flexDirection: "column", gap: 1, children: message.blocks.map((block, blockIndex) => (_jsxs(Box, { children: [block.type === "text" && block.content.trim() && (_jsxs(Box, { children: [block.customCommandContent && (_jsx(Text, { color: "cyan", bold: true, children: "$ " })), block.source === MessageSource.HOOK && (_jsx(Text, { color: "magenta", bold: true, children: "~ " })), message.role === "user" ? (_jsx(Text, { backgroundColor: "gray", color: "white", children: block.content })) : (_jsx(Markdown, { children: block.content }))] })), block.type === "error" && (_jsx(Box, { children: _jsxs(Text, { color: "red", children: ["Error: ", block.content] }) })), block.type === "command_output" && (_jsx(CommandOutputDisplay, { block: block, isExpanded: isExpanded })), block.type === "tool" && (_jsx(ToolDisplay, { block: block, isExpanded: isExpanded })), block.type === "image" && (_jsxs(Box, { children: [_jsx(Text, { color: "magenta", bold: true, children: "# Image" }), block.imageUrls && block.imageUrls.length > 0 && (_jsxs(Text, { color: "gray", dimColor: true, children: [" ", "(", block.imageUrls.length, ")"] }))] })), block.type === "compress" && (_jsx(CompressDisplay, { block: block, isExpanded: isExpanded })), block.type === "reasoning" && _jsx(ReasoningDisplay, { block: block })] }, blockIndex))) }) }));
-};

package/src/components/MessageItem.tsx

@@ -1,81 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-import type { Message } from "wave-agent-sdk";
-import { MessageSource } from "wave-agent-sdk";
-import { CommandOutputDisplay } from "./CommandOutputDisplay.js";
-import { ToolDisplay } from "./ToolDisplay.js";
-import { CompressDisplay } from "./CompressDisplay.js";
-import { ReasoningDisplay } from "./ReasoningDisplay.js";
-import { Markdown } from "./Markdown.js";
-
-export interface MessageItemProps {
-  message: Message;
-  isExpanded: boolean;
-  shouldShowHeader: boolean;
-}
-
-export const MessageItem = ({ message, isExpanded }: MessageItemProps) => {
-  if (message.blocks.length === 0) return null;
-
-  return (
-    <Box flexDirection="column" gap={1} marginTop={1}>
-      <Box flexDirection="column" gap={1}>
-        {message.blocks.map((block, blockIndex) => (
-          <Box key={blockIndex}>
-            {block.type === "text" && block.content.trim() && (
-              <Box>
-                {block.customCommandContent && (
-                  <Text color="cyan" bold>$ </Text>
-                )}
-                {block.source === MessageSource.HOOK && (
-                  <Text color="magenta" bold>~ </Text>
-                )}
-                {message.role === "user" ? (
-                  <Text backgroundColor="gray" color="white">
-                    {block.content}
-                  </Text>
-                ) : (
-                  <Markdown>{block.content}</Markdown>
-                )}
-              </Box>
-            )}
-
-            {block.type === "error" && (
-              <Box>
-                <Text color="red">Error: {block.content}</Text>
-              </Box>
-            )}
-
-            {block.type === "command_output" && (
-              <CommandOutputDisplay block={block} isExpanded={isExpanded} />
-            )}
-
-            {block.type === "tool" && (
-              <ToolDisplay block={block} isExpanded={isExpanded} />
-            )}
-
-            {block.type === "image" && (
-              <Box>
-                <Text color="magenta" bold>
-                  # Image
-                </Text>
-                {block.imageUrls && block.imageUrls.length > 0 && (
-                  <Text color="gray" dimColor>
-                    {" "}
-                    ({block.imageUrls.length})
-                  </Text>
-                )}
-              </Box>
-            )}
-
-            {block.type === "compress" && (
-              <CompressDisplay block={block} isExpanded={isExpanded} />
-            )}
-
-            {block.type === "reasoning" && <ReasoningDisplay block={block} />}
-          </Box>
-        ))}
-      </Box>
-    </Box>
-  );
-};