wave-code 0.0.5 → 0.0.8

package/src/components/MessageItem.tsx

@@ -0,0 +1,96 @@
+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 { ToolResultDisplay } from "./ToolResultDisplay.js";
+import { MemoryDisplay } from "./MemoryDisplay.js";
+import { CompressDisplay } from "./CompressDisplay.js";
+import { SubagentBlock } from "./SubagentBlock.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,
+  shouldShowHeader,
+}: MessageItemProps) => {
+  if (message.blocks.length === 0) return null;
+  return (
+    <Box flexDirection="column" gap={1} marginTop={1}>
+      {shouldShowHeader && (
+        <Box>
+          <Text color={message.role === "user" ? "cyan" : "green"} bold>
+            {message.role === "user" ? "👤 You" : "🤖 Assistant"}
+          </Text>
+        </Box>
+      )}
+
+      <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>
+                )}
+                <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" && (
+              <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 === "subagent" && <SubagentBlock block={block} />}
+
+            {block.type === "reasoning" && <ReasoningDisplay block={block} />}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};

package/src/components/MessageList.tsx

@@ -1,111 +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 { MessageSource } 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.customCommandContent && (
-                    <Text color="cyan" bold>
-                      ⚡{" "}
-                    </Text>
-                  )}
-                  {block.source === MessageSource.HOOK && (
-                    <Text color="magenta" bold>
-                      🔗{" "}
-                    </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 === "subagent" && (
-              <SubagentBlock block={block} isExpanded={isExpanded} />
-            )}
-          </Box>
-        ))}
-      </Box>
-    </Box>
-  );
-};
+import { MessageItem } from "./MessageItem.js";
 
 export interface MessageListProps {
   messages: Message[];
@@ -116,109 +12,151 @@ 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}
+              />
+            );
+          }}
+        </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}
+              />
+            </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/ReasoningDisplay.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Box } from "ink";
+import type { ReasoningBlock } from "wave-agent-sdk";
+import { Markdown } from "./Markdown.js";
+
+interface ReasoningDisplayProps {
+  block: ReasoningBlock;
+}
+
+export const ReasoningDisplay: React.FC<ReasoningDisplayProps> = ({
+  block,
+}) => {
+  const { content } = block;
+
+  if (!content || !content.trim()) {
+    return null;
+  }
+
+  return (
+    <Box
+      borderRight={false}
+      borderTop={false}
+      borderBottom={false}
+      borderStyle="classic"
+      borderColor="blue"
+      paddingLeft={1}
+    >
+      <Box flexDirection="column">
+        <Markdown>{content}</Markdown>
+      </Box>
+    </Box>
+  );
+};

package/src/components/SubagentBlock.tsx

@@ -1,57 +1,18 @@
 import React from "react";
 import { Box, Text } from "ink";
-import type {
-  SubagentBlock as SubagentBlockType,
-  Message,
-  MessageBlock,
-} from "wave-agent-sdk";
-import { ToolResultDisplay } from "./ToolResultDisplay.js";
-
-// Component to render individual message blocks
-interface MessageBlockRendererProps {
-  block: MessageBlock;
-  isExpanded: boolean;
-}
-
-const MessageBlockRenderer: React.FC<MessageBlockRendererProps> = ({
-  block,
-  isExpanded,
-}) => {
-  const truncateText = (text: string, maxLines: number): string => {
-    const lines = text.split("\n");
-    if (lines.length <= maxLines) {
-      return text;
-    }
-    return lines.slice(0, maxLines).join("\n") + "\n...";
-  };
-
-  switch (block.type) {
-    case "text": {
-      const maxLines = isExpanded ? 50 : 10;
-      const truncatedContent = truncateText(block.content, maxLines);
-      return <Text>{truncatedContent}</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) {
@@ -70,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}
@@ -85,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>
   );
 };