feat: enhance CLI-VSCode integration and replace enquirer with inquirer

Add chat history synchronization between CLI, web server, and VSCode
extension. Implement abort operation support and improve message handling
for better WebSocket communication. Replace enquirer with inquirer for
interactive prompts, updating the status bar configuration command.

Update build output directory from 'out' to 'dist' across all packages
and fix bin path configuration.

Author: involvex

.github/workflows/vscode-release.yml

@@ -0,0 +1,43 @@
+name: VS Code Extension Release
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install Dependencies
+        run: bun install
+
+      - name: Build Project
+        run: bun run build
+
+      - name: Build Extension
+        working-directory: ./vscode-extension
+        run: |
+          npm install -g @vscode/vsce
+          bun run package
+
+      - name: Create Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: vscode-extension/*.vsix
+          generate_release_notes: true

bun.lock

@@ -10,7 +10,7 @@ export default [
       "@plugins/templates/*/dist/*.js",
       "@plugins/examples/*/dist/*.js.map",
       "@plugins/templates/*/dist/*.js.map",
-      "vscode-extension/out/**",
+      "vscode-extension/dist/**",
     ],
   },
   {

eslint.config.mjs

@@ -28,7 +28,7 @@
   },
   "main": "dist/index.js",
   "bin": {
-    "super-agent": "super-agent.js"
+    "super-agent": "dist/super-agent.js"
   },
   "workspaces": [
     "@plugins/templates/*",
@@ -37,7 +37,7 @@
   ],
   "scripts": {
     "prebuild": "bun run format && bun run lint:fix && bun run typecheck",
-    "build": "bun build src/index.ts --outdir ./dist --target node --packages external --format esm && bun run copy-bin && bun run build:web",
+    "build": "bun build src/index.ts --outdir ./dist --target node --packages external --format esm && bun run copy-bin && bun run build:web && bun run build:plugins && bun run build:vscode && bun run package:vscode",
     "build:bun": "bun build src/index.ts --outdir ./dist --target node --packages external --format esm",
     "build:plugins": "bun run -F @involvex/super-agent\\* build",
     "build:vscode": "bun run -F super-agent-vscode build",
@@ -74,7 +74,6 @@
     "commander": "^14.0.3",
     "conventional-changelog-cli": "^5.0.0",
     "dotenv": "^17.2.3",
-    "enquirer": "^2.4.1",
     "firebase": "^12.8.0",
     "fs-extra": "^11.3.3",
     "ignore": "^7.0.5",

package.json

@@ -280,6 +280,13 @@ Current working directory: ${process.cwd()}`,
     });
   }
 
+  /**
+   * Get the current chat history
+   */
+  public getChatHistory(): ChatEntry[] {
+    return this.chatHistory;
+  }
+
   /**
    * Set the active provider dynamically
    */

src/agent/super-agent.ts

@@ -1,6 +1,6 @@
 import { getSettingsManager } from "../utils/settings-manager";
 import { Command } from "commander";
-import { prompt } from "enquirer";
+import inquirer from "inquirer";
 
 export function createStatusBarCommand(): Command {
   const command = new Command("statusbar");
@@ -17,45 +17,42 @@ export function createStatusBarCommand(): Command {
     };
 
     try {
-      const response = await prompt<{
+      const response = await inquirer.prompt<{
         features: string[];
-      }>({
-        type: "multiselect",
-        name: "features",
-        message: "Select status bar features to display:",
-        choices: [
-          {
-            name: "show_model",
-            message: "Model Name",
-            value: "show_model",
-            enabled: currentConfig.show_model,
-          },
-          {
-            name: "show_tokens",
-            message: "Token Count",
-            value: "show_tokens",
-            enabled: currentConfig.show_tokens,
-          },
-          {
-            name: "show_git_status",
-            message: "Git Status",
-            value: "show_git_status",
-            enabled: currentConfig.show_git_status,
-          },
-          {
-            name: "show_memory",
-            message: "Memory Usage",
-            value: "show_memory",
-            enabled: currentConfig.show_memory,
-          },
-          {
-            name: "show_context",
-            message: "Context Size",
-            value: "show_context",
-            enabled: currentConfig.show_context,
-          },
-        ],
-      });
+      }>([
+        {
+          type: "checkbox",
+          name: "features",
+          message: "Select status bar features to display:",
+          choices: [
+            {
+              name: "Model Name",
+              value: "show_model",
+              checked: currentConfig.show_model,
+            },
+            {
+              name: "Token Count",
+              value: "show_tokens",
+              checked: currentConfig.show_tokens,
+            },
+            {
+              name: "Git Status",
+              value: "show_git_status",
+              checked: currentConfig.show_git_status,
+            },
+            {
+              name: "Memory Usage",
+              value: "show_memory",
+              checked: currentConfig.show_memory,
+            },
+            {
+              name: "Context Size",
+              value: "show_context",
+              checked: currentConfig.show_context,
+            },
+          ],
+        },
+      ]);
 
       // Convert array of selected features back to config object
       const newConfig = {

src/commands/statusbar.ts

@@ -10,6 +10,7 @@ export function useKeyboardInput(
   onSubmit: (command: string) => Promise<void>,
   isProcessing: boolean,
   confirmationOptions: unknown,
+  onEscape?: () => void,
 ) {
   useInput(
     useCallback(
@@ -23,6 +24,13 @@ export function useKeyboardInput(
           process.exit(0);
         }
 
+        if (key.escape) {
+          if (onEscape) {
+            onEscape();
+          }
+          return;
+        }
+
         if (key.return) {
           if (input.trim() === "exit" || input.trim() === "quit") {
             process.exit(0);

src/hooks/use-keyboard-input.ts

@@ -10,9 +10,12 @@ import { Box } from "ink";
 
 import { useCommandHistory } from "../hooks/use-command-history";
 import { useKeyboardInput } from "../hooks/use-keyboard-input";
+import { getSettingsManager } from "../utils/settings-manager";
 import { CommandHistory } from "./components/command-history";
+import { ConfigViewer } from "./components/config-viewer";
 import { CommandInput } from "./components/command-input";
 import { CommandHelp } from "./components/command-help";
+import { StatusBar } from "./components/statusbar";
 import { Header } from "./components/header";
 
 interface Props {
@@ -23,6 +26,9 @@ export default function App({ agent }: Props) {
   const [input, setInput] = useState("");
   const [confirmationOptions, setConfirmationOptions] =
     useState<ConfirmationOptions | null>(null);
+  const [showConfig, setShowConfig] = useState(false);
+  const [tokenCount, setTokenCount] = useState(0);
+  const [toolCallsCount, setToolCallsCount] = useState(0);
 
   const confirmationService = useMemo(
     () => ConfirmationService.getInstance(),
@@ -33,20 +39,43 @@ export default function App({ agent }: Props) {
     useCommandHistory();
 
   const handleSubmit = async (command: string) => {
+    // Handle slash commands
+    if (command.trim() === "/settings" || command.trim() === "/config") {
+      setShowConfig(true);
+      return;
+    }
+
     setIsProcessing(true);
     const result = await agent.processCommand(command);
     addEntry(command, result);
     setIsProcessing(false);
   };
 
+  const currentSettings = getSettingsManager().getEffectiveSettings();
+  const configInfo = {
+    activeProvider: currentSettings.active_provider || "grok",
+    apiKeySet: !!getSettingsManager().getApiKey(),
+    baseUrl:
+      currentSettings.providers?.[currentSettings.active_provider || "grok"]
+        ?.base_url,
+    model:
+      currentSettings.providers?.[currentSettings.active_provider || "grok"]
+        ?.model,
+    theme: currentSettings.ui?.theme || "zinc",
+  };
+
   useKeyboardInput(
     input,
     setInput,
     handleSubmit,
     isProcessing,
     confirmationOptions,
+    () => {
+      if (showConfig) {
+        setShowConfig(false);
+      }
+    },
   );
-
   useEffect(() => {
     const handleConfirmationRequest = (options: ConfirmationOptions) => {
       setConfirmationOptions(options);
@@ -88,11 +117,28 @@ export default function App({ agent }: Props) {
     );
   }
 
+  if (showConfig) {
+    return (
+      <ConfigViewer config={configInfo} onClose={() => setShowConfig(false)} />
+    );
+  }
+
   return (
-    <Box flexDirection="column" padding={1}>
-      <Header />
-      <CommandHelp />
-      <CommandHistory history={history} />
+    <Box flexDirection="column" padding={1} height="100%">
+      <Box flexDirection="column" flexGrow={1}>
+        <Header />
+        <CommandHelp />
+        <CommandHistory history={history} />
+      </Box>
+
+      <StatusBar
+        currentModel={getSettingsManager().getCurrentModel()}
+        isProcessing={isProcessing}
+        tokenCount={tokenCount}
+        toolCallsCount={toolCallsCount}
+        contextSize={0} // TODO: Hook up real context size
+      />
+
       <CommandInput input={input} isProcessing={isProcessing} />
     </Box>
   );

src/ui/app.tsx

@@ -10,10 +10,15 @@ interface ConfigInfo {
 
 interface ConfigViewerProps {
   config: ConfigInfo;
-  isVisible: boolean;
+  isVisible?: boolean;
+  onClose?: () => void;
 }
 
-export function ConfigViewer({ config, isVisible }: ConfigViewerProps) {
+export function ConfigViewer({
+  config,
+  isVisible = true,
+  onClose,
+}: ConfigViewerProps) {
   if (!isVisible) {
     return null;
   }

src/ui/components/config-viewer.tsx

@@ -107,16 +107,25 @@ export class WebServer {
       try {
         const message = JSON.parse(data.toString());
 
-        if (message.type === "prompt") {
-          await this.handlePrompt(message.content, ws);
+        if (message.type === "prompt" || message.type === "chat_message") {
+          const content = message.content?.message || message.content || "";
+          await this.handlePrompt(content, ws);
         } else if (message.type === "get_file_tree") {
           await this.handleGetFileTree(ws);
         } else if (message.type === "get_file_content") {
-          await this.handleGetFileContent(message.path, ws);
+          const filePath = message.path || message.filePath;
+          await this.handleGetFileContent(filePath, ws);
         } else if (message.type === "list_sessions") {
           await this.handleListSessions(ws);
         } else if (message.type === "switch_session") {
           await this.handleSwitchSession(message.sessionId, ws);
+        } else if (message.type === "get_chat_history") {
+          await this.handleGetChatHistory(ws);
+        } else if (message.type === "abort") {
+          this.agent.abortCurrentOperation();
+          ws.send(
+            JSON.stringify({ type: "done", content: "Operation aborted" }),
+          );
         }
       } catch (error) {
         console.error("WebSocket message error:", error);
@@ -292,6 +301,26 @@ export class WebServer {
     }
   }
 
+  private async handleGetChatHistory(ws: WebSocket): Promise<void> {
+    try {
+      const history = this.agent.getChatHistory();
+      ws.send(
+        JSON.stringify({
+          type: "chat_history",
+          messages: history.map(entry => ({
+            role: entry.type === "user" ? "user" : "assistant",
+            content: entry.content,
+            timestamp: entry.timestamp,
+            toolCall: entry.toolCall,
+            toolResult: entry.toolResult,
+          })),
+        }),
+      );
+    } catch (error: any) {
+      ws.send(JSON.stringify({ type: "error", content: error.message }));
+    }
+  }
+
   private async checkAndSendUpdateNotification(ws: WebSocket): Promise<void> {
     try {
       const pkg = await import("../../package.json");