wave-code 0.8.0 → 0.8.1

package/dist/components/CommandSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandSelector.d.ts","sourceRoot":"","sources":["../../src/components/CommandSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA0CnD,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+I1D,CAAC"}
+{"version":3,"file":"CommandSelector.d.ts","sourceRoot":"","sources":["../../src/components/CommandSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+I1D,CAAC"}

package/dist/components/CommandSelector.js

@@ -1,44 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React, { useState } from "react";
 import { Box, Text, useInput } from "ink";
-const AVAILABLE_COMMANDS = [
-    {
-        id: "clear",
-        name: "clear",
-        description: "Clear the chat session and terminal",
-        handler: () => { }, // Handler here won't be used, actual processing is in the hook
-    },
-    {
-        id: "tasks",
-        name: "tasks",
-        description: "View and manage background tasks (shells and subagents)",
-        handler: () => { }, // Handler here won't be used, actual processing is in the hook
-    },
-    {
-        id: "mcp",
-        name: "mcp",
-        description: "View and manage MCP servers",
-        handler: () => { }, // Handler here won't be used, actual processing is in the hook
-    },
-    {
-        id: "rewind",
-        name: "rewind",
-        description: "Revert conversation and file changes to a previous checkpoint",
-        handler: () => { }, // Handler here won't be used, actual processing is in the hook
-    },
-    {
-        id: "help",
-        name: "help",
-        description: "Show help and key bindings",
-        handler: () => { }, // Handler here won't be used, actual processing is in the hook
-    },
-    {
-        id: "status",
-        name: "status",
-        description: "Show agent status and configuration",
-        handler: () => { }, // Handler here won't be used, actual processing is in the hook
-    },
-];
+import { AVAILABLE_COMMANDS } from "../constants/commands.js";
 export const CommandSelector = ({ searchQuery, onSelect, onInsert, onCancel, commands = [], // Default to empty array
  }) => {
     const MAX_VISIBLE_ITEMS = 3;

package/dist/components/ConfirmationSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationSelector.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmationSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,kBAAkB,EAAwB,MAAM,gBAAgB,CAAC;AAgB/E,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AASD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAmmBpE,CAAC"}
+{"version":3,"file":"ConfirmationSelector.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmationSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,kBAAkB,EAAwB,MAAM,gBAAgB,CAAC;AAgB/E,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AASD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA6mBpE,CAAC"}

package/dist/components/ConfirmationSelector.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Box, Text, useInput, useStdout, measureElement } from "ink";
 import { BASH_TOOL_NAME, EXIT_PLAN_MODE_TOOL_NAME, ASK_USER_QUESTION_TOOL_NAME, } from "wave-agent-sdk";
 const getHeaderColor = (header) => {
@@ -34,6 +34,14 @@ export const ConfirmationSelector = ({ toolName, toolInput, suggestedPrefix, hid
         otherCursorPosition: 0,
         savedStates: {},
     });
+    const pendingDecisionRef = useRef(null);
+    useEffect(() => {
+        if (pendingDecisionRef.current) {
+            const decision = pendingDecisionRef.current;
+            pendingDecisionRef.current = null;
+            onDecision(decision);
+        }
+    });
     const questions = toolInput?.questions || [];
     const currentQuestion = questions[questionState.currentQuestionIndex];
     const getAutoOptionText = () => {
@@ -147,10 +155,10 @@ export const ConfirmationSelector = ({ toolName, toolInput, suggestedPrefix, hid
                         const allAnswered = questions.every((q) => finalAnswers[q.question]);
                         if (!allAnswered)
                             return prev;
-                        onDecision({
+                        pendingDecisionRef.current = {
                             behavior: "allow",
                             message: JSON.stringify(finalAnswers),
-                        });
+                        };
                         return {
                             ...prev,
                             userAnswers: finalAnswers,

package/dist/components/HelpView.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
+import type { SlashCommand } from "wave-agent-sdk";
 export interface HelpViewProps {
     onCancel: () => void;
+    commands?: SlashCommand[];
 }
 export declare const HelpView: React.FC<HelpViewProps>;
 //# sourceMappingURL=HelpView.d.ts.map

package/dist/components/HelpView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpView.d.ts","sourceRoot":"","sources":["../../src/components/HelpView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqD5C,CAAC"}
+{"version":3,"file":"HelpView.d.ts","sourceRoot":"","sources":["../../src/components/HelpView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmK5C,CAAC"}

package/dist/components/HelpView.js

@@ -1,9 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { Box, Text, useInput } from "ink";
-export const HelpView = ({ onCancel }) => {
+import { AVAILABLE_COMMANDS } from "../constants/commands.js";
+export const HelpView = ({ onCancel, commands = [], }) => {
+    const [activeTab, setActiveTab] = useState("general");
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const MAX_VISIBLE_ITEMS = 10;
+    const tabs = [
+        "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));
+            }
         }
     });
     const helpItems = [
@@ -15,12 +46,25 @@ export const HelpView = ({ onCancel }) => {
         { key: "Ctrl+B", description: "Background current task" },
         { key: "Ctrl+V", description: "Paste image" },
         { key: "Shift+Tab", description: "Cycle permission mode" },
-        { key: "/status", description: "Show agent status and configuration" },
-        { key: "/clear", description: "Clear the chat session and terminal" },
         {
             key: "Esc",
             description: "Interrupt AI or command / Cancel selector / Close help",
         },
     ];
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", borderLeft: false, borderRight: false, paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "cyan", bold: true, underline: true, children: "Help & Key Bindings" }) }), helpItems.map((item, index) => (_jsxs(Box, { children: [_jsx(Box, { width: 20, children: _jsx(Text, { color: "yellow", children: item.key }) }), _jsx(Text, { color: "white", children: item.description })] }, index))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Esc or Enter to close" }) })] }));
+    // 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 (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", borderLeft: false, borderRight: false, paddingX: 1, width: "100%", children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsx(Text, { color: activeTab === "general" ? "cyan" : "gray", bold: true, underline: activeTab === "general", children: "General" }), _jsx(Text, { color: activeTab === "commands" ? "cyan" : "gray", bold: true, underline: activeTab === "commands", children: "Commands" }), commands.length > 0 && (_jsx(Text, { color: activeTab === "custom-commands" ? "cyan" : "gray", bold: true, underline: activeTab === "custom-commands", children: "Custom Commands" }))] }), activeTab === "general" ? (_jsx(Box, { flexDirection: "column", children: helpItems.map((item, index) => (_jsxs(Box, { children: [_jsx(Box, { width: 20, children: _jsx(Text, { color: "yellow", children: item.key }) }), _jsx(Text, { color: "white", children: item.description })] }, index))) })) : (_jsx(Box, { flexDirection: "column", children: visibleCommands.map((command, index) => {
+                    const actualIndex = startIndex + index;
+                    const isSelected = actualIndex === selectedIndex;
+                    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: isSelected ? "black" : "white", backgroundColor: isSelected ? "cyan" : undefined, children: [isSelected ? "▶ " : "  ", "/", command.id] }), isSelected && (_jsx(Box, { marginLeft: 4, children: _jsx(Text, { color: "gray", dimColor: true, children: command.description }) }))] }, command.id));
+                }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: footerText }) })] }));
 };

package/dist/components/InputBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputBox.d.ts","sourceRoot":"","sources":["../../src/components/InputBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAczC,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEpE,eAAO,MAAM,sBAAsB,mDACe,CAAC;AAEnD,eAAO,MAAM,6BAA6B,QAGzC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,CACZ,OAAO,EAAE,MAAM,EACf,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,KAC/C,IAAI,CAAC;IACV,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;IAC/B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC5D,mBAAmB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAE/D,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;CAClD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgO5C,CAAC"}
+{"version":3,"file":"InputBox.d.ts","sourceRoot":"","sources":["../../src/components/InputBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAczC,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEpE,eAAO,MAAM,sBAAsB,mDACe,CAAC;AAEnD,eAAO,MAAM,6BAA6B,QAGzC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,CACZ,OAAO,EAAE,MAAM,EACf,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,KAC/C,IAAI,CAAC;IACV,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;IAC/B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC5D,mBAAmB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAE/D,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;CAClD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkO5C,CAAC"}

package/dist/components/InputBox.js

@@ -78,7 +78,7 @@ export const InputBox = ({ isLoading = false, isCommandRunning = false, sendMess
         return (_jsx(RewindCommand, { messages: messages, onSelect: handleRewindSelectWithClose, onCancel: handleRewindCancel, getFullMessageThread: getFullMessageThread }));
     }
     if (showHelp) {
-        return _jsx(HelpView, { onCancel: () => setShowHelp(false) });
+        return (_jsx(HelpView, { onCancel: () => setShowHelp(false), commands: slashCommands }));
     }
     if (showStatusCommand) {
         return _jsx(StatusCommand, { onCancel: () => setShowStatusCommand(false) });

package/dist/constants/commands.d.ts

@@ -0,0 +1,3 @@
+import type { SlashCommand } from "wave-agent-sdk";
+export declare const AVAILABLE_COMMANDS: SlashCommand[];
+//# sourceMappingURL=commands.d.ts.map

package/dist/constants/commands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands.d.ts","sourceRoot":"","sources":["../../src/constants/commands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,eAAO,MAAM,kBAAkB,EAAE,YAAY,EAsC5C,CAAC"}

package/dist/constants/commands.js

@@ -0,0 +1,38 @@
+export const AVAILABLE_COMMANDS = [
+    {
+        id: "clear",
+        name: "clear",
+        description: "Clear the chat session and terminal",
+        handler: () => { }, // Handler here won't be used, actual processing is in the hook
+    },
+    {
+        id: "tasks",
+        name: "tasks",
+        description: "View and manage background tasks (shells and subagents)",
+        handler: () => { }, // Handler here won't be used, actual processing is in the hook
+    },
+    {
+        id: "mcp",
+        name: "mcp",
+        description: "View and manage MCP servers",
+        handler: () => { }, // Handler here won't be used, actual processing is in the hook
+    },
+    {
+        id: "rewind",
+        name: "rewind",
+        description: "Revert conversation and file changes to a previous checkpoint",
+        handler: () => { }, // Handler here won't be used, actual processing is in the hook
+    },
+    {
+        id: "help",
+        name: "help",
+        description: "Show help and key bindings",
+        handler: () => { }, // Handler here won't be used, actual processing is in the hook
+    },
+    {
+        id: "status",
+        name: "status",
+        description: "Show agent status and configuration",
+        handler: () => { }, // Handler here won't be used, actual processing is in the hook
+    },
+];

package/dist/utils/highlightUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlightUtils.d.ts","sourceRoot":"","sources":["../../src/utils/highlightUtils.ts"],"names":[],"mappings":"AA6DA,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAcvE"}
+{"version":3,"file":"highlightUtils.d.ts","sourceRoot":"","sources":["../../src/utils/highlightUtils.ts"],"names":[],"mappings":"AA6DA,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAsCvE"}

package/dist/utils/highlightUtils.js

@@ -1,48 +1,48 @@
-import hljs from 'highlight.js';
-import { parse, HTMLElement, TextNode } from 'node-html-parser';
-import chalk from 'chalk';
+import hljs from "highlight.js";
+import { parse, HTMLElement, TextNode } from "node-html-parser";
+import chalk from "chalk";
 const theme = {
-    'hljs-keyword': chalk.blue,
-    'hljs-built_in': chalk.cyan,
-    'hljs-type': chalk.cyan,
-    'hljs-literal': chalk.magenta,
-    'hljs-number': chalk.magenta,
-    'hljs-operator': chalk.white,
-    'hljs-punctuation': chalk.white,
-    'hljs-property': chalk.yellow,
-    'hljs-attr': chalk.yellow,
-    'hljs-variable': chalk.white,
-    'hljs-template-variable': chalk.white,
-    'hljs-string': chalk.green,
-    'hljs-char': chalk.green,
-    'hljs-comment': chalk.gray,
-    'hljs-doctag': chalk.gray,
-    'hljs-function': chalk.yellow,
-    'hljs-title': chalk.yellow,
-    'hljs-params': chalk.white,
-    'hljs-tag': chalk.blue,
-    'hljs-name': chalk.blue,
-    'hljs-selector-tag': chalk.blue,
-    'hljs-selector-id': chalk.blue,
-    'hljs-selector-class': chalk.blue,
-    'hljs-selector-attr': chalk.blue,
-    'hljs-selector-pseudo': chalk.blue,
-    'hljs-subst': chalk.white,
-    'hljs-section': chalk.blue.bold,
-    'hljs-bullet': chalk.magenta,
-    'hljs-emphasis': chalk.italic,
-    'hljs-strong': chalk.bold,
-    'hljs-addition': chalk.green,
-    'hljs-deletion': chalk.red,
-    'hljs-link': chalk.blue.underline,
+    "hljs-keyword": chalk.blue,
+    "hljs-built_in": chalk.cyan,
+    "hljs-type": chalk.cyan,
+    "hljs-literal": chalk.magenta,
+    "hljs-number": chalk.magenta,
+    "hljs-operator": chalk.white,
+    "hljs-punctuation": chalk.white,
+    "hljs-property": chalk.yellow,
+    "hljs-attr": chalk.yellow,
+    "hljs-variable": chalk.white,
+    "hljs-template-variable": chalk.white,
+    "hljs-string": chalk.green,
+    "hljs-char": chalk.green,
+    "hljs-comment": chalk.gray,
+    "hljs-doctag": chalk.gray,
+    "hljs-function": chalk.yellow,
+    "hljs-title": chalk.yellow,
+    "hljs-params": chalk.white,
+    "hljs-tag": chalk.blue,
+    "hljs-name": chalk.blue,
+    "hljs-selector-tag": chalk.blue,
+    "hljs-selector-id": chalk.blue,
+    "hljs-selector-class": chalk.blue,
+    "hljs-selector-attr": chalk.blue,
+    "hljs-selector-pseudo": chalk.blue,
+    "hljs-subst": chalk.white,
+    "hljs-section": chalk.blue.bold,
+    "hljs-bullet": chalk.magenta,
+    "hljs-emphasis": chalk.italic,
+    "hljs-strong": chalk.bold,
+    "hljs-addition": chalk.green,
+    "hljs-deletion": chalk.red,
+    "hljs-link": chalk.blue.underline,
 };
 function nodeToAnsi(node) {
     if (node instanceof TextNode) {
         return node.text;
     }
     if (node instanceof HTMLElement) {
-        const content = node.childNodes.map(nodeToAnsi).join('');
-        const classes = node.getAttribute('class')?.split(/\s+/) || [];
+        const content = node.childNodes.map(nodeToAnsi).join("");
+        const classes = node.getAttribute("class")?.split(/\s+/) || [];
         for (const className of classes) {
             if (theme[className]) {
                 return theme[className](content);
@@ -50,18 +50,42 @@ function nodeToAnsi(node) {
         }
         return content;
     }
-    return '';
+    return "";
 }
 export function highlightToAnsi(code, language) {
     if (!code) {
-        return '';
+        return "";
     }
     try {
         const highlighted = language
             ? hljs.highlight(code, { language }).value
-            : hljs.highlightAuto(code).value;
+            : hljs.highlightAuto(code, [
+                "javascript",
+                "typescript",
+                "bash",
+                "json",
+                "markdown",
+                "python",
+                "yaml",
+                "html",
+                "css",
+                "sql",
+                "xml",
+                "rust",
+                "go",
+                "java",
+                "cpp",
+                "c",
+                "csharp",
+                "php",
+                "ruby",
+                "swift",
+                "kotlin",
+                "toml",
+                "ini",
+            ]).value;
         const root = parse(highlighted);
-        return root.childNodes.map(nodeToAnsi).join('');
+        return root.childNodes.map(nodeToAnsi).join("");
     }
     catch {
         return code;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "CLI-based code assistant powered by AI, built with React and Ink",
   "repository": {
     "type": "git",
@@ -39,7 +39,7 @@
     "react": "^19.2.4",
     "react-dom": "19.2.4",
     "yargs": "^17.7.2",
-    "wave-agent-sdk": "0.8.0"
+    "wave-agent-sdk": "0.8.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",

package/src/components/CommandSelector.tsx

@@ -1,46 +1,7 @@
 import React, { useState } from "react";
 import { Box, Text, useInput } from "ink";
 import type { SlashCommand } from "wave-agent-sdk";
-
-const AVAILABLE_COMMANDS: SlashCommand[] = [
-  {
-    id: "clear",
-    name: "clear",
-    description: "Clear the chat session and terminal",
-    handler: () => {}, // Handler here won't be used, actual processing is in the hook
-  },
-  {
-    id: "tasks",
-    name: "tasks",
-    description: "View and manage background tasks (shells and subagents)",
-    handler: () => {}, // Handler here won't be used, actual processing is in the hook
-  },
-  {
-    id: "mcp",
-    name: "mcp",
-    description: "View and manage MCP servers",
-    handler: () => {}, // Handler here won't be used, actual processing is in the hook
-  },
-  {
-    id: "rewind",
-    name: "rewind",
-    description:
-      "Revert conversation and file changes to a previous checkpoint",
-    handler: () => {}, // Handler here won't be used, actual processing is in the hook
-  },
-  {
-    id: "help",
-    name: "help",
-    description: "Show help and key bindings",
-    handler: () => {}, // Handler here won't be used, actual processing is in the hook
-  },
-  {
-    id: "status",
-    name: "status",
-    description: "Show agent status and configuration",
-    handler: () => {}, // Handler here won't be used, actual processing is in the hook
-  },
-];
+import { AVAILABLE_COMMANDS } from "../constants/commands.js";
 
 export interface CommandSelectorProps {
   searchQuery: string;

package/src/components/ConfirmationSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Box, Text, useInput, useStdout, measureElement } from "ink";
 import type { PermissionDecision, AskUserQuestionInput } from "wave-agent-sdk";
 import {
@@ -81,6 +81,16 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
     >,
   });
 
+  const pendingDecisionRef = useRef<PermissionDecision | null>(null);
+
+  useEffect(() => {
+    if (pendingDecisionRef.current) {
+      const decision = pendingDecisionRef.current;
+      pendingDecisionRef.current = null;
+      onDecision(decision);
+    }
+  });
+
   const questions =
     (toolInput as unknown as AskUserQuestionInput)?.questions || [];
   const currentQuestion = questions[questionState.currentQuestionIndex];
@@ -204,10 +214,10 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
             );
             if (!allAnswered) return prev;
 
-            onDecision({
+            pendingDecisionRef.current = {
               behavior: "allow",
               message: JSON.stringify(finalAnswers),
-            });
+            };
             return {
               ...prev,
               userAnswers: finalAnswers,

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),
+        );
+      }
     }
   });
 
@@ -21,14 +64,35 @@ export const HelpView: React.FC<HelpViewProps> = ({ onCancel }) => {
     { key: "Ctrl+B", description: "Background current task" },
     { key: "Ctrl+V", description: "Paste image" },
     { key: "Shift+Tab", description: "Cycle permission mode" },
-    { key: "/status", description: "Show agent status and configuration" },
-    { key: "/clear", description: "Clear the chat session and terminal" },
     {
       key: "Esc",
       description: "Interrupt AI or command / Cancel selector / Close help",
     },
   ];
 
+  // 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"
@@ -37,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

@@ -174,7 +174,9 @@ export const InputBox: React.FC<InputBoxProps> = ({
   }
 
   if (showHelp) {
-    return <HelpView onCancel={() => setShowHelp(false)} />;
+    return (
+      <HelpView onCancel={() => setShowHelp(false)} commands={slashCommands} />
+    );
   }
 
   if (showStatusCommand) {

package/src/constants/commands.ts

@@ -0,0 +1,41 @@
+import type { SlashCommand } from "wave-agent-sdk";
+
+export const AVAILABLE_COMMANDS: SlashCommand[] = [
+  {
+    id: "clear",
+    name: "clear",
+    description: "Clear the chat session and terminal",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
+  {
+    id: "tasks",
+    name: "tasks",
+    description: "View and manage background tasks (shells and subagents)",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
+  {
+    id: "mcp",
+    name: "mcp",
+    description: "View and manage MCP servers",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
+  {
+    id: "rewind",
+    name: "rewind",
+    description:
+      "Revert conversation and file changes to a previous checkpoint",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
+  {
+    id: "help",
+    name: "help",
+    description: "Show help and key bindings",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
+  {
+    id: "status",
+    name: "status",
+    description: "Show agent status and configuration",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
+];

package/src/utils/highlightUtils.ts

@@ -1,41 +1,41 @@
-import hljs from 'highlight.js';
-import { parse, Node, HTMLElement, TextNode } from 'node-html-parser';
-import chalk from 'chalk';
+import hljs from "highlight.js";
+import { parse, Node, HTMLElement, TextNode } from "node-html-parser";
+import chalk from "chalk";
 
 const theme: Record<string, (text: string) => string> = {
-  'hljs-keyword': chalk.blue,
-  'hljs-built_in': chalk.cyan,
-  'hljs-type': chalk.cyan,
-  'hljs-literal': chalk.magenta,
-  'hljs-number': chalk.magenta,
-  'hljs-operator': chalk.white,
-  'hljs-punctuation': chalk.white,
-  'hljs-property': chalk.yellow,
-  'hljs-attr': chalk.yellow,
-  'hljs-variable': chalk.white,
-  'hljs-template-variable': chalk.white,
-  'hljs-string': chalk.green,
-  'hljs-char': chalk.green,
-  'hljs-comment': chalk.gray,
-  'hljs-doctag': chalk.gray,
-  'hljs-function': chalk.yellow,
-  'hljs-title': chalk.yellow,
-  'hljs-params': chalk.white,
-  'hljs-tag': chalk.blue,
-  'hljs-name': chalk.blue,
-  'hljs-selector-tag': chalk.blue,
-  'hljs-selector-id': chalk.blue,
-  'hljs-selector-class': chalk.blue,
-  'hljs-selector-attr': chalk.blue,
-  'hljs-selector-pseudo': chalk.blue,
-  'hljs-subst': chalk.white,
-  'hljs-section': chalk.blue.bold,
-  'hljs-bullet': chalk.magenta,
-  'hljs-emphasis': chalk.italic,
-  'hljs-strong': chalk.bold,
-  'hljs-addition': chalk.green,
-  'hljs-deletion': chalk.red,
-  'hljs-link': chalk.blue.underline,
+  "hljs-keyword": chalk.blue,
+  "hljs-built_in": chalk.cyan,
+  "hljs-type": chalk.cyan,
+  "hljs-literal": chalk.magenta,
+  "hljs-number": chalk.magenta,
+  "hljs-operator": chalk.white,
+  "hljs-punctuation": chalk.white,
+  "hljs-property": chalk.yellow,
+  "hljs-attr": chalk.yellow,
+  "hljs-variable": chalk.white,
+  "hljs-template-variable": chalk.white,
+  "hljs-string": chalk.green,
+  "hljs-char": chalk.green,
+  "hljs-comment": chalk.gray,
+  "hljs-doctag": chalk.gray,
+  "hljs-function": chalk.yellow,
+  "hljs-title": chalk.yellow,
+  "hljs-params": chalk.white,
+  "hljs-tag": chalk.blue,
+  "hljs-name": chalk.blue,
+  "hljs-selector-tag": chalk.blue,
+  "hljs-selector-id": chalk.blue,
+  "hljs-selector-class": chalk.blue,
+  "hljs-selector-attr": chalk.blue,
+  "hljs-selector-pseudo": chalk.blue,
+  "hljs-subst": chalk.white,
+  "hljs-section": chalk.blue.bold,
+  "hljs-bullet": chalk.magenta,
+  "hljs-emphasis": chalk.italic,
+  "hljs-strong": chalk.bold,
+  "hljs-addition": chalk.green,
+  "hljs-deletion": chalk.red,
+  "hljs-link": chalk.blue.underline,
 };
 
 function nodeToAnsi(node: Node): string {
@@ -44,8 +44,8 @@ function nodeToAnsi(node: Node): string {
   }
 
   if (node instanceof HTMLElement) {
-    const content = node.childNodes.map(nodeToAnsi).join('');
-    const classes = node.getAttribute('class')?.split(/\s+/) || [];
+    const content = node.childNodes.map(nodeToAnsi).join("");
+    const classes = node.getAttribute("class")?.split(/\s+/) || [];
 
     for (const className of classes) {
       if (theme[className]) {
@@ -56,20 +56,44 @@ function nodeToAnsi(node: Node): string {
     return content;
   }
 
-  return '';
+  return "";
 }
 
 export function highlightToAnsi(code: string, language?: string): string {
   if (!code) {
-    return '';
+    return "";
   }
   try {
     const highlighted = language
       ? hljs.highlight(code, { language }).value
-      : hljs.highlightAuto(code).value;
+      : hljs.highlightAuto(code, [
+          "javascript",
+          "typescript",
+          "bash",
+          "json",
+          "markdown",
+          "python",
+          "yaml",
+          "html",
+          "css",
+          "sql",
+          "xml",
+          "rust",
+          "go",
+          "java",
+          "cpp",
+          "c",
+          "csharp",
+          "php",
+          "ruby",
+          "swift",
+          "kotlin",
+          "toml",
+          "ini",
+        ]).value;
 
     const root = parse(highlighted);
-    return root.childNodes.map(nodeToAnsi).join('');
+    return root.childNodes.map(nodeToAnsi).join("");
   } catch {
     return code;
   }