wave-code 0.5.0 → 0.6.2

package/src/components/CommandOutputDisplay.tsx

@@ -13,7 +13,7 @@ export const CommandOutputDisplay: React.FC<CommandOutputDisplayProps> = ({
 }) => {
   const { command, output, isRunning, exitCode } = block;
   const [isOverflowing, setIsOverflowing] = useState(false);
-  const MAX_LINES = 10; // Set maximum display lines
+  const MAX_LINES = 3; // Set maximum display lines
 
   // Detect if content is overflowing
   useEffect(() => {
@@ -30,50 +30,28 @@ export const CommandOutputDisplay: React.FC<CommandOutputDisplayProps> = ({
     return "gray"; // Unknown state
   };
 
-  const getStatusText = () => {
-    if (isRunning) return "🔄";
-    if (exitCode === 0) return "✅";
-    if (exitCode === 130) return "⚠️"; // SIGINT (Ctrl+C)
-    if (exitCode !== null && exitCode !== 0) return "❌";
-    return ""; // Don't display text for unknown state
-  };
-
   return (
     <Box flexDirection="column">
       <Box>
-        <Text color="cyan">$ </Text>
+        <Text color={getStatusColor()}>$ </Text>
         <Text color="white">{command}</Text>
-        <Text color={getStatusColor()}> {getStatusText()}</Text>
       </Box>
 
       {output && (
-        <Box marginTop={1} flexDirection="column">
-          <Box
-            paddingLeft={2}
-            borderLeft
-            borderColor="gray"
-            flexDirection="column"
-            height={
-              isExpanded
-                ? undefined
-                : Math.min(output.split("\n").length, MAX_LINES)
-            }
-            overflow="hidden"
-          >
-            <Text color="gray">
-              {isOverflowing
-                ? output.split("\n").slice(-MAX_LINES).join("\n")
-                : output}
-            </Text>
-          </Box>
-          {isOverflowing && (
-            <Box paddingLeft={2} marginTop={1}>
-              <Text color="yellow" dimColor>
-                Content truncated ({output.split("\n").length} lines total,
-                showing last {MAX_LINES} lines)
-              </Text>
-            </Box>
-          )}
+        <Box
+          paddingLeft={2}
+          height={
+            isExpanded
+              ? undefined
+              : Math.min(output.split("\n").length, MAX_LINES)
+          }
+          overflow="hidden"
+        >
+          <Text color="gray">
+            {isOverflowing
+              ? output.split("\n").slice(-MAX_LINES).join("\n")
+              : output}
+          </Text>
         </Box>
       )}
     </Box>

package/src/components/CommandSelector.tsx

@@ -22,6 +22,12 @@ const AVAILABLE_COMMANDS: SlashCommand[] = [
       "Revert conversation and file changes to a previous checkpoint",
     handler: () => {}, // Handler here won't be used, actual processing is in the hook
   },
+  {
+    id: "help",
+    name: "help",
+    description: "Show help and key bindings",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
 ];
 
 export interface CommandSelectorProps {
@@ -39,6 +45,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 +58,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 +121,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 +136,6 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
       borderBottom={false}
       borderLeft={false}
       borderRight={false}
-      paddingTop={1}
       gap={1}
     >
       <Box>
@@ -126,23 +144,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";