@involvex/super-agent-cli 0.0.79 → 0.0.81

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/eslint.config.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@involvex/super-agent-cli",
-  "version": "0.0.79",
+  "version": "0.0.81",
   "description": "An open-source AI agent that brings the power of Super Agent directly into your terminal.",
   "keywords": [
     "cli",
@@ -28,20 +28,23 @@
   },
   "main": "dist/index.js",
   "bin": {
-    "super-agent": "dist/index.js"
+    "super-agent": "super-agent.js"
   },
   "workspaces": [
     "@plugins/templates/*",
-    "@plugins/examples/*"
+    "@plugins/examples/*",
+    "vscode-extension"
   ],
   "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 .",
@@ -49,8 +52,9 @@
     "install:bun": "bun install",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-pattern dist",
     "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix --ignore-pattern dist",
-    "start": "node dist/index.js",
-    "start:bun": "bun run dist/index.js",
+    "package:vscode": "bun run -F super-agent-vscode package",
+    "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/.vscodeignore

@@ -0,0 +1,39 @@
+# Source files
+src/
+*.ts
+!**/out/**/*.js
+tsconfig.json
+
+# Build files
+build.js
+bun.lock
+bun.lockb
+
+# Config files
+.eslintrc*
+.prettierrc*
+.eslintrc.json
+.prettierignore
+
+# Development files
+.vscode/
+.vscode-test/
+
+# Git files
+.git*
+.gitignore
+
+# Test files
+**/*.test.ts
+**/*.spec.ts
+test/
+tests/
+
+# Documentation
+CHANGELOG.md
+docs/
+
+# Lock files (ws dependency will be bundled automatically)
+package-lock.json
+yarn.lock
+pnpm-lock.yaml

package/vscode-extension/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 involvex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -9,10 +9,10 @@ if (!fs.existsSync(outDir)) {
   fs.mkdirSync(outDir, { recursive: true });
 }
 
-// Copy CSS and TypeScript files
-const filesToCopy = ["chat.css", "chat.ts"];
+// Copy webview assets (these are plain JS/CSS files that run in the browser)
+const assetsToCopy = ["chat.js", "chat.css"];
 
-for (const file of filesToCopy) {
+for (const file of assetsToCopy) {
   const srcPath = path.join(srcDir, file);
   const outPath = path.join(outDir, file);
 
@@ -20,6 +20,39 @@ for (const file of filesToCopy) {
     fs.copyFileSync(srcPath, outPath);
     console.log(`Copied ${file} to out/`);
   } else {
-    console.error(`Source file not found: ${srcPath}`);
+    console.warn(`Source file not found: ${srcPath}`);
   }
 }
+
+// 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

@@ -8,14 +8,35 @@
     "Other",
     "Programming Languages"
   ],
+  "homepage": "https://involvex.github.io/super-agent-cli/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/involvex/super-agent-cli.git"
+  },
+  "license": "MIT",
   "publisher": "involvex",
   "main": "./out/extension.js",
+  "scripts": {
+    "build": "npm run compile && npm run copy-assets",
+    "compile": "tsc -p ./",
+    "copy-assets": "node build.js",
+    "lint": "eslint src --ext ts",
+    "package": "vsce package --no-dependencies",
+    "typecheck": "tsc --noEmit",
+    "vscode:prepublish": "npm run compile && npm run copy-assets",
+    "watch": "tsc -w -p ./"
+  },
   "contributes": {
     "commands": [
       {
         "command": "super-agent.openChat",
         "title": "Open Super Agent Chat",
-        "icon": "assets/icon.svg"
+        "icon": "icon.png"
+      },
+      {
+        "command": "super-agent.reconnect",
+        "title": "Reconnect to CLI",
+        "icon": "icon.png"
       },
       {
         "command": "super-agent.mentionFile",
@@ -31,7 +52,8 @@
         {
           "type": "webview",
           "id": "super-agent.chat",
-          "name": "Chat"
+          "name": "Chat",
+          "icon": "icon.png"
         }
       ]
     },
@@ -40,7 +62,7 @@
         {
           "id": "super-agent-sidebar",
           "title": "Super Agent",
-          "icon": "assets/icon.svg"
+          "icon": "icon.png"
         }
       ]
     }
@@ -48,9 +70,20 @@
   "activationEvents": [
     "onStartupFinished"
   ],
+  "dependencies": {
+    "ws": "^8.19.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.17.6",
+    "@types/vscode": "^1.80.0",
+    "@types/ws": "^8.5.13",
+    "@vscode/vsce": "^3.2.1",
+    "typescript": "^5.7.2"
+  },
   "engines": {
     "vscode": "^1.80.0"
   },
+  "icon": "icon.png",
   "configuration": {
     "title": "Super Agent",
     "properties": {