wave-code 0.0.4 → 0.0.6

package/src/components/MessageList.tsx

@@ -1,107 +1,7 @@
-import React, { useMemo } from "react";
-import { Box, Text } from "ink";
+import React from "react";
+import { Box, Text, Static } from "ink";
 import type { Message } from "wave-agent-sdk";
-import { DiffViewer } from "./DiffViewer.js";
-import { CommandOutputDisplay } from "./CommandOutputDisplay.js";
-import { ToolResultDisplay } from "./ToolResultDisplay.js";
-import { MemoryDisplay } from "./MemoryDisplay.js";
-import { CompressDisplay } from "./CompressDisplay.js";
-import { SubagentBlock } from "./SubagentBlock.js";
-import { usePagination } from "../hooks/usePagination.js";
-
-// Function to render a single message
-const renderMessageItem = (
-  message: Message,
-  originalIndex: number,
-  isExpanded: boolean,
-  previousMessage?: Message,
-) => {
-  const shouldShowHeader = previousMessage?.role !== message.role;
-
-  return (
-    <Box key={`message-${originalIndex}`} flexDirection="column">
-      {shouldShowHeader && (
-        <Box>
-          <Text color={message.role === "user" ? "cyan" : "green"} bold>
-            {message.role === "user" ? "👤 You" : "🤖 Assistant"}
-            <Text color="gray" dimColor>
-              {" "}
-              #{originalIndex + 1}
-            </Text>
-          </Text>
-        </Box>
-      )}
-
-      <Box
-        marginLeft={2}
-        flexDirection="column"
-        gap={1}
-        marginTop={shouldShowHeader ? 1 : 0}
-      >
-        {message.blocks.map((block, blockIndex) => (
-          <Box key={blockIndex}>
-            {block.type === "text" && block.content.trim() && (
-              <Box>
-                <Text>{block.content}</Text>
-              </Box>
-            )}
-
-            {block.type === "error" && (
-              <Box>
-                <Text color="red">❌ Error: {block.content}</Text>
-              </Box>
-            )}
-
-            {block.type === "diff" && (
-              <DiffViewer block={block} isExpanded={isExpanded} />
-            )}
-
-            {block.type === "command_output" && (
-              <CommandOutputDisplay block={block} isExpanded={isExpanded} />
-            )}
-
-            {block.type === "tool" && (
-              <ToolResultDisplay 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 === "memory" && <MemoryDisplay block={block} />}
-
-            {block.type === "compress" && (
-              <CompressDisplay block={block} isExpanded={isExpanded} />
-            )}
-
-            {block.type === "custom_command" && (
-              <Box>
-                <Text color="cyan" bold>
-                  ⚡
-                </Text>
-                <Text>{block.originalInput || `/${block.commandName}`}</Text>
-              </Box>
-            )}
-
-            {block.type === "subagent" && (
-              <SubagentBlock block={block} isExpanded={isExpanded} />
-            )}
-          </Box>
-        ))}
-      </Box>
-    </Box>
-  );
-};
+import { MessageItem } from "./MessageItem.js";
 
 export interface MessageListProps {
   messages: Message[];
@@ -112,109 +12,153 @@ export interface MessageListProps {
   isExpanded?: boolean;
 }
 
-export const MessageList: React.FC<MessageListProps> = ({
-  messages,
-  isLoading = false,
-  isCommandRunning = false,
-  isCompressing = false,
-  latestTotalTokens = 0,
-  isExpanded = false,
-}) => {
-  // Use original messages for pagination calculation
-  const { displayInfo } = usePagination(messages);
-
-  // Get current page messages while preserving original index information
-  const currentMessagesWithIndex = useMemo(() => {
-    return messages
-      .slice(displayInfo.startIndex, displayInfo.endIndex)
-      .map((message, index) => ({
-        message,
-        originalIndex: displayInfo.startIndex + index,
-      }));
-  }, [messages, displayInfo.startIndex, displayInfo.endIndex]);
+export const MessageList = React.memo(
+  ({
+    messages,
+    isLoading = false,
+    isCommandRunning = false,
+    isCompressing = false,
+    latestTotalTokens = 0,
+    isExpanded = false,
+  }: MessageListProps) => {
+    // Empty message state
+    if (messages.length === 0) {
+      return (
+        <Box flexDirection="column" paddingY={1}>
+          <Text color="gray">Welcome to WAVE Code Assistant!</Text>
+        </Box>
+      );
+    }
+
+    // Limit messages when expanded to prevent long rendering times
+    const maxExpandedMessages = 20;
+    const shouldLimitMessages =
+      isExpanded && messages.length > maxExpandedMessages;
+    const displayMessages = shouldLimitMessages
+      ? messages.slice(-maxExpandedMessages)
+      : messages;
+    const omittedCount = shouldLimitMessages
+      ? messages.length - maxExpandedMessages
+      : 0;
+
+    // Compute which messages to render statically vs dynamically
+    const shouldRenderLastDynamic = isLoading || isCommandRunning;
+    const staticMessages = shouldRenderLastDynamic
+      ? displayMessages.slice(0, -1)
+      : displayMessages;
+    const dynamicMessages =
+      shouldRenderLastDynamic && displayMessages.length > 0
+        ? [displayMessages[displayMessages.length - 1]]
+        : [];
 
-  // Empty message state
-  if (messages.length === 0) {
     return (
-      <Box flexDirection="column" paddingY={1}>
-        <Text color="gray">Welcome to WAVE Code Assistant!</Text>
-      </Box>
-    );
-  }
-
-  return (
-    <Box flexDirection="column" gap={1} marginTop={1}>
-      {/* Message list */}
-      <Box flexDirection="column" gap={1}>
-        {currentMessagesWithIndex.map(({ message, originalIndex }) => {
-          // Get previous message
+      <Box flexDirection="column" paddingX={1} gap={1}>
+        {/* Show omitted message count when limiting */}
+        {omittedCount > 0 && (
+          <Box>
+            <Text color="gray" dimColor>
+              ... {omittedCount} earlier message{omittedCount !== 1 ? "s" : ""}{" "}
+              omitted (showing latest {maxExpandedMessages})
+            </Text>
+          </Box>
+        )}
+
+        {/* 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}
+                isExpanded={isExpanded}
+                isStatic={true}
+              />
+            );
+          }}
+        </Static>
+
+        {/* Dynamic messages */}
+        {dynamicMessages.map((message, index) => {
+          const messageIndex = staticMessages.length + index;
           const previousMessage =
-            originalIndex > 0 ? messages[originalIndex - 1] : undefined;
-          return renderMessageItem(
-            message,
-            originalIndex,
-            isExpanded,
-            previousMessage,
+            messageIndex > 0 ? displayMessages[messageIndex - 1] : undefined;
+          return (
+            <Box key={`dynamic-${index}`} marginTop={-1}>
+              <MessageItem
+                message={message}
+                shouldShowHeader={previousMessage?.role !== message.role}
+                isExpanded={isExpanded}
+                isStatic={false}
+              />
+            </Box>
           );
         })}
-      </Box>
 
-      {/* Loading state display - only show in non-expanded state */}
-      {!isExpanded && (isLoading || isCommandRunning || isCompressing) && (
-        <Box flexDirection="column" gap={1}>
-          {isLoading && (
-            <Box>
-              <Text color="yellow">💭 AI is thinking... </Text>
-              <Text color="gray" dimColor>
-                {" "}
-                |{" "}
-              </Text>
-              <Text color="blue" bold>
-                {latestTotalTokens.toLocaleString()}
-              </Text>
-              <Text color="gray" dimColor>
-                {" "}
-                tokens |{" "}
-              </Text>
-              <Text color="red" bold>
-                Esc
-              </Text>
-              <Text color="gray" dimColor>
-                {" "}
-                to abort
-              </Text>
-            </Box>
-          )}
-          {isCommandRunning && (
-            <Text color="blue">🚀 Command is running...</Text>
-          )}
-          {isCompressing && (
-            <Text color="magenta">🗜️ Compressing message history...</Text>
-          )}
-        </Box>
-      )}
+        {(isLoading || isCommandRunning || isCompressing) && (
+          <Box flexDirection="column" gap={1}>
+            {isLoading && (
+              <Box>
+                <Text color="yellow">💭 AI is thinking... </Text>
+                <Text color="gray" dimColor>
+                  |{" "}
+                </Text>
+                <Text color="red" bold>
+                  Esc
+                </Text>
+                <Text color="gray" dimColor>
+                  {" "}
+                  to abort
+                </Text>
+              </Box>
+            )}
+            {isCommandRunning && (
+              <Text color="blue">🚀 Command is running...</Text>
+            )}
+            {isCompressing && (
+              <Text color="magenta">🗜️ Compressing message history...</Text>
+            )}
+          </Box>
+        )}
 
-      {/* Bottom info and shortcut key hints */}
-      {messages.length > 0 && (
-        <Box>
-          <Box justifyContent="space-between" width="100%">
-            <Box>
-              <Text color="gray">
-                Messages {messages.length} Page {displayInfo.currentPage}/
-                {displayInfo.totalPages}
-              </Text>
+        {/* Bottom info and shortcut key hints */}
+        {messages.length > 0 && (
+          <Box>
+            <Box justifyContent="space-between" width="100%">
+              <Box>
+                <Text color="gray">
+                  Messages {messages.length}
+                  {latestTotalTokens > 0 && (
+                    <>
+                      <Text color="gray" dimColor>
+                        {" "}
+                        |{" "}
+                      </Text>
+                      <Text color="blue" bold>
+                        {latestTotalTokens.toLocaleString()}
+                      </Text>
+                      <Text color="gray" dimColor>
+                        {" "}
+                        tokens
+                      </Text>
+                    </>
+                  )}
+                </Text>
+              </Box>
               <Text color="gray" dimColor>
-                {" "}
-                ← <Text color="cyan">Ctrl+U/D</Text> Navigate
+                <Text color="cyan">Ctrl+O</Text> Toggle{" "}
+                {isExpanded ? "Collapse" : "Expand"}
               </Text>
             </Box>
-            <Text color="gray" dimColor>
-              <Text color="cyan">Ctrl+O</Text> Toggle{" "}
-              {isExpanded ? "Collapse" : "Expand"}
-            </Text>
           </Box>
-        </Box>
-      )}
-    </Box>
-  );
-};
+        )}
+      </Box>
+    );
+  },
+);
+
+// Add display name for debugging
+MessageList.displayName = "MessageList";

package/src/components/SubagentBlock.tsx

@@ -1,46 +1,18 @@
 import React from "react";
 import { Box, Text } from "ink";
-import type {
-  SubagentBlock as SubagentBlockType,
-  Message,
-  MessageBlock,
-} from "wave-agent-sdk/src/types.js";
-import { ToolResultDisplay } from "./ToolResultDisplay.js";
-
-// Component to render individual message blocks
-interface MessageBlockRendererProps {
-  block: MessageBlock;
-  isExpanded: boolean;
-}
-
-const MessageBlockRenderer: React.FC<MessageBlockRendererProps> = ({
-  block,
-  isExpanded,
-}) => {
-  switch (block.type) {
-    case "text":
-      return <Text>{block.content}</Text>;
-
-    case "error":
-      return <Text color="red">❌ Error: {block.content}</Text>;
-
-    case "tool":
-      return <ToolResultDisplay block={block} isExpanded={isExpanded} />;
-
-    default:
-      return null;
-  }
-};
+import type { SubagentBlock as SubagentBlockType } from "wave-agent-sdk";
+import { useChat } from "../contexts/useChat.js";
 
 interface SubagentBlockProps {
   block: SubagentBlockType;
-  isExpanded?: boolean;
 }
 
-export const SubagentBlock: React.FC<SubagentBlockProps> = ({
-  block,
-  isExpanded = false,
-}) => {
+export const SubagentBlock: React.FC<SubagentBlockProps> = ({ block }) => {
+  const { subagentMessages } = useChat();
+
+  // Get messages for this subagent from context
+  const messages = subagentMessages[block.subagentId] || [];
+
   // Status indicator mapping
   const getStatusIndicator = (status: SubagentBlockType["status"]) => {
     switch (status) {
@@ -59,14 +31,40 @@ export const SubagentBlock: React.FC<SubagentBlockProps> = ({
 
   const statusInfo = getStatusIndicator(block.status);
 
-  // Determine how many messages to show
-  const messagesToShow = isExpanded
-    ? block.messages.slice(-10) // Up to 10 most recent when expanded
-    : block.messages.slice(-2); // Up to 2 most recent when collapsed
+  // Find the last 2 tool names and their compact params, and count total tools
+  const getLastTwoTools = (): {
+    tools: Array<{ name: string; compactParams?: string }>;
+    totalToolCount: number;
+  } => {
+    const tools: Array<{ name: string; compactParams?: string }> = [];
+    let totalToolCount = 0;
+
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const message = messages[i];
+      for (let j = message.blocks.length - 1; j >= 0; j--) {
+        const messageBlock = message.blocks[j];
+        if (messageBlock.type === "tool" && messageBlock.name) {
+          totalToolCount++;
+          if (tools.length < 2) {
+            tools.push({
+              name: messageBlock.name,
+              compactParams: messageBlock.compactParams,
+            });
+          }
+        }
+      }
+    }
+    return { tools: tools.reverse(), totalToolCount }; // Reverse to show oldest first, newest last
+  };
+
+  const { tools: lastTwoTools, totalToolCount } = getLastTwoTools();
 
   return (
     <Box
-      borderStyle="round"
+      borderRight={false}
+      borderTop={false}
+      borderBottom={false}
+      borderStyle="classic"
       borderColor="magenta"
       paddingX={1}
       paddingY={0}
@@ -74,54 +72,39 @@ export const SubagentBlock: React.FC<SubagentBlockProps> = ({
       marginBottom={1}
     >
       {/* Header Section */}
-      <Box
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
+      <Box flexDirection="row" gap={1}>
         <Box flexDirection="row" alignItems="center">
           <Text color="cyan">🤖 {block.subagentName}</Text>
           <Text color={statusInfo.color} dimColor={false}>
             {" "}
             {statusInfo.icon}
           </Text>
-        </Box>
-
-        {!isExpanded && (
           <Text color="gray" dimColor>
-            {block.messages.length} messages
+            {" "}
+            ({messages.length} messages)
           </Text>
-        )}
+        </Box>
       </Box>
 
-      {/* Messages Section */}
-      {messagesToShow.length > 0 && (
+      {/* Tool Names Section - Vertical List */}
+      {lastTwoTools.length > 0 && (
         <Box flexDirection="column" marginTop={1} gap={1}>
-          {messagesToShow.map((message: Message, index: number) => (
-            <Box key={index} flexDirection="column" marginBottom={0} gap={1}>
-              {message.blocks.map(
-                (messageBlock: MessageBlock, blockIndex: number) => (
-                  <Box key={blockIndex} flexDirection="column">
-                    <MessageBlockRenderer
-                      block={messageBlock}
-                      isExpanded={isExpanded}
-                    />
-                  </Box>
-                ),
+          {totalToolCount > 2 && (
+            <Text color="gray" dimColor>
+              ...
+            </Text>
+          )}
+          {lastTwoTools.map((tool, index) => (
+            <Box key={index} flexDirection="row">
+              <Text color="magenta">🔧 </Text>
+              <Text color="white">{tool.name}</Text>
+              {tool.compactParams && (
+                <Text color="gray"> {tool.compactParams}</Text>
               )}
             </Box>
           ))}
         </Box>
       )}
-
-      {/* Show truncation indicator if there are more messages */}
-      {!isExpanded && block.messages.length > 2 && (
-        <Box marginTop={1}>
-          <Text color="gray" dimColor>
-            ... and {block.messages.length - 2} more messages (Ctrl+O to expand)
-          </Text>
-        </Box>
-      )}
     </Box>
   );
 };

package/src/components/ToolResultDisplay.tsx

@@ -11,23 +11,23 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
   block,
   isExpanded = false,
 }) => {
-  const { parameters, result, compactParams, isRunning, success, error, name } =
+  const { parameters, result, compactParams, stage, success, error, name } =
     block;
 
   // Directly use compactParams
   // (no change needed as we destructured it above)
 
   const getStatusColor = () => {
-    if (isRunning) return "yellow";
+    if (stage === "running") return "yellow";
     if (success) return "green";
     if (error || success === false) return "red";
     return "gray"; // Unknown state or no state information
   };
 
   const getStatusText = () => {
-    if (isRunning) return "🔄";
+    if (stage === "running") return "🔄";
     if (success) return "";
-    if (error || success === false) return "❌ Failed";
+    if (error || success === false) return "❌";
     return ""; // Don't display text for unknown state
   };
 
@@ -70,7 +70,7 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
         <Text color="white">{toolName}</Text>
         {/* Display compactParams in collapsed state */}
         {!isExpanded && compactParams && (
-          <Text color="gray"> ({compactParams})</Text>
+          <Text color="gray"> {compactParams}</Text>
         )}
         <Text color={getStatusColor()}> {getStatusText()}</Text>
         {/* Display image indicator */}
@@ -78,7 +78,7 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
       </Box>
 
       {/* Display shortResult in collapsed state */}
-      {!isExpanded && shortResult && (
+      {!isExpanded && shortResult && !error && (
         <Box
           paddingLeft={2}
           borderLeft

package/src/contexts/useChat.tsx

@@ -16,6 +16,7 @@ import type {
 } from "wave-agent-sdk";
 import { Agent, AgentCallbacks } from "wave-agent-sdk";
 import { logger } from "../utils/logger.js";
+import { displayUsageSummary } from "../utils/usageSummary.js";
 
 // Main Chat Context
 export interface ChatContextType {
@@ -49,6 +50,8 @@ export interface ChatContextType {
   // Slash Command functionality
   slashCommands: SlashCommand[];
   hasSlashCommand: (commandId: string) => boolean;
+  // Subagent messages
+  subagentMessages: Record<string, Message[]>;
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
@@ -91,12 +94,23 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
   // Command state
   const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
 
+  // Subagent messages state
+  const [subagentMessages, setSubagentMessages] = useState<
+    Record<string, Message[]>
+  >({});
+
   const agentRef = useRef<Agent | null>(null);
 
   // Listen for Ctrl+O hotkey to toggle collapse/expand state
   useInput((input, key) => {
     if (key.ctrl && input === "o") {
-      setIsExpanded((prev) => !prev);
+      // Clear terminal screen when expanded state changes
+      process.stdout.write("\x1Bc", () => {
+        setIsExpanded((prev) => {
+          const newExpanded = !prev;
+          return newExpanded;
+        });
+      });
     }
   });
 
@@ -111,7 +125,9 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
           setMcpServers([...servers]);
         },
         onSessionIdChange: (sessionId) => {
-          setSessionId(sessionId);
+          process.stdout.write("\x1Bc", () => {
+            setSessionId(sessionId);
+          });
         },
         onLatestTotalTokensChange: (tokens) => {
           setlatestTotalTokens(tokens);
@@ -125,6 +141,12 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
         onShellsChange: (shells) => {
           setBackgroundShells([...shells]);
         },
+        onSubagentMessagesChange: (subagentId, messages) => {
+          setSubagentMessages((prev) => ({
+            ...prev,
+            [subagentId]: [...messages],
+          }));
+        },
       };
 
       try {
@@ -165,6 +187,15 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
   useEffect(() => {
     return () => {
       if (agentRef.current) {
+        try {
+          // Display usage summary before cleanup
+          const usages = agentRef.current.usages;
+          const sessionFilePath = agentRef.current.sessionFilePath;
+          displayUsageSummary(usages, sessionFilePath);
+        } catch {
+          // Silently ignore usage summary errors during cleanup
+        }
+
         agentRef.current.destroy();
       }
     };
@@ -292,6 +323,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
     killBackgroundShell,
     slashCommands,
     hasSlashCommand,
+    subagentMessages,
   };
 
   return (