npm - @zhongqian97-code/ecode - Versions diffs - 0.5.18 → 0.5.20 - Mend

@zhongqian97-code/ecode 0.5.18 → 0.5.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/index.js +746 -0
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -5244,6 +5244,748 @@ function createAuthHook(token) {
   };
 }
+// src/web/admin-html.ts
+function generateAdminHtml(version2) {
+  return `<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ecode web admin</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: "Courier New", Courier, monospace;
+      background: #0d1117;
+      color: #c9d1d9;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    /* \u2500\u2500 Top bar \u2500\u2500 */
+    #topbar {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 14px;
+      background: #161b22;
+      border-bottom: 1px solid #30363d;
+      flex-shrink: 0;
+    }
+    #topbar h1 { font-size: 14px; color: #e6edf3; font-weight: 600; }
+    #topbar .version { font-size: 11px; color: #8b949e; background: #21262d;
+      padding: 1px 7px; border-radius: 20px; }
+    #hamburger {
+      display: none; background: none; border: none; color: #c9d1d9;
+      font-size: 18px; cursor: pointer; padding: 2px 6px;
+    }
+    /* \u2500\u2500 Main layout \u2500\u2500 */
+    #app {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+    }
+    /* \u2500\u2500 Sidebar \u2500\u2500 */
+    #sidebar {
+      width: 220px;
+      flex-shrink: 0;
+      background: #161b22;
+      border-right: 1px solid #30363d;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    #sidebar-header {
+      padding: 10px 12px;
+      border-bottom: 1px solid #30363d;
+      flex-shrink: 0;
+    }
+    #new-session-btn {
+      width: 100%;
+      padding: 6px 10px;
+      background: #21262d;
+      color: #79c0ff;
+      border: 1px solid #30363d;
+      border-radius: 4px;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 12px;
+      text-align: left;
+    }
+    #new-session-btn:hover { background: #30363d; }
+    #session-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 6px 0;
+    }
+    .session-item {
+      padding: 8px 12px;
+      cursor: pointer;
+      border-left: 2px solid transparent;
+      font-size: 12px;
+      line-height: 1.4;
+    }
+    .session-item:hover { background: #21262d; }
+    .session-item.active {
+      background: #21262d;
+      border-left-color: #79c0ff;
+    }
+    .session-item .s-title { color: #c9d1d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .session-item .s-id { color: #8b949e; font-size: 10px; }
+    .sidebar-empty { color: #8b949e; font-size: 12px; font-style: italic; padding: 12px; }
+    /* \u2500\u2500 Chat area \u2500\u2500 */
+    #chat-area {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    #chat-header {
+      padding: 10px 14px;
+      border-bottom: 1px solid #30363d;
+      background: #161b22;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    #chat-title { font-size: 13px; color: #8b949e; }
+    #status-indicator {
+      margin-left: auto;
+      font-size: 11px;
+      color: #8b949e;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+    #status-dot {
+      width: 7px; height: 7px; border-radius: 50%;
+      background: #3fb950;
+    }
+    #status-dot.thinking { background: #d29922; animation: pulse 1s infinite; }
+    #status-dot.error { background: #f85149; }
+    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
+    /* \u2500\u2500 Messages \u2500\u2500 */
+    #messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .msg {
+      font-size: 13px;
+      line-height: 1.6;
+      max-width: 100%;
+    }
+    .msg-header {
+      font-size: 11px;
+      margin-bottom: 3px;
+      font-weight: 600;
+    }
+    .msg-header.user { color: #3fb950; }
+    .msg-header.assistant { color: #c9d1d9; }
+    .msg-header.tool { color: #8b949e; }
+    .msg-body { color: #c9d1d9; white-space: pre-wrap; word-break: break-word; }
+    .msg-body code {
+      background: #21262d;
+      padding: 1px 5px;
+      border-radius: 3px;
+      font-family: inherit;
+      font-size: 12px;
+    }
+    .msg-body pre {
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 4px;
+      padding: 10px;
+      overflow-x: auto;
+      margin: 6px 0;
+    }
+    .msg-body pre code { background: none; padding: 0; }
+    .msg-body strong { color: #e6edf3; }
+    .tool-box {
+      border: 1px solid #30363d;
+      border-radius: 4px;
+      font-size: 12px;
+      overflow: hidden;
+      margin: 4px 0;
+    }
+    .tool-box-header {
+      background: #21262d;
+      padding: 4px 10px;
+      color: #8b949e;
+      font-size: 11px;
+    }
+    .tool-box-body {
+      padding: 8px 10px;
+      color: #c9d1d9;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .cursor-blink::after {
+      content: "\u258B";
+      animation: blink 1s step-start infinite;
+    }
+    @keyframes blink { 50% { opacity: 0; } }
+    .empty-chat {
+      color: #8b949e;
+      font-size: 13px;
+      font-style: italic;
+      text-align: center;
+      padding: 40px 20px;
+    }
+    .ws-status {
+      font-size: 11px;
+      color: #8b949e;
+      text-align: center;
+      padding: 4px;
+      flex-shrink: 0;
+    }
+    /* \u2500\u2500 Input bar \u2500\u2500 */
+    #input-bar {
+      border-top: 1px solid #30363d;
+      background: #161b22;
+      padding: 10px 14px;
+      display: flex;
+      gap: 8px;
+      align-items: flex-end;
+      flex-shrink: 0;
+    }
+    #msg-input {
+      flex: 1;
+      background: #0d1117;
+      border: 1px solid #30363d;
+      border-radius: 4px;
+      color: #c9d1d9;
+      font-family: inherit;
+      font-size: 13px;
+      padding: 8px 10px;
+      resize: none;
+      outline: none;
+      min-height: 38px;
+      max-height: 120px;
+    }
+    #msg-input:focus { border-color: #58a6ff; }
+    #msg-input:disabled { opacity: 0.5; cursor: not-allowed; }
+    #send-btn {
+      padding: 8px 14px;
+      background: #21262d;
+      color: #79c0ff;
+      border: 1px solid #30363d;
+      border-radius: 4px;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 13px;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+    #send-btn:hover:not(:disabled) { background: #30363d; }
+    #send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    /* \u2500\u2500 Approval modal \u2500\u2500 */
+    #approval-modal {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,.65);
+      z-index: 100;
+      align-items: center;
+      justify-content: center;
+    }
+    #approval-modal.visible { display: flex; }
+    #approval-box {
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      width: min(520px, 90vw);
+      padding: 20px;
+    }
+    #approval-box.danger { border-color: #f85149; }
+    #approval-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #e6edf3;
+      margin-bottom: 10px;
+    }
+    #approval-prompt {
+      background: #0d1117;
+      border: 1px solid #30363d;
+      border-radius: 4px;
+      padding: 10px;
+      font-size: 12px;
+      color: #c9d1d9;
+      white-space: pre-wrap;
+      word-break: break-word;
+      max-height: 200px;
+      overflow-y: auto;
+      margin-bottom: 14px;
+    }
+    #approval-actions { display: flex; gap: 10px; justify-content: flex-end; }
+    #deny-btn {
+      padding: 6px 14px;
+      background: none;
+      border: 1px solid #30363d;
+      color: #c9d1d9;
+      border-radius: 4px;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 13px;
+    }
+    #deny-btn:hover { background: #21262d; }
+    #approve-btn {
+      padding: 6px 14px;
+      background: #1a4731;
+      border: 1px solid #3fb950;
+      color: #3fb950;
+      border-radius: 4px;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 13px;
+    }
+    #approve-btn:hover { background: #2ea043; color: #fff; }
+    /* \u2500\u2500 Mobile \u2500\u2500 */
+    @media (max-width: 600px) {
+      #hamburger { display: block; }
+      #sidebar {
+        position: fixed;
+        top: 0; left: 0; bottom: 0;
+        z-index: 50;
+        transform: translateX(-100%);
+        transition: transform .2s ease;
+      }
+      #sidebar.open { transform: translateX(0); }
+    }
+  </style>
+</head>
+<body>
+  <div id="topbar">
+    <button id="hamburger" aria-label="Toggle sidebar">\u2630</button>
+    <h1>\u26A1 ecode web admin</h1>
+    <span class="version">v${version2}</span>
+  </div>
+  <div id="app">
+    <!-- Left: session sidebar -->
+    <div id="sidebar">
+      <div id="sidebar-header">
+        <button id="new-session-btn">\uFF0B \u65B0\u5EFA\u4F1A\u8BDD</button>
+      </div>
+      <div id="session-list">
+        <div class="sidebar-empty">\u52A0\u8F7D\u4E2D\u2026</div>
+      </div>
+    </div>
+    <!-- Right: chat area -->
+    <div id="chat-area">
+      <div id="chat-header">
+        <span id="chat-title">\u9009\u62E9\u6216\u65B0\u5EFA\u4F1A\u8BDD</span>
+        <div id="status-indicator">
+          <div id="status-dot"></div>
+          <span id="status-text">idle</span>
+        </div>
+      </div>
+      <div id="messages">
+        <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="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>
+      </div>
+    </div>
+  </div>
+  <!-- Bash approval modal -->
+  <div id="approval-modal" role="dialog" aria-modal="true">
+    <div id="approval-box">
+      <div id="approval-title">\u26A0 \u8BF7\u6C42 Bash \u6267\u884C\u6743\u9650</div>
+      <pre id="approval-prompt"></pre>
+      <div id="approval-actions">
+        <button id="deny-btn">\u62D2\u7EDD</button>
+        <button id="approve-btn">\u5141\u8BB8</button>
+      </div>
+    </div>
+  </div>
+  <script>
+    // \u2500\u2500 State \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
+    const state = {
+      token: new URLSearchParams(location.search).get('token') || '',
+      sessions: [],
+      activeSessionId: null,
+      messages: [],
+      ws: null,
+      pendingApproval: null,
+      status: 'idle',        // idle | thinking | tool_calling | awaiting_confirm
+      wsRetries: 0,
+      streamingMsgEl: null,  // DOM element currently receiving delta tokens
+    };
+    // \u2500\u2500 Helpers \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
+    function apiUrl(path) {
+      const sep = path.includes('?') ? '&' : '?';
+      return path + sep + 'token=' + encodeURIComponent(state.token);
+    }
+    async function apiFetch(path, opts) {
+      const url = apiUrl(path);
+      const res = await fetch(url, opts);
+      if (!res.ok) throw new Error(res.status + ' ' + res.statusText);
+      return res.json();
+    }
+    function wsUrl(sessionId) {
+      const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      return proto + '//' + location.host + '/api/ws/sessions/' + sessionId + '?token=' + encodeURIComponent(state.token);
+    }
+    // Basic markdown \u2192 HTML (no libs)
+    function renderMarkdown(text) {
+      // Escape HTML first
+      let s = text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+      // Code blocks
+      s = s.replace(/\`\`\`([\\s\\S]*?)\`\`\`/g, (_, code) =>
+        '<pre><code>' + code.trim() + '</code></pre>');
+      // Inline code
+      s = s.replace(/\`([^\`]+)\`/g, '<code>$1</code>');
+      // Bold
+      s = s.replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>');
+      // Paragraph breaks
+      s = s.replace(/\\n\\n+/g, '</p><p>');
+      return '<p>' + s + '</p>';
+    }
+    // \u2500\u2500 Status \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
+    function setStatus(status) {
+      state.status = status;
+      const dot = document.getElementById('status-dot');
+      const txt = document.getElementById('status-text');
+      dot.className = '';
+      if (status === 'idle') {
+        dot.style.background = '#3fb950';
+        txt.textContent = 'idle';
+      } else if (status === 'thinking') {
+        dot.className = 'thinking';
+        dot.style.background = '';
+        txt.textContent = 'thinking\u2026';
+      } else if (status === 'tool_calling') {
+        dot.className = 'thinking';
+        dot.style.background = '';
+        txt.textContent = 'tool\u2026';
+      } else if (status === 'awaiting_confirm') {
+        dot.style.background = '#d29922';
+        txt.textContent = 'awaiting approval';
+      }
+      const inputEl = document.getElementById('msg-input');
+      const sendEl = document.getElementById('send-btn');
+      const canType = status === 'idle' && state.activeSessionId;
+      inputEl.disabled = !canType;
+      sendEl.disabled = !canType;
+    }
+    // \u2500\u2500 Sidebar \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
+    function renderSidebar() {
+      const listEl = document.getElementById('session-list');
+      if (!state.sessions.length) {
+        listEl.innerHTML = '<div class="sidebar-empty">\u6682\u65E0\u4F1A\u8BDD</div>';
+        return;
+      }
+      listEl.innerHTML = state.sessions.map(s => {
+        const active = s.id === state.activeSessionId ? ' active' : '';
+        const title = (s.title || '(\u65E0\u6807\u9898)').replace(/</g, '&lt;');
+        const id = s.id.slice(0, 8);
+        return '<div class="session-item' + active + '" data-id="' + s.id + '">' +
+          '<div class="s-title">' + title + '</div>' +
+          '<div class="s-id">' + id + '\u2026</div>' +
+          '</div>';
+      }).join('');
+      listEl.querySelectorAll('.session-item').forEach(el => {
+        el.addEventListener('click', () => selectSession(el.dataset.id));
+      });
+    }
+    async function loadSessions() {
+      try {
+        const data = await apiFetch('/api/sessions');
+        state.sessions = data.sessions || data.data || data || [];
+        renderSidebar();
+      } catch (e) {
+        document.getElementById('session-list').innerHTML =
+          '<div class="sidebar-empty" style="color:#f85149">\u52A0\u8F7D\u5931\u8D25</div>';
+      }
+    }
+    // \u2500\u2500 Messages \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
+    function clearMessages() {
+      document.getElementById('messages').innerHTML =
+        '<div class="empty-chat">\u2190 \u52A0\u8F7D\u4F1A\u8BDD\u4E2D\u2026</div>';
+      state.messages = [];
+      state.streamingMsgEl = null;
+    }
+    function appendMessage(role, htmlContent, opts) {
+      const msgsEl = document.getElementById('messages');
+      // Remove empty-chat placeholder
+      const placeholder = msgsEl.querySelector('.empty-chat');
+      if (placeholder) placeholder.remove();
+      const msgEl = document.createElement('div');
+      msgEl.className = 'msg';
+      const prefix = role === 'user' ? '[user]' : role === 'tool' ? '[tool]' : '[assistant]';
+      msgEl.innerHTML =
+        '<div class="msg-header ' + role + '">' + prefix + '</div>' +
+        '<div class="msg-body">' + htmlContent + '</div>';
+      if (opts && opts.streaming) {
+        msgEl.querySelector('.msg-body').classList.add('cursor-blink');
+      }
+      msgsEl.appendChild(msgEl);
+      msgsEl.scrollTop = msgsEl.scrollHeight;
+      return msgEl;
+    }
+    function finalizeStreamingMsg() {
+      if (state.streamingMsgEl) {
+        const body = state.streamingMsgEl.querySelector('.msg-body');
+        if (body) body.classList.remove('cursor-blink');
+        state.streamingMsgEl = null;
+      }
+    }
+    // \u2500\u2500 WebSocket \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
+    function connectWs(sessionId) {
+      if (state.ws) {
+        state.ws.onclose = null;
+        state.ws.close();
+        state.ws = null;
+      }
+      state.wsRetries = 0;
+      openWs(sessionId);
+    }
+    function openWs(sessionId) {
+      const url = wsUrl(sessionId);
+      const ws = new WebSocket(url);
+      state.ws = ws;
+      document.getElementById('ws-status').textContent = '\u8FDE\u63A5\u4E2D\u2026';
+      ws.onopen = () => {
+        document.getElementById('ws-status').textContent = '';
+        state.wsRetries = 0;
+        setStatus('idle');
+      };
+      ws.onmessage = (evt) => {
+        let msg;
+        try { msg = JSON.parse(evt.data); } catch { return; }
+        handleWsEvent(msg);
+      };
+      ws.onerror = () => {
+        document.getElementById('ws-status').textContent = 'WebSocket \u9519\u8BEF';
+      };
+      ws.onclose = () => {
+        document.getElementById('ws-status').textContent = 'WebSocket \u5DF2\u65AD\u5F00';
+        finalizeStreamingMsg();
+        if (state.activeSessionId === sessionId && state.wsRetries < 5) {
+          state.wsRetries++;
+          setTimeout(() => openWs(sessionId), 3000);
+        }
+      };
+    }
+    function handleWsEvent(msg) {
+      const type = msg.type || msg.event;
+      if (type === 'message.delta') {
+        const token = msg.delta || msg.content || '';
+        if (!state.streamingMsgEl) {
+          state.streamingMsgEl = appendMessage('assistant', escHtml(token), { streaming: true });
+        } else {
+          const body = state.streamingMsgEl.querySelector('.msg-body');
+          body.textContent += token;
+          document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
+        }
+        setStatus('thinking');
+      } else if (type === 'message.completed') {
+        finalizeStreamingMsg();
+        setStatus('idle');
+      } else if (type === 'tool.started') {
+        const name = msg.tool || msg.name || 'tool';
+        const msgsEl = document.getElementById('messages');
+        const placeholder = msgsEl.querySelector('.empty-chat');
+        if (placeholder) placeholder.remove();
+        const boxEl = document.createElement('div');
+        boxEl.className = 'tool-box';
+        boxEl.setAttribute('data-tool-id', msg.id || name);
+        boxEl.innerHTML =
+          '<div class="tool-box-header">\u250C\u2500 ' + escHtml(name) + ' \u2500</div>' +
+          '<div class="tool-box-body">\u2026</div>';
+        msgsEl.appendChild(boxEl);
+        msgsEl.scrollTop = msgsEl.scrollHeight;
+        setStatus('tool_calling');
+      } else if (type === 'tool.completed') {
+        const toolId = msg.id || msg.tool || msg.name || '';
+        const boxEl = document.querySelector('[data-tool-id="' + toolId + '"]');
+        if (boxEl) {
+          const body = boxEl.querySelector('.tool-box-body');
+          body.textContent = msg.output || msg.result || '(\uC644\uB8CC)';
+          boxEl.querySelector('.tool-box-header').textContent =
+            '\u2514\u2500 ' + (msg.tool || msg.name || toolId) + ' \u2500';
+        }
+        setStatus('idle');
+      } else if (type === 'approval.requested') {
+        state.pendingApproval = msg;
+        showApprovalModal(msg);
+        setStatus('awaiting_confirm');
+      } else if (type === 'approval.resolved') {
+        hideApprovalModal();
+        state.pendingApproval = null;
+        setStatus('thinking');
+      } else if (type === 'session.idle') {
+        finalizeStreamingMsg();
+        setStatus('idle');
+      } else if (type === 'session.error') {
+        finalizeStreamingMsg();
+        setStatus('idle');
+        document.getElementById('ws-status').textContent =
+          '\u9519\u8BEF: ' + escHtml(msg.error || 'unknown error');
+      }
+    }
+    function escHtml(s) {
+      return String(s)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    }
+    // \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');
+      box.className = msg.kind === 'danger' ? 'danger' : '';
+      document.getElementById('approval-prompt').textContent =
+        msg.prompt || msg.command || msg.text || JSON.stringify(msg);
+      document.getElementById('approval-modal').classList.add('visible');
+    }
+    function hideApprovalModal() {
+      document.getElementById('approval-modal').classList.remove('visible');
+    }
+    async function sendApproval(approved) {
+      const pending = state.pendingApproval;
+      if (!pending || !state.activeSessionId) return;
+      hideApprovalModal();
+      state.pendingApproval = null;
+      try {
+        await apiFetch('/api/chat/sessions/' + state.activeSessionId + '/approve', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ requestId: pending.requestId || pending.id, approved }),
+        });
+      } catch (e) {
+        document.getElementById('ws-status').textContent = '\u5BA1\u6279\u8BF7\u6C42\u5931\u8D25: ' + e.message;
+      }
+    }
+    document.getElementById('approve-btn').addEventListener('click', () => sendApproval(true));
+    document.getElementById('deny-btn').addEventListener('click', () => sendApproval(false));
+    // \u2500\u2500 Session selection \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 selectSession(id) {
+      state.activeSessionId = id;
+      const session = state.sessions.find(s => s.id === id);
+      document.getElementById('chat-title').textContent =
+        session ? (session.title || id.slice(0, 12) + '\u2026') : id;
+      clearMessages();
+      renderSidebar();
+      setStatus('idle');
+      connectWs(id);
+      // Close sidebar on mobile
+      document.getElementById('sidebar').classList.remove('open');
+    }
+    // \u2500\u2500 New session \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
+    document.getElementById('new-session-btn').addEventListener('click', async () => {
+      try {
+        const data = await apiFetch('/api/chat/sessions', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({}),
+        });
+        const session = data.session || data;
+        if (session && session.id) {
+          state.sessions.unshift(session);
+          renderSidebar();
+          selectSession(session.id);
+        }
+      } catch (e) {
+        document.getElementById('ws-status').textContent = '\u521B\u5EFA\u4F1A\u8BDD\u5931\u8D25: ' + e.message;
+      }
+    });
+    // \u2500\u2500 Send message \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
+    async function sendMessage() {
+      if (state.status !== 'idle' || !state.activeSessionId) return;
+      const inputEl = document.getElementById('msg-input');
+      const text = inputEl.value.trim();
+      if (!text) return;
+      inputEl.value = '';
+      inputEl.style.height = 'auto';
+      appendMessage('user', escHtml(text));
+      setStatus('thinking');
+      try {
+        await apiFetch('/api/chat/sessions/' + state.activeSessionId + '/submit', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ message: text }),
+        });
+      } catch (e) {
+        document.getElementById('ws-status').textContent = '\u53D1\u9001\u5931\u8D25: ' + e.message;
+        setStatus('idle');
+      }
+    }
+    document.getElementById('send-btn').addEventListener('click', sendMessage);
+    document.getElementById('msg-input').addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+    // Auto-resize textarea
+    document.getElementById('msg-input').addEventListener('input', function() {
+      this.style.height = 'auto';
+      this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+    });
+    // \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
+    document.getElementById('hamburger').addEventListener('click', () => {
+      document.getElementById('sidebar').classList.toggle('open');
+    });
+    // \u2500\u2500 Init \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\u2500
+    loadSessions();
+  </script>
+</body>
+</html>`;
+}
 // src/web/routes/status.ts
 async function statusRoutes(app, opts) {
   app.get(
@@ -5551,6 +6293,10 @@ async function buildServer(opts) {
     authHook(request, reply, done);
   });
   app.get("/health", async () => ({ ok: true }));
+  const adminHtml = generateAdminHtml(opts.version);
+  app.get("/", async (_req, reply) => {
+    return reply.type("text/html").send(adminHtml);
+  });
   await app.register(statusRoutes, {
     config: opts.config,
     manager: opts.manager,

package/package.json CHANGED Viewed

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