wave-code 0.2.1 → 0.5.0

package/src/components/SessionSelector.tsx

@@ -0,0 +1,127 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import type { SessionMetadata } from "wave-agent-sdk";
+
+export interface SessionSelectorProps {
+  sessions: (SessionMetadata & { firstMessage?: string })[];
+  onSelect: (sessionId: string) => void;
+  onCancel: () => void;
+}
+
+export const SessionSelector: React.FC<SessionSelectorProps> = ({
+  sessions,
+  onSelect,
+  onCancel,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useInput((input, key) => {
+    if (key.return) {
+      if (sessions.length > 0 && selectedIndex < sessions.length) {
+        onSelect(sessions[selectedIndex].id);
+      }
+      return;
+    }
+
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex(Math.max(0, selectedIndex - 1));
+      return;
+    }
+
+    if (key.downArrow) {
+      setSelectedIndex(Math.min(sessions.length - 1, selectedIndex + 1));
+      return;
+    }
+  });
+
+  if (sessions.length === 0) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="yellow"
+        borderLeft={false}
+        borderRight={false}
+        paddingX={1}
+        width="100%"
+      >
+        <Text color="yellow">No sessions found.</Text>
+        <Text dimColor>Press Escape to cancel</Text>
+      </Box>
+    );
+  }
+
+  const maxDisplay = 10;
+  const startIndex = Math.max(
+    0,
+    Math.min(
+      selectedIndex - Math.floor(maxDisplay / 2),
+      sessions.length - maxDisplay,
+    ),
+  );
+  const displaySessions = sessions.slice(startIndex, startIndex + maxDisplay);
+
+  return (
+    <Box
+      flexDirection="column"
+      paddingX={1}
+      gap={1}
+      borderStyle="single"
+      borderColor="cyan"
+      borderLeft={false}
+      borderRight={false}
+      width="100%"
+    >
+      <Box>
+        <Text color="cyan" bold>
+          Select a session to resume
+        </Text>
+      </Box>
+
+      <Box flexDirection="column">
+        {displaySessions.map((session, index) => {
+          const actualIndex = startIndex + index;
+          const isSelected = actualIndex === selectedIndex;
+          const lastActiveAt = new Date(session.lastActiveAt).toLocaleString();
+
+          return (
+            <Box key={session.id} flexDirection="column" width="100%">
+              <Box width="100%">
+                <Text
+                  color={isSelected ? "black" : "white"}
+                  backgroundColor={isSelected ? "cyan" : undefined}
+                >
+                  {isSelected ? "▶ " : "  "}
+                  {session.id} | {lastActiveAt} | {session.latestTotalTokens}{" "}
+                  tokens
+                </Text>
+              </Box>
+              <Box marginLeft={4} width="100%">
+                <Text dimColor italic>
+                  {session.firstMessage}
+                </Text>
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+
+      {sessions.length > maxDisplay && (
+        <Box>
+          <Text dimColor>
+            ... showing {displaySessions.length} of {sessions.length} sessions
+          </Text>
+        </Box>
+      )}
+
+      <Box>
+        <Text dimColor>↑↓ navigate • Enter to select • Esc to cancel</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/components/SubagentBlock.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Box, Text } from "ink";
 import type { SubagentBlock as SubagentBlockType } from "wave-agent-sdk";
 import { useChat } from "../contexts/useChat.js";
+import { Markdown } from "./Markdown.js";
 
 interface SubagentBlockProps {
   block: SubagentBlockType;
@@ -10,6 +11,11 @@ interface SubagentBlockProps {
 export const SubagentBlock: React.FC<SubagentBlockProps> = ({ block }) => {
   const { subagentMessages } = useChat();
 
+  // 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] || [];
 
@@ -59,6 +65,26 @@ export const SubagentBlock: React.FC<SubagentBlockProps> = ({ block }) => {
 
   const { tools: lastTwoTools, totalToolCount } = getLastTwoTools();
 
+  // Get the last text message content if completed
+  const getLastTextMessage = () => {
+    if (block.status !== "completed") return null;
+
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const message = messages[i];
+      if (message.role === "assistant") {
+        for (let j = message.blocks.length - 1; j >= 0; j--) {
+          const messageBlock = message.blocks[j];
+          if (messageBlock.type === "text" && messageBlock.content) {
+            return messageBlock.content;
+          }
+        }
+      }
+    }
+    return null;
+  };
+
+  const lastTextMessage = getLastTextMessage();
+
   return (
     <Box
       borderRight={false}
@@ -86,8 +112,15 @@ export const SubagentBlock: React.FC<SubagentBlockProps> = ({ block }) => {
         </Box>
       </Box>
 
+      {/* Last Text Message Section */}
+      {lastTextMessage && (
+        <Box marginTop={1}>
+          <Markdown>{lastTextMessage}</Markdown>
+        </Box>
+      )}
+
       {/* Tool Names Section - Vertical List */}
-      {lastTwoTools.length > 0 && (
+      {block.status !== "completed" && lastTwoTools.length > 0 && (
         <Box flexDirection="column" marginTop={1} gap={1}>
           {totalToolCount > 2 && (
             <Text color="gray" dimColor>

package/src/components/{BashShellManager.tsx → TaskManager.tsx}

@@ -2,55 +2,55 @@ import React, { useState, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
 import { useChat } from "../contexts/useChat.js";
 
-interface BashShell {
+interface Task {
   id: string;
-  command: string;
-  status: "running" | "completed" | "killed";
+  type: string;
+  description?: string;
+  status: "running" | "completed" | "failed" | "killed";
   startTime: number;
   exitCode?: number;
   runtime?: number;
 }
 
-export interface BashShellManagerProps {
+export interface TaskManagerProps {
   onCancel: () => void;
 }
 
-export const BashShellManager: React.FC<BashShellManagerProps> = ({
-  onCancel,
-}) => {
-  const { backgroundShells, getBackgroundShellOutput, killBackgroundShell } =
+export const TaskManager: React.FC<TaskManagerProps> = ({ onCancel }) => {
+  const { backgroundTasks, getBackgroundTaskOutput, stopBackgroundTask } =
     useChat();
-  const [shells, setShells] = useState<BashShell[]>([]);
+  const [tasks, setTasks] = useState<Task[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [viewMode, setViewMode] = useState<"list" | "detail">("list");
-  const [detailShellId, setDetailShellId] = useState<string | null>(null);
+  const [detailTaskId, setDetailTaskId] = useState<string | null>(null);
   const [detailOutput, setDetailOutput] = useState<{
     stdout: string;
     stderr: string;
     status: string;
   } | null>(null);
 
-  // Convert backgroundShells to local BashShell format
+  // Convert backgroundTasks to local Task format
   useEffect(() => {
-    setShells(
-      backgroundShells.map((shell) => ({
-        id: shell.id,
-        command: shell.command,
-        status: shell.status,
-        startTime: shell.startTime,
-        exitCode: shell.exitCode,
-        runtime: shell.runtime,
+    setTasks(
+      backgroundTasks.map((task) => ({
+        id: task.id,
+        type: task.type,
+        description: task.description,
+        status: task.status,
+        startTime: task.startTime,
+        exitCode: task.exitCode,
+        runtime: task.runtime,
       })),
     );
-  }, [backgroundShells]);
+  }, [backgroundTasks]);
 
-  // Load detail output for selected shell
+  // Load detail output for selected task
   useEffect(() => {
-    if (viewMode === "detail" && detailShellId) {
-      const output = getBackgroundShellOutput(detailShellId);
+    if (viewMode === "detail" && detailTaskId) {
+      const output = getBackgroundTaskOutput(detailTaskId);
       setDetailOutput(output);
     }
-  }, [viewMode, detailShellId, getBackgroundShellOutput]);
+  }, [viewMode, detailTaskId, getBackgroundTaskOutput]);
 
   const formatDuration = (ms: number): string => {
     if (ms < 1000) return `${ms}ms`;
@@ -64,17 +64,17 @@ export const BashShellManager: React.FC<BashShellManagerProps> = ({
     return new Date(timestamp).toLocaleTimeString();
   };
 
-  const killShell = (shellId: string) => {
-    killBackgroundShell(shellId);
+  const stopTask = (taskId: string) => {
+    stopBackgroundTask(taskId);
   };
 
   useInput((input, key) => {
     if (viewMode === "list") {
       // List mode navigation
       if (key.return) {
-        if (shells.length > 0 && selectedIndex < shells.length) {
-          const selectedShell = shells[selectedIndex];
-          setDetailShellId(selectedShell.id);
+        if (tasks.length > 0 && selectedIndex < tasks.length) {
+          const selectedTask = tasks[selectedIndex];
+          setDetailTaskId(selectedTask.id);
           setViewMode("detail");
         }
         return;
@@ -91,14 +91,14 @@ export const BashShellManager: React.FC<BashShellManagerProps> = ({
       }
 
       if (key.downArrow) {
-        setSelectedIndex(Math.min(shells.length - 1, selectedIndex + 1));
+        setSelectedIndex(Math.min(tasks.length - 1, selectedIndex + 1));
         return;
       }
 
-      if (input === "k" && shells.length > 0 && selectedIndex < shells.length) {
-        const selectedShell = shells[selectedIndex];
-        if (selectedShell.status === "running") {
-          killShell(selectedShell.id);
+      if (input === "k" && tasks.length > 0 && selectedIndex < tasks.length) {
+        const selectedTask = tasks[selectedIndex];
+        if (selectedTask.status === "running") {
+          stopTask(selectedTask.id);
         }
         return;
       }
@@ -106,24 +106,24 @@ export const BashShellManager: React.FC<BashShellManagerProps> = ({
       // Detail mode navigation
       if (key.escape) {
         setViewMode("list");
-        setDetailShellId(null);
+        setDetailTaskId(null);
         setDetailOutput(null);
         return;
       }
 
-      if (input === "k" && detailShellId) {
-        const shell = shells.find((s) => s.id === detailShellId);
-        if (shell && shell.status === "running") {
-          killShell(detailShellId);
+      if (input === "k" && detailTaskId) {
+        const task = tasks.find((t) => t.id === detailTaskId);
+        if (task && task.status === "running") {
+          stopTask(detailTaskId);
         }
         return;
       }
     }
   });
 
-  if (viewMode === "detail" && detailShellId && detailOutput) {
-    const shell = shells.find((s) => s.id === detailShellId);
-    if (!shell) {
+  if (viewMode === "detail" && detailTaskId && detailOutput) {
+    const task = tasks.find((t) => t.id === detailTaskId);
+    if (!task) {
       setViewMode("list");
       return null;
     }
@@ -141,31 +141,37 @@ export const BashShellManager: React.FC<BashShellManagerProps> = ({
       >
         <Box>
           <Text color="cyan" bold>
-            Background Shell Details: {shell.id}
+            Background Task Details: {task.id}
           </Text>
         </Box>
 
         <Box flexDirection="column" gap={1}>
           <Box>
             <Text>
-              <Text color="blue">Command:</Text> {shell.command}
+              <Text color="blue">Type:</Text> {task.type}
             </Text>
           </Box>
+          {task.description && (
+            <Box>
+              <Text>
+                <Text color="blue">Description:</Text> {task.description}
+              </Text>
+            </Box>
+          )}
           <Box>
             <Text>
-              <Text color="blue">Status:</Text> {shell.status}
-              {shell.exitCode !== undefined &&
-                ` (exit code: ${shell.exitCode})`}
+              <Text color="blue">Status:</Text> {task.status}
+              {task.exitCode !== undefined && ` (exit code: ${task.exitCode})`}
             </Text>
           </Box>
           <Box>
             <Text>
-              <Text color="blue">Started:</Text> {formatTime(shell.startTime)}
-              {shell.runtime !== undefined && (
+              <Text color="blue">Started:</Text> {formatTime(task.startTime)}
+              {task.runtime !== undefined && (
                 <Text>
                   {" "}
                   | <Text color="blue">Runtime:</Text>{" "}
-                  {formatDuration(shell.runtime)}
+                  {formatDuration(task.runtime)}
                 </Text>
               )}
             </Text>
@@ -175,7 +181,7 @@ export const BashShellManager: React.FC<BashShellManagerProps> = ({
         {detailOutput.stdout && (
           <Box flexDirection="column" marginTop={1}>
             <Text color="green" bold>
-              STDOUT (last 10 lines):
+              OUTPUT (last 10 lines):
             </Text>
             <Box borderStyle="single" borderColor="green" padding={1}>
               <Text>
@@ -188,7 +194,7 @@ export const BashShellManager: React.FC<BashShellManagerProps> = ({
         {detailOutput.stderr && (
           <Box flexDirection="column" marginTop={1}>
             <Text color="red" bold>
-              STDERR:
+              ERRORS:
             </Text>
             <Box borderStyle="single" borderColor="red" padding={1}>
               <Text color="red">
@@ -200,14 +206,14 @@ export const BashShellManager: React.FC<BashShellManagerProps> = ({
 
         <Box marginTop={1}>
           <Text dimColor>
-            {shell.status === "running" ? "k to kill · " : ""}Esc to go back
+            {task.status === "running" ? "k to stop · " : ""}Esc to go back
           </Text>
         </Box>
       </Box>
     );
   }
 
-  if (!backgroundShells) {
+  if (!backgroundTasks) {
     return (
       <Box
         flexDirection="column"
@@ -219,15 +225,15 @@ export const BashShellManager: React.FC<BashShellManagerProps> = ({
         paddingTop={1}
       >
         <Text color="cyan" bold>
-          Background Bash Shells
+          Background Tasks
         </Text>
-        <Text>Background bash shells not available</Text>
+        <Text>Background tasks not available</Text>
         <Text dimColor>Press Escape to close</Text>
       </Box>
     );
   }
 
-  if (shells.length === 0) {
+  if (tasks.length === 0) {
     return (
       <Box
         flexDirection="column"
@@ -239,9 +245,9 @@ export const BashShellManager: React.FC<BashShellManagerProps> = ({
         paddingTop={1}
       >
         <Text color="cyan" bold>
-          Background Bash Shells
+          Background Tasks
         </Text>
-        <Text>No background shells found</Text>
+        <Text>No background tasks found</Text>
         <Text dimColor>Press Escape to close</Text>
       </Box>
     );
@@ -260,42 +266,40 @@ export const BashShellManager: React.FC<BashShellManagerProps> = ({
     >
       <Box>
         <Text color="cyan" bold>
-          Background Bash Shells
+          Background Tasks
         </Text>
       </Box>
-      <Text dimColor>Select a shell to view details</Text>
+      <Text dimColor>Select a task to view details</Text>
 
-      {shells.map((shell, index) => (
-        <Box key={shell.id} flexDirection="column">
+      {tasks.map((task, index) => (
+        <Box key={task.id} flexDirection="column">
           <Text
             color={index === selectedIndex ? "black" : "white"}
             backgroundColor={index === selectedIndex ? "cyan" : undefined}
           >
             {index === selectedIndex ? "▶ " : "  "}
-            {index + 1}.{" "}
-            {shell.command.length > 50
-              ? shell.command.substring(0, 47) + "..."
-              : shell.command}
+            {index + 1}. [{task.id}] {task.type}
+            {task.description ? `: ${task.description}` : ""}
             <Text
               color={
-                shell.status === "running"
+                task.status === "running"
                   ? "green"
-                  : shell.status === "completed"
+                  : task.status === "completed"
                     ? "blue"
                     : "red"
               }
             >
               {" "}
-              ({shell.status})
+              ({task.status})
             </Text>
           </Text>
           {index === selectedIndex && (
             <Box marginLeft={4} flexDirection="column">
               <Text color="gray" dimColor>
-                ID: {shell.id} | Started: {formatTime(shell.startTime)}
-                {shell.runtime !== undefined &&
-                  ` | Runtime: ${formatDuration(shell.runtime)}`}
-                {shell.exitCode !== undefined && ` | Exit: ${shell.exitCode}`}
+                Started: {formatTime(task.startTime)}
+                {task.runtime !== undefined &&
+                  ` | Runtime: ${formatDuration(task.runtime)}`}
+                {task.exitCode !== undefined && ` | Exit: ${task.exitCode}`}
               </Text>
             </Box>
           )}
@@ -305,7 +309,7 @@ export const BashShellManager: React.FC<BashShellManagerProps> = ({
       <Box marginTop={1}>
         <Text dimColor>
           ↑/↓ to select · Enter to view ·{" "}
-          {shells[selectedIndex]?.status === "running" ? "k to kill · " : ""}Esc
+          {tasks[selectedIndex]?.status === "running" ? "k to stop · " : ""}Esc
           to close
         </Text>
       </Box>

package/src/components/ToolResultDisplay.tsx

@@ -44,6 +44,9 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
 
   const toolName = name ? String(name) : "Tool";
 
+  const isBackgroundable =
+    stage === "running" && (toolName === "Bash" || toolName === "Task");
+
   // Get shortResult, if not available show last 5 lines of result
   const getShortResult = () => {
     if (block.shortResult) {
@@ -76,6 +79,7 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
         <Text color={getStatusColor()}> {getStatusText()}</Text>
         {/* Display image indicator */}
         {hasImages() && <Text color="blue"> {getImageIndicator()}</Text>}
+        {isBackgroundable && <Text color="gray"> [Ctrl-B] Background</Text>}
       </Box>
 
       {/* Display shortResult in collapsed state */}
@@ -135,8 +139,8 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
         </Box>
       )}
 
-      {/* Diff display - only show after tool execution completes */}
-      {stage === "end" && (
+      {/* Diff display - only show after tool execution completes and was successful */}
+      {stage === "end" && success && (
         <DiffDisplay toolName={name} parameters={parameters} />
       )}
     </Box>

package/src/contexts/PluginManagerContext.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+import { PluginManagerContextType } from "../components/PluginManagerTypes.js";
+
+export const PluginManagerContext =
+  createContext<PluginManagerContextType | null>(null);
+
+export const usePluginManagerContext = () => {
+  const context = useContext(PluginManagerContext);
+  if (!context) {
+    throw new Error(
+      "usePluginManagerContext must be used within a PluginManagerProvider",
+    );
+  }
+  return context;
+};