wave-code 0.11.6 → 0.12.0

package/src/commands/update.ts

@@ -0,0 +1,116 @@
+import { spawnSync } from "child_process";
+import { readFileSync } from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import https from "https";
+import chalk from "chalk";
+import { isUpdateAvailable } from "../utils/version.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const packageJsonPath = path.resolve(__dirname, "../../package.json");
+const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+const currentVersion = packageJson.version;
+
+async function getLatestVersion(): Promise<string> {
+  return new Promise((resolve, reject) => {
+    https
+      .get("https://registry.npmjs.org/wave-code/latest", (res) => {
+        let data = "";
+        res.on("data", (chunk) => {
+          data += chunk;
+        });
+        res.on("end", () => {
+          try {
+            const json = JSON.parse(data);
+            resolve(json.version);
+          } catch {
+            reject(new Error("Failed to parse npm registry response"));
+          }
+        });
+      })
+      .on("error", (err) => {
+        reject(err);
+      });
+  });
+}
+
+function detectPackageManager(): "npm" | "pnpm" | "yarn" {
+  // Check if wave-code is installed globally with pnpm
+  const pnpmList = spawnSync("pnpm", ["list", "-g", "wave-code"], {
+    encoding: "utf-8",
+  });
+  if (pnpmList.status === 0 && pnpmList.stdout?.includes("wave-code")) {
+    return "pnpm";
+  }
+
+  // Check if wave-code is installed globally with yarn
+  const yarnList = spawnSync("yarn", ["global", "list"], { encoding: "utf-8" });
+  if (yarnList.status === 0 && yarnList.stdout?.includes("wave-code")) {
+    return "yarn";
+  }
+
+  // Default to npm
+  return "npm";
+}
+
+export async function updateCommand() {
+  console.log(chalk.blue(`Checking for updates...`));
+  console.log(chalk.dim(`Current version: ${currentVersion}`));
+
+  try {
+    const latestVersion = await getLatestVersion();
+    console.log(chalk.dim(`Latest version: ${latestVersion}`));
+
+    if (!isUpdateAvailable(currentVersion, latestVersion)) {
+      console.log(chalk.green("WAVE Code is already up to date!"));
+      process.exit(0);
+    }
+
+    console.log(
+      chalk.yellow(`A new version of WAVE Code is available: ${latestVersion}`),
+    );
+
+    const packageManager = detectPackageManager();
+    let updateCmd: string;
+    let args: string[];
+
+    if (packageManager === "pnpm") {
+      updateCmd = "pnpm";
+      args = ["add", "-g", "wave-code@latest"];
+    } else if (packageManager === "yarn") {
+      updateCmd = "yarn";
+      args = ["global", "add", "wave-code@latest"];
+    } else {
+      updateCmd = "npm";
+      args = ["install", "-g", "wave-code@latest"];
+    }
+
+    console.log(chalk.blue(`Updating WAVE Code using ${packageManager}...`));
+    console.log(chalk.dim(`Running: ${updateCmd} ${args.join(" ")}`));
+
+    const result = spawnSync(updateCmd, args, { stdio: "inherit" });
+
+    if (result.status === 0) {
+      console.log(chalk.green("WAVE Code updated successfully!"));
+      process.exit(0);
+    } else {
+      console.log(chalk.red("Failed to update WAVE Code."));
+      console.log(
+        chalk.yellow(
+          `Please try running the update command manually: ${updateCmd} ${args.join(" ")}`,
+        ),
+      );
+      if (process.platform !== "win32") {
+        console.log(
+          chalk.yellow(
+            "You might need to run it with sudo if you encounter permission issues.",
+          ),
+        );
+      }
+      process.exit(1);
+    }
+  } catch (error) {
+    console.error(chalk.red("Error checking for updates:"), error);
+    process.exit(1);
+  }
+}

package/src/components/App.tsx

@@ -133,7 +133,7 @@ const ChatInterfaceWithRemount: React.FC = () => {
 
     if (newKey !== remountKey) {
       const timeout = setTimeout(() => {
-        stdout?.write("\u001b[2J\u001b[0;0H", (err?: Error | null) => {
+        stdout?.write("\u001b[2J\u001b[3J\u001b[0;0H", (err?: Error | null) => {
           if (err) {
             console.error("Failed to clear terminal:", err);
           }

package/src/components/BtwDisplay.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { Markdown } from "./Markdown.js";
+import { BtwState } from "../managers/inputReducer.js";
+
+interface BtwDisplayProps {
+  btwState: BtwState;
+}
+
+export const BtwDisplay: React.FC<BtwDisplayProps> = ({ btwState }) => {
+  if (!btwState.isActive) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={0} marginBottom={1}>
+      {btwState.question && (
+        <Box>
+          <Text color={btwState.isLoading ? "yellow" : "green"}>● </Text>
+          <Text italic color="gray">
+            /btw {btwState.question}
+          </Text>
+        </Box>
+      )}
+
+      {btwState.answer && (
+        <Box flexDirection="column">
+          <Markdown>{btwState.answer}</Markdown>
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/components/ChatInterface.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useLayoutEffect } from "react";
 import { Box, useStdout } from "ink";
 import { MessageList } from "./MessageList.js";
+import { BtwDisplay } from "./BtwDisplay.js";
 import { InputBox } from "./InputBox.js";
 import { LoadingIndicator } from "./LoadingIndicator.js";
 import { TaskList } from "./TaskList.js";
@@ -40,11 +41,9 @@ export const ChatInterface: React.FC = () => {
     setWasLastDetailsTooTall,
     version,
     workdir,
-    getModelConfig,
+    btwState,
   } = useChat();
 
-  const model = getModelConfig().model;
-
   const displayMessages = messages;
 
   const handleDetailsHeightMeasured = useCallback((height: number) => {
@@ -123,21 +122,35 @@ export const ChatInterface: React.FC = () => {
         forceStatic={isConfirmationVisible && isConfirmationTooTall}
         version={version}
         workdir={workdir}
-        model={model}
         onDynamicBlocksHeightMeasured={handleDynamicBlocksHeightMeasured}
       />
 
-      {(isLoading || isCommandRunning || isCompressing) &&
-        !isConfirmationVisible &&
-        !isExpanded && (
-          <LoadingIndicator
+      {!isConfirmationVisible && !isExpanded && (
+        <>
+          <BtwDisplay btwState={btwState} />
+          {(isLoading || isCommandRunning || isCompressing) && (
+            <LoadingIndicator
+              isLoading={isLoading}
+              isCommandRunning={isCommandRunning}
+              isCompressing={isCompressing}
+              latestTotalTokens={latestTotalTokens}
+            />
+          )}
+          <TaskList />
+          <QueuedMessageList />
+          <InputBox
             isLoading={isLoading}
             isCommandRunning={isCommandRunning}
-            isCompressing={isCompressing}
-            latestTotalTokens={latestTotalTokens}
+            sendMessage={sendMessage}
+            abortMessage={abortMessage}
+            mcpServers={mcpServers}
+            connectMcpServer={connectMcpServer}
+            disconnectMcpServer={disconnectMcpServer}
+            slashCommands={slashCommands}
+            hasSlashCommand={hasSlashCommand}
           />
-        )}
-      {!isConfirmationVisible && !isExpanded && <TaskList />}
+        </>
+      )}
 
       {isConfirmationVisible && (
         <>
@@ -162,23 +175,6 @@ export const ChatInterface: React.FC = () => {
           />
         </>
       )}
-
-      {!isConfirmationVisible && !isExpanded && (
-        <>
-          <QueuedMessageList />
-          <InputBox
-            isLoading={isLoading}
-            isCommandRunning={isCommandRunning}
-            sendMessage={sendMessage}
-            abortMessage={abortMessage}
-            mcpServers={mcpServers}
-            connectMcpServer={connectMcpServer}
-            disconnectMcpServer={disconnectMcpServer}
-            slashCommands={slashCommands}
-            hasSlashCommand={hasSlashCommand}
-          />
-        </>
-      )}
     </Box>
   );
 };

package/src/components/ConfirmationDetails.tsx

@@ -9,6 +9,7 @@ import {
 } from "wave-agent-sdk";
 import { DiffDisplay } from "./DiffDisplay.js";
 import { PlanDisplay } from "./PlanDisplay.js";
+import { highlightToAnsi } from "../utils/highlightUtils.js";
 
 // Helper function to generate descriptive action text
 const getActionDescription = (
@@ -87,6 +88,19 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
         startLineNumber={startLineNumber}
       />
 
+      {toolName !== WRITE_TOOL_NAME &&
+        toolName !== EDIT_TOOL_NAME &&
+        toolName !== EXIT_PLAN_MODE_TOOL_NAME &&
+        toolName !== ASK_USER_QUESTION_TOOL_NAME &&
+        toolName !== BASH_TOOL_NAME &&
+        !!toolInput && (
+          <Box paddingLeft={2} borderLeft borderColor="cyan">
+            <Text>
+              {highlightToAnsi(JSON.stringify(toolInput, null, 2), "json")}
+            </Text>
+          </Box>
+        )}
+
       {toolName !== ASK_USER_QUESTION_TOOL_NAME &&
         toolName === EXIT_PLAN_MODE_TOOL_NAME &&
         !!planContent && (

package/src/components/InputBox.tsx

@@ -10,6 +10,8 @@ import { RewindCommand } from "./RewindCommand.js";
 import { HelpView } from "./HelpView.js";
 import { StatusCommand } from "./StatusCommand.js";
 import { PluginManagerShell } from "./PluginManagerShell.js";
+import { ModelSelector } from "./ModelSelector.js";
+import { StatusLine } from "./StatusLine.js";
 import { useInputManager } from "../hooks/useInputManager.js";
 import { useChat } from "../contexts/useChat.js";
 
@@ -54,12 +56,19 @@ export const InputBox: React.FC<InputBoxProps> = ({
   const {
     permissionMode: chatPermissionMode,
     setPermissionMode: setChatPermissionMode,
+    allowBypassInCycle: chatAllowBypassInCycle,
     handleRewindSelect,
     backgroundCurrentTask,
     messages,
     getFullMessageThread,
     sessionId,
     workingDirectory,
+    askBtw,
+    btwState: chatBtwState,
+    setBtwState: setChatBtwState,
+    currentModel,
+    configuredModels,
+    setModel,
   } = useChat();
 
   // Input manager with all input state and functionality (including images)
@@ -94,21 +103,29 @@ export const InputBox: React.FC<InputBoxProps> = ({
     showHelp,
     showStatusCommand,
     showPluginManager,
+    showModelSelector,
     setShowBackgroundTaskManager,
     setShowMcpManager,
     setShowRewindManager,
     setShowHelp,
     setShowStatusCommand,
     setShowPluginManager,
+    setShowModelSelector,
     // Permission mode
     permissionMode,
     setPermissionMode,
+    setAllowBypassInCycle,
+    // BTW state
+    btwState,
     // Main handler
     handleInput,
     // Manager ready state
     isManagerReady,
   } = useInputManager({
     onSendMessage: sendMessage,
+    onAskBtw: askBtw,
+    btwState: chatBtwState,
+    onBtwStateChange: setChatBtwState,
     onHasSlashCommand: hasSlashCommand,
     onAbortMessage: abortMessage,
     onBackgroundCurrentTask: backgroundCurrentTask,
@@ -123,6 +140,11 @@ export const InputBox: React.FC<InputBoxProps> = ({
     setPermissionMode(chatPermissionMode);
   }, [chatPermissionMode, setPermissionMode]);
 
+  // Sync allowBypassInCycle from useChat to InputManager
+  useEffect(() => {
+    setAllowBypassInCycle(chatAllowBypassInCycle);
+  }, [chatAllowBypassInCycle, setAllowBypassInCycle]);
+
   // Use the InputManager's unified input handler
   useInput(async (input, key) => {
     await handleInput(input, key, attachedImages, clearImages);
@@ -189,6 +211,17 @@ export const InputBox: React.FC<InputBoxProps> = ({
     return <PluginManagerShell onCancel={() => setShowPluginManager(false)} />;
   }
 
+  if (showModelSelector) {
+    return (
+      <ModelSelector
+        onCancel={() => setShowModelSelector(false)}
+        currentModel={currentModel}
+        configuredModels={configuredModels}
+        onSelectModel={setModel}
+      />
+    );
+  }
+
   return (
     <Box flexDirection="column">
       {showFileSelector && (
@@ -243,12 +276,19 @@ export const InputBox: React.FC<InputBoxProps> = ({
           <Box flexDirection="column">
             <Box
               borderStyle="single"
-              borderColor="gray"
+              borderColor={btwState.isActive ? "cyan" : "gray"}
               borderLeft={false}
               borderRight={false}
             >
               <Text color={isPlaceholder ? "gray" : "white"}>
-                {shouldShowCursor ? (
+                {btwState.isActive && isPlaceholder ? (
+                  <>
+                    <Text backgroundColor="white" color="black">
+                      {" "}
+                    </Text>
+                    <Text color="cyan">Type your side question...</Text>
+                  </>
+                ) : shouldShowCursor ? (
                   <>
                     {beforeCursor}
                     <Text backgroundColor="white" color="black">
@@ -261,21 +301,11 @@ export const InputBox: React.FC<InputBoxProps> = ({
                 )}
               </Text>
             </Box>
-            <Box paddingRight={1} justifyContent="space-between" width="100%">
-              {isShellCommand ? (
-                <Text color="gray">
-                  Shell: <Text color="yellow">Run shell command</Text>
-                </Text>
-              ) : (
-                <Text color="gray">
-                  Mode:{" "}
-                  <Text color={permissionMode === "plan" ? "yellow" : "cyan"}>
-                    {permissionMode}
-                  </Text>{" "}
-                  (Shift+Tab to cycle)
-                </Text>
-              )}
-            </Box>
+            <StatusLine
+              permissionMode={permissionMode}
+              isShellCommand={isShellCommand}
+              isBtwActive={btwState.isActive}
+            />
           </Box>
         )}
     </Box>

package/src/components/MessageBlockItem.tsx

@@ -3,6 +3,7 @@ import { Box, Text } from "ink";
 import type { Message, MessageBlock } from "wave-agent-sdk";
 import { MessageSource } from "wave-agent-sdk";
 import { BangDisplay } from "./BangDisplay.js";
+import { SlashDisplay } from "./SlashDisplay.js";
 import { ToolDisplay } from "./ToolDisplay.js";
 import { CompressDisplay } from "./CompressDisplay.js";
 import { ReasoningDisplay } from "./ReasoningDisplay.js";
@@ -25,11 +26,6 @@ export const MessageBlockItem = ({
     <Box flexDirection="column" paddingTop={paddingTop}>
       {block.type === "text" && block.content.trim() && (
         <Box>
-          {block.customCommandContent && (
-            <Text color="cyan" bold>
-              ${" "}
-            </Text>
-          )}
           {block.source === MessageSource.HOOK && (
             <Text color="magenta" bold>
               ~{" "}
@@ -48,6 +44,10 @@ export const MessageBlockItem = ({
         </Box>
       )}
 
+      {block.type === "slash" && (
+        <SlashDisplay block={block} isExpanded={isExpanded} />
+      )}
+
       {block.type === "error" && (
         <Box>
           <Text color="red">Error: {block.content}</Text>

package/src/components/MessageList.tsx

@@ -10,7 +10,6 @@ export interface MessageListProps {
   forceStatic?: boolean;
   version?: string;
   workdir?: string;
-  model?: string;
   onDynamicBlocksHeightMeasured?: (height: number) => void;
 }
 
@@ -21,15 +20,11 @@ export const MessageList = React.memo(
     forceStatic = false,
     version,
     workdir,
-    model,
     onDynamicBlocksHeightMeasured,
   }: MessageListProps) => {
     const welcomeMessage = (
       <Box flexDirection="column" paddingTop={1}>
-        <Text color="gray">
-          WAVE{version ? ` v${version}` : ""}
-          {model ? ` • ${model}` : ""}
-        </Text>
+        <Text color="gray">WAVE{version ? ` v${version}` : ""}</Text>
         {workdir && (
           <Text color="gray" wrap="truncate-middle">
             {workdir.replace(os.homedir(), "~")}
@@ -41,8 +36,11 @@ export const MessageList = React.memo(
     // Limit messages to prevent long rendering times
     const maxMessages = 10;
 
+    // Filter out meta messages
+    const visibleMessages = messages.filter((m) => !m.isMeta);
+
     // Flatten messages into blocks with metadata
-    const allBlocks = messages.flatMap((message, messageIndex) => {
+    const allBlocks = visibleMessages.flatMap((message, messageIndex) => {
       return message.blocks.map((block, blockIndex) => ({
         block,
         message,
@@ -58,7 +56,8 @@ export const MessageList = React.memo(
       const isDynamic =
         !forceStatic &&
         ((block.type === "tool" && block.stage === "running") ||
-          (block.type === "bang" && block.isRunning));
+          (block.type === "bang" && block.isRunning) ||
+          (block.type === "slash" && block.stage === "running"));
       return { ...item, isDynamic };
     });
 
@@ -101,8 +100,8 @@ export const MessageList = React.memo(
                 );
               }
               if (
-                messages.length > maxMessages &&
-                item.messageIndex < messages.length - maxMessages
+                visibleMessages.length > maxMessages &&
+                item.messageIndex < visibleMessages.length - maxMessages
               ) {
                 return null;
               }

package/src/components/ModelSelector.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+
+export interface ModelSelectorProps {
+  onCancel: () => void;
+  currentModel: string;
+  configuredModels: string[];
+  onSelectModel: (model: string) => void;
+}
+
+export const ModelSelector: React.FC<ModelSelectorProps> = ({
+  onCancel,
+  currentModel,
+  configuredModels,
+  onSelectModel,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(() => {
+    const index = configuredModels.indexOf(currentModel);
+    return index !== -1 ? index : 0;
+  });
+
+  useInput((_input, key) => {
+    if (key.return) {
+      if (configuredModels.length > 0) {
+        onSelectModel(configuredModels[selectedIndex]);
+      }
+      onCancel();
+      return;
+    }
+
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+      return;
+    }
+
+    if (key.downArrow) {
+      setSelectedIndex((prev) =>
+        Math.min(configuredModels.length - 1, prev + 1),
+      );
+      return;
+    }
+  });
+
+  if (configuredModels.length === 0) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="cyan"
+        borderBottom={false}
+        borderLeft={false}
+        borderRight={false}
+        paddingTop={1}
+      >
+        <Text color="cyan" bold>
+          Select AI Model
+        </Text>
+        <Text>No models configured</Text>
+        <Text dimColor>Press Escape to close</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="cyan"
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      paddingTop={1}
+      gap={1}
+    >
+      <Box>
+        <Text color="cyan" bold>
+          Select AI Model
+        </Text>
+      </Box>
+      <Text dimColor>Select a model to use for the current session</Text>
+
+      {configuredModels.map((model, index) => (
+        <Box key={model}>
+          <Text
+            color={index === selectedIndex ? "black" : "white"}
+            backgroundColor={index === selectedIndex ? "cyan" : undefined}
+          >
+            {index === selectedIndex ? "▶ " : "  "}
+            {model}
+            {model === currentModel ? (
+              <Text color="green"> (current)</Text>
+            ) : (
+              ""
+            )}
+          </Text>
+        </Box>
+      ))}
+
+      <Box marginTop={1}>
+        <Text dimColor>↑/↓ to select · Enter to confirm · Esc to cancel</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/components/RewindCommand.tsx

@@ -30,10 +30,10 @@ export const RewindCommand: React.FC<RewindCommandProps> = ({
     }
   }, [getFullMessageThread]);
 
-  // Filter user messages as checkpoints
+  // Filter user messages as checkpoints, excluding meta messages
   const checkpoints = messages
     .map((msg, index) => ({ msg, index }))
-    .filter(({ msg }) => msg.role === "user");
+    .filter(({ msg }) => msg.role === "user" && !msg.isMeta);
 
   const MAX_VISIBLE_ITEMS = 3;
   const [selectedIndex, setSelectedIndex] = useState(checkpoints.length - 1);