@jacksontian/kite-server 0.3.0 → 0.4.1

package/web/index.html

@@ -4,6 +4,11 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <meta name="theme-color" content="#111827">
+<script>
+// 主题初始化（先于样式解析，避免先闪一下另一套配色）：本地偏好 > 系统外观
+document.documentElement.dataset.theme = localStorage.getItem('rw_theme')
+  || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+</script>
 <title>Kite 控制台</title>
 <!-- xterm 随包自托管（vendor/ 为锁版本的官方产物）：不依赖 CDN，
      杜绝 CDN 投毒/HTTP 下被篡改注入窃取密钥的供应链风险 -->
@@ -13,6 +18,14 @@
     --bg: #111827; --panel: #1f2937; --line: #374151;
     --text: #e5e7eb; --dim: #9ca3af; --accent: #3b82f6;
     --ok: #22c55e; --err: #ef4444; --warn: #f59e0b;
+    --term-bg: #0b1220; --log-text: #a5f3fc;
+  }
+  /* light 主题：xterm 是 canvas 绘制读不到 CSS 变量，终端色由 JS 同步切 */
+  :root[data-theme='light'] {
+    --bg: #f4f6f9; --panel: #fff; --line: #d9dee7;
+    --text: #1f2937; --dim: #64748b; --accent: #2563eb;
+    --ok: #16a34a; --err: #dc2626; --warn: #d97706;
+    --term-bg: #fff; --log-text: #0e7490;
   }
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body {
@@ -30,6 +43,10 @@
   #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); }
+  #btn-theme {
+    flex: none; font-size: 12px; padding: 4px 10px; border-radius: 8px;
+    background: var(--panel); color: var(--dim); border: 1px solid var(--line); white-space: nowrap;
+  }
 
   /* 明文 HTTP 部署的风险提示（仅非 localhost 的 http: 环境显示） */
   #http-warn {
@@ -47,13 +64,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;
@@ -73,21 +83,12 @@
   .b-canceled { background: rgba(156,163,175,.15); color: var(--dim); }
 
   .logs {
-    margin-top: 8px; background: #0b1220; border-radius: 8px; padding: 8px;
+    margin-top: 8px; background: var(--term-bg); 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;
+    color: var(--log-text); 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 +99,7 @@
 
   /* 交互终端全屏覆盖层（pty 任务） */
   #term-overlay {
-    position: fixed; inset: 0; z-index: 50; background: #0b1220;
+    position: fixed; inset: 0; z-index: 50; background: var(--term-bg);
     display: flex; flex-direction: column;
     padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
   }
@@ -106,7 +107,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;
@@ -114,7 +119,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); }
@@ -126,6 +130,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 {
@@ -142,6 +164,7 @@
   <div class="header-right">
     <span id="conn-mode">连接中</span>
     <span id="worker-status">检测中…</span>
+    <button id="btn-theme" type="button" title="切换 浅色/深色 主题">浅色</button>
   </div>
 </header>
 
@@ -167,55 +190,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>
-  </div>
+<!-- 一级视图：Worker 列表，选中某个 Worker 进入二级详情 -->
+<div id="view-workers">
+  <div id="worker-cards"></div>
+  <div id="workers-empty" class="empty-tip hidden">暂无已注册 Worker</div>
+</div>
 
-  <label>目标 Worker（任务在哪台机器执行）</label>
-  <select id="f-worker"><option value="">任意在线 Worker</option></select>
+<!-- 二级视图：所选 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">
@@ -258,6 +260,32 @@ function toast(msg) {
   setTimeout(() => { el.style.opacity = '0'; }, 2200);
 }
 
+// ---------- 主题：light/dark 切换，偏好存 localStorage，首访跟随系统外观 ----------
+// xterm 是 canvas 绘制读不到 CSS 变量，终端配色在这里维护并同步给各实例；
+// 浅色下重排 16 色调色板（默认 ANSI 的黄/亮黄在白底上不可见）
+const TERM_THEME = {
+  dark: { background: '#0b1220', foreground: '#e5e7eb' },
+  light: {
+    background: '#ffffff', foreground: '#111827', cursor: '#111827',
+    black: '#111827', red: '#dc2626', green: '#16a34a', yellow: '#ca8a04',
+    blue: '#2563eb', magenta: '#9333ea', cyan: '#0891b2', white: '#f3f4f6',
+    brightBlack: '#6b7280', brightRed: '#ef4444', brightGreen: '#22c55e',
+    brightYellow: '#eab308', brightBlue: '#3b82f6', brightMagenta: '#a855f7',
+    brightCyan: '#22d3ee', brightWhite: '#ffffff',
+  },
+};
+function currentTheme() {
+  return document.documentElement.dataset.theme === 'light' ? 'light' : 'dark';
+}
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  localStorage.setItem('rw_theme', theme);
+  $('btn-theme').textContent = theme === 'light' ? '深色' : '浅色';
+  document.querySelector('meta[name="theme-color"]').content = theme === 'light' ? '#f4f6f9' : '#111827';
+  for (const ent of termEntries.values()) ent.xt.options.theme = { ...TERM_THEME[theme] };
+}
+$('btn-theme').addEventListener('click', () => applyTheme(currentTheme() === 'light' ? 'dark' : 'light'));
+
 // ---------- 纯 JS SHA-256 / HMAC-SHA256 ----------
 // 非 HTTPS 环境（http://VPS-IP）下浏览器的 crypto.subtle 不可用，故内联实现。
 // 密钥只参与本地 HMAC 运算，从不随请求发送。
@@ -344,7 +372,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, {
@@ -371,7 +409,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();                 // 之前无密钥没拉过数据，配好后补一次
+  }
 });
 
 // 密钥已配置时收起输入区，只留一行状态条；点状态条可展开修改
@@ -414,7 +455,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;
@@ -451,7 +492,6 @@ function connectWS() {
         renderTasks();
         break;
       case 'task.logs':
-        mergePreview(msg.id, msg.lines); // 未展开时也要刷新 shell 视图
         appendLogs(msg.id, msg.lines);
         break;
       case 'workers':
@@ -487,7 +527,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;
@@ -520,7 +561,7 @@ function fmtTime(ts) {
          `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
 }
 
-let workerList = []; // 最近一次 Worker 快照：渲染目标下拉与 Agent 联动
+let workerList = []; // 最近一次 Worker 快照：渲染目标下拉与项目目录联动
 
 /** 相对时间：离线 Worker 的最近心跳展示成「X 分钟前」，超过一天回退具体时间 */
 function relTime(ts) {
@@ -548,60 +589,168 @@ function renderWorkers(workers) {
   }
   if (ws.textContent !== text) ws.textContent = text; // 没变就不写，避免无谓重绘
   ws.className = online ? 'online' : 'offline';
-  renderWorkerOptions(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 下拉：保持用户已选项；无有效选择时默认第一个在线 Worker
-function renderWorkerOptions(workers) {
-  const sel = $('f-worker');
-  const prev = sel.value;
-  sel.textContent = '';
-  const anyOpt = document.createElement('option');
-  anyOpt.value = '';
-  anyOpt.textContent = '任意在线 Worker';
-  sel.appendChild(anyOpt);
+// 一级视图 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 opt = document.createElement('option');
-    opt.value = w.workerId;
+    const card = document.createElement('div');
+    card.className = 'worker-card';
     const name = w.hostname && w.hostname !== w.workerId ? `${w.workerId}（${w.hostname}）` : w.workerId;
-    // 离线时附上最近心跳时间，选 Worker 时一眼看出掉线多久
-    opt.textContent = name + (w.online ? '' : `（离线，最近心跳 ${relTime(w.lastSeenAt)}）`);
-    sel.appendChild(opt);
-  }
-  if ([...sel.options].some((o) => o.value === prev)) sel.value = prev; // 保持用户已选项
-  else {
-    const firstOnline = workers.find((w) => w.online);
-    sel.value = firstOnline ? firstOnline.workerId : '';
-  }
-  renderAgentOptions(); // 选择可能变了，同步 Agent 列表
-}
-
-// Agent 下拉：选了具体 Worker 只列它上报的 agents；「任意」模式优先在线
-// Worker 的并集，都离线时用最近一次上报兜底
-function renderAgentOptions() {
-  const selected = workerList.find((w) => w.workerId === $('f-worker').value);
-  const src = selected
-    ? [selected]
-    : (() => { const on = workerList.filter((w) => w.online); return on.length ? on : workerList; })();
-  const agents = [...new Set(src.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; // 保持用户已选项
-}
-$('f-worker').addEventListener('change', renderAgentOptions);
+    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);
+  }
+}
+
+// ---------- 两级视图导航：一级 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; // 保持用户已选项
+  }
+}
+
+// 选「＋ 新建目录…」：弹输入框收目录名，合法则加入两个下拉并选中；
+// 取消或非法则退回原选项，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');
@@ -612,7 +761,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>
@@ -624,19 +772,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)) {
@@ -648,7 +790,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 {
@@ -675,63 +817,15 @@ function patchTask(t, entry) {
   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) {
@@ -785,16 +879,33 @@ 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 termLabel(t) {
+  if (t.title && !/^交互终端/.test(t.title)) return t.title;
+  const short = String(t.id).slice(-4);
+  const proj = t.project || (t.payload && t.payload.project);
+  return proj ? `${proj} · #${short}` : `终端 · #${short}`;
+}
+
 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 离线）';
+  else el.textContent = `会话未就绪（${ent.liveHint || ATTACH_HINTS.unknown}）`;
 }
 
 function ensureTerm(t) {
@@ -806,17 +917,26 @@ function ensureTerm(t) {
   }
   const xt = new Terminal({
     fontSize: 13, scrollback: 3000, cursorBlink: true,
-    theme: { background: '#0b1220', foreground: '#e5e7eb' },
+    theme: { ...TERM_THEME[currentTheme()] },
   });
   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;
@@ -828,8 +948,9 @@ function openTerm(t) {
   const ent = ensureTerm(t);
   if (!ent) return;
   activeTermId = t.id;
-  $('term-title').textContent = t.title || '交互终端';
+  $('term-title').textContent = termLabel(t);
   $('term-overlay').classList.remove('hidden');
+  showTermPane(t.id); // 先亮出本终端的 pane 再 fit（隐藏状态下 fit 拿不到尺寸）
   fitActiveTerm();
   ent.pendingAttach = true;
   sendWs({ type: 'pty.attach', taskId: t.id }); // 取回看缓冲 + 会话存活状态
@@ -851,6 +972,7 @@ function disposeTerm(id) {
   termEntries.delete(id);
   if (activeTermId === id) closeTermOverlay();
   try { ent.xt.dispose(); } catch { /* 已释放 */ }
+  ent.pane.remove();
 }
 
 // 输入代理里常驻一个哨兵字符：手机键盘在空 textarea 上按退格不产生任何事件，
@@ -917,55 +1039,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 || '留言');
-    // 目标 Worker：空值 = 任意 Worker 均可领取（undefined 不会被序列化进 body）
-    const targetWorker = $('f-worker').value || undefined;
-    await api('/api/tasks', { type: currentType, title: title || autoTitle, payload, targetWorker });
-    toast(currentType === 'pty' ? '已提交，任务运行后点「进入终端」' : '任务已提交');
+    await api('/api/tasks', { type: 'pty', title: title || `交互终端（${payload.project}）`, payload, targetWorker });
+    toast('已提交，任务运行后点「进入终端」');
     $('f-title').value = '';
     if (!wsReady) await refresh();
   } catch (err) {
@@ -975,8 +1062,11 @@ $('btn-submit').addEventListener('click', async () => {
   }
 });
 
+applyTheme(currentTheme()); // 主题初始化：同步按钮文案与 theme-color（head 已设好 data-theme）
 connectWS();
-refresh(); // 首次加载兜底：WS 握手前的空档先用 REST 铺一次数据
+// 首次加载兜底：WS 握手前的空档先用 REST 铺一次数据（无密钥时不发请求）
+if (hasSecret()) refresh();
+else setConnMode(false);       // 无密钥不发起任何连接，状态条直接落到轮询态
 </script>
 </body>
 </html>