@wendongfly/myhi 1.0.118 → 1.0.119

package/dist/chat.html

@@ -94,6 +94,25 @@
     .btn-allow:hover { background: #2ea043; }
     .btn-deny { background: #21262d; color: #f85149; border: 1px solid #30363d !important; }
 
+    /* 权限弹窗 modal */
+    #perm-modal { display: none; position: fixed; inset: 0; z-index: 90; align-items: flex-end; justify-content: center; }
+    #perm-modal.open { display: flex; }
+    #perm-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
+    #perm-modal-box { position: relative; background: #161b22; border-radius: 16px 16px 0 0; width: 100%; max-width: 480px; padding: 1rem 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1; animation: slideUp 0.25s ease; border-top: 3px solid #d29922; }
+    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
+    #perm-modal-box .pm-icon { text-align: center; font-size: 1.6rem; margin-bottom: 0.4rem; }
+    #perm-modal-box .pm-title { text-align: center; font-size: 0.95rem; font-weight: 600; color: #d29922; margin-bottom: 0.6rem; }
+    #perm-modal-box .pm-tool { text-align: center; font-size: 0.78rem; color: #8b949e; margin-bottom: 0.3rem; }
+    #perm-modal-box .pm-detail { background: #0d1117; border: 1px solid #21262d; border-radius: 8px; padding: 0.6rem 0.75rem; font-family: 'SF Mono', 'Consolas', monospace; font-size: 0.78rem; line-height: 1.4; color: #e6edf3; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; margin-bottom: 0.75rem; }
+    #perm-modal-box .pm-actions { display: flex; gap: 0.5rem; }
+    #perm-modal-box .pm-actions button { flex: 1; padding: 0.6rem; border-radius: 10px; font-size: 0.88rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; }
+    #perm-modal-box .pm-actions button:active { transform: scale(0.96); }
+    #perm-modal-box .pm-btn-allow { background: #238636; color: #fff; }
+    #perm-modal-box .pm-btn-allow:hover { background: #2ea043; }
+    #perm-modal-box .pm-btn-deny { background: #21262d; color: #f85149; border: 1px solid #30363d; }
+    #perm-modal-box .pm-btn-deny:hover { background: #30363d; }
+    #perm-modal-box .pm-queue { text-align: center; font-size: 0.7rem; color: #8b949e; margin-top: 0.5rem; }
+
     /* Diff 视图 */
     .msg-diff { font-family: 'SF Mono', 'Consolas', monospace; font-size: 0.78rem; background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 0.5rem 0.6rem; overflow-x: auto; line-height: 1.35; }
     .diff-add { color: #3fb950; background: rgba(46,160,67,0.1); }
@@ -230,9 +249,6 @@
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
     </button>
     <button class="top-btn" onclick="showUsage()" title="用量" style="font-size:0.7rem;color:var(--muted)">用量</button>
-    <button class="top-btn" id="logout-btn" onclick="doLogout()" title="退出" style="display:none;color:#f0883e">
-      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
-    </button>
   </div>
 
   <div id="status-bar">
@@ -393,6 +409,22 @@
     </div>
   </div>
 
+  <!-- 权限授权弹窗 -->
+  <div id="perm-modal">
+    <div id="perm-modal-backdrop"></div>
+    <div id="perm-modal-box">
+      <div class="pm-icon">&#x1F6E1;&#xFE0F;</div>
+      <div class="pm-title" id="pm-title">请求权限</div>
+      <div class="pm-tool" id="pm-tool"></div>
+      <div class="pm-detail" id="pm-detail"></div>
+      <div class="pm-actions">
+        <button class="pm-btn-deny" id="pm-btn-deny">拒绝</button>
+        <button class="pm-btn-allow" id="pm-btn-allow">允许</button>
+      </div>
+      <div class="pm-queue" id="pm-queue" style="display:none"></div>
+    </div>
+  </div>
+
   <div id="status-overlay">连接中...</div>
 
   <script type="module">
@@ -945,12 +977,83 @@
       if (actions) actions.innerHTML = answer === 'y' ? '<span style="color:#3fb950">已允许</span>' : '<span style="color:#f85149">已拒绝</span>';
     };
 
+    // ── 权限弹窗队列管理 ──────────────────────────────
+    const permQueue = []; // { reqId, toolName, detail }
+    let permModalOpen = false;
+
+    function showPermModal(item) {
+      const modal = document.getElementById('perm-modal');
+      document.getElementById('pm-title').textContent = `${item.toolName} 请求权限`;
+      document.getElementById('pm-tool').textContent = item.toolLabel || '';
+      document.getElementById('pm-detail').textContent = item.detail;
+      const queueEl = document.getElementById('pm-queue');
+      if (permQueue.length > 0) {
+        queueEl.textContent = `还有 ${permQueue.length} 个权限请求等待处理`;
+        queueEl.style.display = '';
+      } else {
+        queueEl.style.display = 'none';
+      }
+      // 绑定按钮
+      document.getElementById('pm-btn-allow').onclick = () => respondPermModal(item.reqId, true);
+      document.getElementById('pm-btn-deny').onclick = () => respondPermModal(item.reqId, false);
+      modal.classList.add('open');
+      permModalOpen = true;
+      // 振动提醒（移动端）
+      if (navigator.vibrate) navigator.vibrate(100);
+    }
+
+    function closePermModal() {
+      document.getElementById('perm-modal').classList.remove('open');
+      permModalOpen = false;
+    }
+
+    function respondPermModal(requestId, allow) {
+      if (!isController) { addStatusMessage('你没有控制权，无法操作'); return; }
+      socket.emit('agent:permission', { requestId, allow });
+      // 更新内联卡片
+      const inlineActions = document.querySelector(`.perm-actions[data-reqid="${requestId}"]`);
+      if (inlineActions) inlineActions.innerHTML = allow ? '<span style="color:#3fb950">✓ 已允许</span>' : '<span style="color:#f85149">✗ 已拒绝</span>';
+      closePermModal();
+      setWorkState('working');
+      // 处理队列中的下一个
+      if (permQueue.length > 0) {
+        const next = permQueue.shift();
+        setTimeout(() => showPermModal(next), 200);
+      }
+    }
+
+    function enqueuePermission(reqId, toolName, detail, toolLabel) {
+      const item = { reqId, toolName, detail, toolLabel };
+      if (!permModalOpen) {
+        showPermModal(item);
+      } else {
+        permQueue.push(item);
+        // 更新队列提示
+        const queueEl = document.getElementById('pm-queue');
+        queueEl.textContent = `还有 ${permQueue.length} 个权限请求等待处理`;
+        queueEl.style.display = '';
+      }
+    }
+
+    // backdrop 点击不关闭弹窗（防止误触），但可以拒绝
+    document.getElementById('perm-modal-backdrop').addEventListener('click', () => {
+      // 不自动关闭，必须明确选择
+    });
+
     window.respondAgentPermission = function(requestId, allow, btn) {
       if (!isController) { addStatusMessage('你没有控制权，无法操作'); return; }
       socket.emit('agent:permission', { requestId, allow });
       const actions = btn.closest('.perm-actions');
-      if (actions) actions.innerHTML = allow ? '<span style="color:#3fb950">已允许</span>' : '<span style="color:#f85149">已拒绝</span>';
+      if (actions) actions.innerHTML = allow ? '<span style="color:#3fb950">✓ 已允许</span>' : '<span style="color:#f85149">✗ 已拒绝</span>';
       setWorkState('working');
+      // 如果弹窗正在显示同一个请求，也关闭它
+      if (permModalOpen) {
+        closePermModal();
+        if (permQueue.length > 0) {
+          const next = permQueue.shift();
+          setTimeout(() => showPermModal(next), 200);
+        }
+      }
     };
 
     // ── 输出处理 ──────────────────────────────────
@@ -1176,10 +1279,15 @@
             const toolName = msg.request.tool_name || '未知工具';
             const input = msg.request.input || {};
             const detail = toolName === 'Bash' ? (input.command || JSON.stringify(input))
-              : toolName === 'Edit' ? `${input.file_path || ''}`
+              : toolName === 'Edit' ? `${input.file_path || ''}\n${input.old_string ? '替换: ' + input.old_string.slice(0, 120) : ''}`
               : toolName === 'Write' ? `${input.file_path || ''}`
+              : toolName === 'Read' ? `${input.file_path || ''}`
               : JSON.stringify(input, null, 2);
             const reqId = msg.request_id || msg.request?.request_id || msg.uuid;
+            // 工具类型标签
+            const toolLabels = { Bash: '执行命令', Edit: '编辑文件', Write: '写入文件', Read: '读取文件', Glob: '搜索文件', Grep: '搜索内容' };
+            const toolLabel = toolLabels[toolName] || toolName;
+            // 内联卡片
             const el = document.createElement('div');
             el.className = 'msg msg-permission';
             el.innerHTML = `<div class="perm-title">${escHtml(toolName)} 请求权限</div><div class="perm-detail">${escHtml(detail)}</div>
@@ -1191,6 +1299,8 @@
             trimMessages();
             scrollToBottom();
             setWorkState('waiting');
+            // 弹窗授权
+            enqueuePermission(reqId, toolName, detail, toolLabel);
           }
           break;
         case 'result':

package/dist/package.json

@@ -1 +1 @@
-{"type":"module","version":"1.0.118"}
+{"type":"module","version":"1.0.119"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wendongfly/myhi",
-  "version": "1.0.118",
+  "version": "1.0.119",
   "description": "Web-based terminal sharing with chat UI — control your terminal from phone via LAN/Tailscale",
   "type": "module",
   "main": "dist/index.js",