wave-code 0.7.2 → 0.8.0

package/src/components/InputBox.tsx

@@ -8,6 +8,7 @@ import { BackgroundTaskManager } from "./BackgroundTaskManager.js";
 import { McpManager } from "./McpManager.js";
 import { RewindCommand } from "./RewindCommand.js";
 import { HelpView } from "./HelpView.js";
+import { StatusCommand } from "./StatusCommand.js";
 import { useInputManager } from "../hooks/useInputManager.js";
 import { useChat } from "../contexts/useChat.js";
 
@@ -57,6 +58,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     backgroundCurrentTask,
     messages,
     getFullMessageThread,
+    clearMessages,
   } = useChat();
 
   // Input manager with all input state and functionality (including images)
@@ -88,10 +90,12 @@ export const InputBox: React.FC<InputBoxProps> = ({
     showMcpManager,
     showRewindManager,
     showHelp,
+    showStatusCommand,
     setShowBackgroundTaskManager,
     setShowMcpManager,
     setShowRewindManager,
     setShowHelp,
+    setShowStatusCommand,
     // Permission mode
     permissionMode,
     setPermissionMode,
@@ -105,6 +109,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     onAbortMessage: abortMessage,
     onBackgroundCurrentTask: backgroundCurrentTask,
     onPermissionModeChange: setChatPermissionMode,
+    onClearMessages: clearMessages,
   });
 
   // Sync permission mode from useChat to InputManager
@@ -172,6 +177,10 @@ export const InputBox: React.FC<InputBoxProps> = ({
     return <HelpView onCancel={() => setShowHelp(false)} />;
   }
 
+  if (showStatusCommand) {
+    return <StatusCommand onCancel={() => setShowStatusCommand(false)} />;
+  }
+
   return (
     <Box flexDirection="column">
       {showFileSelector && (
@@ -219,7 +228,8 @@ export const InputBox: React.FC<InputBoxProps> = ({
       {showBackgroundTaskManager ||
         showMcpManager ||
         showRewindManager ||
-        showHelp || (
+        showHelp ||
+        showStatusCommand || (
           <Box flexDirection="column">
             <Box
               borderStyle="single"

package/src/components/MarketplaceAddForm.tsx

@@ -3,17 +3,21 @@ import { Box, Text, useInput } from "ink";
 import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
 
 export const MarketplaceAddForm: React.FC = () => {
-  const { actions } = usePluginManagerContext();
+  const { state, actions } = usePluginManagerContext();
   const [source, setSource] = useState("");
 
   useInput((input, key) => {
     if (key.escape) {
       actions.setView("MARKETPLACES");
+    } else if (state.isLoading) {
+      return;
     } else if (key.return) {
-      if (source.trim()) {
-        actions.addMarketplace(source.trim());
-        actions.setView("MARKETPLACES");
-      }
+      setSource((prev) => {
+        if (prev.trim()) {
+          actions.addMarketplace(prev.trim());
+        }
+        return prev;
+      });
     } else if (key.backspace || key.delete) {
       setSource((prev) => prev.slice(0, -1));
     } else if (input.length === 1) {
@@ -28,11 +32,20 @@ export const MarketplaceAddForm: React.FC = () => {
       </Text>
       <Box marginTop={1}>
         <Text>Source (URL or Path): </Text>
-        <Text color="yellow">{source}</Text>
-        <Text color="yellow">_</Text>
+        <Text color={state.isLoading ? "gray" : "yellow"}>{source}</Text>
+        {!state.isLoading && <Text color="yellow">_</Text>}
       </Box>
+      {state.isLoading && (
+        <Box marginTop={1}>
+          <Text color="yellow">⌛ Adding marketplace...</Text>
+        </Box>
+      )}
       <Box marginTop={1}>
-        <Text dimColor>Press Enter to add, Esc to cancel</Text>
+        <Text dimColor>
+          {state.isLoading
+            ? "Please wait..."
+            : "Press Enter to add, Esc to cancel"}
+        </Text>
       </Box>
     </Box>
   );

package/src/components/MarketplaceDetail.tsx

@@ -24,14 +24,13 @@ export const MarketplaceDetail: React.FC = () => {
       setSelectedActionIndex((prev) =>
         prev < ACTIONS.length - 1 ? prev + 1 : 0,
       );
-    } else if (key.return && marketplace) {
+    } else if (key.return && marketplace && !state.isLoading) {
       const action = ACTIONS[selectedActionIndex].id;
       if (action === "update") {
         actions.updateMarketplace(marketplace.name);
       } else {
         actions.removeMarketplace(marketplace.name);
       }
-      actions.setView("MARKETPLACES");
     }
   });
 
@@ -56,19 +55,35 @@ export const MarketplaceDetail: React.FC = () => {
         <Text>Source: {JSON.stringify(marketplace.source)}</Text>
       </Box>
 
+      {state.isLoading && (
+        <Box marginBottom={1}>
+          <Text color="yellow">⌛ Processing operation...</Text>
+        </Box>
+      )}
+
       <Box marginTop={1} flexDirection="column">
         <Text bold>Marketplace Actions:</Text>
         {ACTIONS.map((action, index) => (
           <Text
             key={action.id}
-            color={index === selectedActionIndex ? "yellow" : undefined}
+            color={
+              index === selectedActionIndex
+                ? state.isLoading
+                  ? "gray"
+                  : "yellow"
+                : undefined
+            }
           >
             {index === selectedActionIndex ? "> " : "  "}
             {action.label}
           </Text>
         ))}
         <Box marginTop={1}>
-          <Text dimColor>Use ↑/↓ to select, Enter to confirm</Text>
+          <Text dimColor>
+            {state.isLoading
+              ? "Please wait..."
+              : "Use ↑/↓ to select, Enter to confirm"}
+          </Text>
         </Box>
         <Box marginTop={1}>
           <Text dimColor>Press Esc to go back</Text>

package/src/components/MessageBlockItem.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Box, Text } from "ink";
 import type { Message, MessageBlock } from "wave-agent-sdk";
 import { MessageSource } from "wave-agent-sdk";
-import { CommandOutputDisplay } from "./CommandOutputDisplay.js";
+import { BangDisplay } from "./BangDisplay.js";
 import { ToolDisplay } from "./ToolDisplay.js";
 import { CompressDisplay } from "./CompressDisplay.js";
 import { ReasoningDisplay } from "./ReasoningDisplay.js";
@@ -51,8 +51,8 @@ export const MessageBlockItem = ({
         </Box>
       )}
 
-      {block.type === "command_output" && (
-        <CommandOutputDisplay block={block} isExpanded={isExpanded} />
+      {block.type === "bang" && (
+        <BangDisplay block={block} isExpanded={isExpanded} />
       )}
 
       {block.type === "tool" && (

package/src/components/MessageList.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import os from "os";
 import { Box, Text, Static } from "ink";
 import type { Message } from "wave-agent-sdk";
 import { MessageBlockItem } from "./MessageBlockItem.js";
@@ -7,6 +8,9 @@ export interface MessageListProps {
   messages: Message[];
   isExpanded?: boolean;
   hideDynamicBlocks?: boolean;
+  version?: string;
+  workdir?: string;
+  model?: string;
 }
 
 export const MessageList = React.memo(
@@ -14,17 +18,23 @@ export const MessageList = React.memo(
     messages,
     isExpanded = false,
     hideDynamicBlocks = false,
+    version,
+    workdir,
+    model,
   }: MessageListProps) => {
-    // Empty message state
-    if (messages.length === 0) {
-      return (
-        <Box flexDirection="column" gap={1}>
-          <Box flexDirection="column" paddingY={1}>
-            <Text color="gray">Welcome to WAVE Code Assistant!</Text>
-          </Box>
-        </Box>
-      );
-    }
+    const welcomeMessage = (
+      <Box flexDirection="column" paddingTop={1}>
+        <Text color="gray">
+          WAVE{version ? ` v${version}` : ""}
+          {model ? ` • ${model}` : ""}
+        </Text>
+        {workdir && (
+          <Text color="gray" wrap="truncate-middle">
+            {workdir.replace(os.homedir(), "~")}
+          </Text>
+        )}
+      </Box>
+    );
 
     // Limit messages when expanded to prevent long rendering times
     const maxExpandedMessages = 20;
@@ -54,7 +64,7 @@ export const MessageList = React.memo(
       const isDynamic =
         isLastMessage &&
         ((block.type === "tool" && block.stage !== "end") ||
-          (block.type === "command_output" && block.isRunning));
+          (block.type === "bang" && block.isRunning));
       return { ...item, isDynamic };
     });
 
@@ -63,20 +73,34 @@ export const MessageList = React.memo(
       ? []
       : blocksWithStatus.filter((b) => b.isDynamic);
 
+    const staticItems = [
+      { isWelcome: true, key: "welcome", block: undefined, message: undefined },
+      ...staticBlocks.map((b) => ({ ...b, isWelcome: false })),
+    ];
+
     return (
       <Box flexDirection="column" paddingBottom={1}>
-        {/* Static blocks */}
-        {staticBlocks.length > 0 && (
-          <Static items={staticBlocks}>
-            {(item) => (
-              <MessageBlockItem
-                key={item.key}
-                block={item.block}
-                message={item.message}
-                isExpanded={isExpanded}
-                paddingTop={1}
-              />
-            )}
+        {/* Static items (Welcome message + Static blocks) */}
+        {staticItems.length > 0 && (
+          <Static items={staticItems}>
+            {(item) => {
+              if (item.isWelcome) {
+                return (
+                  <React.Fragment key={item.key}>
+                    {welcomeMessage}
+                  </React.Fragment>
+                );
+              }
+              return (
+                <MessageBlockItem
+                  key={item.key}
+                  block={item.block!}
+                  message={item.message!}
+                  isExpanded={isExpanded}
+                  paddingTop={1}
+                />
+              );
+            }}
           </Static>
         )}
 

package/src/components/PluginDetail.tsx

@@ -49,7 +49,7 @@ export const PluginDetail: React.FC = () => {
       setSelectedScopeIndex((prev) =>
         prev < SCOPES.length - 1 ? prev + 1 : 0,
       );
-    } else if (key.return && plugin) {
+    } else if (key.return && plugin && !state.isLoading) {
       if (isInstalledAndEnabled) {
         setSelectedActionIndex((prev) => {
           const action = INSTALLED_ACTIONS[prev].id;
@@ -70,7 +70,6 @@ export const PluginDetail: React.FC = () => {
           return prev;
         });
       }
-      actions.setView("INSTALLED");
     }
   });
 
@@ -102,6 +101,11 @@ export const PluginDetail: React.FC = () => {
           </Text>
         </Box>
       )}
+      {state.isLoading && (
+        <Box marginBottom={1}>
+          <Text color="yellow">⌛ Processing operation...</Text>
+        </Box>
+      )}
 
       <Box marginTop={1} flexDirection="column">
         {isInstalledAndEnabled ? (
@@ -110,14 +114,24 @@ export const PluginDetail: React.FC = () => {
             {INSTALLED_ACTIONS.map((action, index) => (
               <Text
                 key={action.id}
-                color={index === selectedActionIndex ? "yellow" : undefined}
+                color={
+                  index === selectedActionIndex
+                    ? state.isLoading
+                      ? "gray"
+                      : "yellow"
+                    : undefined
+                }
               >
                 {index === selectedActionIndex ? "> " : "  "}
                 {action.label}
               </Text>
             ))}
             <Box marginTop={1}>
-              <Text dimColor>Use ↑/↓ to select, Enter to confirm</Text>
+              <Text dimColor>
+                {state.isLoading
+                  ? "Please wait..."
+                  : "Use ↑/↓ to select, Enter to confirm"}
+              </Text>
             </Box>
           </Box>
         ) : (
@@ -126,14 +140,24 @@ export const PluginDetail: React.FC = () => {
             {SCOPES.map((scope, index) => (
               <Text
                 key={scope.id}
-                color={index === selectedScopeIndex ? "green" : undefined}
+                color={
+                  index === selectedScopeIndex
+                    ? state.isLoading
+                      ? "gray"
+                      : "green"
+                    : undefined
+                }
               >
                 {index === selectedScopeIndex ? "> " : "  "}
                 {scope.label}
               </Text>
             ))}
             <Box marginTop={1}>
-              <Text dimColor>Use ↑/↓ to select, Enter to install</Text>
+              <Text dimColor>
+                {state.isLoading
+                  ? "Please wait..."
+                  : "Use ↑/↓ to select, Enter to install"}
+              </Text>
             </Box>
           </Box>
         )}

package/src/components/PluginManagerShell.tsx

@@ -172,14 +172,32 @@ export const PluginManagerShell: React.FC<{ children?: React.ReactNode }> = ({
           borderLeft={false}
           borderRight={false}
         >
-          <Text dimColor>
-            {state.isLoading
-              ? "Loading..."
-              : "Use Tab to switch views, arrows to navigate, Enter to select, Esc to go back"}
-          </Text>
+          <Box flexGrow={1}>
+            <Text dimColor>
+              {state.isLoading
+                ? "Loading..."
+                : "Use Tab to switch views, arrows to navigate, Enter to select, Esc to go back"}
+            </Text>
+          </Box>
+          {state.isLoading && (
+            <Box marginLeft={2}>
+              <Text color="yellow" bold>
+                ⌛ Processing...
+              </Text>
+            </Box>
+          )}
+          {state.successMessage && (
+            <Box marginLeft={2}>
+              <Text color="green" bold>
+                ✓ {state.successMessage}
+              </Text>
+            </Box>
+          )}
           {state.error && (
             <Box marginLeft={2}>
-              <Text color="red">Error: {state.error}</Text>
+              <Text color="red" bold>
+                ✗ Error: {state.error}
+              </Text>
             </Box>
           )}
         </Box>

package/src/components/PluginManagerTypes.ts

@@ -17,6 +17,7 @@ export interface PluginManagerState {
   selectedId: string | null; // Plugin name or Marketplace name
   isLoading: boolean;
   error: string | null;
+  successMessage: string | null;
   searchQuery: string;
 }
 
@@ -43,5 +44,6 @@ export interface PluginManagerContextType {
     uninstallPlugin: (name: string, marketplace: string) => Promise<void>;
     updatePlugin: (name: string, marketplace: string) => Promise<void>;
     refresh: () => Promise<void>;
+    clearPluginFeedback: () => void;
   };
 }

package/src/components/SessionSelector.tsx

@@ -56,15 +56,18 @@ export const SessionSelector: React.FC<SessionSelectorProps> = ({
     );
   }
 
-  const maxDisplay = 10;
+  const MAX_VISIBLE_ITEMS = 3;
   const startIndex = Math.max(
     0,
     Math.min(
-      selectedIndex - Math.floor(maxDisplay / 2),
-      sessions.length - maxDisplay,
+      selectedIndex - Math.floor(MAX_VISIBLE_ITEMS / 2),
+      Math.max(0, sessions.length - MAX_VISIBLE_ITEMS),
     ),
   );
-  const displaySessions = sessions.slice(startIndex, startIndex + maxDisplay);
+  const displaySessions = sessions.slice(
+    startIndex,
+    startIndex + MAX_VISIBLE_ITEMS,
+  );
 
   return (
     <Box
@@ -92,26 +95,40 @@ export const SessionSelector: React.FC<SessionSelectorProps> = ({
           return (
             <Box key={session.id} flexDirection="column" width="100%">
               <Box width="100%">
-                <Text
-                  color={isSelected ? "black" : "white"}
+                <Box
                   backgroundColor={isSelected ? "cyan" : undefined}
+                  flexShrink={0}
                 >
-                  {isSelected ? "▶ " : "  "}
-                  {session.id} | {lastActiveAt} | {session.latestTotalTokens}{" "}
-                  tokens
-                </Text>
-              </Box>
-              <Box marginLeft={4} width="100%">
-                <Text dimColor italic>
-                  {session.firstMessage}
-                </Text>
+                  <Text color={isSelected ? "black" : "white"}>
+                    {isSelected ? "▶ " : "  "}
+                  </Text>
+                </Box>
+                <Box
+                  backgroundColor={isSelected ? "cyan" : undefined}
+                  flexGrow={1}
+                >
+                  <Text
+                    color={isSelected ? "black" : "white"}
+                    wrap="truncate-end"
+                  >
+                    {session.id} | {lastActiveAt} | {session.latestTotalTokens}{" "}
+                    tokens
+                  </Text>
+                </Box>
               </Box>
+              {isSelected && session.firstMessage && (
+                <Box marginLeft={2} width="100%">
+                  <Text dimColor italic wrap="truncate-end">
+                    {session.firstMessage.replace(/\n/g, "\\n")}
+                  </Text>
+                </Box>
+              )}
             </Box>
           );
         })}
       </Box>
 
-      {sessions.length > maxDisplay && (
+      {sessions.length > MAX_VISIBLE_ITEMS && (
         <Box>
           <Text dimColor>
             ... showing {displaySessions.length} of {sessions.length} sessions

package/src/components/StatusCommand.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { useChat } from "../contexts/useChat.js";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export interface StatusCommandProps {
+  onCancel: () => void;
+}
+
+export const StatusCommand: React.FC<StatusCommandProps> = ({ onCancel }) => {
+  const { sessionId, workingDirectory, getGatewayConfig, getModelConfig } =
+    useChat();
+
+  useInput((_, key) => {
+    if (key.escape) {
+      onCancel();
+    }
+  });
+
+  const gatewayConfig = getGatewayConfig();
+  const modelConfig = getModelConfig();
+
+  let version = "unknown";
+  try {
+    const pkgPath = path.resolve(__dirname, "../../package.json");
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+    version = pkg.version;
+  } catch {
+    // Fallback if package.json cannot be read
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      borderLeft={false}
+      borderRight={false}
+      paddingX={1}
+    >
+      <Box marginBottom={1}>
+        <Text color="cyan" bold underline>
+          Agent Status
+        </Text>
+      </Box>
+
+      <Box>
+        <Box width={20}>
+          <Text color="yellow">Version:</Text>
+        </Box>
+        <Text color="white">{version}</Text>
+      </Box>
+
+      <Box>
+        <Box width={20}>
+          <Text color="yellow">Session ID:</Text>
+        </Box>
+        <Text color="white">{sessionId}</Text>
+      </Box>
+
+      <Box>
+        <Box width={20}>
+          <Text color="yellow">cwd:</Text>
+        </Box>
+        <Text color="white" wrap="wrap">
+          {workingDirectory}
+        </Text>
+      </Box>
+
+      <Box>
+        <Box width={20}>
+          <Text color="yellow">Wave base URL:</Text>
+        </Box>
+        <Text color="white">{gatewayConfig.baseURL}</Text>
+      </Box>
+
+      <Box>
+        <Box width={20}>
+          <Text color="yellow">Model:</Text>
+        </Box>
+        <Text color="white">{modelConfig.model}</Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text dimColor>Esc to cancel</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/components/WorktreeExitPrompt.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+
+interface WorktreeExitPromptProps {
+  name: string;
+  path: string;
+  hasUncommittedChanges: boolean;
+  hasNewCommits: boolean;
+  onKeep: () => void;
+  onRemove: () => void;
+  onCancel: () => void;
+}
+
+export const WorktreeExitPrompt: React.FC<WorktreeExitPromptProps> = ({
+  name,
+  path: worktreePath,
+  hasUncommittedChanges,
+  hasNewCommits,
+  onKeep,
+  onRemove,
+  onCancel,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setSelectedIndex((prev) => (prev === 0 ? 1 : 0));
+    }
+    if (key.downArrow) {
+      setSelectedIndex((prev) => (prev === 1 ? 0 : 1));
+    }
+    if (key.return) {
+      if (selectedIndex === 0) {
+        onKeep();
+      } else {
+        onRemove();
+      }
+    }
+    if (key.escape) {
+      onCancel();
+    }
+  });
+
+  return (
+    <Box flexDirection="column" paddingX={1} marginY={1}>
+      <Box marginBottom={1}>
+        <Text bold>Exiting worktree session</Text>
+      </Box>
+      <Box marginBottom={1}>
+        {hasUncommittedChanges && hasNewCommits ? (
+          <Text>
+            You have uncommitted changes and new commits. These will be lost if
+            you remove the worktree.
+          </Text>
+        ) : hasUncommittedChanges ? (
+          <Text>
+            You have uncommitted changes. These will be lost if you remove the
+            worktree.
+          </Text>
+        ) : (
+          <Text>
+            You have new commits on worktree-{name}. The branch will be deleted
+            if you remove the worktree.
+          </Text>
+        )}
+      </Box>
+      <Box flexDirection="column">
+        <Box>
+          <Text color={selectedIndex === 0 ? "cyan" : undefined}>
+            {selectedIndex === 0 ? "❯ " : "  "}Keep worktree Stays at{" "}
+            {worktreePath}
+          </Text>
+        </Box>
+        <Box>
+          <Text color={selectedIndex === 1 ? "cyan" : undefined}>
+            {selectedIndex === 1 ? "❯ " : "  "}Remove worktree All changes and
+            commits will be lost.
+          </Text>
+        </Box>
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>Enter to confirm · Esc to cancel</Text>
+      </Box>
+    </Box>
+  );
+};