@jacksontian/kite-server 0.1.0 → 0.4.0

package/web/index.html

@@ -5,7 +5,9 @@
 <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">
+<!-- xterm 随包自托管（vendor/ 为锁版本的官方产物）：不依赖 CDN，
+     杜绝 CDN 投毒/HTTP 下被篡改注入窃取密钥的供应链风险 -->
+<link rel="stylesheet" href="vendor/xterm.min.css">
 <style>
   :root {
     --bg: #111827; --panel: #1f2937; --line: #374151;
@@ -29,6 +31,12 @@
   #worker-status.online { color: var(--ok); }
   #worker-status.offline { color: var(--err); }
 
+  /* 明文 HTTP 部署的风险提示（仅非 localhost 的 http: 环境显示） */
+  #http-warn {
+    background: rgba(239,68,68,.12); border: 1px solid var(--err); color: var(--err);
+    border-radius: 10px; padding: 8px 12px; font-size: 12px; line-height: 1.6; margin-bottom: 14px;
+  }
+
   .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 {
@@ -39,13 +47,6 @@
   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;
@@ -71,15 +72,6 @@
     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;
@@ -98,7 +90,11 @@
   #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; }
+  /* position:relative + 绝对定位的 .term-pane：多个 pty 终端各占一层，
+     同时只显示 active 的一个，避免多实例挂在同一容器里叠出来串台 */
+  #term-body { flex: 1; margin: 0 8px; min-height: 0; position: relative; }
+  .term-pane { position: absolute; inset: 0; display: none; }
+  .term-pane.active { display: block; }
   #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;
@@ -106,7 +102,6 @@
   }
   #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); }
@@ -118,6 +113,24 @@
   }
   #btn-eye.on { color: var(--accent); border-color: var(--accent); }
   #btn-done { color: var(--ok); }
+  /* 两级视图：一级 Worker 列表 / 二级所选 Worker 详情 */
+  #back-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+  #btn-back {
+    flex: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px;
+    background: var(--panel); color: var(--text); font-size: 14px;
+  }
+  #worker-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .worker-card {
+    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
+    padding: 12px; margin-bottom: 10px;
+  }
+  .worker-card .wc-row1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+  .worker-card .wc-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .worker-card .wc-meta { font-size: 11px; color: var(--dim); margin-top: 4px; line-height: 1.5; word-break: break-all; }
+  .w-online { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(34,197,94,.15); color: var(--ok); white-space: nowrap; }
+  .w-offline { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(239,68,68,.15); color: var(--err); white-space: nowrap; }
+  .empty-tip { color: var(--dim); font-size: 13px; text-align: center; padding: 28px 0; }
+
   @keyframes task-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
   .task.new { animation: task-in .25s ease; }
   #toast {
@@ -137,6 +150,12 @@
   </div>
 </header>
 
+<!-- 明文 HTTP 部署警告：任务内容与签名流量可被窃听，建议尽快上 HTTPS -->
+<div id="http-warn" class="hidden">
+  ⚠️ 当前为明文 HTTP 访问：任务、日志与签名在网络链路上明文可见，且本机无法使用安全加密 API。
+  请勿在不信任的网络（如公共 WiFi）使用，并尽快为服务端配置 HTTPS（如 Caddy 自动证书）。
+</div>
+
 <!-- 鉴权设置：密钥已存 localStorage 时折叠成一行，点「修改」才展开 -->
 <div class="panel" id="auth-panel">
   <div id="auth-bar" class="hidden">
@@ -153,52 +172,34 @@
   </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>
+<!-- 一级视图：Worker 列表，选中某个 Worker 进入二级详情 -->
+<div id="view-workers">
+  <div id="worker-cards"></div>
+  <div id="workers-empty" class="empty-tip hidden">暂无已注册 Worker</div>
+</div>
+
+<!-- 二级视图：所选 Worker 的新建任务与任务列表 -->
+<div id="view-worker" class="hidden">
+  <div id="back-row">
+    <button id="btn-back" type="button">‹ Worker 列表</button>
+    <span id="worker-title"></span>
   </div>
 
+  <!-- 新建任务（仅 pty 交互终端） -->
+  <div class="panel">
   <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>
+  <label>项目目录（终端的起始目录，Worker workspace 下已有目录）</label>
+  <select id="f-pty-project"><option value="default">default</option></select>
+  <label style="color:var(--dim)">提交后点任务卡上的「进入终端」开始交互</label>
 
   <button class="submit" id="btn-submit">提交任务</button>
-</div>
+  </div>
 
-<!-- 任务列表 -->
-<div id="task-list"></div>
+  <!-- 任务列表（仅所选 Worker） -->
+  <div id="task-list"></div>
+</div><!-- /view-worker -->
 
 <!-- 交互终端覆盖层（pty 任务）：xterm.js 渲染，输入经 /ws 下行到 Worker 的 PTY -->
 <div id="term-overlay" class="hidden">
@@ -223,11 +224,15 @@
 
 <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 src="vendor/xterm.min.js"></script>
+<script src="vendor/addon-fit.min.js"></script>
 <script>
 'use strict';
 const $ = (id) => document.getElementById(id);
+// 非 localhost 的明文 HTTP 环境：常驻风险提示（localhost 本地联调不打扰）
+if (location.protocol === 'http:' && !['localhost', '127.0.0.1'].includes(location.hostname)) {
+  $('http-warn').classList.remove('hidden');
+}
 const secretInput = $('secret');
 secretInput.value = localStorage.getItem('rw_secret') || '';
 
@@ -323,7 +328,17 @@ function signHeaders(method, path, bodyStr) {
   return { 'X-RW-Ts': String(ts), 'X-RW-Nonce': nonce, 'X-RW-Sig': sig };
 }
 
+// 未配置密钥时禁止发起任何需要签名的请求：空密钥签名必 401，
+// 还会白刷服务端验签失败限流计数，统一在本地拦截
+function hasSecret() {
+  return secretInput.value.trim() !== '';
+}
+function requireSecret() {
+  if (!hasSecret()) throw new Error('请先配置 API Secret');
+}
+
 async function api(path, body) {
+  requireSecret();
   const method = body === undefined ? 'GET' : 'POST';
   const bodyStr = body === undefined ? '' : JSON.stringify(body);
   const res = await fetch(path, {
@@ -350,7 +365,10 @@ let wsAuthRejected = false;    // 验签被拒后停止重连，直到密钥变
 secretInput.addEventListener('change', () => {
   localStorage.setItem('rw_secret', secretInput.value.trim());
   wsAuthRejected = false;      // 密钥换了，允许重新尝试实时连接
-  if (!wsReady) connectWS();
+  if (hasSecret()) {
+    if (!wsReady) connectWS();
+    refresh();                 // 之前无密钥没拉过数据，配好后补一次
+  }
 });
 
 // 密钥已配置时收起输入区，只留一行状态条；点状态条可展开修改
@@ -393,7 +411,7 @@ function setConnMode(realtime) {
 }
 
 function connectWS() {
-  if (wsAuthRejected) return;
+  if (wsAuthRejected || !hasSecret()) return; // 无密钥时握手必被 4003 拒绝，不发起
   const proto = location.protocol === 'https:' ? 'wss' : 'ws';
   const sock = new WebSocket(`${proto}://${location.host}/ws`);
   curWs = sock;
@@ -430,7 +448,6 @@ function connectWS() {
         renderTasks();
         break;
       case 'task.logs':
-        mergePreview(msg.id, msg.lines); // 未展开时也要刷新 shell 视图
         appendLogs(msg.id, msg.lines);
         break;
       case 'workers':
@@ -466,7 +483,8 @@ function connectWS() {
           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');
+          ent.liveHint = msg.live ? '' : (ATTACH_HINTS[msg.reason] || ATTACH_HINTS.unknown);
+          if (!msg.live) ent.xt.write(`\r\n\x1b[33m[会话未就绪：${ent.liveHint}]\x1b[0m\r\n`);
           termStatus(ent);
         }
         break;
@@ -499,32 +517,197 @@ function fmtTime(ts) {
          `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
 }
 
+let workerList = []; // 最近一次 Worker 快照：渲染目标下拉与项目目录联动
+
+/** 相对时间：离线 Worker 的最近心跳展示成「X 分钟前」，超过一天回退具体时间 */
+function relTime(ts) {
+  if (!ts) return '从未';
+  const diff = Date.now() - ts;
+  if (diff < 60_000) return '1 分钟内';
+  if (diff < 3600_000) return `${Math.floor(diff / 60_000)} 分钟前`;
+  if (diff < 86400_000) return `${Math.floor(diff / 3600_000)} 小时前`;
+  return fmtTime(ts);
+}
+
 function renderWorkers(workers) {
+  workerList = workers;
   const ws = $('worker-status');
-  const online = workers.find((w) => w.online);
-  const text = online ? `Mac Mini 在线（${online.workerId}）` : 'Mac Mini 离线';
+  const online = workers.filter((w) => w.online).length;
+  let text;
+  if (!workers.length) {
+    text = '无 Worker';
+  } else if (online) {
+    text = `${online}/${workers.length} Worker 在线`;
+  } else {
+    // 全离线时给出最近一次心跳时间，便于判断是「刚掉线」还是「长期没上线」
+    const lastSeen = Math.max(...workers.map((w) => w.lastSeenAt || 0));
+    text = `Worker 全部离线（最近心跳 ${relTime(lastSeen)}）`;
+  }
   if (ws.textContent !== text) ws.textContent = text; // 没变就不写，避免无谓重绘
   ws.className = online ? 'online' : 'offline';
-  renderAgentOptions(workers);
+  // 当前所在二级视图的 Worker 已注销（如配置移除）：退回一级列表
+  if (currentWorkerId && !workers.some((w) => w.workerId === currentWorkerId)) navBack();
+  renderWorkerCards(workers);
+  // 首份快照到达后按地址栏 hash 恢复视图（刷新进入二级页/展开的长任务）
+  if (!routeInited) { routeInited = true; applyRoute(); }
+}
+// 「X 分钟前」随时间变化：存在离线 Worker 时定期用最近快照重渲染，
+// 保持离线时长读数新鲜（全在线时不动卡片列表，避免打扰交互）
+setInterval(() => {
+  if (workerList.length && !workerList.some((w) => w.online)) renderWorkers(workerList);
+}, 30_000);
+
+// 一级视图 Worker 卡片：sig 去重，心跳快照没变就不重建（避免打断点击）
+let cardsSig = '';
+function renderWorkerCards(workers) {
+  $('workers-empty').classList.toggle('hidden', workers.length > 0);
+  const sig = JSON.stringify(workers.map((w) => [
+    w.workerId, w.hostname, w.online, w.lastSeenAt, w.projects || [],
+  ]));
+  if (sig === cardsSig) return;
+  cardsSig = sig;
+  const box = $('worker-cards');
+  box.textContent = '';
+  for (const w of workers) {
+    const card = document.createElement('div');
+    card.className = 'worker-card';
+    const name = w.hostname && w.hostname !== w.workerId ? `${w.workerId}（${w.hostname}）` : w.workerId;
+    const status = w.online ? '在线' : `离线（最近心跳 ${relTime(w.lastSeenAt)}）`;
+    card.innerHTML = `
+      <div class="wc-row1">
+        <span class="wc-name"></span>
+        <span class="${w.online ? 'w-online' : 'w-offline'}"></span>
+      </div>
+      <div class="wc-meta"></div>`;
+    card.querySelector('.wc-name').textContent = name; // textContent 天然防注入
+    card.querySelector('.wc-row1 span:last-child').textContent = status;
+    const projects = [...new Set(w.projects || [])];
+    card.querySelector('.wc-meta').textContent = projects.length ? `项目目录：${projects.join(' / ')}` : '未上报项目目录';
+    card.addEventListener('click', () => navToWorker(w.workerId));
+    box.appendChild(card);
+  }
 }
 
-// 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);
+// ---------- 两级视图导航：一级 Worker 列表 / 二级所选 Worker 详情 ----------
+let currentWorkerId = null;
+let routeInited = false; // 首份 Worker 快照到达前 hash 恢复无法执行（卡片还没渲染）
+// pushRoute=false 时只切视图不动地址栏（来自 hashchange 的同步，避免二次入栈）
+function navToWorker(workerId, pushRoute = true) {
+  const w = workerList.find((x) => x.workerId === workerId);
+  if (!w) return;
+  currentWorkerId = workerId;
+  $('worker-title').textContent = w.hostname && w.hostname !== workerId ? `${workerId}（${w.hostname}）` : workerId;
+  $('view-workers').classList.add('hidden');
+  $('view-worker').classList.remove('hidden');
+  if (pushRoute) pushRoute_();
+  renderProjectOptions();
+  renderTasks();               // 切换到该 Worker 的任务过滤
+}
+function navBack(pushRoute = true) {
+  currentWorkerId = null;
+  $('view-worker').classList.add('hidden');
+  $('view-workers').classList.remove('hidden');
+  if (pushRoute) pushRoute_();
+  renderTasks();               // 离开二级视图时清掉过滤后的任务节点
+}
+$('btn-back').addEventListener('click', () => navBack());
+
+// ---------- hash 路由：#/w/<workerId>（附 /t/<展开的任务 id>）----------
+// 进入二级视图同步地址栏：刷新留在当前页面；长任务的展开状态也随 URL 保留
+function route() {
+  const parts = location.hash.slice(1).split('/').filter(Boolean);
+  return {
+    worker: parts[0] === 'w' ? decodeURIComponent(parts[1] || '') : null,
+    tasks: parts[2] === 't' ? (parts[3] || '').split('.').filter(Boolean) : [],
+  };
+}
+function buildHash() {
+  if (!currentWorkerId) return '#/';
+  // 只把当前视图可见（属于该 Worker）的展开任务写进 URL
+  const open = [...openTasks].filter((id) => {
+    const t = taskCache.get(id);
+    return t && (t.workerId === currentWorkerId || t.targetWorker === currentWorkerId);
+  });
+  const base = `#/w/${encodeURIComponent(currentWorkerId)}`;
+  return open.length ? `${base}/t/${open.join('.')}` : base;
+}
+function pushRoute_() {
+  const h = buildHash();
+  if (location.hash === h) return;
+  history.pushState(null, '', h);
+}
+// 展开/收起只替换当前历史条目：不给返回键堆一堆中间状态
+function syncTaskRoute() {
+  history.replaceState(null, '', buildHash());
+}
+function applyRoute() {
+  const r = route();
+  if (r.worker && r.worker !== currentWorkerId) navToWorker(r.worker, false);
+  else if (!r.worker && currentWorkerId) navBack(false);
+  for (const id of r.tasks) { // 刷新后恢复长任务的展开（日志区）
+    if (openTasks.has(id) || !taskEls.has(id)) continue;
+    openTasks.add(id);
+    const entry = taskEls.get(id);
+    entry.el.classList.add('open');
+    entry.toggle.textContent = '收起';
+    loadLogs(id);
+  }
+}
+window.addEventListener('hashchange', applyRoute);
+
+// 项目目录下拉：只列所选 Worker 上报的项目目录（显式指派，不做跨机并集）；
+// 末尾常驻「＋ 新建目录…」，输入的新目录在任务执行时由 Worker 自动创建
+// （pty 执行前会 mkdir）
+const NEW_PROJECT = '__new__';
+const projectSels = ['f-pty-project'];
+
+function renderProjectOptions() {
+  const selected = workerList.find((w) => w.workerId === currentWorkerId);
+  const projects = [...new Set(selected ? (selected.projects || []) : [])].sort();
+  if (!projects.length) return; // Worker 尚未上报，保留默认 default 选项
+  for (const id of projectSels) {
+    const sel = $(id);
+    const prev = sel.value === NEW_PROJECT ? 'default' : sel.value;
+    sel.textContent = '';
+    for (const p of projects) {
+      const opt = document.createElement('option');
+      opt.value = p;
+      opt.textContent = p;
+      sel.appendChild(opt);
+    }
+    const newOpt = document.createElement('option');
+    newOpt.value = NEW_PROJECT;
+    newOpt.textContent = '＋ 新建目录…';
+    sel.appendChild(newOpt);
+    if ([...sel.options].some((o) => o.value === prev)) sel.value = prev; // 保持用户已选项
   }
-  if ([...sel.options].some((o) => o.value === prev)) sel.value = prev; // 保持用户已选项
 }
 
+// 选「＋ 新建目录…」：弹输入框收目录名，合法则加入两个下拉并选中；
+// 取消或非法则退回原选项，NEW_PROJECT 值不会进入提交 payload
+function handleNewProject(ev) {
+  const sel = ev.target;
+  if (sel.value !== NEW_PROJECT) return;
+  const fallback = [...sel.options].find((o) => o.value !== NEW_PROJECT)?.value || '';
+  const name = (window.prompt('新项目目录名（任务执行时在 Worker workspace 下自动创建）') || '').trim();
+  if (!name || !/^[\w.-]+$/.test(name) || name.includes('..')) {
+    if (name) toast('目录名只能含字母/数字/._-，且不含 ..');
+    sel.value = fallback;
+    return;
+  }
+  for (const id of projectSels) {
+    const s = $(id);
+    if (![...s.options].some((o) => o.value === name)) {
+      const opt = document.createElement('option');
+      opt.value = name;
+      opt.textContent = name;
+      s.insertBefore(opt, s.querySelector(`option[value="${NEW_PROJECT}"]`));
+    }
+    s.value = name;
+  }
+}
+for (const id of projectSels) $(id).addEventListener('change', handleNewProject);
+
 function createTaskEl(t) {
   const div = document.createElement('div');
   div.className = 'task new' + (openTasks.has(t.id) ? ' open' : '');
@@ -534,7 +717,6 @@ function createTaskEl(t) {
       <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>
@@ -546,19 +728,13 @@ function createTaskEl(t) {
     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)) {
@@ -570,7 +746,7 @@ function createTaskEl(t) {
       await loadLogs(t.id);
     }
     entry.toggle.textContent = openTasks.has(t.id) ? '收起' : '展开';
-    patchTerm(t, entry); // 展开时隐藏 shell 预览，收起时恢复
+    syncTaskRoute();     // 展开状态入 URL：长任务执行中刷新仍留在任务页面
   });
   entry.cancel.addEventListener('click', async () => {
     try {
@@ -592,66 +768,20 @@ function patchTask(t, entry) {
     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) : ''}`;
+  // Worker 标注：已领取显示执行者，pending 定向任务显示目标
+  const workerPart = t.workerId ? `@${t.workerId}` : (t.targetWorker ? `→ ${t.targetWorker}` : '');
+  const meta = `${t.type}${workerPart ? ' · ' + workerPart : ''} · ${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 tasks = [...taskCache.values()]
+    .filter((t) => !currentWorkerId || t.workerId === currentWorkerId || t.targetWorker === currentWorkerId)
+    .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) {
@@ -705,8 +835,16 @@ function appendLogs(id, lines) {
 
 // ---------- 交互终端（pty 任务：xterm.js 渲染，IO 走 /ws 中继到 Worker 的 PTY）----------
 // 手机端无物理键盘：隐藏 textarea 承接击键，工具条补 Tab/方向键/Ctrl 组合键
-const termEntries = new Map(); // taskId -> { xt, fit, live, pendingAttach }
+const termEntries = new Map(); // taskId -> { xt, fit, live, pendingAttach, liveHint }
 let activeTermId = null;
+// 会话未就绪时的原因文案（与服务端 pty.attach 应答的 reason 对应）
+const ATTACH_HINTS = {
+  not_claimed: '任务尚未被领取，等待 Worker 上线领取…',
+  worker_offline: 'Worker 离线（通道断开），重连后可自动恢复…',
+  starting: '任务已被领取，会话启动中，请稍候…',
+  ended: '会话已结束或已被回收',
+  unknown: '任务尚未被领取或 Worker 离线，请稍候…',
+};
 const KEY_SEQ = { BS: '\x7f', Tab: '\t', Esc: '\x1b', Up: '\x1b[A', Down: '\x1b[B', CtrlC: '\x03', CtrlD: '\x04' };
 
 function termStatus(ent) {
@@ -714,14 +852,14 @@ function termStatus(ent) {
   if (!ent) { el.textContent = ''; return; }
   if (!wsReady) el.textContent = '实时通道断开，重连中…';
   else if (ent.live) el.textContent = '已连接';
-  else el.textContent = '会话未就绪（任务未领取或 Worker 离线）';
+  else el.textContent = `会话未就绪（${ent.liveHint || ATTACH_HINTS.unknown}）`;
 }
 
 function ensureTerm(t) {
   let ent = termEntries.get(t.id);
   if (ent) return ent;
   if (!window.Terminal || !window.FitAddon) {
-    toast('xterm.js 加载失败（依赖 CDN，请检查网络后刷新）');
+    toast('xterm.js 加载失败（vendor/ 资源缺失，请刷新重试）');
     return null;
   }
   const xt = new Terminal({
@@ -730,13 +868,22 @@ function ensureTerm(t) {
   });
   const fit = new FitAddon.FitAddon();
   xt.loadAddon(fit);
-  xt.open($('term-body'));
-  ent = { xt, fit, live: false, pendingAttach: false };
+  // 每个终端独占一个 pane 容器：直接挂在 #term-body 上会让多个实例叠在一起串台
+  const pane = document.createElement('div');
+  pane.className = 'term-pane';
+  $('term-body').appendChild(pane);
+  xt.open(pane);
+  ent = { xt, fit, pane, live: false, pendingAttach: false, liveHint: '' };
   termEntries.set(t.id, ent);
   xt.onData((data) => sendWs({ type: 'session.input', taskId: t.id, data }));
   return ent;
 }
 
+// 只显示当前终端的 pane，其余隐藏（实例不销毁，后台继续收输出）
+function showTermPane(id) {
+  for (const [tid, e] of termEntries) e.pane.classList.toggle('active', tid === id);
+}
+
 function fitActiveTerm() {
   const ent = termEntries.get(activeTermId);
   if (!ent) return;
@@ -750,6 +897,7 @@ function openTerm(t) {
   activeTermId = t.id;
   $('term-title').textContent = t.title || '交互终端';
   $('term-overlay').classList.remove('hidden');
+  showTermPane(t.id); // 先亮出本终端的 pane 再 fit（隐藏状态下 fit 拿不到尺寸）
   fitActiveTerm();
   ent.pendingAttach = true;
   sendWs({ type: 'pty.attach', taskId: t.id }); // 取回看缓冲 + 会话存活状态
@@ -771,6 +919,7 @@ function disposeTerm(id) {
   termEntries.delete(id);
   if (activeTermId === id) closeTermOverlay();
   try { ent.xt.dispose(); } catch { /* 已释放 */ }
+  ent.pane.remove();
 }
 
 // 输入代理里常驻一个哨兵字符：手机键盘在空 textarea 上按退格不产生任何事件，
@@ -837,53 +986,20 @@ async function refresh() {
     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);
-    }
-  });
-});
+setInterval(() => { if (!wsReady && !wsAuthRejected && hasSecret()) refresh(); }, 4000);
 
 // ---------- 提交任务（REST，WS 负责推送变更）----------
 $('btn-submit').addEventListener('click', async () => {
+  // 显式指派：二级视图下任务固定提交给当前 Worker
+  const targetWorker = currentWorkerId;
+  if (!targetWorker) return toast('请先在 Worker 列表中选择 Worker');
   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('请填写留言');
-  }
+  const payload = { project: $('f-pty-project').value.trim() || 'default' };
+  if (!/^[\w.-]+$/.test(payload.project)) 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' ? '已提交，任务运行后点「进入终端」' : '任务已提交');
+    await api('/api/tasks', { type: 'pty', title: title || '交互终端', payload, targetWorker });
+    toast('已提交，任务运行后点「进入终端」');
     $('f-title').value = '';
     if (!wsReady) await refresh();
   } catch (err) {
@@ -894,7 +1010,9 @@ $('btn-submit').addEventListener('click', async () => {
 });
 
 connectWS();
-refresh(); // 首次加载兜底：WS 握手前的空档先用 REST 铺一次数据
+// 首次加载兜底：WS 握手前的空档先用 REST 铺一次数据（无密钥时不发请求）
+if (hasSecret()) refresh();
+else setConnMode(false);       // 无密钥不发起任何连接，状态条直接落到轮询态
 </script>
 </body>
 </html>