wave-code 0.4.0 → 0.6.1

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

@@ -2,55 +2,57 @@ 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 BackgroundTaskManagerProps {
   onCancel: () => void;
 }
 
-export const BashShellManager: React.FC<BashShellManagerProps> = ({
+export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
   onCancel,
 }) => {
-  const { backgroundShells, getBackgroundShellOutput, killBackgroundShell } =
+  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 +66,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 +93,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 +108,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 +143,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 +183,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 +196,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 +208,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 +227,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 +247,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 +268,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 +311,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/ChatInterface.tsx

@@ -1,20 +1,26 @@
-import React from "react";
-import { Box } from "ink";
+import React, { useState, useCallback } from "react";
+import { Box, useStdout } from "ink";
 import { MessageList } from "./MessageList.js";
 import { InputBox } from "./InputBox.js";
-import { Confirmation } from "./Confirmation.js";
+import { LoadingIndicator } from "./LoadingIndicator.js";
+import { TaskList } from "./TaskList.js";
+import { ConfirmationDetails } from "./ConfirmationDetails.js";
+import { ConfirmationSelector } from "./ConfirmationSelector.js";
+
 import { useChat } from "../contexts/useChat.js";
+import type { PermissionDecision } from "wave-agent-sdk";
 
 export const ChatInterface: React.FC = () => {
+  const { stdout } = useStdout();
+  const [isDetailsTooTall, setIsDetailsTooTall] = useState(false);
+
   const {
     messages,
     isLoading,
     isCommandRunning,
-    userInputHistory,
     isCompressing,
     sendMessage,
     abortMessage,
-    saveMemory,
     mcpServers,
     connectMcpServer,
     disconnectMcpServer,
@@ -26,45 +32,95 @@ export const ChatInterface: React.FC = () => {
     isConfirmationVisible,
     confirmingTool,
     handleConfirmationDecision,
-    handleConfirmationCancel,
-    rewindId,
+    handleConfirmationCancel: originalHandleConfirmationCancel,
+    setWasLastDetailsTooTall,
   } = useChat();
 
+  const handleHeightMeasured = useCallback(
+    (height: number) => {
+      const terminalHeight = stdout?.rows || 24;
+      if (height > terminalHeight - 10) {
+        setIsDetailsTooTall(true);
+      } else {
+        setIsDetailsTooTall(false);
+      }
+    },
+    [stdout?.rows],
+  );
+
+  const handleConfirmationCancel = useCallback(() => {
+    if (isDetailsTooTall) {
+      setWasLastDetailsTooTall((prev) => prev + 1);
+      setIsDetailsTooTall(false);
+    }
+    originalHandleConfirmationCancel();
+  }, [
+    isDetailsTooTall,
+    originalHandleConfirmationCancel,
+    setWasLastDetailsTooTall,
+  ]);
+
+  const wrappedHandleConfirmationDecision = useCallback(
+    (decision: PermissionDecision) => {
+      if (isDetailsTooTall) {
+        setWasLastDetailsTooTall((prev) => prev + 1);
+        setIsDetailsTooTall(false);
+      }
+      handleConfirmationDecision(decision);
+    },
+    [isDetailsTooTall, handleConfirmationDecision, setWasLastDetailsTooTall],
+  );
+
   if (!sessionId) return null;
 
   return (
-    <Box flexDirection="column" height="100%" paddingY={1} paddingRight={1}>
+    <Box flexDirection="column">
       <MessageList
         messages={messages}
         isLoading={isLoading}
         isCommandRunning={isCommandRunning}
-        isCompressing={isCompressing}
-        latestTotalTokens={latestTotalTokens}
         isExpanded={isExpanded}
-        key={String(isExpanded) + sessionId + rewindId}
+        forceStaticLastMessage={isDetailsTooTall}
       />
 
+      {(isLoading || isCommandRunning || isCompressing) &&
+        !isConfirmationVisible && (
+          <LoadingIndicator
+            isLoading={isLoading}
+            isCommandRunning={isCommandRunning}
+            isCompressing={isCompressing}
+            latestTotalTokens={latestTotalTokens}
+          />
+        )}
+      {!isConfirmationVisible && <TaskList />}
+
       {isConfirmationVisible && (
-        <Confirmation
-          toolName={confirmingTool!.name}
-          toolInput={confirmingTool!.input}
-          suggestedPrefix={confirmingTool!.suggestedPrefix}
-          hidePersistentOption={confirmingTool!.hidePersistentOption}
-          isExpanded={isExpanded}
-          onDecision={handleConfirmationDecision}
-          onCancel={handleConfirmationCancel}
-          onAbort={abortMessage}
-        />
+        <>
+          <ConfirmationDetails
+            toolName={confirmingTool!.name}
+            toolInput={confirmingTool!.input}
+            isExpanded={isExpanded}
+            onHeightMeasured={handleHeightMeasured}
+          />
+          <ConfirmationSelector
+            toolName={confirmingTool!.name}
+            toolInput={confirmingTool!.input}
+            suggestedPrefix={confirmingTool!.suggestedPrefix}
+            hidePersistentOption={confirmingTool!.hidePersistentOption}
+            isExpanded={isExpanded}
+            onDecision={wrappedHandleConfirmationDecision}
+            onCancel={handleConfirmationCancel}
+            onAbort={abortMessage}
+          />
+        </>
       )}
 
       {!isConfirmationVisible && !isExpanded && (
         <InputBox
           isLoading={isLoading}
           isCommandRunning={isCommandRunning}
-          userInputHistory={userInputHistory}
           sendMessage={sendMessage}
           abortMessage={abortMessage}
-          saveMemory={saveMemory}
           mcpServers={mcpServers}
           connectMcpServer={connectMcpServer}
           disconnectMcpServer={disconnectMcpServer}

package/src/components/CommandSelector.tsx

@@ -4,9 +4,9 @@ import type { SlashCommand } from "wave-agent-sdk";
 
 const AVAILABLE_COMMANDS: SlashCommand[] = [
   {
-    id: "bashes",
-    name: "bashes",
-    description: "View and manage background bash shells",
+    id: "tasks",
+    name: "tasks",
+    description: "View and manage background tasks (shells and subagents)",
     handler: () => {}, // Handler here won't be used, actual processing is in the hook
   },
   {
@@ -39,6 +39,7 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
   onCancel,
   commands = [], // Default to empty array
 }) => {
+  const MAX_VISIBLE_ITEMS = 3;
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   // Merge agent commands and local commands
@@ -51,6 +52,19 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
       command.id.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
+  // Calculate visible window
+  const startIndex = Math.max(
+    0,
+    Math.min(
+      selectedIndex - Math.floor(MAX_VISIBLE_ITEMS / 2),
+      Math.max(0, filteredCommands.length - MAX_VISIBLE_ITEMS),
+    ),
+  );
+  const visibleCommands = filteredCommands.slice(
+    startIndex,
+    startIndex + MAX_VISIBLE_ITEMS,
+  );
+
   useInput((input, key) => {
     if (key.return) {
       if (
@@ -101,7 +115,6 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
         borderBottom={false}
         borderLeft={false}
         borderRight={false}
-        paddingTop={1}
       >
         <Text color="yellow">No commands found for "{searchQuery}"</Text>
         <Text dimColor>Press Escape to cancel</Text>
@@ -117,7 +130,6 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
       borderBottom={false}
       borderLeft={false}
       borderRight={false}
-      paddingTop={1}
       gap={1}
     >
       <Box>
@@ -126,23 +138,29 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
         </Text>
       </Box>
 
-      {filteredCommands.map((command, index) => (
-        <Box key={command.id} flexDirection="column">
-          <Text
-            color={index === selectedIndex ? "black" : "white"}
-            backgroundColor={index === selectedIndex ? "magenta" : undefined}
-          >
-            {index === selectedIndex ? "▶ " : "  "}/{command.id}
-          </Text>
-          {index === selectedIndex && (
-            <Box marginLeft={4}>
-              <Text color="gray" dimColor>
-                {command.description}
+      <Box flexDirection="column">
+        {visibleCommands.map((command, index) => {
+          const actualIndex = startIndex + index;
+          const isSelected = actualIndex === selectedIndex;
+          return (
+            <Box key={command.id} flexDirection="column">
+              <Text
+                color={isSelected ? "black" : "white"}
+                backgroundColor={isSelected ? "magenta" : undefined}
+              >
+                {isSelected ? "▶ " : "  "}/{command.id}
               </Text>
+              {isSelected && (
+                <Box marginLeft={4}>
+                  <Text color="gray" dimColor>
+                    {command.description}
+                  </Text>
+                </Box>
+              )}
             </Box>
-          )}
-        </Box>
-      ))}
+          );
+        })}
+      </Box>
 
       <Box>
         <Text dimColor>

package/src/components/CompressDisplay.tsx

@@ -7,25 +7,16 @@ interface CompressDisplayProps {
   isExpanded?: boolean;
 }
 
-export const CompressDisplay: React.FC<CompressDisplayProps> = ({
-  block,
-  isExpanded = false,
-}) => {
+export const CompressDisplay: React.FC<CompressDisplayProps> = ({ block }) => {
   const { content } = block;
-  const MAX_LINES = 3; // Set maximum display lines for compressed content
 
-  const { displayContent, isOverflowing } = useMemo(() => {
+  const { displayContent } = useMemo(() => {
     if (!content) {
-      return { displayContent: "", isOverflowing: false };
+      return { displayContent: "" };
     }
 
-    const lines = content.split("\n");
-    const overflow = !isExpanded && lines.length > MAX_LINES;
-
-    const display = overflow ? lines.slice(0, MAX_LINES).join("\n") : content;
-
-    return { displayContent: display, isOverflowing: overflow };
-  }, [content, isExpanded]);
+    return { displayContent: content };
+  }, [content]);
 
   return (
     <Box flexDirection="column">
@@ -43,14 +34,6 @@ export const CompressDisplay: React.FC<CompressDisplayProps> = ({
           >
             <Text color="white">{displayContent}</Text>
           </Box>
-          {isOverflowing && (
-            <Box paddingLeft={2} marginTop={1}>
-              <Text color="yellow" dimColor>
-                Content truncated ({content.split("\n").length} lines total,
-                showing first {MAX_LINES} lines. Press Ctrl+O to expand.
-              </Text>
-            </Box>
-          )}
         </Box>
       )}
     </Box>