@involvex/super-agent-cli 0.0.80 → 0.0.82

package/README.md

@@ -1,6 +1,9 @@
-# @involvex/super-agent-cli
+```
+              @involvex/super-agent-cli
+```
+
+![Super Agent CLI Banner](assets/images/banner.png)
 
-![Super Agent CLI Banner](docs/banner.png)
 [![Security Scan](https://github.com/involvex/super-agent-cli/actions/workflows/security.yml/badge.svg)](https://github.com/involvex/super-agent-cli/actions/workflows/security.yml)
 ![Badge](https://img.shields.io/npm/v/@involvex/super-agent-cli?label=build&message=passing&color=brightgreen&style=social&logo=npm)
 

package/dist/index.js

@@ -1021,8 +1021,8 @@ __export(exports_image_generation, {
   getImageGenerationService: () => getImageGenerationService,
   ImageGenerationService: () => ImageGenerationService
 });
-import * as fs7 from "fs-extra";
 import * as path7 from "path";
+import fs7 from "fs-extra";
 
 class ImageGenerationService {
   static instance;
@@ -1609,8 +1609,8 @@ __export(exports_indexer, {
   getFileIndexer: () => getFileIndexer,
   FileIndexer: () => FileIndexer
 });
-import * as fs15 from "fs-extra";
 import * as path15 from "path";
+import fs15 from "fs-extra";
 
 class FileIndexer {
   static instance;
@@ -1731,7 +1731,7 @@ var init_indexer = __esm(() => {
 var require_package = __commonJS((exports, module) => {
   module.exports = {
     name: "@involvex/super-agent-cli",
-    version: "0.0.80",
+    version: "0.0.82",
     description: "An open-source AI agent that brings the power of Super Agent directly into your terminal.",
     keywords: [
       "cli",
@@ -1759,7 +1759,7 @@ var require_package = __commonJS((exports, module) => {
     },
     main: "dist/index.js",
     bin: {
-      "super-agent": "dist/index.js"
+      "super-agent": "super-agent.js"
     },
     workspaces: [
       "@plugins/templates/*",
@@ -1768,13 +1768,14 @@ var require_package = __commonJS((exports, module) => {
     ],
     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",
+      build: "bun build src/index.ts --outdir ./dist --target node --packages external --format esm && bun run copy-bin && bun run build:web",
       "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",
       "build:web": "bun run scripts/build-web.ts",
       changelog: "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
       compile: "bun run prebuild && bun build --compile src/index.ts --outfile ./dist/super-agent-cli.exe --config bunfig.toml",
+      "copy-bin": "cp super-agent.js dist/super-agent.js",
       dev: "bun run --watch src/index.ts",
       "dev:node": "tsx src/index.ts",
       format: "prettier --write .",
@@ -1783,8 +1784,8 @@ var require_package = __commonJS((exports, module) => {
       lint: "eslint . --ext .js,.jsx,.ts,.tsx --ignore-pattern dist",
       "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix --ignore-pattern dist",
       "package:vscode": "bun run -F super-agent-vscode package",
-      start: "node dist/index.js",
-      "start:bun": "bun run dist/index.js",
+      start: "bun run dist/index.js",
+      "start:node": "node dist/index.js",
       test: "vitest run",
       "test:coverage": "vitest run --coverage",
       "test:integration": "vitest run src/tests/integration",
@@ -2908,8 +2909,8 @@ init_config();
 init_settings_manager();
 import { exec as exec2 } from "child_process";
 import { promisify as promisify2 } from "util";
-import * as fs4 from "fs-extra";
 import * as path4 from "path";
+import fs4 from "fs-extra";
 var execAsync2 = promisify2(exec2);
 
 class PluginManager {
@@ -3474,8 +3475,8 @@ async function getAllSuperAgentTools() {
 // src/plugins/repository-manager.ts
 import { exec as exec3 } from "child_process";
 import { promisify as promisify3 } from "util";
-import * as fs5 from "fs-extra";
 import * as path5 from "path";
+import fs5 from "fs-extra";
 var execAsync3 = promisify3(exec3);
 var BUILTIN_REPOSITORIES = {
   agents: {
@@ -3965,7 +3966,7 @@ function getChatManager() {
 }
 
 // src/hooks/use-input-handler.ts
-import * as fs11 from "fs-extra";
+import fs11 from "fs-extra";
 function useInputHandler({
   agent,
   chatHistory,
@@ -11711,7 +11712,6 @@ import * as fs20 from "fs-extra";
 import * as path20 from "path";
 import open from "open";
 import mime from "mime";
-var __dirname = "/home/runner/work/super-agent-cli/super-agent-cli/src/web";
 
 class WebServer {
   httpServer;
@@ -11734,20 +11734,24 @@ class WebServer {
   }
   async handleHttpRequest(req, res) {
     const url = req.url || "/";
-    const requestedPath = url === "/" ? "index.html" : url;
+    let requestedPath = url === "/" ? "index.html" : url.substring(1);
     const sanitizedPath = requestedPath.split("?")[0].split("#")[0];
-    const clientDir = path20.join(__dirname, "../web/client");
-    const absolutePath = path20.resolve(clientDir, sanitizedPath.substring(1));
-    if (!absolutePath.startsWith(clientDir)) {
+    const distWebPath = path20.join(process.cwd(), "dist", "web");
+    const sourceWebPath = path20.join(process.cwd(), "src", "web", "client");
+    const clientDir = await fs20.pathExists(distWebPath) ? distWebPath : sourceWebPath;
+    const absolutePath = path20.resolve(clientDir, sanitizedPath);
+    const normalizedClientDir = path20.resolve(clientDir);
+    const normalizedAbsolutePath = path20.resolve(absolutePath);
+    if (!normalizedAbsolutePath.startsWith(normalizedClientDir)) {
       res.writeHead(403, { "Content-Type": "text/plain" });
       res.end("Forbidden");
       return;
     }
     try {
       if (await fs20.pathExists(absolutePath)) {
-        const stat5 = await fs20.stat(absolutePath);
+        const stat2 = await fs20.stat(absolutePath);
         let filePath = absolutePath;
-        if (stat5.isDirectory()) {
+        if (stat2.isDirectory()) {
           filePath = path20.join(absolutePath, "index.html");
         }
         const content = await fs20.readFile(filePath);
@@ -12149,7 +12153,7 @@ function createIndexCommand() {
   const indexCommand = new Command4("index").description(" recursively index a directory and save to a file").argument("[directory]", "Directory to index", ".").option("-o, --output <file>", "Output file path (default: index.md)").option("--no-ignore", "Disable .gitignore respecting").option("-d, --depth <depth>", "Max depth to traverse", "10").action(async (directory, options) => {
     try {
       const rootDir = path21.resolve(directory);
-      const outputFile2 = options.output ? path21.resolve(options.output) : path21.join(rootDir, "index.md");
+      const outputFile = options.output ? path21.resolve(options.output) : path21.join(rootDir, "index.md");
       const maxDepth = parseInt(options.depth);
       console.log(chalk4.blue(`Indexing directory: ${rootDir}`));
       const ig = ignore().add(DEFAULT_IGNORES);
@@ -12246,8 +12250,8 @@ Date: ${new Date().toISOString()}
 
 `;
       }
-      await fs21.writeFile(outputFile2, outputContent);
-      console.log(chalk4.green(`✓ Index generated at: ${outputFile2}`));
+      await fs21.writeFile(outputFile, outputContent);
+      console.log(chalk4.green(`✓ Index generated at: ${outputFile}`));
     } catch (error) {
       console.error(chalk4.red(`Error indexing directory: ${error.message}`));
       process.exit(1);

package/dist/super-agent.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env bun
+// Super Agent CLI wrapper script
+// This ensures the bundled code runs with bun for proper module resolution
+
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Import and run the bundled CLI
+import(join(__dirname, "dist", "index.js"));

package/dist/web/app.js

@@ -0,0 +1,418 @@
+// WebSocket connection
+let ws = null;
+let isConnected = false;
+
+const messagesContainer = document.getElementById("messages");
+const promptInput = document.getElementById("prompt-input");
+const sendBtn = document.getElementById("send-btn");
+const statusEl = document.getElementById("status");
+const autocompleteEl = document.getElementById("autocomplete");
+const fileTreeEl = document.getElementById("file-tree");
+const sessionsListEl = document.getElementById("sessions-list");
+
+// Slash commands
+const SLASH_COMMANDS = [
+  { cmd: "/chat", desc: "Manage chat sessions" },
+  { cmd: "/config", desc: "Configure settings" },
+  { cmd: "/models", desc: "Select AI model" },
+  { cmd: "/provider", desc: "Select LLM provider" },
+  { cmd: "/mcp", desc: "MCP server management" },
+  { cmd: "/plugin", desc: "Plugin management" },
+  { cmd: "/search", desc: "Search files/code" },
+  { cmd: "/help", desc: "Show help" },
+];
+
+// Security: HTML escape utility to prevent XSS
+function escapeHtml(unsafe) {
+  if (typeof unsafe !== "string") {
+    return "";
+  }
+  return unsafe
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+// Connect to WebSocket
+function connect() {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const wsUrl = `${protocol}//${window.location.host}`;
+
+  ws = new WebSocket(wsUrl);
+
+  ws.onopen = () => {
+    isConnected = true;
+    updateStatus("Connected", "connected");
+    sendBtn.disabled = false;
+
+    // Load initial data
+    requestFileTree();
+    requestSessions();
+  };
+
+  ws.onclose = () => {
+    isConnected = false;
+    updateStatus("Disconnected - Retrying...", "disconnected");
+    sendBtn.disabled = true;
+    setTimeout(connect, 2000);
+  };
+
+  ws.onerror = error => {
+    console.error("WebSocket error:", error);
+    updateStatus("Connection error", "disconnected");
+    // Check if we're on Firebase Hosting or similar static hosting
+    // Firebase Hosting does NOT support WebSocket connections
+    // Show disconnected mode after connection fails
+    setTimeout(() => {
+      if (!isConnected) {
+        showDisconnectedMode();
+      }
+    }, 2000);
+  };
+
+  ws.onmessage = event => {
+    try {
+      const data = JSON.parse(event.data);
+      handleMessage(data);
+    } catch (error) {
+      console.error("Error parsing message:", error);
+    }
+  };
+}
+
+/**
+ * Show disconnected mode with helpful instructions
+ * This is shown when the WebSocket connection fails, which happens on
+ * Firebase Hosting and other static hosting providers that don't support WebSocket.
+ */
+function showDisconnectedMode() {
+  isConnected = false;
+  updateStatus("View-only mode - CLI not connected", "disconnected");
+
+  // Check if banner already exists to avoid duplicates
+  const existingBanner = document.querySelector(".disconnected-banner");
+  if (existingBanner) {
+    return;
+  }
+
+  // Show banner explaining the situation
+  const banner = document.createElement("div");
+  banner.className = "disconnected-banner";
+  banner.innerHTML = `
+    <div class="banner-content">
+      <strong>📡 CLI Connection Required</strong>
+      <p>This web interface is in view-only mode. For full functionality:</p>
+      <ol>
+        <li>Run <code>super-agent --web</code> in your project directory</li>
+        <li>Open <a href="http://localhost:3000">http://localhost:3000</a></li>
+      </ol>
+      <p class="note">Note: This web interface on Firebase Hosting is for demonstration only.
+      WebSocket connections are not supported on static hosting platforms.</p>
+      <button class="dismiss-btn">Dismiss</button>
+    </div>
+  `;
+
+  document.body.insertBefore(banner, document.body.firstChild);
+
+  // Add dismiss handler
+  banner.querySelector(".dismiss-btn").addEventListener("click", () => {
+    banner.remove();
+  });
+
+  // Disable interactive elements
+  sendBtn.disabled = true;
+  promptInput.disabled = true;
+  promptInput.placeholder = "Connect to CLI to send messages...";
+
+  // Add a message to the chat
+  addMessage(
+    "⚠️ WebSocket connection failed. This interface is running on a static hosting platform " +
+      "that doesn't support WebSocket connections. Please run 'super-agent --web' locally " +
+      "and connect to http://localhost:3000 for full functionality.",
+    "error",
+  );
+}
+
+// Update status indicator
+function updateStatus(text, className = "") {
+  statusEl.textContent = text;
+  statusEl.className = `status ${className}`;
+}
+
+// Show update banner
+function showUpdateBanner(currentVersion, latestVersion) {
+  const banner = document.createElement("div");
+  banner.className = "update-banner";
+
+  const span = document.createElement("span");
+  span.textContent = `📦 Update available: ${currentVersion} → ${latestVersion}`;
+
+  const button = document.createElement("button");
+  button.textContent = "✕";
+  button.onclick = () => banner.remove();
+
+  banner.appendChild(span);
+  banner.appendChild(button);
+  document.body.insertBefore(banner, document.body.firstChild);
+}
+
+// Request file tree
+function requestFileTree() {
+  if (isConnected) {
+    ws.send(JSON.stringify({ type: "get_file_tree" }));
+  }
+}
+
+// Request sessions list
+function requestSessions() {
+  if (isConnected) {
+    ws.send(JSON.stringify({ type: "list_sessions" }));
+  }
+}
+
+// Switch session
+function switchSession(sessionId) {
+  if (isConnected) {
+    ws.send(JSON.stringify({ type: "switch_session", sessionId }));
+  }
+}
+
+// View file
+function viewFile(filePath) {
+  if (isConnected) {
+    ws.send(JSON.stringify({ type: "get_file_content", path: filePath }));
+  }
+}
+
+// Handle incoming messages
+function handleMessage(data) {
+  switch (data.type) {
+    case "update_available":
+      showUpdateBanner(data.currentVersion, data.latestVersion);
+      break;
+    case "file_tree":
+      renderFileTree(data.tree);
+      break;
+    case "file_content":
+      showFilePreview(data.path, data.content);
+      break;
+    case "sessions_list":
+      renderSessions(data.sessions);
+      break;
+    case "session_switched":
+      handleSessionSwitch(data.session);
+      break;
+    case "user_message":
+      addMessage(data.content, "user");
+      break;
+    case "assistant_message":
+      addMessage(data.content, "assistant");
+      break;
+    case "tool_call":
+      addMessage(`🔧 ${data.tool}: ${data.content}`, "tool");
+      break;
+    case "tool_result":
+      addMessage(`✅ ${data.tool}: ${data.content}`, "tool");
+      break;
+    case "error":
+      addMessage(`❌ Error: ${data.content}`, "error");
+      break;
+    case "done":
+      sendBtn.disabled = false;
+      promptInput.disabled = false;
+      updateStatus("Connected", "connected");
+      break;
+  }
+}
+
+// Render file tree
+function renderFileTree(tree) {
+  if (!tree || tree.length === 0) {
+    fileTreeEl.innerHTML = '<p class="empty-state">No files indexed yet</p>';
+    return;
+  }
+
+  const directories = tree.filter(f => f.isDirectory);
+  const files = tree.filter(f => !f.isDirectory);
+
+  let html = "";
+
+  // Show directories first
+  directories.slice(0, 50).forEach(dir => {
+    const safeName = escapeHtml(dir.name);
+    html += `
+            <div class="file-item directory">
+                📁 ${safeName}
+            </div>
+        `;
+  });
+
+  // Then files
+  files.slice(0, 100).forEach(file => {
+    const safeName = escapeHtml(file.name);
+    const safePath = escapeHtml(file.path);
+    html += `
+            <div class="file-item" onclick="viewFile('${safePath}')">
+                📄 ${safeName}
+            </div>
+        `;
+  });
+
+  fileTreeEl.innerHTML = html;
+}
+
+// Render sessions
+function renderSessions(sessions) {
+  if (!sessions || sessions.length === 0) {
+    sessionsListEl.innerHTML = '<p class="empty-state">No saved sessions</p>';
+    return;
+  }
+
+  let html = "";
+  sessions.forEach(session => {
+    const date = new Date(session.lastAccessed).toLocaleDateString();
+    const safeName = escapeHtml(session.name);
+    const safeId = escapeHtml(session.id);
+    const safeCount = escapeHtml(String(session.messageCount || 0));
+    const safeDate = escapeHtml(date);
+
+    html += `
+            <div class="session-item" onclick="switchSession('${safeId}')">
+                <div class="session-name">${safeName}</div>
+                <div class="session-meta">${safeCount} messages · ${safeDate}</div>
+            </div>
+        `;
+  });
+
+  sessionsListEl.innerHTML = html;
+}
+
+// Handle session switch
+function handleSessionSwitch(session) {
+  // Clear current messages
+  messagesContainer.innerHTML = "";
+
+  // Load session messages
+  session.messages.forEach(msg => {
+    addMessage(msg.content, msg.role);
+  });
+
+  updateStatus(`Session: ${session.name}`, "connected");
+}
+
+// Show file preview
+function showFilePreview(path, content) {
+  addMessage(`📄 ${path}:\n\`\`\`\n${content}\n\`\`\``, "assistant");
+}
+
+// Add message to chat
+function addMessage(content, type) {
+  const messageEl = document.createElement("div");
+  messageEl.className = `message ${type}`;
+  messageEl.textContent = content;
+  messagesContainer.appendChild(messageEl);
+  messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}
+
+// Slash command autocomplete
+function handleAutocomplete(input) {
+  const value = input.trim();
+
+  if (!value.startsWith("/")) {
+    autocompleteEl.classList.add("hidden");
+    return;
+  }
+
+  const query = value.toLowerCase();
+  const matches = SLASH_COMMANDS.filter(cmd =>
+    cmd.cmd.toLowerCase().startsWith(query),
+  );
+
+  if (matches.length === 0) {
+    autocompleteEl.classList.add("hidden");
+    return;
+  }
+
+  let html = "";
+  matches.forEach((cmd, index) => {
+    const safeCmd = escapeHtml(cmd.cmd);
+    const safeDesc = escapeHtml(cmd.desc);
+    html += `
+            <div class="autocomplete-item" data-cmd="${safeCmd}" data-index="${index}">
+                <strong>${safeCmd}</strong> - ${safeDesc}
+            </div>
+        `;
+  });
+
+  autocompleteEl.innerHTML = html;
+  autocompleteEl.classList.remove("hidden");
+
+  // Add click handlers
+  autocompleteEl.querySelectorAll(".autocomplete-item").forEach(item => {
+    item.addEventListener("click", () => {
+      promptInput.value = item.dataset.cmd + " ";
+      autocompleteEl.classList.add("hidden");
+      promptInput.focus();
+    });
+  });
+}
+
+// Send message
+function sendMessage() {
+  const prompt = promptInput.value.trim();
+  if (!prompt || !isConnected) {
+    return;
+  }
+
+  ws.send(
+    JSON.stringify({
+      type: "prompt",
+      content: prompt,
+    }),
+  );
+
+  promptInput.value = "";
+  autocompleteEl.classList.add("hidden");
+  sendBtn.disabled = true;
+  promptInput.disabled = true;
+  updateStatus("Processing...", "");
+}
+
+// Event listeners
+sendBtn.addEventListener("click", sendMessage);
+
+promptInput.addEventListener("input", e => {
+  handleAutocomplete(e.target.value);
+});
+
+promptInput.addEventListener("keydown", e => {
+  if (e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+
+    // Check if autocomplete is visible
+    if (!autocompleteEl.classList.contains("hidden")) {
+      const firstItem = autocompleteEl.querySelector(".autocomplete-item");
+      if (firstItem) {
+        promptInput.value = firstItem.dataset.cmd + " ";
+        autocompleteEl.classList.add("hidden");
+        return;
+      }
+    }
+
+    sendMessage();
+  } else if (e.key === "Escape") {
+    autocompleteEl.classList.add("hidden");
+  }
+});
+
+document
+  .getElementById("refresh-files")
+  .addEventListener("click", requestFileTree);
+document
+  .getElementById("refresh-sessions")
+  .addEventListener("click", requestSessions);
+
+// Initialize connection
+connect();

package/dist/web/index.html

@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Super Agent - Web Interface</title>
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link rel="apple-touch-icon" href="logo.png" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="app-layout">
+      <!-- Sidebar -->
+      <div id="sidebar" class="sidebar">
+        <div class="sidebar-header">
+          <h3>📁 Files</h3>
+          <button id="refresh-files" class="icon-btn">↻</button>
+        </div>
+        <div id="file-tree" class="file-tree"></div>
+
+        <div class="sidebar-section">
+          <h3>💼 Sessions</h3>
+          <button id="refresh-sessions" class="icon-btn">↻</button>
+        </div>
+        <div id="sessions-list" class="sessions-list"></div>
+      </div>
+
+      <!-- Main Content -->
+      <div class="main-content">
+        <header>
+          <div
+            style="
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              gap: 20px;
+            "
+          >
+            <img
+              src="logo.png"
+              alt="Super Agent Logo"
+              style="width: 60px; height: 60px"
+            />
+            <div>
+              <h1>🤖 Super Agent</h1>
+              <p class="subtitle">AI-Powered Terminal Assistant</p>
+            </div>
+          </div>
+        </header>
+
+        <div id="chat-container">
+          <div id="messages"></div>
+        </div>
+
+        <div class="input-container">
+          <div id="autocomplete" class="autocomplete hidden"></div>
+          <textarea
+            id="prompt-input"
+            placeholder="Ask Super Agent anything... (type / for commands)"
+            rows="3"
+          ></textarea>
+          <button id="send-btn">Send</button>
+        </div>
+
+        <div id="status" class="status"></div>
+      </div>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>

package/dist/web/styles.css

@@ -0,0 +1,444 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+.update-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: white;
+  padding: 12px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 1000;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.update-banner button {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.update-banner button:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.app-layout {
+  display: flex;
+  height: 100vh;
+  padding: 20px;
+  gap: 20px;
+}
+
+.sidebar {
+  width: 280px;
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidebar-header h3 {
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+.sidebar-section {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.sidebar-section h3 {
+  font-size: 1rem;
+  margin: 0;
+}
+
+.icon-btn {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+}
+
+.icon-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.file-tree,
+.sessions-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.file-item,
+.session-item {
+  padding: 10px 15px;
+  border-radius: 8px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  transition: background 0.2s;
+  font-size: 0.9rem;
+}
+
+.file-item:hover,
+.session-item:hover {
+  background: #f0f0f0;
+}
+
+.file-item.directory {
+  font-weight: 600;
+  color: #667eea;
+}
+
+.session-item {
+  border-left: 3px solid #667eea;
+}
+
+.session-name {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.session-meta {
+  font-size: 0.8rem;
+  color: #666;
+}
+
+.empty-state {
+  text-align: center;
+  color: #999;
+  padding: 20px;
+  font-size: 0.9rem;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 30px;
+  text-align: center;
+}
+
+header h1 {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+}
+
+.subtitle {
+  opacity: 0.9;
+  font-size: 1.1rem;
+}
+
+#chat-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 30px;
+  background: #f8f9fa;
+}
+
+#messages {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.message {
+  padding: 15px 20px;
+  border-radius: 15px;
+  max-width: 80%;
+  animation: slideIn 0.3s ease;
+  white-space: pre-wrap;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.message.user {
+  background: #667eea;
+  color: white;
+  align-self: flex-end;
+  margin-left: auto;
+}
+
+.message.assistant {
+  background: white;
+  color: #333;
+  align-self: flex-start;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.message.tool {
+  background: #fff3cd;
+  color: #856404;
+  align-self: flex-start;
+  font-size: 0.9rem;
+  font-family: monospace;
+}
+
+.message.error {
+  background: #f8d7da;
+  color: #721c24;
+  align-self: flex-start;
+}
+
+.input-container {
+  padding: 20px;
+  background: white;
+  border-top: 1px solid #e9ecef;
+  position: relative;
+}
+
+.autocomplete {
+  position: absolute;
+  bottom: 100%;
+  left: 20px;
+  right: 20px;
+  background: white;
+  border: 2px solid #667eea;
+  border-radius: 10px;
+  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  margin-bottom: 10px;
+}
+
+.autocomplete.hidden {
+  display: none;
+}
+
+.autocomplete-item {
+  padding: 12px 15px;
+  cursor: pointer;
+  transition: background 0.2s;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.autocomplete-item:last-child {
+  border-bottom: none;
+}
+
+.autocomplete-item:hover {
+  background: #f8f9fa;
+}
+
+.autocomplete-item strong {
+  color: #667eea;
+  font-size: 0.95rem;
+}
+
+.input-container > div:not(.autocomplete) {
+  display: flex;
+  gap: 15px;
+}
+
+#prompt-input {
+  flex: 1;
+  padding: 15px;
+  border: 2px solid #e9ecef;
+  border-radius: 10px;
+  font-size: 1rem;
+  font-family: inherit;
+  resize: none;
+  transition: border-color 0.3s;
+}
+
+#prompt-input:focus {
+  outline: none;
+  border-color: #667eea;
+}
+
+#send-btn {
+  padding: 15px 30px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+
+#send-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+#send-btn:active {
+  transform: translateY(0);
+}
+
+#send-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.status {
+  padding: 10px 20px;
+  text-align: center;
+  font-size: 0.9rem;
+  color: #6c757d;
+  background: #e9ecef;
+}
+
+.status.connected {
+  background: #d4edda;
+  color: #155724;
+}
+
+.status.disconnected {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+/* Disconnected banner styles */
+.disconnected-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
+  border-bottom: 2px solid #ffc107;
+  color: #856404;
+  padding: 20px;
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  animation: slideDown 0.3s ease;
+}
+
+.disconnected-banner .banner-content {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.disconnected-banner strong {
+  display: block;
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+}
+
+.disconnected-banner p {
+  margin: 8px 0;
+  line-height: 1.5;
+}
+
+.disconnected-banner ol {
+  margin: 10px 0;
+  padding-left: 25px;
+}
+
+.disconnected-banner li {
+  margin: 8px 0;
+}
+
+.disconnected-banner code {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.95rem;
+}
+
+.disconnected-banner a {
+  color: #667eea;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.disconnected-banner a:hover {
+  text-decoration: underline;
+}
+
+.disconnected-banner .note {
+  font-size: 0.9rem;
+  opacity: 0.8;
+  margin-top: 12px;
+}
+
+.disconnected-banner .dismiss-btn {
+  float: right;
+  padding: 6px 12px;
+  background: rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background 0.2s;
+}
+
+.disconnected-banner .dismiss-btn:hover {
+  background: rgba(0, 0, 0, 0.2);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@involvex/super-agent-cli",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "description": "An open-source AI agent that brings the power of Super Agent directly into your terminal.",
   "keywords": [
     "cli",
@@ -28,7 +28,7 @@
   },
   "main": "dist/index.js",
   "bin": {
-    "super-agent": "dist/index.js"
+    "super-agent": "super-agent.js"
   },
   "workspaces": [
     "@plugins/templates/*",
@@ -37,13 +37,14 @@
   ],
   "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",
+    "build": "bun build src/index.ts --outdir ./dist --target node --packages external --format esm && bun run copy-bin && bun run build:web",
     "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",
     "build:web": "bun run scripts/build-web.ts",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "compile": "bun run prebuild && bun build --compile src/index.ts --outfile ./dist/super-agent-cli.exe --config bunfig.toml",
+    "copy-bin": "cp super-agent.js dist/super-agent.js",
     "dev": "bun run --watch src/index.ts",
     "dev:node": "tsx src/index.ts",
     "format": "prettier --write .",
@@ -52,8 +53,8 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-pattern dist",
     "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix --ignore-pattern dist",
     "package:vscode": "bun run -F super-agent-vscode package",
-    "start": "node dist/index.js",
-    "start:bun": "bun run dist/index.js",
+    "start": "bun run dist/index.js",
+    "start:node": "node dist/index.js",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:integration": "vitest run src/tests/integration",

package/super-agent.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env bun
+// Super Agent CLI wrapper script
+// This ensures the bundled code runs with bun for proper module resolution
+
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Import and run the bundled CLI
+import(join(__dirname, "dist", "index.js"));

package/vscode-extension/README.md

@@ -62,6 +62,8 @@ You can:
 
 ## Development
 
+**Note**: This extension uses `npm` for dependency management (required by `vsce` packaging tool), while the root project uses `bun`.
+
 ```bash
 # Install dependencies
 npm install

package/vscode-extension/build.js

@@ -24,4 +24,35 @@ for (const file of assetsToCopy) {
   }
 }
 
+// Copy ws dependency to out/node_modules for packaging
+const wsSrc = path.join(__dirname, "node_modules", "ws");
+const wsDest = path.join(outDir, "node_modules", "ws");
+
+if (fs.existsSync(wsSrc)) {
+  // Copy recursively
+  copyDirectory(wsSrc, wsDest);
+  console.log("Copied ws to out/node_modules/");
+} else {
+  console.warn("ws not found in node_modules");
+}
+
+function copyDirectory(src, dest) {
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDirectory(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
 // Note: icon.png is already in the extension root, no need to copy

package/vscode-extension/package.json

@@ -33,6 +33,11 @@
         "title": "Open Super Agent Chat",
         "icon": "icon.png"
       },
+      {
+        "command": "super-agent.reconnect",
+        "title": "Reconnect to CLI",
+        "icon": "icon.png"
+      },
       {
         "command": "super-agent.mentionFile",
         "title": "Mention File in Chat"