wave-code 0.0.5 → 0.0.8

package/src/cli.tsx

@@ -6,10 +6,11 @@ import { cleanupLogs } from "./utils/logger.js";
 export interface CliOptions {
   restoreSessionId?: string;
   continueLastSession?: boolean;
+  bypassPermissions?: boolean;
 }
 
 export async function startCli(options: CliOptions): Promise<void> {
-  const { restoreSessionId, continueLastSession } = options;
+  const { restoreSessionId, continueLastSession, bypassPermissions } = options;
 
   // Continue with ink-based UI for normal mode
   // Global cleanup tracker
@@ -63,6 +64,7 @@ export async function startCli(options: CliOptions): Promise<void> {
     <App
       restoreSessionId={restoreSessionId}
       continueLastSession={continueLastSession}
+      bypassPermissions={bypassPermissions}
     />,
   );
 

package/src/components/App.tsx

@@ -6,11 +6,14 @@ import { AppProvider } from "../contexts/useAppConfig.js";
 interface AppProps {
   restoreSessionId?: string;
   continueLastSession?: boolean;
+  bypassPermissions?: boolean;
 }
 
-const AppWithProviders: React.FC = () => {
+const AppWithProviders: React.FC<{ bypassPermissions?: boolean }> = ({
+  bypassPermissions,
+}) => {
   return (
-    <ChatProvider>
+    <ChatProvider bypassPermissions={bypassPermissions}>
       <ChatInterface />
     </ChatProvider>
   );
@@ -19,13 +22,14 @@ const AppWithProviders: React.FC = () => {
 export const App: React.FC<AppProps> = ({
   restoreSessionId,
   continueLastSession,
+  bypassPermissions,
 }) => {
   return (
     <AppProvider
       restoreSessionId={restoreSessionId}
       continueLastSession={continueLastSession}
     >
-      <AppWithProviders />
+      <AppWithProviders bypassPermissions={bypassPermissions} />
     </AppProvider>
   );
 };

package/src/components/BashHistorySelector.tsx

@@ -1,6 +1,10 @@
 import React, { useState, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
-import { searchBashHistory, type BashHistoryEntry } from "wave-agent-sdk";
+import {
+  searchBashHistory,
+  deleteBashCommandFromHistory,
+  type BashHistoryEntry,
+} from "wave-agent-sdk";
 import { logger } from "../utils/logger.js";
 
 export interface BashHistorySelectorProps {
@@ -20,6 +24,7 @@ export const BashHistorySelector: React.FC<BashHistorySelectorProps> = ({
 }) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [commands, setCommands] = useState<BashHistoryEntry[]>([]);
+  const [refreshCounter, setRefreshCounter] = useState(0);
 
   // Search bash history
   useEffect(() => {
@@ -30,8 +35,9 @@ export const BashHistorySelector: React.FC<BashHistorySelectorProps> = ({
       searchQuery,
       workdir,
       resultCount: results.length,
+      refreshCounter,
     });
-  }, [searchQuery, workdir]);
+  }, [searchQuery, workdir, refreshCounter]);
 
   useInput((input, key) => {
     logger.debug("BashHistorySelector useInput:", {
@@ -77,6 +83,22 @@ export const BashHistorySelector: React.FC<BashHistorySelectorProps> = ({
       setSelectedIndex(Math.min(commands.length - 1, selectedIndex + 1));
       return;
     }
+
+    if (key.delete) {
+      if (commands.length > 0 && selectedIndex < commands.length) {
+        const selectedCommand = commands[selectedIndex];
+        deleteBashCommandFromHistory(
+          selectedCommand.command,
+          selectedCommand.workdir,
+        );
+        setRefreshCounter((prev) => prev + 1);
+        // Adjust selectedIndex if we deleted the last item
+        if (selectedIndex >= commands.length - 1 && selectedIndex > 0) {
+          setSelectedIndex(selectedIndex - 1);
+        }
+      }
+      return;
+    }
   });
 
   if (commands.length === 0) {
@@ -155,7 +177,8 @@ export const BashHistorySelector: React.FC<BashHistorySelectorProps> = ({
 
       <Box>
         <Text dimColor>
-          Use ↑↓ to navigate, Enter to execute, Tab to insert, Escape to cancel
+          Use ↑↓ to navigate, Enter to execute, Tab to insert, Delete to remove,
+          Escape to cancel
         </Text>
       </Box>
     </Box>

package/src/components/ChatInterface.tsx

@@ -1,9 +1,9 @@
-import React, { useRef, useEffect } from "react";
+import React from "react";
 import { Box } from "ink";
 import { MessageList } from "./MessageList.js";
 import { InputBox } from "./InputBox.js";
+import { Confirmation } from "./Confirmation.js";
 import { useChat } from "../contexts/useChat.js";
-import type { Message } from "wave-agent-sdk";
 
 export const ChatInterface: React.FC = () => {
   const {
@@ -19,70 +19,54 @@ export const ChatInterface: React.FC = () => {
     connectMcpServer,
     disconnectMcpServer,
     isExpanded,
+    sessionId,
     latestTotalTokens,
     slashCommands,
     hasSlashCommand,
+    isConfirmationVisible,
+    confirmingTool,
+    handleConfirmationDecision,
+    handleConfirmationCancel,
   } = useChat();
 
-  // Create a ref to store messages in expanded mode
-  const expandedMessagesRef = useRef<Message[]>([]);
-
-  useEffect(() => {
-    // Only sync when collapsed
-    if (!isExpanded) {
-      expandedMessagesRef.current = messages.map((message, index) => {
-        // If it's the last message, deep copy its blocks
-        if (index === messages.length - 1) {
-          return {
-            ...message,
-            blocks: message.blocks.map((block) => ({ ...block })),
-          };
-        }
-        return message;
-      });
-    }
-  }, [isExpanded, messages]);
+  if (!sessionId) return null;
 
   return (
-    <Box flexDirection="column" height="100%">
-      <Box flexGrow={1} flexDirection="column" paddingX={1}>
-        {isExpanded ? (
-          // Expanded mode uses messages from ref, loading and tokens are hardcoded to false and 0
-          <MessageList
-            messages={expandedMessagesRef.current}
-            isLoading={false}
-            isCommandRunning={false}
-            latestTotalTokens={0}
-            isExpanded={true}
+    <Box flexDirection="column" height="100%" paddingY={1}>
+      <MessageList
+        messages={messages}
+        isLoading={isLoading}
+        isCommandRunning={isCommandRunning}
+        isCompressing={isCompressing}
+        latestTotalTokens={latestTotalTokens}
+        isExpanded={isExpanded}
+        key={String(isExpanded) + sessionId}
+      />
+
+      {!isExpanded &&
+        (isConfirmationVisible ? (
+          <Confirmation
+            toolName={confirmingTool!.name}
+            toolInput={confirmingTool!.input}
+            onDecision={handleConfirmationDecision}
+            onCancel={handleConfirmationCancel}
+            onAbort={abortMessage}
           />
         ) : (
-          // Normal mode uses real-time state
-          <MessageList
-            messages={messages}
+          <InputBox
             isLoading={isLoading}
             isCommandRunning={isCommandRunning}
-            isCompressing={isCompressing}
-            latestTotalTokens={latestTotalTokens}
-            isExpanded={false}
+            userInputHistory={userInputHistory}
+            sendMessage={sendMessage}
+            abortMessage={abortMessage}
+            saveMemory={saveMemory}
+            mcpServers={mcpServers}
+            connectMcpServer={connectMcpServer}
+            disconnectMcpServer={disconnectMcpServer}
+            slashCommands={slashCommands}
+            hasSlashCommand={hasSlashCommand}
           />
-        )}
-      </Box>
-
-      {!isExpanded && (
-        <InputBox
-          isLoading={isLoading}
-          isCommandRunning={isCommandRunning}
-          userInputHistory={userInputHistory}
-          sendMessage={sendMessage}
-          abortMessage={abortMessage}
-          saveMemory={saveMemory}
-          mcpServers={mcpServers}
-          connectMcpServer={connectMcpServer}
-          disconnectMcpServer={disconnectMcpServer}
-          slashCommands={slashCommands}
-          hasSlashCommand={hasSlashCommand}
-        />
-      )}
+        ))}
     </Box>
   );
 };

package/src/components/CommandSelector.tsx

@@ -41,7 +41,7 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
   const filteredCommands = allCommands.filter(
     (command) =>
       !searchQuery ||
-      command.name.toLowerCase().includes(searchQuery.toLowerCase()),
+      command.id.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
   useInput((input, key) => {
@@ -50,7 +50,7 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
         filteredCommands.length > 0 &&
         selectedIndex < filteredCommands.length
       ) {
-        const selectedCommand = filteredCommands[selectedIndex].name;
+        const selectedCommand = filteredCommands[selectedIndex].id;
         onSelect(selectedCommand);
       }
       return;
@@ -61,7 +61,7 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
         filteredCommands.length > 0 &&
         selectedIndex < filteredCommands.length
       ) {
-        const selectedCommand = filteredCommands[selectedIndex].name;
+        const selectedCommand = filteredCommands[selectedIndex].id;
         onInsert(selectedCommand);
       }
       return;
@@ -116,12 +116,12 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
       </Box>
 
       {filteredCommands.map((command, index) => (
-        <Box key={command.name} flexDirection="column">
+        <Box key={command.id} flexDirection="column">
           <Text
             color={index === selectedIndex ? "black" : "white"}
             backgroundColor={index === selectedIndex ? "magenta" : undefined}
           >
-            {index === selectedIndex ? "▶ " : "  "}/{command.name}
+            {index === selectedIndex ? "▶ " : "  "}/{command.id}
           </Text>
           {index === selectedIndex && (
             <Box marginLeft={4}>

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>
+  );
+};