wave-code 0.4.0 → 0.5.1

package/src/components/Confirmation.tsx

@@ -65,6 +65,7 @@ export interface ConfirmationProps {
 interface ConfirmationState {
   selectedOption: "allow" | "auto" | "alternative";
   alternativeText: string;
+  alternativeCursorPosition: number;
   hasUserInput: boolean; // to hide placeholder
 }
 
@@ -81,6 +82,7 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
   const [state, setState] = useState<ConfirmationState>({
     selectedOption: "allow",
     alternativeText: "",
+    alternativeCursorPosition: 0,
     hasUserInput: false,
   });
 
@@ -92,6 +94,7 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
   >(new Set());
   const [userAnswers, setUserAnswers] = useState<Record<string, string>>({});
   const [otherText, setOtherText] = useState("");
+  const [otherCursorPosition, setOtherCursorPosition] = useState(0);
 
   const questions =
     (toolInput as unknown as AskUserQuestionInput)?.questions || [];
@@ -159,6 +162,7 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
           setSelectedOptionIndex(0);
           setSelectedOptionIndices(new Set());
           setOtherText("");
+          setOtherCursorPosition(0);
         } else {
           // All questions answered
           onDecision({
@@ -207,10 +211,38 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
       }
 
       if (isOtherFocused) {
+        if (key.leftArrow) {
+          setOtherCursorPosition((prev) => Math.max(0, prev - 1));
+          return;
+        }
+        if (key.rightArrow) {
+          setOtherCursorPosition((prev) =>
+            Math.min(otherText.length, prev + 1),
+          );
+          return;
+        }
         if (key.backspace || key.delete) {
-          setOtherText((prev) => prev.slice(0, -1));
-        } else if (input && !key.ctrl && !key.meta) {
-          setOtherText((prev) => prev + input);
+          if (otherCursorPosition > 0) {
+            setOtherText((prev) => {
+              const next =
+                prev.slice(0, otherCursorPosition - 1) +
+                prev.slice(otherCursorPosition);
+              return next;
+            });
+            setOtherCursorPosition((prev) => prev - 1);
+          }
+          return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+          setOtherText((prev) => {
+            const next =
+              prev.slice(0, otherCursorPosition) +
+              input +
+              prev.slice(otherCursorPosition);
+            return next;
+          });
+          setOtherCursorPosition((prev) => prev + input.length);
+          return;
         }
         return;
       }
@@ -253,6 +285,29 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
       return;
     }
 
+    if (state.selectedOption === "alternative") {
+      if (key.leftArrow) {
+        setState((prev) => ({
+          ...prev,
+          alternativeCursorPosition: Math.max(
+            0,
+            prev.alternativeCursorPosition - 1,
+          ),
+        }));
+        return;
+      }
+      if (key.rightArrow) {
+        setState((prev) => ({
+          ...prev,
+          alternativeCursorPosition: Math.min(
+            prev.alternativeText.length,
+            prev.alternativeCursorPosition + 1,
+          ),
+        }));
+        return;
+      }
+    }
+
     // Handle arrow keys for navigation
     if (key.upArrow) {
       setState((prev) => {
@@ -287,27 +342,42 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
     // 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);
+        const nextText =
+          prev.alternativeText.slice(0, prev.alternativeCursorPosition) +
+          input +
+          prev.alternativeText.slice(prev.alternativeCursorPosition);
         return {
           ...prev,
           selectedOption: "alternative",
-          alternativeText: newText,
-          hasUserInput: newText.length > 0,
+          alternativeText: nextText,
+          alternativeCursorPosition:
+            prev.alternativeCursorPosition + input.length,
+          hasUserInput: true,
         };
       });
       return;
     }
+
+    // Handle backspace and delete
+    if (key.backspace || key.delete) {
+      setState((prev) => {
+        if (prev.alternativeCursorPosition > 0) {
+          const nextText =
+            prev.alternativeText.slice(0, prev.alternativeCursorPosition - 1) +
+            prev.alternativeText.slice(prev.alternativeCursorPosition);
+          return {
+            ...prev,
+            selectedOption: "alternative",
+            alternativeText: nextText,
+            alternativeCursorPosition: prev.alternativeCursorPosition - 1,
+            hasUserInput: nextText.length > 0,
+          };
+        }
+        return prev;
+      });
+      return;
+    }
   });
 
   const placeholderText = "Type here to tell Wave what to do differently";
@@ -329,11 +399,7 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
       </Text>
       <Text color="yellow">{getActionDescription(toolName, toolInput)}</Text>
 
-      <DiffDisplay
-        toolName={toolName}
-        parameters={JSON.stringify(toolInput)}
-        isExpanded={isExpanded}
-      />
+      <DiffDisplay toolName={toolName} parameters={JSON.stringify(toolInput)} />
 
       {toolName === ASK_USER_QUESTION_TOOL_NAME &&
         currentQuestion &&
@@ -383,7 +449,15 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
                           {isOther && isSelected && (
                             <Text>
                               :{" "}
-                              {otherText || (
+                              {otherText ? (
+                                <>
+                                  {otherText.slice(0, otherCursorPosition)}
+                                  <Text backgroundColor="white" color="black">
+                                    {otherText[otherCursorPosition] || " "}
+                                  </Text>
+                                  {otherText.slice(otherCursorPosition + 1)}
+                                </>
+                              ) : (
                                 <Text color="gray" dimColor>
                                   [Type your answer...]
                                 </Text>
@@ -474,8 +548,24 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
                   </Text>
                 ) : (
                   <Text>
-                    {state.alternativeText ||
-                      "Type here to tell Wave what to do differently"}
+                    {state.alternativeText ? (
+                      <>
+                        {state.alternativeText.slice(
+                          0,
+                          state.alternativeCursorPosition,
+                        )}
+                        <Text backgroundColor="white" color="black">
+                          {state.alternativeText[
+                            state.alternativeCursorPosition
+                          ] || " "}
+                        </Text>
+                        {state.alternativeText.slice(
+                          state.alternativeCursorPosition + 1,
+                        )}
+                      </>
+                    ) : (
+                      "Type here to tell Wave what to do differently"
+                    )}
                   </Text>
                 )}
               </Text>

package/src/components/DiffDisplay.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { Box, Text, useStdout } from "ink";
+import { Box, Text } from "ink";
 import {
   WRITE_TOOL_NAME,
   EDIT_TOOL_NAME,
@@ -11,19 +11,12 @@ import { diffLines, diffWords } from "diff";
 interface DiffDisplayProps {
   toolName?: string;
   parameters?: string;
-  isExpanded?: boolean;
 }
 
 export const DiffDisplay: React.FC<DiffDisplayProps> = ({
   toolName,
   parameters,
-  isExpanded = false,
 }) => {
-  const { stdout } = useStdout();
-  const maxHeight = useMemo(() => {
-    return Math.max(5, (stdout?.rows || 24) - 20);
-  }, [stdout?.rows]);
-
   const showDiff =
     toolName &&
     [WRITE_TOOL_NAME, EDIT_TOOL_NAME, MULTI_EDIT_TOOL_NAME].includes(toolName);
@@ -107,7 +100,7 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
     }
   };
 
-  // Render expanded diff display using word-level diff for all changes
+  // Render expanded diff display
   const renderExpandedDiff = () => {
     try {
       if (changes.length === 0) return null;
@@ -122,9 +115,8 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
             change.newContent || "",
           );
 
+          // Process line diffs
           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
@@ -175,70 +167,46 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
             }
           });
 
-          // Now look for pairs of removed/added lines that can be word-diffed
-          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 it's a single line change (one removed, one added), use word-level diff
+          if (
+            diffElements.length === 2 &&
+            React.isValidElement(diffElements[0]) &&
+            React.isValidElement(diffElements[1]) &&
+            typeof diffElements[0].key === "string" &&
+            diffElements[0].key.includes("remove-") &&
+            typeof diffElements[1].key === "string" &&
+            diffElements[1].key.includes("add-")
+          ) {
+            const removedText = extractTextFromElement(diffElements[0]);
+            const addedText = extractTextFromElement(diffElements[1]);
 
-            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}`,
-                );
-
-                allElements.push(
-                  <Box
-                    key={`word-diff-removed-${changeIndex}-${i}`}
-                    flexDirection="row"
-                  >
-                    <Text color="red">-</Text>
-                    {removedParts}
-                  </Box>,
-                );
-                allElements.push(
-                  <Box
-                    key={`word-diff-added-${changeIndex}-${i}`}
-                    flexDirection="row"
-                  >
-                    <Text color="green">+</Text>
-                    {addedParts}
-                  </Box>,
-                );
+            if (removedText && addedText) {
+              const { removedParts, addedParts } = renderWordLevelDiff(
+                removedText,
+                addedText,
+                `word-${changeIndex}`,
+              );
 
-                i += 2; // Skip the next element since we processed it
-              } else {
-                // Fallback to original elements
-                allElements.push(current);
-                i += 1;
-              }
+              allElements.push(
+                <Box
+                  key={`word-diff-removed-${changeIndex}`}
+                  flexDirection="row"
+                >
+                  <Text color="red">-</Text>
+                  {removedParts}
+                </Box>,
+              );
+              allElements.push(
+                <Box key={`word-diff-added-${changeIndex}`} flexDirection="row">
+                  <Text color="green">+</Text>
+                  {addedParts}
+                </Box>,
+              );
             } else {
-              allElements.push(current);
-              i += 1;
+              allElements.push(...diffElements);
             }
+          } else {
+            allElements.push(...diffElements);
           }
         } catch (error) {
           console.warn(
@@ -255,21 +223,7 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
         }
       });
 
-      const isTruncated = !isExpanded && allElements.length > maxHeight;
-      const displayElements = isTruncated
-        ? allElements.slice(0, maxHeight - 1)
-        : allElements;
-
-      return (
-        <Box flexDirection="column">
-          {displayElements}
-          {isTruncated && (
-            <Text color="yellow" dimColor>
-              ... (truncated {allElements.length - (maxHeight - 1)} more lines)
-            </Text>
-          )}
-        </Box>
-      );
+      return <Box flexDirection="column">{allElements}</Box>;
     } catch (error) {
       console.warn("Error rendering expanded diff:", error);
       return (
@@ -280,26 +234,6 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
     }
   };
 
-  // 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;
@@ -316,3 +250,23 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
     </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;
+};

package/src/components/InputBox.tsx

@@ -5,7 +5,7 @@ import { FileSelector } from "./FileSelector.js";
 import { CommandSelector } from "./CommandSelector.js";
 import { HistorySearch } from "./HistorySearch.js";
 import { MemoryTypeSelector } from "./MemoryTypeSelector.js";
-import { BashShellManager } from "./BashShellManager.js";
+import { TaskManager } from "./TaskManager.js";
 import { McpManager } from "./McpManager.js";
 import { RewindCommand } from "./RewindCommand.js";
 import { useInputManager } from "../hooks/useInputManager.js";
@@ -58,6 +58,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     permissionMode: chatPermissionMode,
     setPermissionMode: setChatPermissionMode,
     handleRewindSelect,
+    backgroundCurrentTask,
     messages,
   } = useChat();
 
@@ -90,11 +91,11 @@ export const InputBox: React.FC<InputBoxProps> = ({
     // History search
     showHistorySearch,
     historySearchQuery,
-    // Bash/MCP Manager
-    showBashManager,
+    // Task/MCP Manager
+    showTaskManager,
     showMcpManager,
     showRewindManager,
-    setShowBashManager,
+    setShowTaskManager,
     setShowMcpManager,
     setShowRewindManager,
     // Permission mode
@@ -111,6 +112,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     onHasSlashCommand: hasSlashCommand,
     onSaveMemory: saveMemory,
     onAbortMessage: abortMessage,
+    onBackgroundCurrentTask: backgroundCurrentTask,
     onPermissionModeChange: setChatPermissionMode,
   });
 
@@ -216,8 +218,8 @@ export const InputBox: React.FC<InputBoxProps> = ({
         />
       )}
 
-      {showBashManager && (
-        <BashShellManager onCancel={() => setShowBashManager(false)} />
+      {showTaskManager && (
+        <TaskManager onCancel={() => setShowTaskManager(false)} />
       )}
 
       {showMcpManager && (
@@ -229,7 +231,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
         />
       )}
 
-      {showBashManager || showMcpManager || showRewindManager || (
+      {showTaskManager || showMcpManager || showRewindManager || (
         <Box flexDirection="column">
           <Box
             borderStyle="single"

package/src/components/Markdown.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { Box, Text, useStdout } from "ink";
 import { marked, type Token, type Tokens } from "marked";
-import { highlight } from "cli-highlight";
+import { highlight, supportsLanguage } from "cli-highlight";
 
 export interface MarkdownProps {
   children: string;
@@ -225,7 +225,8 @@ const BlockRenderer = ({ tokens }: { tokens: Token[] }) => {
               const content = lines.slice(1, -1).join("\n");
               const highlighted = content
                 ? highlight(unescapeHtml(content), {
-                    language: t.lang,
+                    language:
+                      t.lang && supportsLanguage(t.lang) ? t.lang : undefined,
                     ignoreIllegals: true,
                   })
                 : "";
@@ -271,8 +272,13 @@ const BlockRenderer = ({ tokens }: { tokens: Token[] }) => {
                       </Text>
                       <Box flexDirection="column" flexGrow={1}>
                         {item.tokens.map((itemToken, itemIndex) => {
-                          if (itemToken.type === "text") {
-                            const it = itemToken as Tokens.Text;
+                          if (
+                            itemToken.type === "text" ||
+                            itemToken.type === "paragraph"
+                          ) {
+                            const it = itemToken as
+                              | Tokens.Text
+                              | Tokens.Paragraph;
                             return (
                               <Box key={itemIndex} flexDirection="row">
                                 <Text>

package/src/components/PlanDisplay.tsx

@@ -14,7 +14,7 @@ export const PlanDisplay: React.FC<PlanDisplayProps> = ({
   const { stdout } = useStdout();
   const maxHeight = useMemo(() => {
     // Similar to DiffDisplay.tsx maxHeight calculation
-    return Math.max(5, (stdout?.rows || 24) - 20);
+    return Math.max(5, (stdout?.rows || 24) - 25);
   }, [stdout?.rows]);
 
   const lines = useMemo(() => plan.split("\n"), [plan]);
@@ -22,25 +22,20 @@ export const PlanDisplay: React.FC<PlanDisplayProps> = ({
 
   return (
     <Box flexDirection="column" marginTop={1}>
-      <Box paddingLeft={2} borderLeft borderColor="cyan" flexDirection="column">
-        <Text color="cyan" bold>
-          Plan Content:
-        </Text>
-        <Box
-          flexDirection="column"
-          height={isOverflowing ? maxHeight : undefined}
-          overflow="hidden"
-        >
-          <Markdown>{plan}</Markdown>
-        </Box>
-        {isOverflowing && (
-          <Box marginTop={1}>
-            <Text color="yellow" dimColor>
-              ... (plan truncated, {lines.length} lines total)
-            </Text>
-          </Box>
-        )}
+      <Box
+        flexDirection="column"
+        height={isOverflowing ? maxHeight : undefined}
+        overflow="hidden"
+      >
+        <Markdown>{plan}</Markdown>
       </Box>
+      {isOverflowing && (
+        <Box marginTop={1}>
+          <Text color="yellow" dimColor>
+            ... (plan truncated, {lines.length} lines total)
+          </Text>
+        </Box>
+      )}
     </Box>
   );
 };

package/src/components/PluginDetail.tsx

@@ -23,8 +23,8 @@ export const PluginDetail: React.FC = () => {
     );
 
   const INSTALLED_ACTIONS = [
-    { id: "uninstall", label: "Uninstall plugin" },
     { id: "update", label: "Update plugin (reinstall)" },
+    { id: "uninstall", label: "Uninstall plugin" },
   ] as const;
 
   const isInstalledAndEnabled = plugin && "enabled" in plugin && plugin.enabled;

package/src/components/SubagentBlock.tsx

@@ -11,6 +11,11 @@ interface SubagentBlockProps {
 export const SubagentBlock: React.FC<SubagentBlockProps> = ({ block }) => {
   const { subagentMessages } = useChat();
 
+  // If the subagent is running in the background, don't show the block
+  if (block.runInBackground) {
+    return null;
+  }
+
   // Get messages for this subagent from context
   const messages = subagentMessages[block.subagentId] || [];