wave-code 0.5.0 → 0.6.1

package/src/components/MessageItem.tsx

@@ -4,7 +4,6 @@ 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";
@@ -22,6 +21,7 @@ export const MessageItem = ({
   shouldShowHeader,
 }: MessageItemProps) => {
   if (message.blocks.length === 0) return null;
+
   return (
     <Box flexDirection="column" gap={1} marginTop={1}>
       {shouldShowHeader && (
@@ -79,8 +79,6 @@ export const MessageItem = ({
               </Box>
             )}
 
-            {block.type === "memory" && <MemoryDisplay block={block} />}
-
             {block.type === "compress" && (
               <CompressDisplay block={block} isExpanded={isExpanded} />
             )}

package/src/components/MessageList.tsx

@@ -7,9 +7,8 @@ export interface MessageListProps {
   messages: Message[];
   isLoading?: boolean;
   isCommandRunning?: boolean;
-  isCompressing?: boolean;
-  latestTotalTokens?: number;
   isExpanded?: boolean;
+  forceStaticLastMessage?: boolean;
 }
 
 export const MessageList = React.memo(
@@ -17,15 +16,16 @@ export const MessageList = React.memo(
     messages,
     isLoading = false,
     isCommandRunning = false,
-    isCompressing = false,
-    latestTotalTokens = 0,
     isExpanded = false,
+    forceStaticLastMessage = 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 flexDirection="column" gap={1}>
+          <Box flexDirection="column" paddingY={1}>
+            <Text color="gray">Welcome to WAVE Code Assistant!</Text>
+          </Box>
         </Box>
       );
     }
@@ -42,7 +42,8 @@ export const MessageList = React.memo(
       : 0;
 
     // Compute which messages to render statically vs dynamically
-    const shouldRenderLastDynamic = isLoading || isCommandRunning;
+    const shouldRenderLastDynamic =
+      !forceStaticLastMessage && (isLoading || isCommandRunning);
     const staticMessages = shouldRenderLastDynamic
       ? displayMessages.slice(0, -1)
       : displayMessages;
@@ -52,7 +53,7 @@ export const MessageList = React.memo(
         : [];
 
     return (
-      <Box flexDirection="column" gap={1}>
+      <Box flexDirection="column" gap={1} paddingBottom={1}>
         {/* Show omitted message count when limiting */}
         {omittedCount > 0 && (
           <Box>
@@ -86,7 +87,7 @@ export const MessageList = React.memo(
           const previousMessage =
             messageIndex > 0 ? displayMessages[messageIndex - 1] : undefined;
           return (
-            <Box key={`dynamic-${index}`} marginTop={-1}>
+            <Box key={`dynamic-${index}`}>
               <MessageItem
                 message={message}
                 shouldShowHeader={previousMessage?.role !== message.role}
@@ -95,64 +96,6 @@ export const MessageList = React.memo(
             </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}
-                  {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+O</Text> Toggle{" "}
-                {isExpanded ? "Collapse" : "Expand"}
-              </Text>
-            </Box>
-          </Box>
-        )}
       </Box>
     );
   },

package/src/components/PlanDisplay.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from "react";
-import { Box, Text, useStdout } from "ink";
+import React from "react";
+import { Box } from "ink";
 import { Markdown } from "./Markdown.js";
 
 interface PlanDisplayProps {
@@ -7,35 +7,12 @@ interface PlanDisplayProps {
   isExpanded?: boolean;
 }
 
-export const PlanDisplay: React.FC<PlanDisplayProps> = ({
-  plan,
-  isExpanded = false,
-}) => {
-  const { stdout } = useStdout();
-  const maxHeight = useMemo(() => {
-    // Similar to DiffDisplay.tsx maxHeight calculation
-    return Math.max(5, (stdout?.rows || 24) - 25);
-  }, [stdout?.rows]);
-
-  const lines = useMemo(() => plan.split("\n"), [plan]);
-  const isOverflowing = !isExpanded && lines.length > maxHeight;
-
+export const PlanDisplay: React.FC<PlanDisplayProps> = ({ plan }) => {
   return (
     <Box flexDirection="column" marginTop={1}>
-      <Box
-        flexDirection="column"
-        height={isOverflowing ? maxHeight : undefined}
-        overflow="hidden"
-      >
+      <Box flexDirection="column">
         <Markdown>{plan}</Markdown>
       </Box>
-      {isOverflowing && (
-        <Box marginTop={1}>
-          <Text color="yellow" dimColor>
-            ... (plan truncated, {lines.length} lines total)
-          </Text>
-        </Box>
-      )}
     </Box>
   );
 };

package/src/components/RewindCommand.tsx

@@ -6,13 +6,30 @@ export interface RewindCommandProps {
   messages: Message[];
   onSelect: (index: number) => void;
   onCancel: () => void;
+  getFullMessageThread?: () => Promise<{
+    messages: Message[];
+    sessionIds: string[];
+  }>;
 }
 
 export const RewindCommand: React.FC<RewindCommandProps> = ({
-  messages,
+  messages: initialMessages,
   onSelect,
   onCancel,
+  getFullMessageThread,
 }) => {
+  const [messages, setMessages] = useState<Message[]>(initialMessages);
+  const [isLoading, setIsLoading] = useState(!!getFullMessageThread);
+
+  React.useEffect(() => {
+    if (getFullMessageThread) {
+      getFullMessageThread().then(({ messages: fullMessages }) => {
+        setMessages(fullMessages);
+        setIsLoading(false);
+      });
+    }
+  }, [getFullMessageThread]);
+
   // Filter user messages as checkpoints
   const checkpoints = messages
     .map((msg, index) => ({ msg, index }))
@@ -20,6 +37,11 @@ export const RewindCommand: React.FC<RewindCommandProps> = ({
 
   const [selectedIndex, setSelectedIndex] = useState(checkpoints.length - 1);
 
+  // Update selectedIndex when checkpoints change (after loading full thread)
+  React.useEffect(() => {
+    setSelectedIndex(checkpoints.length - 1);
+  }, [checkpoints.length]);
+
   useInput((input, key) => {
     if (key.return) {
       if (checkpoints.length > 0 && selectedIndex >= 0) {
@@ -44,6 +66,21 @@ export const RewindCommand: React.FC<RewindCommandProps> = ({
     }
   });
 
+  if (isLoading) {
+    return (
+      <Box
+        flexDirection="column"
+        paddingX={1}
+        borderStyle="single"
+        borderColor="cyan"
+        borderLeft={false}
+        borderRight={false}
+      >
+        <Text color="cyan">Loading full message thread...</Text>
+      </Box>
+    );
+  }
+
   if (checkpoints.length === 0) {
     return (
       <Box

package/src/components/SubagentBlock.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Box, Text } from "ink";
 import type { SubagentBlock as SubagentBlockType } from "wave-agent-sdk";
 import { useChat } from "../contexts/useChat.js";
@@ -9,16 +9,22 @@ interface SubagentBlockProps {
 }
 
 export const SubagentBlock: React.FC<SubagentBlockProps> = ({ block }) => {
-  const { subagentMessages } = useChat();
+  const { subagentMessages, subagentLatestTokens } = useChat();
+
+  // Get messages for this subagent from context
+  const messages = useMemo(
+    () => subagentMessages[block.subagentId] || [],
+    [subagentMessages, block.subagentId],
+  );
+
+  // Get latest turn tokens for this subagent
+  const latestTurnTokens = subagentLatestTokens[block.subagentId] || 0;
 
   // If the subagent is running in the background, don't show the block
   if (block.runInBackground) {
     return null;
   }
 
-  // Get messages for this subagent from context
-  const messages = subagentMessages[block.subagentId] || [];
-
   // Status indicator mapping
   const getStatusIndicator = (status: SubagentBlockType["status"]) => {
     switch (status) {
@@ -63,7 +69,7 @@ export const SubagentBlock: React.FC<SubagentBlockProps> = ({ block }) => {
     return { tools: tools.reverse(), totalToolCount }; // Reverse to show oldest first, newest last
   };
 
-  const { tools: lastTwoTools, totalToolCount } = getLastTwoTools();
+  const { tools: lastTwoTools } = getLastTwoTools();
 
   // Get the last text message content if completed
   const getLastTextMessage = () => {
@@ -93,9 +99,7 @@ export const SubagentBlock: React.FC<SubagentBlockProps> = ({ block }) => {
       borderStyle="classic"
       borderColor="magenta"
       paddingX={1}
-      paddingY={0}
       flexDirection="column"
-      marginBottom={1}
     >
       {/* Header Section */}
       <Box flexDirection="row" gap={1}>
@@ -107,26 +111,31 @@ export const SubagentBlock: React.FC<SubagentBlockProps> = ({ block }) => {
           </Text>
           <Text color="gray" dimColor>
             {" "}
-            ({messages.length} messages)
+            ({messages.length} messages
+            {latestTurnTokens > 0 && (
+              <>
+                {" | "}
+                <Text color="blue" bold>
+                  {latestTurnTokens.toLocaleString()}
+                </Text>
+                {" tokens"}
+              </>
+            )}
+            )
           </Text>
         </Box>
       </Box>
 
       {/* Last Text Message Section */}
       {lastTextMessage && (
-        <Box marginTop={1}>
+        <Box>
           <Markdown>{lastTextMessage}</Markdown>
         </Box>
       )}
 
       {/* Tool Names Section - Vertical List */}
       {block.status !== "completed" && lastTwoTools.length > 0 && (
-        <Box flexDirection="column" marginTop={1} gap={1}>
-          {totalToolCount > 2 && (
-            <Text color="gray" dimColor>
-              ...
-            </Text>
-          )}
+        <Box flexDirection="column">
           {lastTwoTools.map((tool, index) => (
             <Box key={index} flexDirection="row">
               <Text color="magenta">🔧 </Text>

package/src/components/TaskList.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { useChat } from "../contexts/useChat.js";
+import { Box, Text, useStdout } from "ink";
+import { useTasks } from "../hooks/useTasks.js";
+
+export const TaskList: React.FC = () => {
+  const tasks = useTasks();
+  const { isTaskListVisible } = useChat();
+  const { stdout } = useStdout();
+  const terminalWidth = stdout?.columns ?? 80;
+  const maxSubjectWidth = Math.max(20, terminalWidth - 10);
+
+  if (tasks.length === 0 || !isTaskListVisible) {
+    return null;
+  }
+
+  const getStatusIcon = (status: string, isBlocked: boolean) => {
+    if (isBlocked) {
+      return <Text color="red">🔒</Text>;
+    }
+    switch (status) {
+      case "pending":
+        return <Text color="gray">○</Text>;
+      case "in_progress":
+        return <Text color="yellow">●</Text>;
+      case "completed":
+        return <Text color="green">✓</Text>;
+      case "deleted":
+        return <Text color="red">✕</Text>;
+      default:
+        return <Text color="gray">?</Text>;
+    }
+  };
+
+  const truncate = (text: string, maxWidth: number) => {
+    if (text.length <= maxWidth) {
+      return text;
+    }
+    return text.slice(0, maxWidth - 3) + "...";
+  };
+
+  return (
+    <Box flexDirection="column">
+      {tasks.map((task) => {
+        const isDimmed =
+          task.status === "completed" || task.status === "deleted";
+        const isBlocked = task.blockedBy && task.blockedBy.length > 0;
+        const blockingTaskIds = isBlocked
+          ? task.blockedBy.map((id) => `#${id}`)
+          : [];
+
+        const blockedByText =
+          isBlocked && blockingTaskIds.length > 0
+            ? ` (Blocked by: ${blockingTaskIds.join(", ")})`
+            : "";
+
+        const fullText = `${task.subject}${blockedByText}`;
+
+        return (
+          <Box key={task.id} gap={1}>
+            {getStatusIcon(task.status, isBlocked)}
+            <Text dimColor={isDimmed}>
+              {truncate(fullText, maxSubjectWidth)}
+            </Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};

package/src/components/ToolResultDisplay.tsx

@@ -68,7 +68,7 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
   const shortResult = getShortResult();
 
   return (
-    <Box flexDirection="column" gap={1}>
+    <Box flexDirection="column">
       <Box>
         <Text color="magenta">🔧 </Text>
         <Text color="white">{toolName}</Text>
@@ -91,7 +91,7 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
           flexDirection="column"
         >
           {shortResult.split("\n").map((line, index) => (
-            <Text key={index} color="white">
+            <Text key={index} color="gray">
               {line}
             </Text>
           ))}