npm - @jacksontian/kite-server - Versions diffs - 0.4.1 → 0.5.0 - Mend

@jacksontian/kite-server 0.4.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/web/index.html CHANGED Viewed

@@ -3,240 +3,166 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-<meta name="theme-color" content="#111827">
+<meta name="theme-color" content="#121520">
 <script>
 // 主题初始化（先于样式解析，避免先闪一下另一套配色）：本地偏好 > 系统外观
 document.documentElement.dataset.theme = localStorage.getItem('rw_theme')
   || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
 </script>
 <title>Kite 控制台</title>
+<!-- favicon：自托管 SVG 风筝（与 xterm vendor 同源策略，不走 CDN），透明底适配深浅主题 -->
+<link rel="icon" type="image/svg+xml" href="favicon.svg">
 <!-- xterm 随包自托管（vendor/ 为锁版本的官方产物）：不依赖 CDN，
      杜绝 CDN 投毒/HTTP 下被篡改注入窃取密钥的供应链风险 -->
 <link rel="stylesheet" href="vendor/xterm.min.css">
-<style>
-  :root {
-    --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 {
-    font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
-    background: var(--bg); color: var(--text);
-    padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
-    max-width: 640px; margin: 0 auto;
-  }
-  header { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 12px; gap: 8px; }
-  h1 { font-size: 18px; font-weight: 600; }
-  .header-right { display: flex; align-items: center; gap: 8px; }
-  #conn-mode { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--panel); color: var(--dim); white-space: nowrap; }
-  #conn-mode.realtime { color: var(--ok); }
-  #conn-mode.polling { color: var(--warn); }
-  #worker-status { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--panel); color: var(--dim); white-space: nowrap; }
-  #worker-status.online { color: var(--ok); }
-  #worker-status.offline { color: var(--err); }
-  #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 {
-    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 {
-    width: 100%; background: var(--bg); color: var(--text);
-    border: 1px solid var(--line); border-radius: 8px;
-    padding: 10px; font-size: 15px; font-family: inherit;
-  }
-  textarea { min-height: 72px; resize: vertical; }
-  input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
-  .submit {
-    width: 100%; margin-top: 14px; padding: 12px;
-    background: var(--accent); color: #fff; border: none; border-radius: 10px;
-    font-size: 16px; font-weight: 600;
-  }
-  .submit:disabled { opacity: .5; }
-  .task { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
-  .task .row1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
-  .task .title { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .task .meta { font-size: 11px; color: var(--dim); margin-top: 4px; }
-  .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
-  .b-pending { background: rgba(245,158,11,.15); color: var(--warn); }
-  .b-running { background: rgba(59,130,246,.15); color: var(--accent); }
-  .b-done { background: rgba(34,197,94,.15); color: var(--ok); }
-  .b-failed { background: rgba(239,68,68,.15); color: var(--err); }
-  .b-canceled { background: rgba(156,163,175,.15); color: var(--dim); }
-  .logs {
-    margin-top: 8px; background: 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: var(--log-text); display: none;
-  }
-  .task.open .logs { display: block; }
-  .task .actions { margin-top: 8px; display: flex; gap: 8px; }
-  .task .actions button {
-    font-size: 12px; padding: 4px 12px; border-radius: 6px;
-    background: var(--bg); color: var(--dim); border: 1px solid var(--line);
-  }
-  .task .actions button:disabled { opacity: .5; }
-  .task .actions button.term-btn { color: var(--accent); border-color: var(--accent); }
-  /* 交互终端全屏覆盖层（pty 任务） */
-  #term-overlay {
-    position: fixed; inset: 0; z-index: 50; background: var(--term-bg);
-    display: flex; flex-direction: column;
-    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
-  }
-  #term-overlay.hidden { display: none; }
-  #term-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; }
-  #term-title { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  #term-close { font-size: 13px; padding: 4px 12px; border-radius: 6px; background: var(--panel); color: var(--text); border: 1px solid var(--line); }
-  /* 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;
-    background: var(--panel); color: var(--text); border: 1px solid var(--line);
-  }
-  #term-status { flex: 1; font-size: 11px; color: var(--dim); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  #term-input { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: .01; border: none; }
-  #auth-bar { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
-  #auth-bar .title { font-size: 13px; color: var(--ok); }
-  #auth-bar .edit { font-size: 12px; color: var(--dim); }
-  .secret-row { display: flex; gap: 8px; }
-  .secret-row input { flex: 1; }
-  #btn-eye, #btn-done {
-    flex: none; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
-    background: var(--bg); color: var(--dim); font-size: 13px; cursor: pointer;
-  }
-  #btn-eye.on { color: var(--accent); border-color: var(--accent); }
-  #btn-done { color: var(--ok); }
-  /* 两级视图：一级 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 {
-    position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
-    background: #000c; color: #fff; padding: 8px 16px; border-radius: 8px;
-    font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none;
-  }
-  .hidden { display: none !important; }
-</style>
+<link rel="stylesheet" href="style.css">
 </head>
 <body>
-<header>
-  <h1>Kite</h1>
-  <div class="header-right">
-    <span id="conn-mode">连接中</span>
-    <span id="worker-status">检测中…</span>
-    <button id="btn-theme" type="button" title="切换 浅色/深色 主题">浅色</button>
+<!-- 内联 SVG 图标 sprite：自包含（不走 CDN，与 xterm vendor 同源策略），按钮以 <use href="#i-*"> 复用，
+     统一 stroke=currentColor 随按钮文字变色；id 带 ic- 前缀由 JS 换 href 实现状态切换 -->
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+  <symbol id="i-columns" viewBox="0 0 16 16"><rect x="1" y="2" width="6" height="12" rx="1" fill="currentColor" opacity="0.8"/><rect x="9" y="2" width="6" height="12" rx="1" fill="currentColor" opacity="0.5"/></symbol>
+  <symbol id="i-rows" viewBox="0 0 16 16"><rect x="1" y="2" width="14" height="5" rx="1" fill="currentColor" opacity="0.8"/><rect x="1" y="9" width="14" height="5" rx="1" fill="currentColor" opacity="0.5"/></symbol>
+  <symbol id="i-grid" viewBox="0 0 16 16"><rect x="1" y="1" width="6" height="6" rx="1" fill="currentColor" opacity="0.8"/><rect x="9" y="1" width="6" height="6" rx="1" fill="currentColor" opacity="0.5"/><rect x="1" y="9" width="6" height="6" rx="1" fill="currentColor" opacity="0.5"/><rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor" opacity="0.3"/></symbol>
+  <symbol id="i-tabs" viewBox="0 0 16 16"><rect x="1" y="4" width="14" height="11" rx="1" fill="currentColor" opacity="0.3"/><rect x="1" y="2" width="6" height="4" rx="1" fill="currentColor" opacity="0.8"/><rect x="8" y="2" width="4" height="4" rx="1" fill="currentColor" opacity="0.4"/></symbol>
+  <symbol id="i-plus" viewBox="0 0 16 16"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></symbol>
+  <symbol id="i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="4"/>
+    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
+  </symbol>
+  <symbol id="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+  </symbol>
+  <symbol id="i-expand" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/>
+  </symbol>
+  <symbol id="i-shrink" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3"/>
+  </symbol>
+  <symbol id="i-gear" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="3"/>
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+  </symbol>
+  <symbol id="i-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
+  </symbol>
+  <symbol id="i-eye-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
+    <path d="M1 1l22 22"/>
+  </symbol>
+</svg>
+<!-- 单页应用骨架（借鉴 mwt）：topbar 吸顶（终端布局选择器在右区设置组左侧），下方工作台内含会话 tab 条 + 会话/终端合一的终端区 -->
+<!-- topbar：左操作区（Worker 状态簇：Worker 选择+在线状态+连接通道 合并胶囊/项目目录/新建会话）、
+     右功能区（终端布局选择器 + 主题/全屏/设置），两区同一行 -->
+<header id="topbar">
+  <div class="tb-left">
+    <img id="hd-logo" src="favicon.svg" alt="" title="Kite">
+    <h1 id="hd-title">Kite</h1>
+    <!-- Worker 状态簇：Worker 选择 + 在线状态 + 连接通道 合并为一个胶囊组件 -->
+    <div id="worker-cluster">
+      <select id="hdr-worker" title="选择 Worker"><option value="">无 Worker</option></select>
+      <span id="worker-status">检测中…</span>
+      <span id="conn-mode">连接中</span>
+    </div>
+    <select id="hdr-project" title="项目目录（新建会话的起始目录）" disabled><option value="default">default</option></select>
+    <button id="hdr-new-session" type="button" title="直接为当前 Worker 新建交互终端会话"><svg class="ic"><use href="#i-plus"/></svg>新建会话</button>
   </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">
-    <span class="title">✓ 密钥已配置（存本机浏览器，不上网传输）</span>
-    <span class="edit">修改</span>
+  <div class="tb-right">
+    <!-- 终端布局选择器：设置区左侧常驻（与会话数无关），并排/横排/网格/标签页 四种布局 -->
+    <div id="term-layout-btns">
+      <button type="button" data-layout="columns" title="左右并排（Alt+C）"><svg class="ic"><use href="#i-columns"/></svg><span class="bl">并排</span></button>
+      <button type="button" data-layout="rows" title="上下横排（Alt+R）"><svg class="ic"><use href="#i-rows"/></svg><span class="bl">横排</span></button>
+      <button type="button" data-layout="grid" title="网格平铺（Alt+G）"><svg class="ic"><use href="#i-grid"/></svg><span class="bl">网格</span></button>
+      <button type="button" data-layout="tabs" title="标签页切换（Alt+S）"><svg class="ic"><use href="#i-tabs"/></svg><span class="bl">标签页</span></button>
+    </div>
+    <button id="hdr-theme" type="button" title="切换 浅色/深色 主题"><svg class="ic"><use id="ic-theme" href="#i-moon"/></svg></button>
+    <button id="hdr-fullscreen" type="button"><svg class="ic"><use id="ic-fs" href="#i-expand"/></svg><span>全屏</span></button>
+    <button id="hdr-settings" type="button"><svg class="ic"><use href="#i-gear"/></svg>设置</button>
   </div>
-  <div id="auth-form">
+  <!-- 设置下拉面板：密钥（topbar「设置」入口；主题/全屏已提升为 topbar 常驻按钮） -->
+  <div id="settings-pop" class="hidden">
     <label>API Secret（签名密钥：只存本机浏览器，永不在网络上传输）</label>
     <div class="secret-row">
       <input id="secret" type="password" placeholder="粘贴 API_SECRET" autocomplete="off">
-      <button id="btn-eye" type="button">显示</button>
-      <button id="btn-done" type="button">完成</button>
+      <button id="btn-eye" type="button"><svg class="ic"><use id="ic-eye" href="#i-eye"/></svg><span>显示</span></button>
     </div>
+    <div id="secret-state" class="hidden">✓ 密钥已配置（存本机浏览器，不上网传输）</div>
   </div>
-</div>
-<!-- 一级视图：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="一句话描述这个任务">
-  <label>项目目录（终端的起始目录，Worker workspace 下已有目录）</label>
-  <select id="f-pty-project"><option value="default">default</option></select>
-  <label style="color:var(--dim)">提交后点任务卡上的「进入终端」开始交互</label>
+</header>
-  <button class="submit" id="btn-submit">提交任务</button>
+<main id="content">
+  <!-- 明文 HTTP 部署警告：会话内容与签名流量可被窃听，建议尽快上 HTTPS -->
+  <div id="http-warn" class="hidden">
+    ⚠️ 当前为明文 HTTP 访问：会话、日志与签名在网络链路上明文可见，且本机无法使用安全加密 API。
+    请勿在不信任的网络（如公共 WiFi）使用，并尽快为服务端配置 HTTPS（如 Caddy 自动证书）。
   </div>
-  <!-- 任务列表（仅所选 Worker） -->
-  <div id="task-list"></div>
-</div><!-- /view-worker -->
-<!-- 交互终端覆盖层（pty 任务）：xterm.js 渲染，输入经 /ws 下行到 Worker 的 PTY -->
-<div id="term-overlay" class="hidden">
-  <div id="term-head">
-    <span id="term-title"></span>
-    <button id="term-close" type="button">收起</button>
+  <!-- 会话/终端合一的工作台：一个会话就是一个终端窗口，工作台内顶部 tab 条即会话列表（仅标签页布局显示；点 tab 开窗、✕ 关窗）。
+       终端由 xterm.js 渲染，输入经 /ws 下行到 Worker 的 PTY；
+       多窗口管理借鉴 mwt LayoutManager：tab 条 + 并排/横排/网格/标签页四种布局，
+       每窗格可最大化/最小化（状态汇总与快捷键提示见页面级状态栏），活动圆点标记非当前终端的新输出 -->
+  <section id="view-main">
+    <div id="workspace">
+      <!-- 会话 tab 条：一会话一 tab（点开窗、✕ 关窗即关会话、活动圆点标记新输出）横滚；
+           仅「标签页」布局且有会话时显示——平铺布局所有终端同屏可见，tab 冗余 -->
+      <nav id="tabs" class="hidden">
+        <div id="tab-list"></div>
+      </nav>
+      <div id="term-body">
+        <!-- 空态（mwt #empty-state 同款：logo + 应用名 + 快捷键/布局速览 + 操作按钮） -->
+        <div id="term-empty" class="hidden">
+          <div class="empty-state-logo"><img src="favicon.svg" alt=""></div>
+          <div class="empty-state-app-name">Kite 控制台</div>
+          <div class="empty-state-shortcuts">
+            <div class="empty-state-section">快捷键</div>
+            <div class="empty-state-row"><span>最大化 / 还原终端</span><kbd>Alt+M</kbd></div>
+            <div class="empty-state-row"><span>最小化 / 全部还原</span><kbd>Alt+- · Alt+0</kbd></div>
+            <div class="empty-state-row" data-shortcut-kind="navigation"><span>上一个 / 下一个终端</span><kbd>Alt+← / →</kbd></div>
+            <div class="empty-state-row" data-shortcut-kind="navigation"><span>切到第 1~9 个终端</span><kbd>Alt+1~9</kbd></div>
+            <div class="empty-state-row" data-shortcut-kind="window"><span>切换全屏</span><kbd>Alt+F</kbd></div>
+          </div>
+          <div class="empty-state-layouts">
+            <div class="empty-state-section">布局</div>
+            <div class="empty-state-layout-list">并排 · 横排 · 网格 · 标签页</div>
+          </div>
+          <div class="empty-state-actions">
+            <button id="empty-new-session" type="button"><span>新建会话</span></button>
+          </div>
+        </div>
+      </div>
+      <!-- 触屏按键工具条：手机无物理键盘，补 Tab/方向键/Ctrl 组合键 -->
+      <div id="term-bar">
+        <button type="button" data-key="BS">⌫</button>
+        <button type="button" data-key="Tab">Tab</button>
+        <button type="button" data-key="Esc">Esc</button>
+        <button type="button" data-key="Up">↑</button>
+        <button type="button" data-key="Down">↓</button>
+        <button type="button" data-key="CtrlC">^C</button>
+        <button type="button" data-key="CtrlD">^D</button>
+        <span id="term-bar-status"></span>
+      </div>
+    </div>
+  </section>
+</main>
+<!-- 页面级状态栏（mwt #statusbar 同款：22px、toolbar 底、11px 弱化字）：
+     左侧最小化栏（停靠图标+全部还原）与终端计数，右侧活动终端/窗口尺寸/快捷键提示；底部安全区由它承接 -->
+<footer id="status-bar">
+  <div class="sb-left">
+    <!-- 最小化栏：平铺布局最小化的终端停靠为图标（点图标还原），常驻「全部还原」钮；无最小化窗时整栏隐藏 -->
+    <div id="minimized-bar" class="hidden">
+      <button id="min-restore-all" type="button" title="还原全部最小化终端（Alt+0）"><svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M2 11l6-6 6 6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
+    </div>
+    <span id="tf-count"></span>
   </div>
-  <div id="term-body"></div>
-  <div id="term-bar">
-    <button type="button" data-key="BS">⌫</button>
-    <button type="button" data-key="Tab">Tab</button>
-    <button type="button" data-key="Esc">Esc</button>
-    <button type="button" data-key="Up">↑</button>
-    <button type="button" data-key="Down">↓</button>
-    <button type="button" data-key="CtrlC">^C</button>
-    <button type="button" data-key="CtrlD">^D</button>
-    <span id="term-status"></span>
+  <div class="sb-right">
+    <span id="tf-active"></span>
+    <span id="tf-size"></span>
+    <span id="tf-hints">Alt+1~9 切窗 · Alt+←/→ 相邻 · Alt+M 最大化 · Alt+- 最小化 · Alt+0 还原 · Alt+S/R/C/G 布局 · Alt+F 全屏</span>
   </div>
-</div>
+</footer>
 <!-- 手机键盘代理：藏在屏幕外承接击键；xterm 的按键绑定在触屏上靠它转交 -->
 <textarea id="term-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
@@ -244,829 +170,6 @@ document.documentElement.dataset.theme = localStorage.getItem('rw_theme')
 <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') || '';
-function toast(msg) {
-  const el = $('toast');
-  el.textContent = msg; el.style.opacity = '1';
-  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 运算，从不随请求发送。
-const SHA256_K = new Uint32Array([
-  0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5, 0x3956c25b, 0x59f111f1, 0x923f82a4, 0xab1c5ed5,
-  0xd807aa98, 0x12835b01, 0x243185be, 0x550c7dc3, 0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174,
-  0xe49b69c1, 0xefbe4786, 0x0fc19dc6, 0x240ca1cc, 0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da,
-  0x983e5152, 0xa831c66d, 0xb00327c8, 0xbf597fc7, 0xc6e00bf3, 0xd5a79147, 0x06ca6351, 0x14292967,
-  0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13, 0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85,
-  0xa2bfe8a1, 0xa81a664b, 0xc24b8b70, 0xc76c51a3, 0xd192e819, 0xd6990624, 0xf40e3585, 0x106aa070,
-  0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5, 0x391c0cb3, 0x4ed8aa4a, 0x5b9cca4f, 0x682e6ff3,
-  0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208, 0x90befffa, 0xa4506ceb, 0xbef9a3f7, 0xc67178f2,
-]);
-const rotr = (x, n) => (x >>> n) | (x << (32 - n));
-function sha256Bytes(data) {
-  const H = new Uint32Array([
-    0x6a09e667, 0xbb67ae85, 0x3c6ef372, 0xa54ff53a,
-    0x510e527f, 0x9b05688c, 0x1f83d9ab, 0x5be0cd19,
-  ]);
-  const len = data.length;
-  const paddedLen = (((len + 8) >> 6) + 1) << 6;
-  const padded = new Uint8Array(paddedLen);
-  padded.set(data);
-  padded[len] = 0x80;
-  const dv = new DataView(padded.buffer);
-  dv.setUint32(paddedLen - 8, Math.floor(len / 0x20000000)); // 比特长度高 32 位
-  dv.setUint32(paddedLen - 4, (len << 3) >>> 0);             // 比特长度低 32 位
-  const w = new Uint32Array(64);
-  for (let off = 0; off < paddedLen; off += 64) {
-    for (let i = 0; i < 16; i++) w[i] = dv.getUint32(off + i * 4);
-    for (let i = 16; i < 64; i++) {
-      const s0 = rotr(w[i - 15], 7) ^ rotr(w[i - 15], 18) ^ (w[i - 15] >>> 3);
-      const s1 = rotr(w[i - 2], 17) ^ rotr(w[i - 2], 19) ^ (w[i - 2] >>> 10);
-      w[i] = (w[i - 16] + s0 + w[i - 7] + s1) >>> 0;
-    }
-    let a = H[0], b = H[1], c = H[2], d = H[3], e = H[4], f = H[5], g = H[6], h = H[7];
-    for (let i = 0; i < 64; i++) {
-      const t1 = (h + (rotr(e, 6) ^ rotr(e, 11) ^ rotr(e, 25)) + ((e & f) ^ (~e & g)) + SHA256_K[i] + w[i]) >>> 0;
-      const t2 = ((rotr(a, 2) ^ rotr(a, 13) ^ rotr(a, 22)) + ((a & b) ^ (a & c) ^ (b & c))) >>> 0;
-      h = g; g = f; f = e; e = (d + t1) >>> 0; d = c; c = b; b = a; a = (t1 + t2) >>> 0;
-    }
-    H[0] = (H[0] + a) >>> 0; H[1] = (H[1] + b) >>> 0; H[2] = (H[2] + c) >>> 0; H[3] = (H[3] + d) >>> 0;
-    H[4] = (H[4] + e) >>> 0; H[5] = (H[5] + f) >>> 0; H[6] = (H[6] + g) >>> 0; H[7] = (H[7] + h) >>> 0;
-  }
-  const out = new Uint8Array(32);
-  const odv = new DataView(out.buffer);
-  for (let i = 0; i < 8; i++) odv.setUint32(i * 4, H[i]);
-  return out;
-}
-const bytesToHex = (bytes) => Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
-const utf8 = (s) => new TextEncoder().encode(s);
-const sha256Hex = (s) => bytesToHex(sha256Bytes(utf8(s)));
-function hmacSha256Hex(keyStr, msgStr) {
-  let key = utf8(keyStr);
-  if (key.length > 64) key = sha256Bytes(key);
-  const msg = utf8(msgStr);
-  const inner = new Uint8Array(64 + msg.length);
-  const outer = new Uint8Array(64 + 32);
-  for (let i = 0; i < 64; i++) {
-    const k = i < key.length ? key[i] : 0;
-    inner[i] = k ^ 0x36;
-    outer[i] = k ^ 0x5c;
-  }
-  inner.set(msg, 64);
-  outer.set(sha256Bytes(inner), 64);
-  return bytesToHex(sha256Bytes(outer));
-}
-// ---------- 请求签名（与 server/worker 的签名串格式严格一致）----------
-function makeNonce() {
-  const bytes = new Uint8Array(16);
-  if (window.crypto && crypto.getRandomValues) crypto.getRandomValues(bytes);
-  else for (let i = 0; i < 16; i++) bytes[i] = Math.floor(Math.random() * 256);
-  return bytesToHex(bytes);
-}
-function signHeaders(method, path, bodyStr) {
-  const ts = Math.floor(Date.now() / 1000);
-  const nonce = makeNonce();
-  const sig = hmacSha256Hex(secretInput.value.trim(), [method, path, ts, nonce, sha256Hex(bodyStr)].join('\n'));
-  return { 'X-RW-Ts': String(ts), 'X-RW-Nonce': nonce, 'X-RW-Sig': sig };
-}
-// 未配置密钥时禁止发起任何需要签名的请求：空密钥签名必 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, {
-    method,
-    headers: {
-      'Content-Type': 'application/json',
-      ...signHeaders(method, path, bodyStr),
-    },
-    body: body === undefined ? undefined : bodyStr,
-  });
-  const data = await res.json().catch(() => ({}));
-  if (res.status === 401) throw new Error('签名验证失败（检查密钥与本机时钟）');
-  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
-  return data;
-}
-// ---------- 本地状态 ----------
-const taskCache = new Map();   // id -> 任务摘要
-const logCache = new Map();    // id -> 日志全文字符串（展开过的任务才有）
-const openTasks = new Set();   // 展开查看日志的任务 id
-let wsReady = false;
-let wsAuthRejected = false;    // 验签被拒后停止重连，直到密钥变更
-secretInput.addEventListener('change', () => {
-  localStorage.setItem('rw_secret', secretInput.value.trim());
-  wsAuthRejected = false;      // 密钥换了，允许重新尝试实时连接
-  if (hasSecret()) {
-    if (!wsReady) connectWS();
-    refresh();                 // 之前无密钥没拉过数据，配好后补一次
-  }
-});
-// 密钥已配置时收起输入区，只留一行状态条；点状态条可展开修改
-function toggleAuth(collapsed) {
-  $('auth-bar').classList.toggle('hidden', !collapsed);
-  $('auth-form').classList.toggle('hidden', collapsed);
-  if (collapsed) setSecretVisible(false); // 收起后恢复掩码，避免下次展开直接露出明文
-}
-$('auth-bar').addEventListener('click', () => {
-  toggleAuth(false);
-  secretInput.focus();
-});
-// 退出编辑：无论是否改动都可收起；内容被清空则保持展开（没有可用密钥）
-$('btn-done').addEventListener('click', () => {
-  toggleAuth(secretInput.value.trim() !== '');
-});
-toggleAuth(secretInput.value.trim() !== '');
-// 明文/掩码切换，仅改变本地展示方式，不影响签名
-function setSecretVisible(visible) {
-  secretInput.type = visible ? 'text' : 'password';
-  const btn = $('btn-eye');
-  btn.textContent = visible ? '隐藏' : '显示';
-  btn.classList.toggle('on', visible);
-}
-$('btn-eye').addEventListener('click', () => setSecretVisible(secretInput.type === 'password'));
-// ---------- WebSocket 实时通道（断线自动回退轮询）----------
-let curWs = null; // 当前实时连接，pty 终端输入经它上行
-function sendWs(msg) {
-  if (curWs && curWs.readyState === WebSocket.OPEN) curWs.send(JSON.stringify(msg));
-  else toast('实时通道未连接，输入无法送达');
-}
-function setConnMode(realtime) {
-  const el = $('conn-mode');
-  el.textContent = realtime ? '实时' : '轮询';
-  el.className = realtime ? 'realtime' : 'polling';
-}
-function connectWS() {
-  if (wsAuthRejected || !hasSecret()) return; // 无密钥时握手必被 4003 拒绝，不发起
-  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
-  const sock = new WebSocket(`${proto}://${location.host}/ws`);
-  curWs = sock;
-  sock.addEventListener('open', () => {
-    // 签名鉴权：sig = HMAC(密钥, "WS\nTS\nNONCE")，密钥本身不进网络
-    const ts = Math.floor(Date.now() / 1000);
-    const nonce = makeNonce();
-    const sig = hmacSha256Hex(secretInput.value.trim(), ['WS', ts, nonce].join('\n'));
-    sock.send(JSON.stringify({ type: 'auth', ts, nonce, sig }));
-  });
-  sock.addEventListener('message', (ev) => {
-    let msg;
-    try { msg = JSON.parse(ev.data); } catch { return; }
-    switch (msg.type) {
-      case 'hello':
-        wsReady = true;
-        setConnMode(true);
-        taskCache.clear();
-        for (const t of msg.tasks) taskCache.set(t.id, t);
-        renderTasks();
-        renderWorkers(msg.workers);
-        // 重连后给打开着的终端补回看缓冲与会话存活状态
-        for (const id of termEntries.keys()) {
-          const ent = termEntries.get(id);
-          ent.pendingAttach = true;
-          sock.send(JSON.stringify({ type: 'pty.attach', taskId: id }));
-        }
-        break;
-      case 'task.created':
-      case 'task.updated':
-        taskCache.set(msg.task.id, msg.task);
-        if (msg.result !== undefined) logCache.delete(msg.task.id); // 结果变了，展开时重新拉全量
-        renderTasks();
-        break;
-      case 'task.logs':
-        appendLogs(msg.id, msg.lines);
-        break;
-      case 'workers':
-        renderWorkers(msg.workers);
-        break;
-      // --- pty 交互终端流 ---
-      case 'pty.data': {
-        const ent = termEntries.get(msg.id);
-        if (ent) { ent.xt.write(msg.data); ent.live = true; termStatus(ent); }
-        break;
-      }
-      case 'pty.started': {
-        const ent = termEntries.get(msg.id);
-        if (ent && !ent.live) {
-          ent.live = true;
-          ent.xt.write('\r\n\x1b[32m[终端会话已就绪]\x1b[0m\r\n');
-          termStatus(ent);
-        }
-        break;
-      }
-      case 'pty.exited': {
-        const ent = termEntries.get(msg.id);
-        if (ent) {
-          ent.live = false;
-          ent.xt.write(`\r\n\x1b[31m[会话结束：${msg.reason || ''}]\x1b[0m\r\n`);
-          termStatus(ent);
-        }
-        break;
-      }
-      case 'pty.attach': {
-        const ent = termEntries.get(msg.id);
-        if (ent && ent.pendingAttach) {
-          ent.pendingAttach = false;
-          if (msg.tail) ent.xt.write(msg.tail); // 回看缓冲：切后台回来不白屏
-          ent.live = msg.live;
-          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;
-      }
-    }
-  });
-  sock.addEventListener('close', (ev) => {
-    wsReady = false;
-    setConnMode(false);
-    if (termEntries.size) termStatus(termEntries.get(activeTermId) || termEntries.values().next().value);
-    if (ev.code === 4003) {
-      // 验签被拒：无意义重试只会刷服务端日志，等用户改密钥
-      wsAuthRejected = true;
-      toggleAuth(false);       // 展开密钥输入区，方便直接修改
-      toast('密钥无效或时钟偏差过大，实时连接已停止');
-      return;
-    }
-    setTimeout(connectWS, 3000); // 锁屏/切网导致的断线，3 秒后重连
-  });
-  sock.addEventListener('error', () => sock.close());
-}
-// ---------- 渲染（增量 diff：节点按 id 复用，只更新变化的部分） ----------
-const STATUS_TEXT = { pending: '等待中', running: '执行中', done: '完成', failed: '失败', canceled: '已取消' };
-const taskEls = new Map(); // taskId -> { el, badge, meta, logsEl, toggle, cancel, status, metaText }
-function fmtTime(ts) {
-  if (!ts) return '-';
-  const d = new Date(ts);
-  return `${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ` +
-         `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
-}
-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.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';
-  // 当前所在二级视图的 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);
-  }
-}
-// ---------- 两级视图导航：一级 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');
-  div.className = 'task new' + (openTasks.has(t.id) ? ' open' : '');
-  div.innerHTML = `
-    <div class="row1">
-      <span class="title"></span>
-      <span class="badge"></span>
-    </div>
-    <div class="meta"></div>
-    <div class="logs"></div>
-    <div class="actions">
-      <button data-act="toggle">展开</button>
-      <button data-act="term" class="hidden term-btn">进入终端</button>
-      <button data-act="cancel" class="hidden">取消</button>
-    </div>`;
-  div.querySelector('.title').textContent = t.title || t.id; // textContent 天然防注入
-  const entry = {
-    el: div,
-    badge: div.querySelector('.badge'),
-    meta: div.querySelector('.meta'),
-    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,
-  };
-  entry.term.addEventListener('click', () => openTerm(t));
-  entry.toggle.addEventListener('click', async () => {
-    if (openTasks.has(t.id)) {
-      openTasks.delete(t.id);
-      div.classList.remove('open');
-    } else {
-      openTasks.add(t.id);
-      div.classList.add('open');
-      await loadLogs(t.id);
-    }
-    entry.toggle.textContent = openTasks.has(t.id) ? '收起' : '展开';
-    syncTaskRoute();     // 展开状态入 URL：长任务执行中刷新仍留在任务页面
-  });
-  entry.cancel.addEventListener('click', async () => {
-    try {
-      entry.cancel.disabled = true;
-      await api(`/api/tasks/${t.id}/cancel`, {});
-      if (!wsReady) await refresh();
-    } catch (e) { toast(e.message); } finally { entry.cancel.disabled = false; }
-  });
-  setTimeout(() => div.classList.remove('new'), 300);
-  return entry;
-}
-function patchTask(t, entry) {
-  if (entry.status !== t.status) {
-    entry.status = t.status;
-    entry.badge.textContent = STATUS_TEXT[t.status] || t.status;
-    entry.badge.className = `badge b-${t.status}`;
-    entry.cancel.classList.toggle('hidden', t.status !== 'pending');
-    entry.toggle.textContent = openTasks.has(t.id) ? '收起' : '展开';
-  }
-  entry.term.classList.toggle('hidden', t.type !== 'pty'); // pty 任务入口
-  // 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));
-  // 展开且有缓存：内容没变就不动 DOM，保留滚动位置
-  if (openTasks.has(t.id) && logCache.has(t.id)) writeLogs(t.id, logCache.get(t.id));
-}
-function renderTasks() {
-  const list = $('task-list');
-  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) {
-    if (!ids.has(id)) { entry.el.remove(); taskEls.delete(id); disposeTerm(id); }
-  }
-  // 增量更新/插入，并保证顺序（新任务插到正确位置，而不是闪到末尾）
-  let prev = null;
-  for (const t of tasks) {
-    let entry = taskEls.get(t.id);
-    if (!entry) { entry = createTaskEl(t); taskEls.set(t.id, entry); }
-    patchTask(t, entry);
-    const expected = prev ? prev.nextSibling : list.firstChild;
-    if (entry.el !== expected) list.insertBefore(entry.el, expected);
-    prev = entry.el;
-  }
-}
-// 写日志到指定任务的日志区；仅在内容变化时写入，贴底时才自动滚动
-function writeLogs(id, text) {
-  const entry = taskEls.get(id);
-  if (!entry || entry.logsEl.textContent === text) return;
-  const el = entry.logsEl;
-  const stickBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 20;
-  el.textContent = text;
-  if (stickBottom) el.scrollTop = el.scrollHeight;
-}
-// 展开任务时经 REST 拉全量日志，之后增量靠 WS 的 task.logs 事件追加
-async function loadLogs(id) {
-  try {
-    const task = await api(`/api/tasks/${id}`);
-    let text = task.logs.join('\n');
-    if (task.result) text += `\n\n--- 结果 ---\n${JSON.stringify(task.result, null, 2)}`;
-    logCache.set(id, text);
-    writeLogs(id, text);
-  } catch { /* 任务可能已被清理 */ }
-}
-function appendLogs(id, lines) {
-  if (!openTasks.has(id)) return;
-  const task = taskCache.get(id);
-  if (task && ['done', 'failed'].includes(task.status)) {
-    loadLogs(id); // 终态时重拉一次，确保结果块出现
-    return;
-  }
-  if (!logCache.has(id)) { loadLogs(id); return; } // 尚未拉过全量，直接重拉
-  const text = logCache.get(id) + '\n' + lines.join('\n');
-  logCache.set(id, text);
-  writeLogs(id, text);
-}
-// ---------- 交互终端（pty 任务：xterm.js 渲染，IO 走 /ws 中继到 Worker 的 PTY）----------
-// 手机端无物理键盘：隐藏 textarea 承接击键，工具条补 Tab/方向键/Ctrl 组合键
-const termEntries = new Map(); // taskId -> { xt, fit, live, pendingAttach, 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 = `会话未就绪（${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 加载失败（vendor/ 资源缺失，请刷新重试）');
-    return null;
-  }
-  const xt = new Terminal({
-    fontSize: 13, scrollback: 3000, cursorBlink: true,
-    theme: { ...TERM_THEME[currentTheme()] },
-  });
-  const fit = new FitAddon.FitAddon();
-  xt.loadAddon(fit);
-  // 每个终端独占一个 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;
-  try { ent.fit.fit(); } catch { return; }
-  sendWs({ type: 'session.resize', taskId: activeTermId, cols: ent.xt.cols, rows: ent.xt.rows });
-}
-function openTerm(t) {
-  const ent = ensureTerm(t);
-  if (!ent) return;
-  activeTermId = t.id;
-  $('term-title').textContent = termLabel(t);
-  $('term-overlay').classList.remove('hidden');
-  showTermPane(t.id); // 先亮出本终端的 pane 再 fit（隐藏状态下 fit 拿不到尺寸）
-  fitActiveTerm();
-  ent.pendingAttach = true;
-  sendWs({ type: 'pty.attach', taskId: t.id }); // 取回看缓冲 + 会话存活状态
-  focusTermInput();
-  termStatus(ent);
-}
-function closeTermOverlay() {
-  $('term-overlay').classList.add('hidden');
-  activeTermId = null;
-  termStatus(null);
-  if (document.activeElement && document.activeElement.blur) document.activeElement.blur();
-}
-// 终端实例随会话常驻：收起不销毁，后台继续接收输出；任务卡被清理时才释放
-function disposeTerm(id) {
-  const ent = termEntries.get(id);
-  if (!ent) return;
-  termEntries.delete(id);
-  if (activeTermId === id) closeTermOverlay();
-  try { ent.xt.dispose(); } catch { /* 已释放 */ }
-  ent.pane.remove();
-}
-// 输入代理里常驻一个哨兵字符：手机键盘在空 textarea 上按退格不产生任何事件，
-// 哨兵被删掉即代表一次 Backspace（发 \x7f），随后立即补回
-const TERM_SENTINEL = '\u00a0';
-function resetTermInput() {
-  const el = $('term-input');
-  el.value = TERM_SENTINEL;
-  try { el.setSelectionRange(1, 1); } catch { /* 个别浏览器不支持，忽略 */ }
-}
-function focusTermInput() {
-  if (!$('term-input').value) resetTermInput();
-  $('term-input').focus({ preventScroll: true });
-}
-$('term-close').addEventListener('click', closeTermOverlay);
-$('term-body').addEventListener('click', focusTermInput);
-// 隐藏 textarea 承接手机键盘击键；换行统一归一成 \r 交给 PTY
-$('term-input').addEventListener('input', (ev) => {
-  const el = ev.target;
-  let val = el.value;
-  if (!val) {
-    // 哨兵被删 = 用户按了退格
-    if (activeTermId) sendWs({ type: 'session.input', taskId: activeTermId, data: '\x7f' });
-    resetTermInput();
-    return;
-  }
-  if (val.startsWith(TERM_SENTINEL)) val = val.slice(TERM_SENTINEL.length);
-  resetTermInput();
-  if (activeTermId && val) {
-    sendWs({ type: 'session.input', taskId: activeTermId, data: val.replace(/\n/g, '\r') });
-  }
-});
-$('term-input').addEventListener('keydown', (ev) => {
-  if (ev.key === 'Enter') {
-    ev.preventDefault(); // 拦住换行，直接发回车，避免 input 事件补发 \n
-    if (activeTermId) sendWs({ type: 'session.input', taskId: activeTermId, data: '\r' });
-  }
-});
-document.querySelectorAll('#term-bar button').forEach((btn) => {
-  btn.addEventListener('click', () => {
-    if (!activeTermId) return;
-    sendWs({ type: 'session.input', taskId: activeTermId, data: KEY_SEQ[btn.dataset.key] });
-    focusTermInput();
-  });
-});
-// 屏幕旋转/键盘弹起都会改变可用高度，延迟一点等布局稳定再 fit
-window.addEventListener('resize', () => { if (activeTermId) setTimeout(fitActiveTerm, 120); });
-// ---------- 轮询回退（仅 WS 不可用时生效）----------
-async function refresh() {
-  try {
-    const [{ tasks }, { workers }] = await Promise.all([
-      api('/api/tasks?limit=50'),
-      api('/api/worker/status'),
-    ]);
-    taskCache.clear();
-    for (const t of tasks) taskCache.set(t.id, t);
-    renderTasks();
-    renderWorkers(workers);
-  } catch (err) {
-    toast(err.message);
-  }
-}
-setInterval(() => { if (!wsReady && !wsAuthRejected && 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();
-  const payload = { project: $('f-pty-project').value.trim() || 'default' };
-  if (!/^[\w.-]+$/.test(payload.project)) return toast('项目目录名只能含字母/数字/._-');
-  try {
-    $('btn-submit').disabled = true;
-    await api('/api/tasks', { type: 'pty', title: title || `交互终端（${payload.project}）`, payload, targetWorker });
-    toast('已提交，任务运行后点「进入终端」');
-    $('f-title').value = '';
-    if (!wsReady) await refresh();
-  } catch (err) {
-    toast(err.message);
-  } finally {
-    $('btn-submit').disabled = false;
-  }
-});
-applyTheme(currentTheme()); // 主题初始化：同步按钮文案与 theme-color（head 已设好 data-theme）
-connectWS();
-// 首次加载兜底：WS 握手前的空档先用 REST 铺一次数据（无密钥时不发请求）
-if (hasSecret()) refresh();
-else setConnMode(false);       // 无密钥不发起任何连接，状态条直接落到轮询态
-</script>
+<script src="app.js"></script>
 </body>
 </html>