@zhongqian97-code/ecode 0.5.30 → 0.5.31

package/dist/index.js

@@ -5700,6 +5700,21 @@ function generateAdminHtml(version2) {
       to   { opacity: 1; transform: translateX(0); }
     }
 
+    /* \u2500\u2500 Skill dropdown \u2500\u2500 */
+    #skill-dropdown .skill-item {
+      padding: 8px 12px;
+      cursor: pointer;
+      border-bottom: 1px solid #30363d;
+      display: flex;
+      gap: 8px;
+      align-items: baseline;
+    }
+    #skill-dropdown .skill-item:last-child { border-bottom: none; }
+    #skill-dropdown .skill-item:hover,
+    #skill-dropdown .skill-item.selected { background: #2d333b; }
+    #skill-dropdown .skill-name { color: #79c0ff; font-weight: 600; font-size: 0.9em; }
+    #skill-dropdown .skill-desc { color: #8b949e; font-size: 0.8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
+
     /* \u2500\u2500 Mobile \u2500\u2500 */
     @media (max-width: 600px) {
       #hamburger { display: block; }
@@ -5711,6 +5726,22 @@ function generateAdminHtml(version2) {
         transition: transform .2s ease;
       }
       #sidebar.open { transform: translateX(0); }
+
+      /* Fix input bar on mobile */
+      #input-bar {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        bottom: env(safe-area-inset-bottom, 0px);
+        z-index: 40;
+        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
+      }
+
+      /* Add bottom padding to chat so messages don't hide behind fixed input */
+      #messages {
+        padding-bottom: 80px;
+      }
     }
   </style>
 </head>
@@ -5749,6 +5780,7 @@ function generateAdminHtml(version2) {
         <div class="empty-chat">\u2190 \u4ECE\u5DE6\u4FA7\u9009\u62E9\u4F1A\u8BDD\uFF0C\u6216\u70B9\u51FB"\u65B0\u5EFA\u4F1A\u8BDD"\u5F00\u59CB</div>
       </div>
       <div id="ws-status" class="ws-status"></div>
+      <div id="skill-dropdown" style="display:none;position:fixed;bottom:60px;left:14px;right:14px;max-height:200px;overflow-y:auto;background:#1c2128;border:1px solid #30363d;border-radius:6px;z-index:60;"></div>
       <div id="input-bar">
         <textarea id="msg-input" rows="1" placeholder="\u8F93\u5165\u6D88\u606F\uFF0C\u6309 Enter \u53D1\u9001\uFF08Shift+Enter \u6362\u884C\uFF09\u2026" disabled></textarea>
         <button id="send-btn" disabled>\u53D1\u9001</button>
@@ -5813,6 +5845,8 @@ function generateAdminHtml(version2) {
       wsRetries: 0,
       streamingMsgEl: null,  // DOM element currently receiving delta tokens
       showTools: true,
+      skills: [],            // cached skills from /api/skills
+      skillsLoaded: false,
     };
 
     // \u2500\u2500 Toast \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -6161,6 +6195,70 @@ function generateAdminHtml(version2) {
         .replace(/>/g, '&gt;');
     }
 
+    // \u2500\u2500 Skill dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    var selectedSkillIndex = -1;
+
+    async function loadSkills() {
+      if (state.skillsLoaded) return;
+      try {
+        const data = await apiFetch('/api/skills');
+        state.skills = Array.isArray(data) ? data : [];
+        state.skillsLoaded = true;
+      } catch (e) {
+        state.skills = [];
+      }
+    }
+
+    function showSkillDropdown(query) {
+      const dropdown = document.getElementById('skill-dropdown');
+      if (!dropdown) return;
+      const q = query.toLowerCase();
+      const filtered = state.skills.filter(function(s) {
+        return s.name.toLowerCase().startsWith(q);
+      });
+      if (!filtered.length) {
+        dropdown.style.display = 'none';
+        selectedSkillIndex = -1;
+        return;
+      }
+      selectedSkillIndex = -1;
+      dropdown.innerHTML = filtered.map(function(s, i) {
+        return '<div class="skill-item" data-name="' + escHtml(s.name) + '">' +
+          '<span class="skill-name">/' + escHtml(s.name) + '</span>' +
+          '<span class="skill-desc">' + escHtml(s.description || '') + '</span>' +
+          '</div>';
+      }).join('');
+      dropdown.querySelectorAll('.skill-item').forEach(function(el) {
+        el.addEventListener('click', function() {
+          var name = el.getAttribute('data-name');
+          var inputEl = document.getElementById('msg-input');
+          inputEl.value = '/' + name + ' ';
+          hideSkillDropdown();
+          inputEl.focus();
+        });
+      });
+      dropdown.style.display = 'block';
+    }
+
+    function hideSkillDropdown() {
+      const dropdown = document.getElementById('skill-dropdown');
+      if (dropdown) dropdown.style.display = 'none';
+      selectedSkillIndex = -1;
+    }
+
+    function updateSkillSelection() {
+      const dropdown = document.getElementById('skill-dropdown');
+      if (!dropdown) return;
+      const items = dropdown.querySelectorAll('.skill-item');
+      items.forEach(function(el, i) {
+        if (i === selectedSkillIndex) {
+          el.classList.add('selected');
+        } else {
+          el.classList.remove('selected');
+        }
+      });
+    }
+
     // \u2500\u2500 Approval modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
     function showApprovalModal(msg) {
       const box = document.getElementById('approval-box');
@@ -6260,17 +6358,57 @@ function generateAdminHtml(version2) {
 
     document.getElementById('send-btn').addEventListener('click', sendMessage);
 
-    document.getElementById('msg-input').addEventListener('keydown', (e) => {
+    document.getElementById('msg-input').addEventListener('keydown', function(e) {
+      const dropdown = document.getElementById('skill-dropdown');
+      const dropdownVisible = dropdown && dropdown.style.display !== 'none';
+      if (dropdownVisible) {
+        const items = dropdown.querySelectorAll('.skill-item');
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          selectedSkillIndex = Math.min(selectedSkillIndex + 1, items.length - 1);
+          updateSkillSelection();
+          return;
+        }
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          selectedSkillIndex = Math.max(selectedSkillIndex - 1, -1);
+          updateSkillSelection();
+          return;
+        }
+        if (e.key === 'Enter' && selectedSkillIndex >= 0) {
+          e.preventDefault();
+          const selected = items[selectedSkillIndex];
+          if (selected) {
+            var name = selected.getAttribute('data-name');
+            var inputEl = document.getElementById('msg-input');
+            inputEl.value = '/' + name + ' ';
+            hideSkillDropdown();
+            inputEl.focus();
+          }
+          return;
+        }
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          hideSkillDropdown();
+          return;
+        }
+      }
       if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault();
         sendMessage();
       }
     });
 
-    // Auto-resize textarea
+    // Auto-resize textarea + slash command dropdown
     document.getElementById('msg-input').addEventListener('input', function() {
       this.style.height = 'auto';
       this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+      const val = this.value;
+      if (val.startsWith('/')) {
+        loadSkills().then(function() { showSkillDropdown(val.slice(1)); });
+      } else {
+        hideSkillDropdown();
+      }
     });
 
     // \u2500\u2500 Hamburger (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -6382,6 +6520,13 @@ function generateAdminHtml(version2) {
       });
     });
 
+    // \u2500\u2500 Skill dropdown: hide on outside click \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    document.addEventListener('click', function(e) {
+      if (!e.target.closest('#skill-dropdown') && !e.target.closest('#msg-input')) {
+        hideSkillDropdown();
+      }
+    });
+
     // \u2500\u2500 Mobile keyboard adaptation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
     document.getElementById('msg-input').addEventListener('focus', () => {
       setTimeout(() => {
@@ -6389,6 +6534,15 @@ function generateAdminHtml(version2) {
       }, 300);
     });
 
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', function() {
+        const bar = document.getElementById('input-bar');
+        if (!bar) return;
+        const offsetBottom = window.innerHeight - window.visualViewport.height - window.visualViewport.offsetTop;
+        bar.style.bottom = Math.max(0, offsetBottom) + 'px';
+      });
+    }
+
     // \u2500\u2500 Global error boundary \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
     window.onerror = function(msg, src, line) {
       const wsStatusEl = document.getElementById('ws-status');
@@ -6664,6 +6818,9 @@ async function chatRoutes(app, opts) {
     if (typeof body.systemPrompt === "string") {
       sessionOpts.systemPrompt = body.systemPrompt;
     }
+    if (opts.autoApprove) {
+      sessionOpts.autoApproveNormal = true;
+    }
     if (!opts.config.apiKey) {
       return reply.code(400).send({
         success: false,
@@ -6828,6 +6985,80 @@ async function systemRoutes(app, opts) {
   });
 }
 
+// src/web/routes/skills.ts
+import { readdir as readdir5, readFile as readFile10 } from "fs/promises";
+import { join as join15 } from "path";
+import os2 from "os";
+var BUILTIN_COMMANDS = [
+  { name: "clear", description: "Clear conversation history", type: "builtin" },
+  { name: "interrupt", description: "Interrupt current operation", type: "builtin" },
+  { name: "help", description: "Show help information", type: "builtin" }
+];
+function parseFrontmatter2(content) {
+  const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+  if (!match) return null;
+  const frontmatter = match[1];
+  const nameMatch = frontmatter.match(/^name:\s*(.+)$/m);
+  if (!nameMatch) return null;
+  const descMatch = frontmatter.match(/^description:\s*(?:>-?|[|>+])?\s*(.+)$/m);
+  if (!descMatch) return null;
+  const name = nameMatch[1].trim();
+  const description = descMatch[1].trim();
+  if (!name || !description) return null;
+  return { name, description };
+}
+async function loadAgents() {
+  const agentsDir = join15(os2.homedir(), ".claude", "agents");
+  let files;
+  try {
+    const entries = await readdir5(agentsDir);
+    files = entries.filter((f) => f.endsWith(".md"));
+  } catch {
+    return [];
+  }
+  const items = [];
+  for (const file of files) {
+    try {
+      const content = await readFile10(join15(agentsDir, file), "utf-8");
+      const parsed = parseFrontmatter2(content);
+      if (parsed) {
+        items.push({ ...parsed, type: "agent" });
+      }
+    } catch {
+    }
+  }
+  return items;
+}
+async function loadSkills() {
+  const skillsDir = join15(process.cwd(), "skills");
+  let subdirs;
+  try {
+    const entries = await readdir5(skillsDir, { withFileTypes: true });
+    subdirs = entries.filter((e) => e.isDirectory()).map((e) => e.name);
+  } catch {
+    return [];
+  }
+  const items = [];
+  for (const subdir of subdirs) {
+    try {
+      const skillFile = join15(skillsDir, subdir, "SKILL.md");
+      const content = await readFile10(skillFile, "utf-8");
+      const parsed = parseFrontmatter2(content);
+      if (parsed) {
+        items.push({ ...parsed, type: "skill" });
+      }
+    } catch {
+    }
+  }
+  return items;
+}
+async function skillsRoutes(app) {
+  app.get("/api/skills", async (_request, _reply) => {
+    const [agents, skills] = await Promise.all([loadAgents(), loadSkills()]);
+    return [...BUILTIN_COMMANDS, ...agents, ...skills];
+  });
+}
+
 // src/web/server.ts
 async function buildServer(opts) {
   const app = Fastify({ logger: false });
@@ -6854,8 +7085,9 @@ async function buildServer(opts) {
   await app.register(sessionsRoutes, { config: opts.config, manager: opts.manager });
   await app.register(configRoutes, { config: opts.config, save: saveConfig });
   await app.register(automationRoutes, { config: opts.config });
-  await app.register(chatRoutes, { config: opts.config, manager: opts.manager });
+  await app.register(chatRoutes, { config: opts.config, manager: opts.manager, autoApprove: opts.autoApprove });
   await app.register(systemRoutes, { version: opts.version });
+  await app.register(skillsRoutes);
   await app.register(sessionHubRoutes, { manager: opts.manager });
   return app;
 }
@@ -6951,6 +7183,7 @@ var SessionRuntime = class {
   messages;
   config;
   model;
+  autoApproveNormal;
   abortController = null;
   _stopAfterToolRound = false;
   _turnCount = 0;
@@ -6963,6 +7196,7 @@ var SessionRuntime = class {
     this.config = config2;
     this.llm = opts.llm ?? createProvider(resolveActiveProfile(config2));
     this.model = config2.model;
+    this.autoApproveNormal = opts.autoApproveNormal ?? false;
     const systemContent = opts.systemPrompt ?? (config2.systemPrompt ?? DEFAULT_SYSTEM_PROMPT);
     this.messages = systemContent ? [{ role: "system", content: systemContent }] : [];
     if (opts.initialMessages) {
@@ -7101,17 +7335,20 @@ var SessionRuntime = class {
         const parsed = JSON.parse(args);
         const cls = classifyCommand(parsed.command, this.config.dangerousPatterns);
         if (cls === "normal" || cls === "danger") {
-          this._status = "awaiting_confirm";
-          const kind = cls === "danger" ? "danger" : "normal";
-          const prompt = cls === "danger" ? `\u26A0\uFE0F DANGEROUS COMMAND: ${parsed.command}` : `Execute command: ${parsed.command}
+          if (cls === "normal" && this.autoApproveNormal) {
+          } else {
+            this._status = "awaiting_confirm";
+            const kind = cls === "danger" ? "danger" : "normal";
+            const prompt = cls === "danger" ? `\u26A0\uFE0F DANGEROUS COMMAND: ${parsed.command}` : `Execute command: ${parsed.command}
 Proceed?`;
-          const { id: reqId, promise } = this.approvals.request(kind, prompt);
-          this.bus.emit({ type: "approval.requested", requestId: reqId, kind, prompt });
-          const approved = await promise;
-          this._status = "tool_calling";
-          if (!approved) {
-            this._stopAfterToolRound = true;
-            return SKIP_MESSAGE;
+            const { id: reqId, promise } = this.approvals.request(kind, prompt);
+            this.bus.emit({ type: "approval.requested", requestId: reqId, kind, prompt });
+            const approved = await promise;
+            this._status = "tool_calling";
+            if (!approved) {
+              this._stopAfterToolRound = true;
+              return SKIP_MESSAGE;
+            }
           }
         }
         if (signal.aborted) return SKIP_MESSAGE;
@@ -7389,6 +7626,7 @@ if (rawArgs[0] === "sessions") {
 if (rawArgs[0] === "web") {
   let webPort = 4310;
   let webHost = "127.0.0.1";
+  let webAutoApprove = false;
   for (let i = 1; i < rawArgs.length; i++) {
     const arg = rawArgs[i];
     const next = rawArgs[i + 1];
@@ -7399,6 +7637,8 @@ if (rawArgs[0] === "web") {
     } else if (arg === "--host" && next && !next.startsWith("-")) {
       webHost = next;
       i++;
+    } else if (arg === "--auto") {
+      webAutoApprove = true;
     }
   }
   const token = generateAccessToken();
@@ -7407,7 +7647,8 @@ if (rawArgs[0] === "web") {
     config: finalConfig,
     manager,
     token,
-    version: VERSION
+    version: VERSION,
+    autoApprove: webAutoApprove
   });
   await server.listen({ port: webPort, host: webHost });
   const browserHost = webHost === "0.0.0.0" ? "localhost" : webHost;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhongqian97-code/ecode",
-  "version": "0.5.30",
+  "version": "0.5.31",
   "description": "A minimal Claude Code clone with REPL interface and bash tool calling",
   "type": "module",
   "author": "zhongqian97-code",