wave-code 0.0.6 → 0.0.8

package/src/components/Confirmation.tsx

@@ -0,0 +1,253 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import type { PermissionDecision } from "wave-agent-sdk";
+
+// 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":
+      return `Execute command: ${toolInput.command || "unknown command"}`;
+    case "Edit":
+      return `Edit file: ${toolInput.file_path || "unknown file"}`;
+    case "MultiEdit":
+      return `Edit multiple sections in: ${toolInput.file_path || "unknown file"}`;
+    case "Delete":
+      return `Delete file: ${toolInput.target_file || "unknown file"}`;
+    case "Write":
+      return `Write to file: ${toolInput.file_path || "unknown file"}`;
+    default:
+      return "Execute operation";
+  }
+};
+
+export interface ConfirmationProps {
+  toolName: string;
+  toolInput?: Record<string, unknown>;
+  onDecision: (decision: PermissionDecision) => void;
+  onCancel: () => void;
+  onAbort: () => void;
+}
+
+interface ConfirmationState {
+  selectedOption: "allow" | "auto" | "alternative";
+  alternativeText: string;
+  hasUserInput: boolean; // to hide placeholder
+}
+
+export const Confirmation: React.FC<ConfirmationProps> = ({
+  toolName,
+  toolInput,
+  onDecision,
+  onCancel,
+  onAbort,
+}) => {
+  const [state, setState] = useState<ConfirmationState>({
+    selectedOption: "allow",
+    alternativeText: "",
+    hasUserInput: false,
+  });
+
+  const getAutoOptionText = () => {
+    if (toolName === "Bash") {
+      return `Yes, and don't ask again for ${toolInput?.command || "this"} commands in this workdir`;
+    }
+    return "Yes, and auto-accept edits";
+  };
+
+  useInput((input, key) => {
+    // Handle ESC to cancel and abort
+    if (key.escape) {
+      onCancel();
+      onAbort();
+      return;
+    }
+
+    // Handle Enter to confirm selection
+    if (key.return) {
+      if (state.selectedOption === "allow") {
+        onDecision({ behavior: "allow" });
+      } else if (state.selectedOption === "auto") {
+        if (toolName === "Bash") {
+          onDecision({
+            behavior: "allow",
+            newPermissionRule: `Bash(${toolInput?.command})`,
+          });
+        } else {
+          onDecision({
+            behavior: "allow",
+            newPermissionMode: "acceptEdits",
+          });
+        }
+      } else {
+        // For alternative option, require text input
+        if (state.alternativeText.trim()) {
+          onDecision({
+            behavior: "deny",
+            message: state.alternativeText.trim(),
+          });
+        }
+      }
+      return;
+    }
+
+    // Handle numeric keys for quick selection (only if not typing in alternative)
+    if (state.selectedOption !== "alternative" || !state.hasUserInput) {
+      if (input === "1") {
+        onDecision({ behavior: "allow" });
+        return;
+      }
+      if (input === "2") {
+        if (toolName === "Bash") {
+          onDecision({
+            behavior: "allow",
+            newPermissionRule: `Bash(${toolInput?.command})`,
+          });
+        } else {
+          onDecision({
+            behavior: "allow",
+            newPermissionMode: "acceptEdits",
+          });
+        }
+        return;
+      }
+      if (input === "3") {
+        setState((prev) => ({ ...prev, selectedOption: "alternative" }));
+        return;
+      }
+    }
+
+    // Handle arrow keys for navigation
+    if (key.upArrow) {
+      setState((prev) => {
+        if (prev.selectedOption === "alternative")
+          return { ...prev, selectedOption: "auto" };
+        if (prev.selectedOption === "auto")
+          return { ...prev, selectedOption: "allow" };
+        return prev;
+      });
+      return;
+    }
+
+    if (key.downArrow) {
+      setState((prev) => {
+        if (prev.selectedOption === "allow")
+          return { ...prev, selectedOption: "auto" };
+        if (prev.selectedOption === "auto")
+          return { ...prev, selectedOption: "alternative" };
+        return prev;
+      });
+      return;
+    }
+
+    // Handle text input for alternative option
+    if (input && !key.ctrl && !key.meta && !("alt" in key && key.alt)) {
+      // Focus on alternative option when user starts typing
+      setState((prev) => ({
+        selectedOption: "alternative",
+        alternativeText: prev.alternativeText + input,
+        hasUserInput: true,
+      }));
+      return;
+    }
+
+    // Handle backspace and delete (same behavior - delete one character)
+    if (key.backspace || key.delete) {
+      setState((prev) => {
+        const newText = prev.alternativeText.slice(0, -1);
+        return {
+          ...prev,
+          selectedOption: "alternative",
+          alternativeText: newText,
+          hasUserInput: newText.length > 0,
+        };
+      });
+      return;
+    }
+  });
+
+  const placeholderText = "Type here to tell Wave what to do differently";
+  const showPlaceholder =
+    state.selectedOption === "alternative" && !state.hasUserInput;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="yellow"
+      padding={1}
+      marginBottom={1}
+    >
+      <Text color="yellow" bold>
+        Tool: {toolName}
+      </Text>
+      <Text color="yellow">{getActionDescription(toolName, toolInput)}</Text>
+
+      <Box marginTop={1}>
+        <Text>Do you want to proceed?</Text>
+      </Box>
+
+      <Box marginTop={1} flexDirection="column">
+        {/* Option 1: Yes */}
+        <Box key="allow-option">
+          <Text
+            color={state.selectedOption === "allow" ? "black" : "white"}
+            backgroundColor={
+              state.selectedOption === "allow" ? "yellow" : undefined
+            }
+            bold={state.selectedOption === "allow"}
+          >
+            {state.selectedOption === "allow" ? "> " : "  "}1. Yes
+          </Text>
+        </Box>
+
+        {/* Option 2: Auto-accept/Persistent */}
+        <Box key="auto-option">
+          <Text
+            color={state.selectedOption === "auto" ? "black" : "white"}
+            backgroundColor={
+              state.selectedOption === "auto" ? "yellow" : undefined
+            }
+            bold={state.selectedOption === "auto"}
+          >
+            {state.selectedOption === "auto" ? "> " : "  "}2.{" "}
+            {getAutoOptionText()}
+          </Text>
+        </Box>
+
+        {/* Option 3: Alternative */}
+        <Box key="alternative-option">
+          <Text
+            color={state.selectedOption === "alternative" ? "black" : "white"}
+            backgroundColor={
+              state.selectedOption === "alternative" ? "yellow" : undefined
+            }
+            bold={state.selectedOption === "alternative"}
+          >
+            {state.selectedOption === "alternative" ? "> " : "  "}3.{" "}
+            {showPlaceholder ? (
+              <Text color="gray" dimColor>
+                {placeholderText}
+              </Text>
+            ) : (
+              <Text>
+                {state.alternativeText ||
+                  "Type here to tell Wave what to do differently"}
+              </Text>
+            )}
+          </Text>
+        </Box>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text dimColor>Use ↑↓ or 1-3 to navigate • ESC to cancel</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/components/DiffDisplay.tsx

@@ -0,0 +1,300 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import { transformToolBlockToChanges } from "../utils/toolParameterTransforms.js";
+import { diffLines, diffWords } from "diff";
+import type { ToolBlock } from "wave-agent-sdk";
+
+interface DiffDisplayProps {
+  toolBlock: ToolBlock;
+}
+
+export const DiffDisplay: React.FC<DiffDisplayProps> = ({ toolBlock }) => {
+  const showDiff =
+    ["running", "end"].includes(toolBlock.stage) &&
+    toolBlock.name &&
+    ["Write", "Edit", "MultiEdit"].includes(toolBlock.name);
+
+  // Diff detection and transformation using typed parameters
+  const changes = useMemo(() => {
+    if (!showDiff || !toolBlock.name || !toolBlock.parameters) return [];
+    try {
+      // Use local transformation with JSON parsing and type guards
+      return transformToolBlockToChanges(toolBlock.name, toolBlock.parameters);
+    } catch (error) {
+      console.warn("Error transforming tool block to changes:", error);
+      return [];
+    }
+  }, [toolBlock.name, toolBlock.parameters, showDiff]);
+
+  // Render word-level diff between two lines of text
+  const renderWordLevelDiff = (
+    oldLine: string,
+    newLine: string,
+    keyPrefix: string,
+  ) => {
+    try {
+      const changes = diffWords(oldLine, newLine);
+
+      const removedParts: React.ReactNode[] = [];
+      const addedParts: React.ReactNode[] = [];
+
+      changes.forEach((part, index) => {
+        if (part.removed) {
+          removedParts.push(
+            <Text
+              key={`removed-${keyPrefix}-${index}`}
+              color="black"
+              backgroundColor="red"
+            >
+              {part.value}
+            </Text>,
+          );
+        } else if (part.added) {
+          addedParts.push(
+            <Text
+              key={`added-${keyPrefix}-${index}`}
+              color="black"
+              backgroundColor="green"
+            >
+              {part.value}
+            </Text>,
+          );
+        } else {
+          // Unchanged parts
+          removedParts.push(
+            <Text key={`removed-unchanged-${keyPrefix}-${index}`} color="red">
+              {part.value}
+            </Text>,
+          );
+          addedParts.push(
+            <Text key={`added-unchanged-${keyPrefix}-${index}`} color="green">
+              {part.value}
+            </Text>,
+          );
+        }
+      });
+
+      return { removedParts, addedParts };
+    } catch (error) {
+      console.warn("Error rendering word-level diff:", error);
+      // Fallback to simple line display
+      return {
+        removedParts: [
+          <Text key={`fallback-removed-${keyPrefix}`} color="red">
+            {oldLine}
+          </Text>,
+        ],
+        addedParts: [
+          <Text key={`fallback-added-${keyPrefix}`} color="green">
+            {newLine}
+          </Text>,
+        ],
+      };
+    }
+  };
+
+  // Render expanded diff display using word-level diff for all changes
+  const renderExpandedDiff = () => {
+    try {
+      if (changes.length === 0) return null;
+
+      return (
+        <Box flexDirection="column">
+          {changes.map((change, changeIndex) => {
+            try {
+              // Get line-level diff to understand the structure
+              const lineDiffs = diffLines(
+                change.oldContent || "",
+                change.newContent || "",
+              );
+
+              const diffElements: React.ReactNode[] = [];
+
+              // Process line diffs and apply word-level diff to changed lines
+              lineDiffs.forEach((part, partIndex) => {
+                if (part.added) {
+                  const lines = part.value
+                    .split("\n")
+                    .filter((line) => line !== "");
+                  lines.forEach((line, lineIndex) => {
+                    diffElements.push(
+                      <Box
+                        key={`add-${changeIndex}-${partIndex}-${lineIndex}`}
+                        flexDirection="row"
+                      >
+                        <Text color="green">+</Text>
+                        <Text color="green">{line}</Text>
+                      </Box>,
+                    );
+                  });
+                } else if (part.removed) {
+                  const lines = part.value
+                    .split("\n")
+                    .filter((line) => line !== "");
+                  lines.forEach((line, lineIndex) => {
+                    diffElements.push(
+                      <Box
+                        key={`remove-${changeIndex}-${partIndex}-${lineIndex}`}
+                        flexDirection="row"
+                      >
+                        <Text color="red">-</Text>
+                        <Text color="red">{line}</Text>
+                      </Box>,
+                    );
+                  });
+                } else {
+                  // Context lines - show unchanged content
+                  const lines = part.value
+                    .split("\n")
+                    .filter((line) => line !== "");
+                  lines.forEach((line, lineIndex) => {
+                    diffElements.push(
+                      <Box
+                        key={`context-${changeIndex}-${partIndex}-${lineIndex}`}
+                        flexDirection="row"
+                      >
+                        <Text color="white"> </Text>
+                        <Text color="white">{line}</Text>
+                      </Box>,
+                    );
+                  });
+                }
+              });
+
+              // Now look for pairs of removed/added lines that can be word-diffed
+              const processedElements: React.ReactNode[] = [];
+              let i = 0;
+
+              while (i < diffElements.length) {
+                const current = diffElements[i];
+                const next =
+                  i + 1 < diffElements.length ? diffElements[i + 1] : null;
+
+                // Check if we have a removed line followed by an added line
+                const currentKey = React.isValidElement(current)
+                  ? current.key
+                  : "";
+                const nextKey = React.isValidElement(next) ? next.key : "";
+
+                const isCurrentRemoved =
+                  typeof currentKey === "string" &&
+                  currentKey.includes("remove-");
+                const isNextAdded =
+                  typeof nextKey === "string" && nextKey.includes("add-");
+
+                if (
+                  isCurrentRemoved &&
+                  isNextAdded &&
+                  React.isValidElement(current) &&
+                  React.isValidElement(next)
+                ) {
+                  // Extract the text content from the removed and added lines
+                  const removedText = extractTextFromElement(current);
+                  const addedText = extractTextFromElement(next);
+
+                  if (removedText && addedText) {
+                    // Apply word-level diff
+                    const { removedParts, addedParts } = renderWordLevelDiff(
+                      removedText,
+                      addedText,
+                      `word-${changeIndex}-${i}`,
+                    );
+
+                    processedElements.push(
+                      <Box
+                        key={`word-diff-removed-${changeIndex}-${i}`}
+                        flexDirection="row"
+                      >
+                        <Text color="red">-</Text>
+                        {removedParts}
+                      </Box>,
+                    );
+                    processedElements.push(
+                      <Box
+                        key={`word-diff-added-${changeIndex}-${i}`}
+                        flexDirection="row"
+                      >
+                        <Text color="green">+</Text>
+                        {addedParts}
+                      </Box>,
+                    );
+
+                    i += 2; // Skip the next element since we processed it
+                  } else {
+                    // Fallback to original elements
+                    processedElements.push(current);
+                    i += 1;
+                  }
+                } else {
+                  processedElements.push(current);
+                  i += 1;
+                }
+              }
+
+              return (
+                <Box key={changeIndex} flexDirection="column">
+                  {processedElements}
+                </Box>
+              );
+            } catch (error) {
+              console.warn(
+                `Error rendering diff for change ${changeIndex}:`,
+                error,
+              );
+              // Fallback to simple display
+              return (
+                <Box key={changeIndex} flexDirection="column">
+                  <Text color="red">-{change.oldContent || ""}</Text>
+                  <Text color="green">+{change.newContent || ""}</Text>
+                </Box>
+              );
+            }
+          })}
+        </Box>
+      );
+    } catch (error) {
+      console.warn("Error rendering expanded diff:", error);
+      return (
+        <Box>
+          <Text color="gray">Error rendering diff display</Text>
+        </Box>
+      );
+    }
+  };
+
+  // Helper function to extract text content from a React element
+  const extractTextFromElement = (element: React.ReactNode): string | null => {
+    if (!React.isValidElement(element)) return null;
+
+    // Navigate through Box -> Text structure
+    const children = (
+      element.props as unknown as { children?: React.ReactNode[] }
+    ).children;
+    if (Array.isArray(children) && children.length >= 2) {
+      const textElement = children[1]; // Second child should be the Text with content
+      if (
+        React.isValidElement(textElement) &&
+        (textElement.props as unknown as { children?: string }).children
+      ) {
+        return (textElement.props as unknown as { children: string }).children;
+      }
+    }
+    return null;
+  };
+
+  // Don't render anything if no diff should be shown
+  if (!showDiff) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box paddingLeft={2} borderLeft borderColor="cyan" flexDirection="column">
+        <Text color="cyan" bold>
+          Diff:
+        </Text>
+        {renderExpandedDiff()}
+      </Box>
+    </Box>
+  );
+};

package/src/components/FileSelector.tsx

@@ -1,10 +1,8 @@
 import React, { useState } from "react";
 import { Box, Text, useInput } from "ink";
+import type { FileItem } from "wave-agent-sdk";
 
-export interface FileItem {
-  path: string;
-  type: "file" | "directory";
-}
+export { type FileItem } from "wave-agent-sdk";
 
 export interface FileSelectorProps {
   files: FileItem[];

package/src/components/InputBox.tsx

@@ -8,6 +8,7 @@ import { MemoryTypeSelector } from "./MemoryTypeSelector.js";
 import { BashShellManager } from "./BashShellManager.js";
 import { McpManager } from "./McpManager.js";
 import { useInputManager } from "../hooks/useInputManager.js";
+import { useChat } from "../contexts/useChat.js";
 
 import type { McpServerStatus, SlashCommand } from "wave-agent-sdk";
 
@@ -56,6 +57,11 @@ export const InputBox: React.FC<InputBoxProps> = ({
   // Get current working directory - memoized to avoid repeated process.cwd() calls
   const currentWorkdir = useMemo(() => workdir || process.cwd(), [workdir]);
 
+  const {
+    permissionMode: chatPermissionMode,
+    setPermissionMode: setChatPermissionMode,
+  } = useChat();
+
   // Input manager with all input state and functionality (including images)
   const {
     inputText,
@@ -90,6 +96,9 @@ export const InputBox: React.FC<InputBoxProps> = ({
     showMcpManager,
     setShowBashManager,
     setShowMcpManager,
+    // Permission mode
+    permissionMode,
+    setPermissionMode,
     // Input history
     setUserInputHistory,
     // Complex handlers combining multiple operations
@@ -103,8 +112,14 @@ export const InputBox: React.FC<InputBoxProps> = ({
     onHasSlashCommand: hasSlashCommand,
     onSaveMemory: saveMemory,
     onAbortMessage: abortMessage,
+    onPermissionModeChange: setChatPermissionMode,
   });
 
+  // Sync permission mode from useChat to InputManager
+  useEffect(() => {
+    setPermissionMode(chatPermissionMode);
+  }, [chatPermissionMode, setPermissionMode]);
+
   // Set user input history when it changes
   useEffect(() => {
     setUserInputHistory(userInputHistory);
@@ -198,20 +213,28 @@ export const InputBox: React.FC<InputBoxProps> = ({
         />
       )}
       {showBashManager || showMcpManager || (
-        <Box borderStyle="single" borderColor="gray" paddingX={1}>
-          <Text color={isPlaceholder ? "gray" : "white"}>
-            {shouldShowCursor ? (
-              <>
-                {beforeCursor}
-                <Text backgroundColor="white" color="black">
-                  {atCursor}
-                </Text>
-                {afterCursor}
-              </>
-            ) : (
-              displayText
-            )}
-          </Text>
+        <Box flexDirection="column">
+          <Box borderStyle="single" borderColor="gray" paddingX={1}>
+            <Text color={isPlaceholder ? "gray" : "white"}>
+              {shouldShowCursor ? (
+                <>
+                  {beforeCursor}
+                  <Text backgroundColor="white" color="black">
+                    {atCursor}
+                  </Text>
+                  {afterCursor}
+                </>
+              ) : (
+                displayText
+              )}
+            </Text>
+          </Box>
+          <Box paddingX={1}>
+            <Text color="gray">
+              Mode: <Text color="cyan">{permissionMode}</Text> (Shift+Tab to
+              cycle)
+            </Text>
+          </Box>
         </Box>
       )}
     </Box>

package/src/components/MemoryDisplay.tsx

@@ -25,7 +25,7 @@ export const MemoryDisplay: React.FC<MemoryDisplayProps> = ({ block }) => {
     if (!isSuccess) return null;
 
     if (memoryType === "user") {
-      return `Memory saved to ${storagePath || "user-memory.md"}`;
+      return `Memory saved to ${storagePath || "AGENTS.md"}`;
     } else {
       return `Memory saved to ${storagePath || "AGENTS.md"}`;
     }