wave-code 0.5.0 → 0.6.1

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

@@ -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>

package/src/components/ConfirmationDetails.tsx

@@ -0,0 +1,108 @@
+import React, { useLayoutEffect, useRef, useState } from "react";
+import { Box, Text, useStdout, measureElement, Static } from "ink";
+import {
+  BASH_TOOL_NAME,
+  EDIT_TOOL_NAME,
+  MULTI_EDIT_TOOL_NAME,
+  DELETE_FILE_TOOL_NAME,
+  WRITE_TOOL_NAME,
+  EXIT_PLAN_MODE_TOOL_NAME,
+  ASK_USER_QUESTION_TOOL_NAME,
+} from "wave-agent-sdk";
+import { DiffDisplay } from "./DiffDisplay.js";
+import { PlanDisplay } from "./PlanDisplay.js";
+
+// Helper function to generate descriptive action text
+const getActionDescription = (
+  toolName: string,
+  toolInput?: Record<string, unknown>,
+): string => {
+  if (!toolInput) {
+    return "Execute operation";
+  }
+
+  switch (toolName) {
+    case BASH_TOOL_NAME:
+      return `Execute command: ${toolInput.command || "unknown command"}`;
+    case EDIT_TOOL_NAME:
+      return `Edit file: ${toolInput.file_path || "unknown file"}`;
+    case MULTI_EDIT_TOOL_NAME:
+      return `Edit multiple sections in: ${toolInput.file_path || "unknown file"}`;
+    case DELETE_FILE_TOOL_NAME:
+      return `Delete file: ${toolInput.target_file || "unknown file"}`;
+    case WRITE_TOOL_NAME:
+      return `Write to file: ${toolInput.file_path || "unknown file"}`;
+    case EXIT_PLAN_MODE_TOOL_NAME:
+      return "Review and approve the plan";
+    case ASK_USER_QUESTION_TOOL_NAME:
+      return "Answer questions to clarify intent";
+    default:
+      return "Execute operation";
+  }
+};
+
+export interface ConfirmationDetailsProps {
+  toolName: string;
+  toolInput?: Record<string, unknown>;
+  isExpanded?: boolean;
+  onHeightMeasured?: (height: number) => void;
+}
+
+export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
+  toolName,
+  toolInput,
+  isExpanded = false,
+  onHeightMeasured,
+}) => {
+  const { stdout } = useStdout();
+  const [isStatic, setIsStatic] = useState(false);
+  const boxRef = useRef(null);
+
+  useLayoutEffect(() => {
+    if (boxRef.current) {
+      const { height } = measureElement(boxRef.current);
+      const terminalHeight = stdout?.rows || 24;
+      if (height > terminalHeight - 10) {
+        setIsStatic(true);
+      }
+      onHeightMeasured?.(height);
+    }
+  }, [stdout?.rows, onHeightMeasured]);
+
+  const content = (
+    <Box
+      ref={boxRef}
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="yellow"
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      paddingTop={1}
+    >
+      <Text color="yellow" bold>
+        Tool: {toolName}
+      </Text>
+      <Text color="yellow">{getActionDescription(toolName, toolInput)}</Text>
+
+      <DiffDisplay toolName={toolName} parameters={JSON.stringify(toolInput)} />
+
+      {toolName !== ASK_USER_QUESTION_TOOL_NAME &&
+        toolName === EXIT_PLAN_MODE_TOOL_NAME &&
+        !!toolInput?.plan_content && (
+          <PlanDisplay
+            plan={toolInput.plan_content as string}
+            isExpanded={isExpanded}
+          />
+        )}
+    </Box>
+  );
+
+  if (isStatic) {
+    return <Static items={[1]}>{() => content}</Static>;
+  }
+
+  return content;
+};
+
+ConfirmationDetails.displayName = "ConfirmationDetails";