@zhongqian97-code/ecode 0.5.19 → 0.5.20

package/dist/index.js

@@ -5255,119 +5255,732 @@ function generateAdminHtml(version2) {
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
-      background: #0d1117; color: #c9d1d9; min-height: 100vh; padding: 24px;
-    }
-    header {
-      display: flex; align-items: center; gap: 12px;
-      padding-bottom: 16px; border-bottom: 1px solid #21262d; margin-bottom: 24px;
-    }
-    header h1 { font-size: 18px; font-weight: 600; color: #e6edf3; }
-    header .version { font-size: 12px; color: #8b949e; background: #21262d;
-      padding: 2px 8px; border-radius: 20px; }
-    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
-    .card {
-      background: #161b22; border: 1px solid #21262d; border-radius: 8px; padding: 16px;
-    }
-    .card h2 { font-size: 13px; font-weight: 600; color: #8b949e;
-      text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
-    .stat { display: flex; justify-content: space-between; align-items: center;
-      padding: 6px 0; border-bottom: 1px solid #21262d; font-size: 13px; }
-    .stat:last-child { border-bottom: none; }
-    .stat .label { color: #8b949e; }
-    .stat .value { color: #e6edf3; font-weight: 500; }
-    .badge { display: inline-block; padding: 2px 8px; border-radius: 20px;
-      font-size: 11px; font-weight: 600; }
-    .badge.ok  { background: #1a4731; color: #3fb950; }
-    .badge.err { background: #4d1f24; color: #f85149; }
+      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 0; border-bottom: 1px solid #21262d; font-size: 13px;
-    }
-    .session-item:last-child { border-bottom: none; }
-    .session-id { color: #79c0ff; font-family: monospace; font-size: 12px; }
-    .session-title { color: #e6edf3; margin-top: 2px; }
-    .empty { color: #8b949e; font-size: 13px; font-style: italic; }
-    .error { color: #f85149; font-size: 13px; }
-    .loading { color: #8b949e; font-size: 13px; font-style: italic; }
-    .api-row { font-size: 12px; font-family: monospace; padding: 4px 0;
-      border-bottom: 1px solid #21262d; display: flex; gap: 8px; }
-    .api-row:last-child { border-bottom: none; }
-    .method { color: #79c0ff; min-width: 50px; }
-    .path   { color: #e6edf3; }
+      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>
-  <header>
+  <div id="topbar">
+    <button id="hamburger" aria-label="Toggle sidebar">\u2630</button>
     <h1>\u26A1 ecode web admin</h1>
     <span class="version">v${version2}</span>
-  </header>
+  </div>
 
-  <div class="grid">
-    <div class="card">
-      <h2>\u670D\u52A1\u72B6\u6001</h2>
-      <div id="status-content"><span class="loading">\u52A0\u8F7D\u4E2D\u2026</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>
 
-    <div class="card">
-      <h2>\u8FD0\u884C\u4E2D\u7684\u4F1A\u8BDD</h2>
-      <div id="sessions-content"><span class="loading">\u52A0\u8F7D\u4E2D\u2026</span></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>
 
-    <div class="card">
-      <h2>API \u7AEF\u70B9</h2>
-      <div class="api-row"><span class="method">GET</span><span class="path">/api/status</span></div>
-      <div class="api-row"><span class="method">GET</span><span class="path">/api/sessions</span></div>
-      <div class="api-row"><span class="method">GET</span><span class="path">/api/config</span></div>
-      <div class="api-row"><span class="method">GET</span><span class="path">/api/automation/jobs</span></div>
-      <div class="api-row"><span class="method">POST</span><span class="path">/api/chat/sessions</span></div>
-      <div class="api-row"><span class="method">WS</span><span class="path">/api/ws/sessions/:id</span></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>
-    const token = new URLSearchParams(location.search).get('token') || '';
+    // \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
+    };
 
-    async function apiFetch(path) {
+    // \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('?') ? '&' : '?';
-      const r = await fetch(path + sep + 'token=' + encodeURIComponent(token));
-      if (!r.ok) throw new Error(r.status + ' ' + r.statusText);
-      return r.json();
-    }
-
-    function setHtml(id, html) {
-      document.getElementById(id).innerHTML = html;
-    }
-
-    // \u72B6\u6001\u5361
-    apiFetch('/api/status').then(d => {
-      const rows = [
-        ['\u72B6\u6001', '<span class="badge ok">\u8FD0\u884C\u4E2D</span>'],
-        ['\u7248\u672C', d.version ?? '-'],
-        ['\u6D3B\u8DC3\u4F1A\u8BDD', d.activeSessions ?? 0],
-      ];
-      setHtml('status-content',
-        rows.map(([l,v]) =>
-          '<div class="stat"><span class="label">' + l + '</span><span class="value">' + v + '</span></div>'
-        ).join('')
-      );
-    }).catch(e => setHtml('status-content', '<span class="error">' + e.message + '</span>'));
+      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);
+    }
 
-    // \u4F1A\u8BDD\u5217\u8868
-    apiFetch('/api/sessions').then(d => {
-      const sessions = d.sessions ?? d.data ?? d ?? [];
-      if (!sessions.length) {
-        setHtml('sessions-content', '<span class="empty">\u6682\u65E0\u4F1A\u8BDD</span>');
+    // 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;
       }
-      setHtml('sessions-content',
-        sessions.slice(0, 10).map(s =>
-          '<div class="session-item">' +
-          '<div class="session-id">' + s.id + '</div>' +
-          '<div class="session-title">' + (s.title || '(\u65E0\u6807\u9898)') + '</div>' +
-          '</div>'
-        ).join('')
-      );
-    }).catch(e => setHtml('sessions-content', '<span class="error">' + e.message + '</span>'));
+      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>`;

package/package.json

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