wave-code 0.7.2 → 0.8.1

package/src/components/HelpView.tsx

@@ -1,14 +1,57 @@
-import React from "react";
+import React, { useState } from "react";
 import { Box, Text, useInput } from "ink";
+import type { SlashCommand } from "wave-agent-sdk";
+import { AVAILABLE_COMMANDS } from "../constants/commands.js";
 
 export interface HelpViewProps {
   onCancel: () => void;
+  commands?: SlashCommand[];
 }
 
-export const HelpView: React.FC<HelpViewProps> = ({ onCancel }) => {
+export const HelpView: React.FC<HelpViewProps> = ({
+  onCancel,
+  commands = [],
+}) => {
+  const [activeTab, setActiveTab] = useState<
+    "general" | "commands" | "custom-commands"
+  >("general");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const MAX_VISIBLE_ITEMS = 10;
+
+  const tabs: ("general" | "commands" | "custom-commands")[] = [
+    "general",
+    "commands",
+  ];
+  if (commands.length > 0) {
+    tabs.push("custom-commands");
+  }
+
   useInput((_, key) => {
-    if (key.escape || key.return) {
+    if (key.escape) {
       onCancel();
+      return;
+    }
+
+    if (key.tab) {
+      setActiveTab((prev) => {
+        const currentIndex = tabs.indexOf(prev);
+        const nextIndex = (currentIndex + 1) % tabs.length;
+        return tabs[nextIndex];
+      });
+      setSelectedIndex(0);
+      return;
+    }
+
+    if (activeTab === "commands" || activeTab === "custom-commands") {
+      const currentCommands =
+        activeTab === "commands" ? AVAILABLE_COMMANDS : commands;
+      if (key.upArrow) {
+        setSelectedIndex((prev) => Math.max(0, prev - 1));
+      } else if (key.downArrow) {
+        setSelectedIndex((prev) =>
+          Math.min(currentCommands.length - 1, prev + 1),
+        );
+      }
     }
   });
 
@@ -27,6 +70,29 @@ export const HelpView: React.FC<HelpViewProps> = ({ onCancel }) => {
     },
   ];
 
+  // Calculate visible window for commands
+  const currentCommands =
+    activeTab === "commands" ? AVAILABLE_COMMANDS : commands;
+  const startIndex = Math.max(
+    0,
+    Math.min(
+      selectedIndex - Math.floor(MAX_VISIBLE_ITEMS / 2),
+      Math.max(0, currentCommands.length - MAX_VISIBLE_ITEMS),
+    ),
+  );
+  const visibleCommands = currentCommands.slice(
+    startIndex,
+    startIndex + MAX_VISIBLE_ITEMS,
+  );
+
+  const footerText = [
+    "Tab switch",
+    activeTab !== "general" && "↑↓ navigate",
+    "Esc close",
+  ]
+    .filter(Boolean)
+    .join(" • ");
+
   return (
     <Box
       flexDirection="column"
@@ -35,24 +101,73 @@ export const HelpView: React.FC<HelpViewProps> = ({ onCancel }) => {
       borderLeft={false}
       borderRight={false}
       paddingX={1}
+      width="100%"
     >
-      <Box marginBottom={1}>
-        <Text color="cyan" bold underline>
-          Help & Key Bindings
+      <Box marginBottom={1} gap={2}>
+        <Text
+          color={activeTab === "general" ? "cyan" : "gray"}
+          bold
+          underline={activeTab === "general"}
+        >
+          General
+        </Text>
+        <Text
+          color={activeTab === "commands" ? "cyan" : "gray"}
+          bold
+          underline={activeTab === "commands"}
+        >
+          Commands
         </Text>
+        {commands.length > 0 && (
+          <Text
+            color={activeTab === "custom-commands" ? "cyan" : "gray"}
+            bold
+            underline={activeTab === "custom-commands"}
+          >
+            Custom Commands
+          </Text>
+        )}
       </Box>
 
-      {helpItems.map((item, index) => (
-        <Box key={index}>
-          <Box width={20}>
-            <Text color="yellow">{item.key}</Text>
-          </Box>
-          <Text color="white">{item.description}</Text>
+      {activeTab === "general" ? (
+        <Box flexDirection="column">
+          {helpItems.map((item, index) => (
+            <Box key={index}>
+              <Box width={20}>
+                <Text color="yellow">{item.key}</Text>
+              </Box>
+              <Text color="white">{item.description}</Text>
+            </Box>
+          ))}
+        </Box>
+      ) : (
+        <Box flexDirection="column">
+          {visibleCommands.map((command, index) => {
+            const actualIndex = startIndex + index;
+            const isSelected = actualIndex === selectedIndex;
+            return (
+              <Box key={command.id} flexDirection="column">
+                <Text
+                  color={isSelected ? "black" : "white"}
+                  backgroundColor={isSelected ? "cyan" : undefined}
+                >
+                  {isSelected ? "▶ " : "  "}/{command.id}
+                </Text>
+                {isSelected && (
+                  <Box marginLeft={4}>
+                    <Text color="gray" dimColor>
+                      {command.description}
+                    </Text>
+                  </Box>
+                )}
+              </Box>
+            );
+          })}
         </Box>
-      ))}
+      )}
 
       <Box marginTop={1}>
-        <Text dimColor>Press Esc or Enter to close</Text>
+        <Text dimColor>{footerText}</Text>
       </Box>
     </Box>
   );

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
@@ -169,7 +174,13 @@ export const InputBox: React.FC<InputBoxProps> = ({
   }
 
   if (showHelp) {
-    return <HelpView onCancel={() => setShowHelp(false)} />;
+    return (
+      <HelpView onCancel={() => setShowHelp(false)} commands={slashCommands} />
+    );
+  }
+
+  if (showStatusCommand) {
+    return <StatusCommand onCancel={() => setShowStatusCommand(false)} />;
   }
 
   return (
@@ -219,7 +230,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