@jacksontian/kite-server 0.1.0 → 0.3.0

package/web/index.html

@@ -5,7 +5,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <meta name="theme-color" content="#111827">
 <title>Kite 控制台</title>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
+<!-- xterm 随包自托管（vendor/ 为锁版本的官方产物）：不依赖 CDN，
+     杜绝 CDN 投毒/HTTP 下被篡改注入窃取密钥的供应链风险 -->
+<link rel="stylesheet" href="vendor/xterm.min.css">
 <style>
   :root {
     --bg: #111827; --panel: #1f2937; --line: #374151;
@@ -29,6 +31,12 @@
   #worker-status.online { color: var(--ok); }
   #worker-status.offline { color: var(--err); }
 
+  /* 明文 HTTP 部署的风险提示（仅非 localhost 的 http: 环境显示） */
+  #http-warn {
+    background: rgba(239,68,68,.12); border: 1px solid var(--err); color: var(--err);
+    border-radius: 10px; padding: 8px 12px; font-size: 12px; line-height: 1.6; margin-bottom: 14px;
+  }
+
   .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
   label { display: block; font-size: 12px; color: var(--dim); margin: 10px 0 4px; }
   input, textarea, select {
@@ -137,6 +145,12 @@
   </div>
 </header>
 
+<!-- 明文 HTTP 部署警告：任务内容与签名流量可被窃听，建议尽快上 HTTPS -->
+<div id="http-warn" class="hidden">
+  ⚠️ 当前为明文 HTTP 访问：任务、日志与签名在网络链路上明文可见，且本机无法使用安全加密 API。
+  请勿在不信任的网络（如公共 WiFi）使用，并尽快为服务端配置 HTTPS（如 Caddy 自动证书）。
+</div>
+
 <!-- 鉴权设置：密钥已存 localStorage 时折叠成一行，点「修改」才展开 -->
 <div class="panel" id="auth-panel">
   <div id="auth-bar" class="hidden">
@@ -163,6 +177,9 @@
     <button data-type="chat">留言</button>
   </div>
 
+  <label>目标 Worker（任务在哪台机器执行）</label>
+  <select id="f-worker"><option value="">任意在线 Worker</option></select>
+
   <label>标题</label>
   <input id="f-title" placeholder="一句话描述这个任务">
 
@@ -223,11 +240,15 @@
 
 <div id="toast"></div>
 
-<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
+<script src="vendor/xterm.min.js"></script>
+<script src="vendor/addon-fit.min.js"></script>
 <script>
 'use strict';
 const $ = (id) => document.getElementById(id);
+// 非 localhost 的明文 HTTP 环境：常驻风险提示（localhost 本地联调不打扰）
+if (location.protocol === 'http:' && !['localhost', '127.0.0.1'].includes(location.hostname)) {
+  $('http-warn').classList.remove('hidden');
+}
 const secretInput = $('secret');
 secretInput.value = localStorage.getItem('rw_secret') || '';
 
@@ -499,19 +520,75 @@ function fmtTime(ts) {
          `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
 }
 
+let workerList = []; // 最近一次 Worker 快照：渲染目标下拉与 Agent 联动
+
+/** 相对时间：离线 Worker 的最近心跳展示成「X 分钟前」，超过一天回退具体时间 */
+function relTime(ts) {
+  if (!ts) return '从未';
+  const diff = Date.now() - ts;
+  if (diff < 60_000) return '1 分钟内';
+  if (diff < 3600_000) return `${Math.floor(diff / 60_000)} 分钟前`;
+  if (diff < 86400_000) return `${Math.floor(diff / 3600_000)} 小时前`;
+  return fmtTime(ts);
+}
+
 function renderWorkers(workers) {
+  workerList = workers;
   const ws = $('worker-status');
-  const online = workers.find((w) => w.online);
-  const text = online ? `Mac Mini 在线（${online.workerId}）` : 'Mac Mini 离线';
+  const online = workers.filter((w) => w.online).length;
+  let text;
+  if (!workers.length) {
+    text = '无 Worker';
+  } else if (online) {
+    text = `${online}/${workers.length} Worker 在线`;
+  } else {
+    // 全离线时给出最近一次心跳时间，便于判断是「刚掉线」还是「长期没上线」
+    const lastSeen = Math.max(...workers.map((w) => w.lastSeenAt || 0));
+    text = `Worker 全部离线（最近心跳 ${relTime(lastSeen)}）`;
+  }
   if (ws.textContent !== text) ws.textContent = text; // 没变就不写，避免无谓重绘
   ws.className = online ? 'online' : 'offline';
-  renderAgentOptions(workers);
+  renderWorkerOptions(workers);
+}
+// 「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);
+  for (const w of workers) {
+    const opt = document.createElement('option');
+    opt.value = w.workerId;
+    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 的列表；都离线时用最近一次上报兜底
-function renderAgentOptions(workers) {
-  const src = workers.filter((w) => w.online);
-  const agents = [...new Set((src.length ? src : workers).flatMap((w) => w.agents || []))];
+// 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;
@@ -524,6 +601,7 @@ function renderAgentOptions(workers) {
   }
   if ([...sel.options].some((o) => o.value === prev)) sel.value = prev; // 保持用户已选项
 }
+$('f-worker').addEventListener('change', renderAgentOptions);
 
 function createTaskEl(t) {
   const div = document.createElement('div');
@@ -592,7 +670,9 @@ 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);
@@ -721,7 +801,7 @@ function ensureTerm(t) {
   let ent = termEntries.get(t.id);
   if (ent) return ent;
   if (!window.Terminal || !window.FitAddon) {
-    toast('xterm.js 加载失败（依赖 CDN，请检查网络后刷新）');
+    toast('xterm.js 加载失败（vendor/ 资源缺失，请刷新重试）');
     return null;
   }
   const xt = new Terminal({
@@ -882,7 +962,9 @@ $('btn-submit').addEventListener('click', async () => {
     $('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 });
+    // 目标 Worker：空值 = 任意 Worker 均可领取（undefined 不会被序列化进 body）
+    const targetWorker = $('f-worker').value || undefined;
+    await api('/api/tasks', { type: currentType, title: title || autoTitle, payload, targetWorker });
     toast(currentType === 'pty' ? '已提交，任务运行后点「进入终端」' : '任务已提交');
     $('f-title').value = '';
     if (!wsReady) await refresh();