@jacksontian/kite-server 0.3.0 → 0.4.0

package/web/pc.html

@@ -18,8 +18,8 @@
   body {
     font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
     background: var(--bg); color: var(--text);
-    padding: 20px 24px 40px;
-    max-width: 1280px; margin: 0 auto;
+    padding: 20px 32px 40px;
+    max-width: 1600px; margin: 0 auto;
   }
   header { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 16px; gap: 8px; }
   h1 { font-size: 20px; font-weight: 600; }
@@ -37,10 +37,14 @@
     border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.6; margin-bottom: 16px;
   }
 
-  /* 双栏桌面布局：左栏提交任务，右栏任务流 */
-  .layout { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 18px; align-items: start; }
+  /* 双栏桌面布局：左栏提交任务，右栏任务流；
+     一级视图（.one-col）退化为全宽单栏，Worker 卡片横向铺开，不挤在窄左栏 */
+  .layout { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 18px; align-items: start; }
+  .layout.one-col { grid-template-columns: minmax(0, 1fr); }
   @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
   .col-left { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
+  /* 全宽单栏时密钥面板拉通一行太长，限个舒适宽度 */
+  .layout.one-col #auth-panel { max-width: 640px; }
 
   .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
   label { display: block; font-size: 12px; color: var(--dim); margin: 12px 0 5px; }
@@ -52,13 +56,6 @@
   textarea { min-height: 84px; 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: 8px 0; border-radius: 8px; border: 1px solid var(--line);
-    background: var(--bg); color: var(--dim); font-size: 13px; cursor: pointer;
-  }
-  .types button.active { border-color: var(--accent); color: var(--accent); background: rgba(59,130,246,.12); }
-
   .submit {
     width: 100%; margin-top: 16px; padding: 11px;
     background: var(--accent); color: #fff; border: none; border-radius: 10px;
@@ -80,19 +77,10 @@
   .logs {
     margin-top: 10px; background: #0b1220; border-radius: 8px; padding: 10px;
     font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6;
-    max-height: 480px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
+    max-height: min(60vh, 640px); 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: 10px; background: #0b1220; border-radius: 8px; padding: 10px;
-    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; 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: 10px; display: flex; gap: 8px; }
   .task .actions button {
     font-size: 13px; padding: 5px 16px; border-radius: 6px;
@@ -107,11 +95,46 @@
     display: flex; flex-direction: column;
   }
   #term-overlay.hidden { display: none; }
-  #term-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
-  #term-title { font-size: 14px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  #term-status { flex: 1; font-size: 12px; color: var(--dim); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #term-head { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
+  /* tab 条：每个打开的终端一个 tab，非当前终端有新输出时亮活动圆点 */
+  #term-tabs { flex: 1; display: flex; gap: 6px; overflow-x: auto; min-width: 0; }
+  .term-tab {
+    display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px;
+    border: 1px solid var(--line); background: var(--panel); color: var(--dim);
+    font-size: 13px; cursor: pointer; white-space: nowrap; max-width: 220px;
+  }
+  .term-tab .tt-title { overflow: hidden; text-overflow: ellipsis; }
+  .term-tab.active { border-color: var(--accent); color: var(--text); background: rgba(59,130,246,.12); }
+  .term-tab .tt-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); display: none; }
+  .term-tab.dirty .tt-dot { display: block; }
+  #term-layout-btns { display: flex; gap: 6px; }
+  #term-layout-btns button {
+    font-size: 12px; padding: 4px 12px; border-radius: 6px; cursor: pointer;
+    background: var(--panel); color: var(--dim); border: 1px solid var(--line);
+  }
+  #term-layout-btns button.active { border-color: var(--accent); color: var(--accent); background: rgba(59,130,246,.12); }
   #term-close { font-size: 13px; padding: 5px 16px; border-radius: 6px; background: var(--panel); color: var(--text); border: 1px solid var(--line); cursor: pointer; }
-  #term-body { flex: 1; margin: 0 16px 16px; min-height: 0; }
+  /* 单屏模式：pane 绝对定位叠层，只显示 active 的一个；
+     并排（grid）模式：所有终端按 CSS grid 平铺，同时盯多个 pty */
+  #term-body { flex: 1; margin: 0 16px 16px; min-height: 0; position: relative; }
+  #term-body.grid {
+    display: grid; gap: 10px;
+    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
+    grid-auto-rows: minmax(0, 1fr);
+  }
+  .term-pane { position: absolute; inset: 0; display: none; flex-direction: column; }
+  .term-pane.active { display: flex; }
+  #term-body.grid .term-pane {
+    position: relative; inset: auto; display: flex; min-height: 0;
+    border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
+  }
+  #term-body.grid .term-pane.active { border-color: var(--accent); }
+  .tp-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--panel); flex: none; }
+  .tp-title { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30%; }
+  .tp-status { flex: 1; font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .tp-close { flex: none; border: none; background: none; color: var(--dim); font-size: 14px; cursor: pointer; padding: 0 4px; }
+  .tp-close:hover { color: var(--err); }
+  .tp-term { flex: 1; min-height: 0; }
   #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); }
@@ -130,6 +153,27 @@
     background: #000c; color: #fff; padding: 9px 18px; border-radius: 8px;
     font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none;
   }
+  /* 两级视图：一级 Worker 列表 / 二级所选 Worker 详情 */
+  #back-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+  #btn-back {
+    padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px;
+    background: var(--panel); color: var(--text); font-size: 13px; cursor: pointer;
+  }
+  #btn-back:hover { border-color: var(--accent); color: var(--accent); }
+  #worker-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #worker-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
+  .worker-card {
+    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
+    padding: 14px; cursor: pointer; transition: border-color .15s;
+  }
+  .worker-card:hover { border-color: var(--accent); }
+  .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: 12px; color: var(--dim); margin-top: 6px; 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: 40px 0; }
+
   .hidden { display: none !important; }
 </style>
 </head>
@@ -148,7 +192,7 @@
   请勿在不信任的网络（如公共 WiFi）使用，并尽快为服务端配置 HTTPS（如 Caddy 自动证书）。
 </div>
 
-<div class="layout">
+<div class="layout one-col" id="layout">
 <div class="col-left">
 
 <!-- 鉴权设置：密钥已存 localStorage 时折叠成一行，点「修改」才展开 -->
@@ -167,62 +211,48 @@
   </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><!-- /view-worker -->
 
 </div><!-- /.col-left -->
 
-<!-- 任务列表 -->
-<div id="task-list"></div>
+<!-- 任务列表（仅所选 Worker，进入二级视图后显示在右侧） -->
+<div id="task-list" class="hidden"></div>
 
 </div><!-- /.layout -->
 
-<!-- 交互终端覆盖层（pty 任务）：xterm.js 渲染，输入经 /ws 下行到 Worker 的 PTY -->
+<!-- 交互终端覆盖层（pty 任务）：xterm.js 渲染，输入经 /ws 下行到 Worker 的 PTY。
+     tab 条 + 单屏/并排布局切换（并排时多个 pty 同屏平铺），活动圆点标记非当前终端的新输出 -->
 <div id="term-overlay" class="hidden">
   <div id="term-head">
-    <span id="term-title"></span>
-    <span id="term-status"></span>
+    <div id="term-tabs"></div>
+    <div id="term-layout-btns">
+      <button type="button" data-layout="single">单屏</button>
+      <button type="button" data-layout="grid">并排</button>
+    </div>
     <button id="term-close" type="button">收起</button>
   </div>
   <div id="term-body"></div>
@@ -334,7 +364,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, {
@@ -361,7 +401,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();                 // 之前无密钥没拉过数据，配好后补一次
+  }
 });
 
 // 密钥已配置时收起输入区，只留一行状态条；点状态条可展开修改
@@ -404,7 +447,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;
@@ -441,7 +484,6 @@ function connectWS() {
         renderTasks();
         break;
       case 'task.logs':
-        mergePreview(msg.id, msg.lines); // 未展开时也要刷新 shell 视图
         appendLogs(msg.id, msg.lines);
         break;
       case 'workers':
@@ -450,7 +492,13 @@ function connectWS() {
       // --- pty 交互终端流 ---
       case 'pty.data': {
         const ent = termEntries.get(msg.id);
-        if (ent) { ent.xt.write(msg.data); ent.live = true; termStatus(ent); }
+        if (ent) {
+          ent.xt.write(msg.data);
+          ent.live = true;
+          // 非当前终端有新输出：tab 亮活动圆点，切过去后熄灭
+          if (msg.id !== activeTermId) { ent.dirty = true; ent.tab.classList.add('dirty'); }
+          termStatus(ent);
+        }
         break;
       }
       case 'pty.started': {
@@ -477,7 +525,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;
@@ -487,7 +536,7 @@ function connectWS() {
   sock.addEventListener('close', (ev) => {
     wsReady = false;
     setConnMode(false);
-    if (termEntries.size) termStatus(termEntries.get(activeTermId) || termEntries.values().next().value);
+    for (const ent of termEntries.values()) termStatus(ent); // 各打开终端的状态条都显示重连中
     if (ev.code === 4003) {
       // 验签被拒：无意义重试只会刷服务端日志，等用户改密钥
       wsAuthRejected = true;
@@ -510,31 +559,194 @@ function fmtTime(ts) {
          `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
 }
 
+let workerList = []; // 心跳下发的 Worker 快照；目标 Worker 与项目目录下拉都基于它
+
+function relTime(ts) {
+  const s = Math.max(0, Math.round((Date.now() - ts) / 1000));
+  if (s < 60) return `${s} 秒前`;
+  if (s < 3600) return `${Math.round(s / 60)} 分钟前`;
+  if (s < 86400) return `${Math.round(s / 3600)} 小时前`;
+  return `${Math.round(s / 86400)} 天前`;
+}
+
 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 onlineCount = workers.filter((w) => w.online).length;
+  const text = workers.length ? `${onlineCount}/${workers.length} 台 Worker 在线` : '无已注册 Worker';
   if (ws.textContent !== text) ws.textContent = text; // 没变就不写，避免无谓重绘
-  ws.className = online ? 'online' : 'offline';
-  renderAgentOptions(workers);
+  ws.className = onlineCount ? 'online' : 'offline';
+  // 当前所在二级视图的 Worker 已注销（如配置移除）：退回一级列表
+  if (currentWorkerId && !workers.some((w) => w.workerId === currentWorkerId)) navBack();
+  renderWorkerCards();
+  // 首份快照到达后按地址栏 hash 恢复视图（刷新进入二级页/展开的长任务）
+  if (!routeInited) { routeInited = true; applyRoute(); }
+}
+
+// 一级视图 Worker 卡片：sig 去重，心跳快照没变就不重建（避免打断点击）
+let cardsSig = '';
+function renderWorkerCards() {
+  $('workers-empty').classList.toggle('hidden', workerList.length > 0);
+  const sig = JSON.stringify(workerList.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 workerList) {
+    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);
+  }
+}
+
+// ---------- 两级视图导航：一级 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');
+  $('task-list').classList.remove('hidden'); // 二级视图才展示右侧任务列表
+  $('layout').classList.remove('one-col');   // 进入二级视图恢复双栏
+  if (pushRoute) pushRoute_();
+  updateSubmitState();
+  renderProjectOptions();
+  renderTasks();               // 切换到该 Worker 的任务过滤
+}
+function navBack(pushRoute = true) {
+  currentWorkerId = null;
+  $('view-worker').classList.add('hidden');
+  $('view-workers').classList.remove('hidden');
+  $('task-list').classList.add('hidden');
+  $('layout').classList.add('one-col');      // 回到一级视图：全宽铺开 Worker 卡片
+  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);
+
+function updateSubmitState() {
+  $('btn-submit').disabled = !currentWorkerId;
+}
+
+// 项目目录下拉数据源：只有所选 Worker 的上报（显式指派，不做跨机并集）
+function selectedWorker() {
+  return workerList.find((w) => w.workerId === currentWorkerId) || null;
+}
+
+// 项目目录下拉：列 Worker 心跳上报的 workspace 已有目录；末尾常驻
+// 「＋ 新建目录…」，输入的新目录在任务执行时由 Worker 自动创建
+// （pty 执行前会 mkdir）
+const NEW_PROJECT = '__new__';
+const projectSels = ['f-pty-project'];
+
+function renderProjectOptions() {
+  const w = selectedWorker();
+  const projects = [...new Set(w ? (w.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; // 保持用户已选项
+  }
 }
 
-// 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);
+// 选「＋ 新建目录…」：弹输入框收目录名，合法则加入两个下拉并选中；
+// 取消或非法则退回原选项，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;
   }
-  if ([...sel.options].some((o) => o.value === prev)) sel.value = prev; // 保持用户已选项
 }
+for (const id of projectSels) $(id).addEventListener('change', handleNewProject);
 
 function createTaskEl(t) {
   const div = document.createElement('div');
@@ -545,7 +757,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>
@@ -557,18 +768,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,
   };
-  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)) {
@@ -580,7 +786,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 {
@@ -602,66 +808,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) {
@@ -715,15 +875,26 @@ function appendLogs(id, lines) {
 
 // ---------- 交互终端（pty 任务：xterm.js 渲染，IO 走 /ws 中继到 Worker 的 PTY）----------
 // PC 有物理键盘：xterm 聚焦后直接承接按键，无需手机端的隐藏输入代理与按键工具条
-const termEntries = new Map(); // taskId -> { xt, fit, live, pendingAttach }
+// 布局借鉴 mwt LayoutManager：单屏（叠层只显示一个）/ 并排（grid 平铺同盯多个 pty），
+// tab 活动圆点标记非当前终端的新输出；偏好存 localStorage
+const termEntries = new Map(); // taskId -> { xt, fit, pane, tab, statusEl, live, pendingAttach, liveHint, dirty, attached }
 let activeTermId = null;
+let termLayout = localStorage.getItem('rw_termLayout') === 'grid' ? 'grid' : 'single';
+// 会话未就绪时的原因文案（与服务端 pty.attach 应答的 reason 对应）
+const ATTACH_HINTS = {
+  not_claimed: '任务尚未被领取，等待 Worker 上线领取…',
+  worker_offline: 'Worker 离线（通道断开），重连后可自动恢复…',
+  starting: '任务已被领取，会话启动中，请稍候…',
+  ended: '会话已结束或已被回收',
+  unknown: '任务尚未被领取或 Worker 离线，请稍候…',
+};
 
+// 状态条挂在各终端自己的 pane 头部（并排时各有各的状态）
 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 离线）';
+  if (!ent || !ent.statusEl) return;
+  if (!wsReady) ent.statusEl.textContent = '实时通道断开，重连中…';
+  else if (ent.live) ent.statusEl.textContent = '已连接';
+  else ent.statusEl.textContent = `会话未就绪（${ent.liveHint || ATTACH_HINTS.unknown}）`;
 }
 
 function ensureTerm(t) {
@@ -739,37 +910,108 @@ function ensureTerm(t) {
   });
   const fit = new FitAddon.FitAddon();
   xt.loadAddon(fit);
-  xt.open($('term-body'));
-  ent = { xt, fit, live: false, pendingAttach: false };
+  // 每个终端独占一个 pane（标题栏 + 渲染区）：挂在同一容器里会让多实例叠在一起串台
+  const pane = document.createElement('div');
+  pane.className = 'term-pane';
+  pane.innerHTML = `
+    <div class="tp-head">
+      <span class="tp-title"></span>
+      <span class="tp-status"></span>
+      <button class="tp-close" type="button" title="关闭该终端">✕</button>
+    </div>
+    <div class="tp-term"></div>`;
+  pane.querySelector('.tp-title').textContent = t.title || '交互终端'; // textContent 天然防注入
+  pane.querySelector('.tp-close').addEventListener('click', (ev) => {
+    ev.stopPropagation();
+    disposeTerm(t.id); // 只释放本地实例，任务卡上「进入终端」可随时重进（pty.attach 回补缓冲）
+  });
+  pane.addEventListener('mousedown', () => { // 并排时点非当前 pane 即切焦点过去
+    if (activeTermId !== t.id) activateTerm(t.id);
+  });
+  $('term-body').appendChild(pane);
+  xt.open(pane.querySelector('.tp-term'));
+  // 顶部同步一个 tab：点击切换，活动圆点标记后台新输出
+  const tab = document.createElement('div');
+  tab.className = 'term-tab';
+  tab.innerHTML = '<span class="tt-dot"></span><span class="tt-title"></span>';
+  tab.querySelector('.tt-title').textContent = t.title || '交互终端';
+  tab.addEventListener('click', () => activateTerm(t.id));
+  $('term-tabs').appendChild(tab);
+  ent = {
+    xt, fit, pane, tab, statusEl: pane.querySelector('.tp-status'),
+    live: false, pendingAttach: false, liveHint: '', dirty: false, attached: 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);
+// 切换当前终端：点亮对应 tab 与 pane，熄灭活动圆点，聚焦承接输入
+function activateTerm(id) {
+  const ent = termEntries.get(id);
   if (!ent) return;
+  activeTermId = id;
+  ent.dirty = false;
+  for (const [tid, e] of termEntries) {
+    const on = tid === id;
+    e.tab.classList.toggle('active', on);
+    e.tab.classList.toggle('dirty', e.dirty); // active 的 dirty 已清，顺带同步
+    // 单屏模式 pane 叠层只显示当前；并排模式 CSS 让全部可见，active 只高亮边框
+    e.pane.classList.toggle('active', on);
+  }
+  fitTerm(id, ent); // pane 可见后再 fit（隐藏状态下拿不到尺寸）
+  termStatus(ent);
+  ent.xt.focus();
+}
+
+// 按容器尺寸重算 cols/rows，并通知 Worker 端 PTY 同步窗口大小
+function fitTerm(id, ent) {
   try { ent.fit.fit(); } catch { return; }
-  sendWs({ type: 'session.resize', taskId: activeTermId, cols: ent.xt.cols, rows: ent.xt.rows });
+  if (wsReady) sendWs({ type: 'session.resize', taskId: id, cols: ent.xt.cols, rows: ent.xt.rows });
+}
+
+// fit 所有当前可见终端（并排：全部；单屏：仅 active）
+function fitVisibleTerms() {
+  if ($('term-overlay').classList.contains('hidden')) return;
+  for (const [id, ent] of termEntries) {
+    if (termLayout === 'grid' || id === activeTermId) fitTerm(id, ent);
+  }
+}
+
+// 应用布局模式：并排按终端数重算 grid 列数（至多 3 列），并重新 fit 全部可见终端
+function applyTermLayout() {
+  const body = $('term-body');
+  body.classList.toggle('grid', termLayout === 'grid');
+  document.querySelectorAll('#term-layout-btns button').forEach((b) => {
+    b.classList.toggle('active', b.dataset.layout === termLayout);
+  });
+  if (termLayout === 'grid') {
+    const n = termEntries.size;
+    body.style.setProperty('--cols', String(n <= 1 ? 1 : (n <= 4 ? 2 : 3)));
+  } else {
+    body.style.removeProperty('--cols');
+  }
+  setTimeout(fitVisibleTerms, 60); // 等布局切换稳定再重 fit
 }
 
 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 }); // 取回看缓冲 + 会话存活状态
-  ent.xt.focus();
+  applyTermLayout(); // 距上次收起终端数可能有变，确保布局类与列数正确
+  activateTerm(t.id);
+  // 重复打开不重复 attach：回看缓冲只回补一次，避免终端内容翻倍
+  if (!ent.attached) {
+    ent.attached = true;
+    ent.pendingAttach = true;
+    sendWs({ type: 'pty.attach', taskId: t.id }); // 取回看缓冲 + 会话存活状态
+  }
   termStatus(ent);
 }
 
 function closeTermOverlay() {
   $('term-overlay').classList.add('hidden');
   activeTermId = null;
-  termStatus(null);
   if (document.activeElement && document.activeElement.blur) document.activeElement.blur();
 }
 
@@ -778,8 +1020,15 @@ function disposeTerm(id) {
   const ent = termEntries.get(id);
   if (!ent) return;
   termEntries.delete(id);
-  if (activeTermId === id) closeTermOverlay();
+  ent.tab.remove();
   try { ent.xt.dispose(); } catch { /* 已释放 */ }
+  ent.pane.remove();
+  if (activeTermId === id) {
+    const next = termEntries.keys().next().value;
+    if (next && !$('term-overlay').classList.contains('hidden')) activateTerm(next);
+    else closeTermOverlay();
+  }
+  applyTermLayout(); // 终端数有变：重算并排列数（覆盖层收起时 fit 有兜底不执行）
 }
 
 $('term-close').addEventListener('click', closeTermOverlay);
@@ -787,6 +1036,14 @@ $('term-body').addEventListener('click', () => {
   const ent = termEntries.get(activeTermId);
   if (ent) ent.xt.focus();
 });
+// 布局切换：单屏 / 并排，偏好持久化
+document.querySelectorAll('#term-layout-btns button').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    termLayout = btn.dataset.layout;
+    localStorage.setItem('rw_termLayout', termLayout);
+    applyTermLayout();
+  });
+});
 // Esc 收起终端覆盖层（终端聚焦时 Esc 会先被 xterm 吃掉，此处兜底非聚焦场景）
 document.addEventListener('keydown', (ev) => {
   if (ev.key === 'Escape' && activeTermId && !$('term-overlay').classList.contains('hidden')) {
@@ -797,8 +1054,8 @@ document.addEventListener('keydown', (ev) => {
     closeTermOverlay();
   }
 });
-// 窗口尺寸变化后重新 fit
-window.addEventListener('resize', () => { if (activeTermId) setTimeout(fitActiveTerm, 120); });
+// 窗口尺寸变化后重新 fit 所有可见终端
+window.addEventListener('resize', () => { if (termEntries.size) setTimeout(fitVisibleTerms, 120); });
 
 // ---------- 轮询回退（仅 WS 不可用时生效）----------
 async function refresh() {
@@ -815,64 +1072,33 @@ 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) {
     toast(err.message);
   } finally {
-    $('btn-submit').disabled = false;
+    updateSubmitState();
   }
 });
 
 connectWS();
-refresh(); // 首次加载兜底：WS 握手前的空档先用 REST 铺一次数据
+// 首次加载兜底：WS 握手前的空档先用 REST 铺一次数据（无密钥时不发请求）
+if (hasSecret()) refresh();
+else setConnMode(false);       // 无密钥不发起任何连接，状态条直接落到轮询态
 </script>
 </body>
 </html>