npm - @jacksontian/kite-server - Versions diffs - 0.1.0 - Mend

@jacksontian/kite-server 0.1.0

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 (5) hide show

package/web/index.html ADDED Viewed

@@ -0,0 +1,900 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="theme-color" content="#111827">
+<title>Kite 控制台</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
+<style>
+  :root {
+    --bg: #111827; --panel: #1f2937; --line: #374151;
+    --text: #e5e7eb; --dim: #9ca3af; --accent: #3b82f6;
+    --ok: #22c55e; --err: #ef4444; --warn: #f59e0b;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
+    background: var(--bg); color: var(--text);
+    padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
+    max-width: 640px; margin: 0 auto;
+  }
+  header { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 12px; gap: 8px; }
+  h1 { font-size: 18px; font-weight: 600; }
+  .header-right { display: flex; align-items: center; gap: 8px; }
+  #conn-mode { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--panel); color: var(--dim); white-space: nowrap; }
+  #conn-mode.realtime { color: var(--ok); }
+  #conn-mode.polling { color: var(--warn); }
+  #worker-status { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--panel); color: var(--dim); white-space: nowrap; }
+  #worker-status.online { color: var(--ok); }
+  #worker-status.offline { color: var(--err); }
+  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
+  label { display: block; font-size: 12px; color: var(--dim); margin: 10px 0 4px; }
+  input, textarea, select {
+    width: 100%; background: var(--bg); color: var(--text);
+    border: 1px solid var(--line); border-radius: 8px;
+    padding: 10px; font-size: 15px; font-family: inherit;
+  }
+  textarea { min-height: 72px; resize: vertical; }
+  input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
+  .types { display: flex; gap: 8px; margin-top: 4px; }
+  .types button {
+    flex: 1; padding: 10px 0; border-radius: 8px; border: 1px solid var(--line);
+    background: var(--bg); color: var(--dim); font-size: 13px;
+  }
+  .types button.active { border-color: var(--accent); color: var(--accent); background: rgba(59,130,246,.12); }
+  .submit {
+    width: 100%; margin-top: 14px; padding: 12px;
+    background: var(--accent); color: #fff; border: none; border-radius: 10px;
+    font-size: 16px; font-weight: 600;
+  }
+  .submit:disabled { opacity: .5; }
+  .task { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
+  .task .row1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+  .task .title { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .task .meta { font-size: 11px; color: var(--dim); margin-top: 4px; }
+  .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
+  .b-pending { background: rgba(245,158,11,.15); color: var(--warn); }
+  .b-running { background: rgba(59,130,246,.15); color: var(--accent); }
+  .b-done { background: rgba(34,197,94,.15); color: var(--ok); }
+  .b-failed { background: rgba(239,68,68,.15); color: var(--err); }
+  .b-canceled { background: rgba(156,163,175,.15); color: var(--dim); }
+  .logs {
+    margin-top: 8px; background: #0b1220; border-radius: 8px; padding: 8px;
+    font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.6;
+    max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
+    color: #a5f3fc; display: none;
+  }
+  .task.open .logs { display: block; }
+  /* shell 视图：默认只露出命令回显 + 末尾 5 行 stdout，接近终端体验；
+     元信息/结果/更早输出要点「展开」才可见 */
+  .term {
+    margin-top: 8px; background: #0b1220; border-radius: 8px; padding: 8px;
+    font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.6;
+    white-space: pre-wrap; word-break: break-all; color: #a5f3fc; cursor: pointer;
+  }
+  .term .prompt { color: var(--ok); }
+  .term .dimline { color: var(--dim); }
+  .task .actions { margin-top: 8px; display: flex; gap: 8px; }
+  .task .actions button {
+    font-size: 12px; padding: 4px 12px; border-radius: 6px;
+    background: var(--bg); color: var(--dim); border: 1px solid var(--line);
+  }
+  .task .actions button:disabled { opacity: .5; }
+  .task .actions button.term-btn { color: var(--accent); border-color: var(--accent); }
+  /* 交互终端全屏覆盖层（pty 任务） */
+  #term-overlay {
+    position: fixed; inset: 0; z-index: 50; background: #0b1220;
+    display: flex; flex-direction: column;
+    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
+  }
+  #term-overlay.hidden { display: none; }
+  #term-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; }
+  #term-title { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #term-close { font-size: 13px; padding: 4px 12px; border-radius: 6px; background: var(--panel); color: var(--text); border: 1px solid var(--line); }
+  #term-body { flex: 1; margin: 0 8px; min-height: 0; }
+  #term-bar { display: flex; align-items: center; gap: 6px; padding: 8px; }
+  #term-bar button {
+    min-width: 44px; padding: 9px 0; font-size: 13px; border-radius: 8px;
+    background: var(--panel); color: var(--text); border: 1px solid var(--line);
+  }
+  #term-status { flex: 1; font-size: 11px; color: var(--dim); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #term-input { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: .01; border: none; }
+  #type-bar button { font-size: 12px; }
+  #auth-bar { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
+  #auth-bar .title { font-size: 13px; color: var(--ok); }
+  #auth-bar .edit { font-size: 12px; color: var(--dim); }
+  .secret-row { display: flex; gap: 8px; }
+  .secret-row input { flex: 1; }
+  #btn-eye, #btn-done {
+    flex: none; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
+    background: var(--bg); color: var(--dim); font-size: 13px; cursor: pointer;
+  }
+  #btn-eye.on { color: var(--accent); border-color: var(--accent); }
+  #btn-done { color: var(--ok); }
+  @keyframes task-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+  .task.new { animation: task-in .25s ease; }
+  #toast {
+    position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
+    background: #000c; color: #fff; padding: 8px 16px; border-radius: 8px;
+    font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none;
+  }
+  .hidden { display: none !important; }
+</style>
+</head>
+<body>
+<header>
+  <h1>Kite</h1>
+  <div class="header-right">
+    <span id="conn-mode">连接中</span>
+    <span id="worker-status">检测中…</span>
+  </div>
+</header>
+<!-- 鉴权设置：密钥已存 localStorage 时折叠成一行，点「修改」才展开 -->
+<div class="panel" id="auth-panel">
+  <div id="auth-bar" class="hidden">
+    <span class="title">✓ 密钥已配置（存本机浏览器，不上网传输）</span>
+    <span class="edit">修改</span>
+  </div>
+  <div id="auth-form">
+    <label>API Secret（签名密钥：只存本机浏览器，永不在网络上传输）</label>
+    <div class="secret-row">
+      <input id="secret" type="password" placeholder="粘贴 API_SECRET" autocomplete="off">
+      <button id="btn-eye" type="button">显示</button>
+      <button id="btn-done" type="button">完成</button>
+    </div>
+  </div>
+</div>
+<!-- 新建任务 -->
+<div class="panel">
+  <div class="types" id="type-bar">
+    <button data-type="agent" class="active">Agent</button>
+    <button data-type="shell">Shell</button>
+    <button data-type="pty">终端</button>
+    <button data-type="script">脚本</button>
+    <button data-type="chat">留言</button>
+  </div>
+  <label>标题</label>
+  <input id="f-title" placeholder="一句话描述这个任务">
+  <div id="fields-agent">
+    <label>Agent（Worker 上报的可用 CLI）</label>
+    <select id="f-agent"><option value="claude">claude</option></select>
+    <label>Prompt（交给编码 Agent 的指令）</label>
+    <textarea id="f-prompt" placeholder="例：把 README 里的安装步骤补全，然后跑一遍测试"></textarea>
+    <label>项目目录名（相对 workspace）</label>
+    <input id="f-project" value="default">
+  </div>
+  <div id="fields-shell" class="hidden">
+    <label>命令（在 workspace 目录执行）</label>
+    <textarea id="f-command" placeholder="例：git -C myrepo pull && npm test"></textarea>
+  </div>
+  <div id="fields-pty" class="hidden">
+    <label>项目目录名（相对 workspace，终端的起始目录）</label>
+    <input id="f-pty-project" value="default">
+    <label style="color:var(--dim)">提交后点任务卡上的「进入终端」开始交互</label>
+  </div>
+  <div id="fields-script" class="hidden">
+    <label>脚本名（worker/scripts 目录下的白名单脚本）</label>
+    <input id="f-script" placeholder="例：backup.sh">
+    <label>参数（空格分隔）</label>
+    <input id="f-args" placeholder="例：--full /tmp/out">
+  </div>
+  <div id="fields-chat" class="hidden">
+    <label>留言内容</label>
+    <textarea id="f-message" placeholder="记一条备忘，或触发 CHAT_HOOK"></textarea>
+  </div>
+  <button class="submit" id="btn-submit">提交任务</button>
+</div>
+<!-- 任务列表 -->
+<div id="task-list"></div>
+<!-- 交互终端覆盖层（pty 任务）：xterm.js 渲染，输入经 /ws 下行到 Worker 的 PTY -->
+<div id="term-overlay" class="hidden">
+  <div id="term-head">
+    <span id="term-title"></span>
+    <button id="term-close" type="button">收起</button>
+  </div>
+  <div id="term-body"></div>
+  <div id="term-bar">
+    <button type="button" data-key="BS">⌫</button>
+    <button type="button" data-key="Tab">Tab</button>
+    <button type="button" data-key="Esc">Esc</button>
+    <button type="button" data-key="Up">↑</button>
+    <button type="button" data-key="Down">↓</button>
+    <button type="button" data-key="CtrlC">^C</button>
+    <button type="button" data-key="CtrlD">^D</button>
+    <span id="term-status"></span>
+  </div>
+</div>
+<!-- 手机键盘代理：藏在屏幕外承接击键；xterm 的按键绑定在触屏上靠它转交 -->
+<textarea id="term-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
+<div id="toast"></div>
+<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
+<script>
+'use strict';
+const $ = (id) => document.getElementById(id);
+const secretInput = $('secret');
+secretInput.value = localStorage.getItem('rw_secret') || '';
+function toast(msg) {
+  const el = $('toast');
+  el.textContent = msg; el.style.opacity = '1';
+  setTimeout(() => { el.style.opacity = '0'; }, 2200);
+}
+// ---------- 纯 JS SHA-256 / HMAC-SHA256 ----------
+// 非 HTTPS 环境（http://VPS-IP）下浏览器的 crypto.subtle 不可用，故内联实现。
+// 密钥只参与本地 HMAC 运算，从不随请求发送。
+const SHA256_K = new Uint32Array([
+  0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5, 0x3956c25b, 0x59f111f1, 0x923f82a4, 0xab1c5ed5,
+  0xd807aa98, 0x12835b01, 0x243185be, 0x550c7dc3, 0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174,
+  0xe49b69c1, 0xefbe4786, 0x0fc19dc6, 0x240ca1cc, 0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da,
+  0x983e5152, 0xa831c66d, 0xb00327c8, 0xbf597fc7, 0xc6e00bf3, 0xd5a79147, 0x06ca6351, 0x14292967,
+  0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13, 0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85,
+  0xa2bfe8a1, 0xa81a664b, 0xc24b8b70, 0xc76c51a3, 0xd192e819, 0xd6990624, 0xf40e3585, 0x106aa070,
+  0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5, 0x391c0cb3, 0x4ed8aa4a, 0x5b9cca4f, 0x682e6ff3,
+  0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208, 0x90befffa, 0xa4506ceb, 0xbef9a3f7, 0xc67178f2,
+]);
+const rotr = (x, n) => (x >>> n) | (x << (32 - n));
+function sha256Bytes(data) {
+  const H = new Uint32Array([
+    0x6a09e667, 0xbb67ae85, 0x3c6ef372, 0xa54ff53a,
+    0x510e527f, 0x9b05688c, 0x1f83d9ab, 0x5be0cd19,
+  ]);
+  const len = data.length;
+  const paddedLen = (((len + 8) >> 6) + 1) << 6;
+  const padded = new Uint8Array(paddedLen);
+  padded.set(data);
+  padded[len] = 0x80;
+  const dv = new DataView(padded.buffer);
+  dv.setUint32(paddedLen - 8, Math.floor(len / 0x20000000)); // 比特长度高 32 位
+  dv.setUint32(paddedLen - 4, (len << 3) >>> 0);             // 比特长度低 32 位
+  const w = new Uint32Array(64);
+  for (let off = 0; off < paddedLen; off += 64) {
+    for (let i = 0; i < 16; i++) w[i] = dv.getUint32(off + i * 4);
+    for (let i = 16; i < 64; i++) {
+      const s0 = rotr(w[i - 15], 7) ^ rotr(w[i - 15], 18) ^ (w[i - 15] >>> 3);
+      const s1 = rotr(w[i - 2], 17) ^ rotr(w[i - 2], 19) ^ (w[i - 2] >>> 10);
+      w[i] = (w[i - 16] + s0 + w[i - 7] + s1) >>> 0;
+    }
+    let a = H[0], b = H[1], c = H[2], d = H[3], e = H[4], f = H[5], g = H[6], h = H[7];
+    for (let i = 0; i < 64; i++) {
+      const t1 = (h + (rotr(e, 6) ^ rotr(e, 11) ^ rotr(e, 25)) + ((e & f) ^ (~e & g)) + SHA256_K[i] + w[i]) >>> 0;
+      const t2 = ((rotr(a, 2) ^ rotr(a, 13) ^ rotr(a, 22)) + ((a & b) ^ (a & c) ^ (b & c))) >>> 0;
+      h = g; g = f; f = e; e = (d + t1) >>> 0; d = c; c = b; b = a; a = (t1 + t2) >>> 0;
+    }
+    H[0] = (H[0] + a) >>> 0; H[1] = (H[1] + b) >>> 0; H[2] = (H[2] + c) >>> 0; H[3] = (H[3] + d) >>> 0;
+    H[4] = (H[4] + e) >>> 0; H[5] = (H[5] + f) >>> 0; H[6] = (H[6] + g) >>> 0; H[7] = (H[7] + h) >>> 0;
+  }
+  const out = new Uint8Array(32);
+  const odv = new DataView(out.buffer);
+  for (let i = 0; i < 8; i++) odv.setUint32(i * 4, H[i]);
+  return out;
+}
+const bytesToHex = (bytes) => Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+const utf8 = (s) => new TextEncoder().encode(s);
+const sha256Hex = (s) => bytesToHex(sha256Bytes(utf8(s)));
+function hmacSha256Hex(keyStr, msgStr) {
+  let key = utf8(keyStr);
+  if (key.length > 64) key = sha256Bytes(key);
+  const msg = utf8(msgStr);
+  const inner = new Uint8Array(64 + msg.length);
+  const outer = new Uint8Array(64 + 32);
+  for (let i = 0; i < 64; i++) {
+    const k = i < key.length ? key[i] : 0;
+    inner[i] = k ^ 0x36;
+    outer[i] = k ^ 0x5c;
+  }
+  inner.set(msg, 64);
+  outer.set(sha256Bytes(inner), 64);
+  return bytesToHex(sha256Bytes(outer));
+}
+// ---------- 请求签名（与 server/worker 的签名串格式严格一致）----------
+function makeNonce() {
+  const bytes = new Uint8Array(16);
+  if (window.crypto && crypto.getRandomValues) crypto.getRandomValues(bytes);
+  else for (let i = 0; i < 16; i++) bytes[i] = Math.floor(Math.random() * 256);
+  return bytesToHex(bytes);
+}
+function signHeaders(method, path, bodyStr) {
+  const ts = Math.floor(Date.now() / 1000);
+  const nonce = makeNonce();
+  const sig = hmacSha256Hex(secretInput.value.trim(), [method, path, ts, nonce, sha256Hex(bodyStr)].join('\n'));
+  return { 'X-RW-Ts': String(ts), 'X-RW-Nonce': nonce, 'X-RW-Sig': sig };
+}
+async function api(path, body) {
+  const method = body === undefined ? 'GET' : 'POST';
+  const bodyStr = body === undefined ? '' : JSON.stringify(body);
+  const res = await fetch(path, {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      ...signHeaders(method, path, bodyStr),
+    },
+    body: body === undefined ? undefined : bodyStr,
+  });
+  const data = await res.json().catch(() => ({}));
+  if (res.status === 401) throw new Error('签名验证失败（检查密钥与本机时钟）');
+  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+  return data;
+}
+// ---------- 本地状态 ----------
+const taskCache = new Map();   // id -> 任务摘要
+const logCache = new Map();    // id -> 日志全文字符串（展开过的任务才有）
+const openTasks = new Set();   // 展开查看日志的任务 id
+let wsReady = false;
+let wsAuthRejected = false;    // 验签被拒后停止重连，直到密钥变更
+secretInput.addEventListener('change', () => {
+  localStorage.setItem('rw_secret', secretInput.value.trim());
+  wsAuthRejected = false;      // 密钥换了，允许重新尝试实时连接
+  if (!wsReady) connectWS();
+});
+// 密钥已配置时收起输入区，只留一行状态条；点状态条可展开修改
+function toggleAuth(collapsed) {
+  $('auth-bar').classList.toggle('hidden', !collapsed);
+  $('auth-form').classList.toggle('hidden', collapsed);
+  if (collapsed) setSecretVisible(false); // 收起后恢复掩码，避免下次展开直接露出明文
+}
+$('auth-bar').addEventListener('click', () => {
+  toggleAuth(false);
+  secretInput.focus();
+});
+// 退出编辑：无论是否改动都可收起；内容被清空则保持展开（没有可用密钥）
+$('btn-done').addEventListener('click', () => {
+  toggleAuth(secretInput.value.trim() !== '');
+});
+toggleAuth(secretInput.value.trim() !== '');
+// 明文/掩码切换，仅改变本地展示方式，不影响签名
+function setSecretVisible(visible) {
+  secretInput.type = visible ? 'text' : 'password';
+  const btn = $('btn-eye');
+  btn.textContent = visible ? '隐藏' : '显示';
+  btn.classList.toggle('on', visible);
+}
+$('btn-eye').addEventListener('click', () => setSecretVisible(secretInput.type === 'password'));
+// ---------- WebSocket 实时通道（断线自动回退轮询）----------
+let curWs = null; // 当前实时连接，pty 终端输入经它上行
+function sendWs(msg) {
+  if (curWs && curWs.readyState === WebSocket.OPEN) curWs.send(JSON.stringify(msg));
+  else toast('实时通道未连接，输入无法送达');
+}
+function setConnMode(realtime) {
+  const el = $('conn-mode');
+  el.textContent = realtime ? '实时' : '轮询';
+  el.className = realtime ? 'realtime' : 'polling';
+}
+function connectWS() {
+  if (wsAuthRejected) return;
+  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+  const sock = new WebSocket(`${proto}://${location.host}/ws`);
+  curWs = sock;
+  sock.addEventListener('open', () => {
+    // 签名鉴权：sig = HMAC(密钥, "WS\nTS\nNONCE")，密钥本身不进网络
+    const ts = Math.floor(Date.now() / 1000);
+    const nonce = makeNonce();
+    const sig = hmacSha256Hex(secretInput.value.trim(), ['WS', ts, nonce].join('\n'));
+    sock.send(JSON.stringify({ type: 'auth', ts, nonce, sig }));
+  });
+  sock.addEventListener('message', (ev) => {
+    let msg;
+    try { msg = JSON.parse(ev.data); } catch { return; }
+    switch (msg.type) {
+      case 'hello':
+        wsReady = true;
+        setConnMode(true);
+        taskCache.clear();
+        for (const t of msg.tasks) taskCache.set(t.id, t);
+        renderTasks();
+        renderWorkers(msg.workers);
+        // 重连后给打开着的终端补回看缓冲与会话存活状态
+        for (const id of termEntries.keys()) {
+          const ent = termEntries.get(id);
+          ent.pendingAttach = true;
+          sock.send(JSON.stringify({ type: 'pty.attach', taskId: id }));
+        }
+        break;
+      case 'task.created':
+      case 'task.updated':
+        taskCache.set(msg.task.id, msg.task);
+        if (msg.result !== undefined) logCache.delete(msg.task.id); // 结果变了，展开时重新拉全量
+        renderTasks();
+        break;
+      case 'task.logs':
+        mergePreview(msg.id, msg.lines); // 未展开时也要刷新 shell 视图
+        appendLogs(msg.id, msg.lines);
+        break;
+      case 'workers':
+        renderWorkers(msg.workers);
+        break;
+      // --- pty 交互终端流 ---
+      case 'pty.data': {
+        const ent = termEntries.get(msg.id);
+        if (ent) { ent.xt.write(msg.data); ent.live = true; termStatus(ent); }
+        break;
+      }
+      case 'pty.started': {
+        const ent = termEntries.get(msg.id);
+        if (ent && !ent.live) {
+          ent.live = true;
+          ent.xt.write('\r\n\x1b[32m[终端会话已就绪]\x1b[0m\r\n');
+          termStatus(ent);
+        }
+        break;
+      }
+      case 'pty.exited': {
+        const ent = termEntries.get(msg.id);
+        if (ent) {
+          ent.live = false;
+          ent.xt.write(`\r\n\x1b[31m[会话结束：${msg.reason || ''}]\x1b[0m\r\n`);
+          termStatus(ent);
+        }
+        break;
+      }
+      case 'pty.attach': {
+        const ent = termEntries.get(msg.id);
+        if (ent && ent.pendingAttach) {
+          ent.pendingAttach = false;
+          if (msg.tail) ent.xt.write(msg.tail); // 回看缓冲：切后台回来不白屏
+          ent.live = msg.live;
+          if (!msg.live) ent.xt.write('\r\n\x1b[33m[会话未就绪：任务尚未被领取或 Worker 离线，请稍候…]\x1b[0m\r\n');
+          termStatus(ent);
+        }
+        break;
+      }
+    }
+  });
+  sock.addEventListener('close', (ev) => {
+    wsReady = false;
+    setConnMode(false);
+    if (termEntries.size) termStatus(termEntries.get(activeTermId) || termEntries.values().next().value);
+    if (ev.code === 4003) {
+      // 验签被拒：无意义重试只会刷服务端日志，等用户改密钥
+      wsAuthRejected = true;
+      toggleAuth(false);       // 展开密钥输入区，方便直接修改
+      toast('密钥无效或时钟偏差过大，实时连接已停止');
+      return;
+    }
+    setTimeout(connectWS, 3000); // 锁屏/切网导致的断线，3 秒后重连
+  });
+  sock.addEventListener('error', () => sock.close());
+}
+// ---------- 渲染（增量 diff：节点按 id 复用，只更新变化的部分） ----------
+const STATUS_TEXT = { pending: '等待中', running: '执行中', done: '完成', failed: '失败', canceled: '已取消' };
+const taskEls = new Map(); // taskId -> { el, badge, meta, logsEl, toggle, cancel, status, metaText }
+function fmtTime(ts) {
+  if (!ts) return '-';
+  const d = new Date(ts);
+  return `${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ` +
+         `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+}
+function renderWorkers(workers) {
+  const ws = $('worker-status');
+  const online = workers.find((w) => w.online);
+  const text = online ? `Mac Mini 在线（${online.workerId}）` : 'Mac Mini 离线';
+  if (ws.textContent !== text) ws.textContent = text; // 没变就不写，避免无谓重绘
+  ws.className = online ? 'online' : 'offline';
+  renderAgentOptions(workers);
+}
+// Agent 下拉：优先在线 Worker 的列表；都离线时用最近一次上报兜底
+function renderAgentOptions(workers) {
+  const src = workers.filter((w) => w.online);
+  const agents = [...new Set((src.length ? src : workers).flatMap((w) => w.agents || []))];
+  if (!agents.length) return; // Worker 尚未上报，保留默认 claude 选项
+  const sel = $('f-agent');
+  const prev = sel.value;
+  sel.textContent = '';
+  for (const a of agents) {
+    const opt = document.createElement('option');
+    opt.value = a;
+    opt.textContent = a;
+    sel.appendChild(opt);
+  }
+  if ([...sel.options].some((o) => o.value === prev)) sel.value = prev; // 保持用户已选项
+}
+function createTaskEl(t) {
+  const div = document.createElement('div');
+  div.className = 'task new' + (openTasks.has(t.id) ? ' open' : '');
+  div.innerHTML = `
+    <div class="row1">
+      <span class="title"></span>
+      <span class="badge"></span>
+    </div>
+    <div class="meta"></div>
+    <div class="term hidden"></div>
+    <div class="logs"></div>
+    <div class="actions">
+      <button data-act="toggle">展开</button>
+      <button data-act="term" class="hidden term-btn">进入终端</button>
+      <button data-act="cancel" class="hidden">取消</button>
+    </div>`;
+  div.querySelector('.title').textContent = t.title || t.id; // textContent 天然防注入
+  const entry = {
+    el: div,
+    badge: div.querySelector('.badge'),
+    meta: div.querySelector('.meta'),
+    termEl: div.querySelector('.term'),
+    logsEl: div.querySelector('.logs'),
+    toggle: div.querySelector('[data-act=toggle]'),
+    term: div.querySelector('[data-act=term]'),
+    cancel: div.querySelector('[data-act=cancel]'),
+    status: null,
+    metaText: null,
+    termSig: null,
+  };
+  // 点 shell 视图本身也展开（手机上比点小按钮顺手）
+  entry.termEl.addEventListener('click', () => {
+    if (!openTasks.has(t.id)) entry.toggle.click();
+  });
+  entry.term.addEventListener('click', () => openTerm(t));
+  entry.toggle.addEventListener('click', async () => {
+    if (openTasks.has(t.id)) {
+      openTasks.delete(t.id);
+      div.classList.remove('open');
+    } else {
+      openTasks.add(t.id);
+      div.classList.add('open');
+      await loadLogs(t.id);
+    }
+    entry.toggle.textContent = openTasks.has(t.id) ? '收起' : '展开';
+    patchTerm(t, entry); // 展开时隐藏 shell 预览，收起时恢复
+  });
+  entry.cancel.addEventListener('click', async () => {
+    try {
+      entry.cancel.disabled = true;
+      await api(`/api/tasks/${t.id}/cancel`, {});
+      if (!wsReady) await refresh();
+    } catch (e) { toast(e.message); } finally { entry.cancel.disabled = false; }
+  });
+  setTimeout(() => div.classList.remove('new'), 300);
+  return entry;
+}
+function patchTask(t, entry) {
+  if (entry.status !== t.status) {
+    entry.status = t.status;
+    entry.badge.textContent = STATUS_TEXT[t.status] || t.status;
+    entry.badge.className = `badge b-${t.status}`;
+    entry.cancel.classList.toggle('hidden', t.status !== 'pending');
+    entry.toggle.textContent = openTasks.has(t.id) ? '收起' : '展开';
+  }
+  entry.term.classList.toggle('hidden', t.type !== 'pty'); // pty 任务入口
+  const meta = `${t.type} · ${fmtTime(t.createdAt)}${t.finishedAt ? ' → ' + fmtTime(t.finishedAt) : ''}`;
+  if (entry.metaText !== meta) { entry.metaText = meta; entry.meta.textContent = meta; }
+  entry.el.classList.toggle('open', openTasks.has(t.id));
+  patchTerm(t, entry);
+  // 展开且有缓存：内容没变就不动 DOM，保留滚动位置
+  if (openTasks.has(t.id) && logCache.has(t.id)) writeLogs(t.id, logCache.get(t.id));
+}
+// shell 视图：$ 命令回显 + 末尾最多 5 行 stdout；展开后让位给全量日志。
+// 用 sig 跳过无变化的重绘，避免日志流式到达时整卡闪烁。
+function patchTerm(t, entry) {
+  const open = openTasks.has(t.id);
+  const tail = Array.isArray(t.tail) ? t.tail : [];
+  const sig = `${open}|${t.cmd || ''}|${t.outLines || 0}|${tail.join('\n')}`;
+  if (entry.termSig === sig) return;
+  entry.termSig = sig;
+  entry.termEl.textContent = '';
+  if (open || (!t.cmd && !tail.length)) { entry.termEl.classList.add('hidden'); return; }
+  entry.termEl.classList.remove('hidden');
+  const omitted = (t.outLines || 0) - tail.length;
+  if (omitted > 0) {
+    const d = document.createElement('div');
+    d.className = 'dimline';
+    d.textContent = `… 更早 ${omitted} 行输出已折叠，点击展开`;
+    entry.termEl.appendChild(d);
+  }
+  if (t.cmd) {
+    const line = document.createElement('div');
+    const p = document.createElement('span');
+    p.className = 'prompt';
+    p.textContent = '$ ';
+    line.appendChild(p);
+    line.appendChild(document.createTextNode(t.cmd.startsWith('$ ') ? t.cmd.slice(2) : t.cmd));
+    entry.termEl.appendChild(line);
+  }
+  for (const l of tail) {
+    const line = document.createElement('div');
+    line.textContent = l;
+    entry.termEl.appendChild(line);
+  }
+}
+// 任务运行中：WS 日志流增量维护预览（规则与 server 端 shellPreview 一致）
+function mergePreview(id, lines) {
+  const t = taskCache.get(id);
+  if (!t) return;
+  let changed = false;
+  for (const line of lines) {
+    if (line.startsWith('$ ')) { if (!t.cmd) { t.cmd = line; changed = true; } continue; }
+    if (line.startsWith('[worker]') || line.startsWith('[server]') || line === '') continue;
+    t.outLines = (t.outLines || 0) + 1;
+    t.tail = [...(t.tail || []), line].slice(-5);
+    changed = true;
+  }
+  if (changed) renderTasks();
+}
+function renderTasks() {
+  const list = $('task-list');
+  const tasks = [...taskCache.values()].sort((a, b) => b.createdAt - a.createdAt).slice(0, 50);
+  // 清理已不存在的任务节点
+  const ids = new Set(tasks.map((t) => t.id));
+  for (const [id, entry] of taskEls) {
+    if (!ids.has(id)) { entry.el.remove(); taskEls.delete(id); disposeTerm(id); }
+  }
+  // 增量更新/插入，并保证顺序（新任务插到正确位置，而不是闪到末尾）
+  let prev = null;
+  for (const t of tasks) {
+    let entry = taskEls.get(t.id);
+    if (!entry) { entry = createTaskEl(t); taskEls.set(t.id, entry); }
+    patchTask(t, entry);
+    const expected = prev ? prev.nextSibling : list.firstChild;
+    if (entry.el !== expected) list.insertBefore(entry.el, expected);
+    prev = entry.el;
+  }
+}
+// 写日志到指定任务的日志区；仅在内容变化时写入，贴底时才自动滚动
+function writeLogs(id, text) {
+  const entry = taskEls.get(id);
+  if (!entry || entry.logsEl.textContent === text) return;
+  const el = entry.logsEl;
+  const stickBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 20;
+  el.textContent = text;
+  if (stickBottom) el.scrollTop = el.scrollHeight;
+}
+// 展开任务时经 REST 拉全量日志，之后增量靠 WS 的 task.logs 事件追加
+async function loadLogs(id) {
+  try {
+    const task = await api(`/api/tasks/${id}`);
+    let text = task.logs.join('\n');
+    if (task.result) text += `\n\n--- 结果 ---\n${JSON.stringify(task.result, null, 2)}`;
+    logCache.set(id, text);
+    writeLogs(id, text);
+  } catch { /* 任务可能已被清理 */ }
+}
+function appendLogs(id, lines) {
+  if (!openTasks.has(id)) return;
+  const task = taskCache.get(id);
+  if (task && ['done', 'failed'].includes(task.status)) {
+    loadLogs(id); // 终态时重拉一次，确保结果块出现
+    return;
+  }
+  if (!logCache.has(id)) { loadLogs(id); return; } // 尚未拉过全量，直接重拉
+  const text = logCache.get(id) + '\n' + lines.join('\n');
+  logCache.set(id, text);
+  writeLogs(id, text);
+}
+// ---------- 交互终端（pty 任务：xterm.js 渲染，IO 走 /ws 中继到 Worker 的 PTY）----------
+// 手机端无物理键盘：隐藏 textarea 承接击键，工具条补 Tab/方向键/Ctrl 组合键
+const termEntries = new Map(); // taskId -> { xt, fit, live, pendingAttach }
+let activeTermId = null;
+const KEY_SEQ = { BS: '\x7f', Tab: '\t', Esc: '\x1b', Up: '\x1b[A', Down: '\x1b[B', CtrlC: '\x03', CtrlD: '\x04' };
+function termStatus(ent) {
+  const el = $('term-status');
+  if (!ent) { el.textContent = ''; return; }
+  if (!wsReady) el.textContent = '实时通道断开，重连中…';
+  else if (ent.live) el.textContent = '已连接';
+  else el.textContent = '会话未就绪（任务未领取或 Worker 离线）';
+}
+function ensureTerm(t) {
+  let ent = termEntries.get(t.id);
+  if (ent) return ent;
+  if (!window.Terminal || !window.FitAddon) {
+    toast('xterm.js 加载失败（依赖 CDN，请检查网络后刷新）');
+    return null;
+  }
+  const xt = new Terminal({
+    fontSize: 13, scrollback: 3000, cursorBlink: true,
+    theme: { background: '#0b1220', foreground: '#e5e7eb' },
+  });
+  const fit = new FitAddon.FitAddon();
+  xt.loadAddon(fit);
+  xt.open($('term-body'));
+  ent = { xt, fit, live: false, pendingAttach: false };
+  termEntries.set(t.id, ent);
+  xt.onData((data) => sendWs({ type: 'session.input', taskId: t.id, data }));
+  return ent;
+}
+function fitActiveTerm() {
+  const ent = termEntries.get(activeTermId);
+  if (!ent) return;
+  try { ent.fit.fit(); } catch { return; }
+  sendWs({ type: 'session.resize', taskId: activeTermId, cols: ent.xt.cols, rows: ent.xt.rows });
+}
+function openTerm(t) {
+  const ent = ensureTerm(t);
+  if (!ent) return;
+  activeTermId = t.id;
+  $('term-title').textContent = t.title || '交互终端';
+  $('term-overlay').classList.remove('hidden');
+  fitActiveTerm();
+  ent.pendingAttach = true;
+  sendWs({ type: 'pty.attach', taskId: t.id }); // 取回看缓冲 + 会话存活状态
+  focusTermInput();
+  termStatus(ent);
+}
+function closeTermOverlay() {
+  $('term-overlay').classList.add('hidden');
+  activeTermId = null;
+  termStatus(null);
+  if (document.activeElement && document.activeElement.blur) document.activeElement.blur();
+}
+// 终端实例随会话常驻：收起不销毁，后台继续接收输出；任务卡被清理时才释放
+function disposeTerm(id) {
+  const ent = termEntries.get(id);
+  if (!ent) return;
+  termEntries.delete(id);
+  if (activeTermId === id) closeTermOverlay();
+  try { ent.xt.dispose(); } catch { /* 已释放 */ }
+}
+// 输入代理里常驻一个哨兵字符：手机键盘在空 textarea 上按退格不产生任何事件，
+// 哨兵被删掉即代表一次 Backspace（发 \x7f），随后立即补回
+const TERM_SENTINEL = '\u00a0';
+function resetTermInput() {
+  const el = $('term-input');
+  el.value = TERM_SENTINEL;
+  try { el.setSelectionRange(1, 1); } catch { /* 个别浏览器不支持，忽略 */ }
+}
+function focusTermInput() {
+  if (!$('term-input').value) resetTermInput();
+  $('term-input').focus({ preventScroll: true });
+}
+$('term-close').addEventListener('click', closeTermOverlay);
+$('term-body').addEventListener('click', focusTermInput);
+// 隐藏 textarea 承接手机键盘击键；换行统一归一成 \r 交给 PTY
+$('term-input').addEventListener('input', (ev) => {
+  const el = ev.target;
+  let val = el.value;
+  if (!val) {
+    // 哨兵被删 = 用户按了退格
+    if (activeTermId) sendWs({ type: 'session.input', taskId: activeTermId, data: '\x7f' });
+    resetTermInput();
+    return;
+  }
+  if (val.startsWith(TERM_SENTINEL)) val = val.slice(TERM_SENTINEL.length);
+  resetTermInput();
+  if (activeTermId && val) {
+    sendWs({ type: 'session.input', taskId: activeTermId, data: val.replace(/\n/g, '\r') });
+  }
+});
+$('term-input').addEventListener('keydown', (ev) => {
+  if (ev.key === 'Enter') {
+    ev.preventDefault(); // 拦住换行，直接发回车，避免 input 事件补发 \n
+    if (activeTermId) sendWs({ type: 'session.input', taskId: activeTermId, data: '\r' });
+  }
+});
+document.querySelectorAll('#term-bar button').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    if (!activeTermId) return;
+    sendWs({ type: 'session.input', taskId: activeTermId, data: KEY_SEQ[btn.dataset.key] });
+    focusTermInput();
+  });
+});
+// 屏幕旋转/键盘弹起都会改变可用高度，延迟一点等布局稳定再 fit
+window.addEventListener('resize', () => { if (activeTermId) setTimeout(fitActiveTerm, 120); });
+// ---------- 轮询回退（仅 WS 不可用时生效）----------
+async function refresh() {
+  try {
+    const [{ tasks }, { workers }] = await Promise.all([
+      api('/api/tasks?limit=50'),
+      api('/api/worker/status'),
+    ]);
+    taskCache.clear();
+    for (const t of tasks) taskCache.set(t.id, t);
+    renderTasks();
+    renderWorkers(workers);
+  } catch (err) {
+    toast(err.message);
+  }
+}
+setInterval(() => { if (!wsReady && !wsAuthRejected) refresh(); }, 4000);
+// ---------- 类型切换 ----------
+let currentType = 'agent';
+document.querySelectorAll('#type-bar button').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    currentType = btn.dataset.type;
+    document.querySelectorAll('#type-bar button').forEach((b) => b.classList.toggle('active', b === btn));
+    for (const t of ['agent', 'shell', 'pty', 'script', 'chat']) {
+      $('fields-' + t).classList.toggle('hidden', t !== currentType);
+    }
+  });
+});
+// ---------- 提交任务（REST，WS 负责推送变更）----------
+$('btn-submit').addEventListener('click', async () => {
+  const title = $('f-title').value.trim();
+  let payload = {};
+  if (currentType === 'agent') {
+    payload = {
+      prompt: $('f-prompt').value.trim(),
+      project: $('f-project').value.trim() || 'default',
+      agent: $('f-agent').value,
+    };
+    if (!payload.prompt) return toast('请填写 Prompt');
+  } else if (currentType === 'shell') {
+    payload = { command: $('f-command').value.trim() };
+    if (!payload.command) return toast('请填写命令');
+  } else if (currentType === 'pty') {
+    payload = { project: $('f-pty-project').value.trim() || 'default' };
+    if (!/^[\w.-]+$/.test(payload.project)) return toast('项目目录名只能含字母/数字/._-');
+  } else if (currentType === 'script') {
+    payload = {
+      script: $('f-script').value.trim(),
+      args: $('f-args').value.trim() ? $('f-args').value.trim().split(/\s+/) : [],
+    };
+    if (!payload.script) return toast('请填写脚本名');
+  } else {
+    payload = { message: $('f-message').value.trim() };
+    if (!payload.message) return toast('请填写留言');
+  }
+  try {
+    $('btn-submit').disabled = true;
+    const autoTitle = payload.prompt || payload.command || payload.script ||
+      (currentType === 'pty' ? '交互终端' : payload.message || '留言');
+    await api('/api/tasks', { type: currentType, title: title || autoTitle, payload });
+    toast(currentType === 'pty' ? '已提交，任务运行后点「进入终端」' : '任务已提交');
+    $('f-title').value = '';
+    if (!wsReady) await refresh();
+  } catch (err) {
+    toast(err.message);
+  } finally {
+    $('btn-submit').disabled = false;
+  }
+});
+connectWS();
+refresh(); // 首次加载兜底：WS 握手前的空档先用 REST 铺一次数据
+</script>
+</body>
+</html>