@jacksontian/kite-server 0.4.0 → 0.4.1

package/lib/summary.js

@@ -7,6 +7,7 @@ export function taskSummary(t) {
     id: t.id,
     type: t.type,
     title: t.title,
+    project: (t.payload && t.payload.project) || null,
     status: t.status,
     createdAt: t.createdAt,
     startedAt: t.startedAt,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jacksontian/kite-server",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "kite 云端信箱 API：HMAC 签名鉴权、任务队列、WebSocket 实时推送、手机端 Web 控制台",
   "type": "module",
   "license": "MIT",

package/web/index.html

@@ -4,6 +4,11 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <meta name="theme-color" content="#111827">
+<script>
+// 主题初始化（先于样式解析，避免先闪一下另一套配色）：本地偏好 > 系统外观
+document.documentElement.dataset.theme = localStorage.getItem('rw_theme')
+  || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+</script>
 <title>Kite 控制台</title>
 <!-- xterm 随包自托管（vendor/ 为锁版本的官方产物）：不依赖 CDN，
      杜绝 CDN 投毒/HTTP 下被篡改注入窃取密钥的供应链风险 -->
@@ -13,6 +18,14 @@
     --bg: #111827; --panel: #1f2937; --line: #374151;
     --text: #e5e7eb; --dim: #9ca3af; --accent: #3b82f6;
     --ok: #22c55e; --err: #ef4444; --warn: #f59e0b;
+    --term-bg: #0b1220; --log-text: #a5f3fc;
+  }
+  /* light 主题：xterm 是 canvas 绘制读不到 CSS 变量，终端色由 JS 同步切 */
+  :root[data-theme='light'] {
+    --bg: #f4f6f9; --panel: #fff; --line: #d9dee7;
+    --text: #1f2937; --dim: #64748b; --accent: #2563eb;
+    --ok: #16a34a; --err: #dc2626; --warn: #d97706;
+    --term-bg: #fff; --log-text: #0e7490;
   }
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body {
@@ -30,6 +43,10 @@
   #worker-status { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--panel); color: var(--dim); white-space: nowrap; }
   #worker-status.online { color: var(--ok); }
   #worker-status.offline { color: var(--err); }
+  #btn-theme {
+    flex: none; font-size: 12px; padding: 4px 10px; border-radius: 8px;
+    background: var(--panel); color: var(--dim); border: 1px solid var(--line); white-space: nowrap;
+  }
 
   /* 明文 HTTP 部署的风险提示（仅非 localhost 的 http: 环境显示） */
   #http-warn {
@@ -66,10 +83,10 @@
   .b-canceled { background: rgba(156,163,175,.15); color: var(--dim); }
 
   .logs {
-    margin-top: 8px; background: #0b1220; border-radius: 8px; padding: 8px;
+    margin-top: 8px; background: var(--term-bg); border-radius: 8px; padding: 8px;
     font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.6;
     max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
-    color: #a5f3fc; display: none;
+    color: var(--log-text); display: none;
   }
   .task.open .logs { display: block; }
   .task .actions { margin-top: 8px; display: flex; gap: 8px; }
@@ -82,7 +99,7 @@
 
   /* 交互终端全屏覆盖层（pty 任务） */
   #term-overlay {
-    position: fixed; inset: 0; z-index: 50; background: #0b1220;
+    position: fixed; inset: 0; z-index: 50; background: var(--term-bg);
     display: flex; flex-direction: column;
     padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
   }
@@ -147,6 +164,7 @@
   <div class="header-right">
     <span id="conn-mode">连接中</span>
     <span id="worker-status">检测中…</span>
+    <button id="btn-theme" type="button" title="切换 浅色/深色 主题">浅色</button>
   </div>
 </header>
 
@@ -242,6 +260,32 @@ function toast(msg) {
   setTimeout(() => { el.style.opacity = '0'; }, 2200);
 }
 
+// ---------- 主题：light/dark 切换，偏好存 localStorage，首访跟随系统外观 ----------
+// xterm 是 canvas 绘制读不到 CSS 变量，终端配色在这里维护并同步给各实例；
+// 浅色下重排 16 色调色板（默认 ANSI 的黄/亮黄在白底上不可见）
+const TERM_THEME = {
+  dark: { background: '#0b1220', foreground: '#e5e7eb' },
+  light: {
+    background: '#ffffff', foreground: '#111827', cursor: '#111827',
+    black: '#111827', red: '#dc2626', green: '#16a34a', yellow: '#ca8a04',
+    blue: '#2563eb', magenta: '#9333ea', cyan: '#0891b2', white: '#f3f4f6',
+    brightBlack: '#6b7280', brightRed: '#ef4444', brightGreen: '#22c55e',
+    brightYellow: '#eab308', brightBlue: '#3b82f6', brightMagenta: '#a855f7',
+    brightCyan: '#22d3ee', brightWhite: '#ffffff',
+  },
+};
+function currentTheme() {
+  return document.documentElement.dataset.theme === 'light' ? 'light' : 'dark';
+}
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  localStorage.setItem('rw_theme', theme);
+  $('btn-theme').textContent = theme === 'light' ? '深色' : '浅色';
+  document.querySelector('meta[name="theme-color"]').content = theme === 'light' ? '#f4f6f9' : '#111827';
+  for (const ent of termEntries.values()) ent.xt.options.theme = { ...TERM_THEME[theme] };
+}
+$('btn-theme').addEventListener('click', () => applyTheme(currentTheme() === 'light' ? 'dark' : 'light'));
+
 // ---------- 纯 JS SHA-256 / HMAC-SHA256 ----------
 // 非 HTTPS 环境（http://VPS-IP）下浏览器的 crypto.subtle 不可用，故内联实现。
 // 密钥只参与本地 HMAC 运算，从不随请求发送。
@@ -847,6 +891,15 @@ const ATTACH_HINTS = {
 };
 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; }
@@ -864,7 +917,7 @@ function ensureTerm(t) {
   }
   const xt = new Terminal({
     fontSize: 13, scrollback: 3000, cursorBlink: true,
-    theme: { background: '#0b1220', foreground: '#e5e7eb' },
+    theme: { ...TERM_THEME[currentTheme()] },
   });
   const fit = new FitAddon.FitAddon();
   xt.loadAddon(fit);
@@ -895,7 +948,7 @@ function openTerm(t) {
   const ent = ensureTerm(t);
   if (!ent) return;
   activeTermId = t.id;
-  $('term-title').textContent = t.title || '交互终端';
+  $('term-title').textContent = termLabel(t);
   $('term-overlay').classList.remove('hidden');
   showTermPane(t.id); // 先亮出本终端的 pane 再 fit（隐藏状态下 fit 拿不到尺寸）
   fitActiveTerm();
@@ -998,7 +1051,7 @@ $('btn-submit').addEventListener('click', async () => {
   if (!/^[\w.-]+$/.test(payload.project)) return toast('项目目录名只能含字母/数字/._-');
   try {
     $('btn-submit').disabled = true;
-    await api('/api/tasks', { type: 'pty', title: title || '交互终端', payload, targetWorker });
+    await api('/api/tasks', { type: 'pty', title: title || `交互终端（${payload.project}）`, payload, targetWorker });
     toast('已提交，任务运行后点「进入终端」');
     $('f-title').value = '';
     if (!wsReady) await refresh();
@@ -1009,6 +1062,7 @@ $('btn-submit').addEventListener('click', async () => {
   }
 });
 
+applyTheme(currentTheme()); // 主题初始化：同步按钮文案与 theme-color（head 已设好 data-theme）
 connectWS();
 // 首次加载兜底：WS 握手前的空档先用 REST 铺一次数据（无密钥时不发请求）
 if (hasSecret()) refresh();

package/web/pc.html

@@ -4,6 +4,11 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="theme-color" content="#111827">
+<script>
+// 主题初始化（先于样式解析，避免先闪一下另一套配色）：本地偏好 > 系统外观
+document.documentElement.dataset.theme = localStorage.getItem('rw_theme')
+  || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+</script>
 <title>Kite 控制台</title>
 <!-- xterm 随包自托管（vendor/ 为锁版本的官方产物）：不依赖 CDN，
      杜绝 CDN 投毒/HTTP 下被篡改注入窃取密钥的供应链风险 -->
@@ -13,6 +18,14 @@
     --bg: #111827; --panel: #1f2937; --line: #374151;
     --text: #e5e7eb; --dim: #9ca3af; --accent: #3b82f6;
     --ok: #22c55e; --err: #ef4444; --warn: #f59e0b;
+    --term-bg: #0b1220; --log-text: #a5f3fc;
+  }
+  /* light 主题：xterm 是 canvas 绘制读不到 CSS 变量，终端色由 JS 同步切 */
+  :root[data-theme='light'] {
+    --bg: #f4f6f9; --panel: #fff; --line: #d9dee7;
+    --text: #1f2937; --dim: #64748b; --accent: #2563eb;
+    --ok: #16a34a; --err: #dc2626; --warn: #d97706;
+    --term-bg: #fff; --log-text: #0e7490;
   }
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body {
@@ -30,6 +43,11 @@
   #worker-status { font-size: 13px; padding: 4px 12px; 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-fullscreen, #btn-theme {
+    font-size: 13px; padding: 4px 12px; border-radius: 8px; cursor: pointer;
+    background: var(--panel); color: var(--dim); border: 1px solid var(--line); white-space: nowrap;
+  }
+  #btn-fullscreen:hover, #btn-theme:hover { border-color: var(--accent); color: var(--accent); }
 
   /* 明文 HTTP 部署的风险提示（仅非 localhost 的 http: 环境显示） */
   #http-warn {
@@ -75,10 +93,10 @@
   .b-canceled { background: rgba(156,163,175,.15); color: var(--dim); }
 
   .logs {
-    margin-top: 10px; background: #0b1220; border-radius: 8px; padding: 10px;
+    margin-top: 10px; background: var(--term-bg); border-radius: 8px; padding: 10px;
     font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6;
     max-height: min(60vh, 640px); overflow-y: auto; white-space: pre-wrap; word-break: break-all;
-    color: #a5f3fc; display: none;
+    color: var(--log-text); display: none;
   }
   .task.open .logs { display: block; }
   .task .actions { margin-top: 10px; display: flex; gap: 8px; }
@@ -91,7 +109,7 @@
 
   /* 交互终端全屏覆盖层（pty 任务）；PC 有物理键盘，输入直接由 xterm 承接 */
   #term-overlay {
-    position: fixed; inset: 0; z-index: 50; background: #0b1220;
+    position: fixed; inset: 0; z-index: 50; background: var(--term-bg);
     display: flex; flex-direction: column;
   }
   #term-overlay.hidden { display: none; }
@@ -113,7 +131,8 @@
     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-fullscreen, #term-close { font-size: 13px; padding: 5px 16px; border-radius: 6px; background: var(--panel); color: var(--text); border: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
+  #term-fullscreen:hover { border-color: var(--accent); color: var(--accent); }
   /* 单屏模式：pane 绝对定位叠层，只显示 active 的一个；
      并排（grid）模式：所有终端按 CSS grid 平铺，同时盯多个 pty */
   #term-body { flex: 1; margin: 0 16px 16px; min-height: 0; position: relative; }
@@ -183,6 +202,8 @@
   <div class="header-right">
     <span id="conn-mode">连接中</span>
     <span id="worker-status">检测中…</span>
+    <button id="btn-theme" type="button" title="切换 浅色/深色 主题">浅色</button>
+    <button id="btn-fullscreen" type="button">全屏</button>
   </div>
 </header>
 
@@ -253,6 +274,7 @@
       <button type="button" data-layout="single">单屏</button>
       <button type="button" data-layout="grid">并排</button>
     </div>
+    <button id="term-fullscreen" type="button">全屏</button>
     <button id="term-close" type="button">收起</button>
   </div>
   <div id="term-body"></div>
@@ -278,6 +300,32 @@ function toast(msg) {
   setTimeout(() => { el.style.opacity = '0'; }, 2200);
 }
 
+// ---------- 主题：light/dark 切换，偏好存 localStorage，首访跟随系统外观 ----------
+// xterm 是 canvas 绘制读不到 CSS 变量，终端配色在这里维护并同步给各实例；
+// 浅色下重排 16 色调色板（默认 ANSI 的黄/亮黄在白底上不可见）
+const TERM_THEME = {
+  dark: { background: '#0b1220', foreground: '#e5e7eb' },
+  light: {
+    background: '#ffffff', foreground: '#111827', cursor: '#111827',
+    black: '#111827', red: '#dc2626', green: '#16a34a', yellow: '#ca8a04',
+    blue: '#2563eb', magenta: '#9333ea', cyan: '#0891b2', white: '#f3f4f6',
+    brightBlack: '#6b7280', brightRed: '#ef4444', brightGreen: '#22c55e',
+    brightYellow: '#eab308', brightBlue: '#3b82f6', brightMagenta: '#a855f7',
+    brightCyan: '#22d3ee', brightWhite: '#ffffff',
+  },
+};
+function currentTheme() {
+  return document.documentElement.dataset.theme === 'light' ? 'light' : 'dark';
+}
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  localStorage.setItem('rw_theme', theme);
+  $('btn-theme').textContent = theme === 'light' ? '深色' : '浅色';
+  document.querySelector('meta[name="theme-color"]').content = theme === 'light' ? '#f4f6f9' : '#111827';
+  for (const ent of termEntries.values()) ent.xt.options.theme = { ...TERM_THEME[theme] };
+}
+$('btn-theme').addEventListener('click', () => applyTheme(currentTheme() === 'light' ? 'dark' : 'light'));
+
 // ---------- 纯 JS SHA-256 / HMAC-SHA256 ----------
 // 非 HTTPS 环境（http://VPS-IP）下浏览器的 crypto.subtle 不可用，故内联实现。
 // 密钥只参与本地 HMAC 运算，从不随请求发送。
@@ -889,6 +937,15 @@ const ATTACH_HINTS = {
   unknown: '任务尚未被领取或 Worker 离线，请稍候…',
 };
 
+// 终端 tab/pane 的显示名要有区分度：自定义标题照用；默认标题（空或「交互终端…」）
+// 退化为「项目目录 · #任务短号」，同项目开多个终端也不会重名
+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}`;
+}
+
 // 状态条挂在各终端自己的 pane 头部（并排时各有各的状态）
 function termStatus(ent) {
   if (!ent || !ent.statusEl) return;
@@ -906,7 +963,7 @@ function ensureTerm(t) {
   }
   const xt = new Terminal({
     fontSize: 14, scrollback: 5000, cursorBlink: true,
-    theme: { background: '#0b1220', foreground: '#e5e7eb' },
+    theme: { ...TERM_THEME[currentTheme()] },
   });
   const fit = new FitAddon.FitAddon();
   xt.loadAddon(fit);
@@ -920,7 +977,7 @@ function ensureTerm(t) {
       <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-title').textContent = termLabel(t); // textContent 天然防注入
   pane.querySelector('.tp-close').addEventListener('click', (ev) => {
     ev.stopPropagation();
     disposeTerm(t.id); // 只释放本地实例，任务卡上「进入终端」可随时重进（pty.attach 回补缓冲）
@@ -934,7 +991,7 @@ function ensureTerm(t) {
   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.querySelector('.tt-title').textContent = termLabel(t);
   tab.addEventListener('click', () => activateTerm(t.id));
   $('term-tabs').appendChild(tab);
   ent = {
@@ -1010,6 +1067,8 @@ function openTerm(t) {
 }
 
 function closeTermOverlay() {
+  // 覆盖层自身处于全屏时先退出全屏，否则会留一个隐藏的黑屏全屏层
+  if (fsElement() === $('term-overlay')) exitFs();
   $('term-overlay').classList.add('hidden');
   activeTermId = null;
   if (document.activeElement && document.activeElement.blur) document.activeElement.blur();
@@ -1044,9 +1103,37 @@ document.querySelectorAll('#term-layout-btns button').forEach((btn) => {
     applyTermLayout();
   });
 });
+// ---------- 全屏（Fullscreen API：页头整页全屏 / 终端覆盖层单独全屏）----------
+function fsElement() { return document.fullscreenElement || document.webkitFullscreenElement; }
+function exitFs() {
+  if (!fsElement()) return;
+  (document.exitFullscreen || document.webkitExitFullscreen).call(document);
+}
+function toggleFs(el) {
+  if (fsElement()) { exitFs(); return; }
+  try {
+    const p = el.requestFullscreen ? el.requestFullscreen()
+      : (el.webkitRequestFullscreen ? el.webkitRequestFullscreen() : null);
+    if (p && p.catch) p.catch(() => toast('进入全屏失败（浏览器限制，请重试）'));
+    else if (!p) toast('当前浏览器不支持全屏');
+  } catch { toast('当前浏览器不支持全屏'); }
+}
+function syncFsButtons() {
+  const text = fsElement() ? '退出全屏' : '全屏';
+  $('btn-fullscreen').textContent = text;
+  $('term-fullscreen').textContent = text;
+}
+document.addEventListener('fullscreenchange', () => {
+  syncFsButtons();
+  setTimeout(fitVisibleTerms, 120); // 全屏进出后视口尺寸变了，终端重 fit
+});
+document.addEventListener('webkitfullscreenchange', syncFsButtons);
+$('btn-fullscreen').addEventListener('click', () => toggleFs(document.documentElement));
+$('term-fullscreen').addEventListener('click', () => toggleFs($('term-overlay')));
 // Esc 收起终端覆盖层（终端聚焦时 Esc 会先被 xterm 吃掉，此处兜底非聚焦场景）
 document.addEventListener('keydown', (ev) => {
   if (ev.key === 'Escape' && activeTermId && !$('term-overlay').classList.contains('hidden')) {
+    if (fsElement()) return; // 全屏态 Esc 由浏览器用于退出全屏，不再联动收起
     const ent = termEntries.get(activeTermId);
     // 终端聚焦时 Esc 是有效按键（如退出 less），双击 Esc 才收起，避免误触
     if (ent && document.activeElement && document.activeElement.closest
@@ -1084,7 +1171,7 @@ $('btn-submit').addEventListener('click', async () => {
   if (!/^[\w.-]+$/.test(payload.project)) return toast('项目目录名只能含字母/数字/._-');
   try {
     $('btn-submit').disabled = true;
-    await api('/api/tasks', { type: 'pty', title: title || '交互终端', payload, targetWorker });
+    await api('/api/tasks', { type: 'pty', title: title || `交互终端（${payload.project}）`, payload, targetWorker });
     toast('已提交，任务运行后点「进入终端」');
     $('f-title').value = '';
     if (!wsReady) await refresh();
@@ -1095,6 +1182,7 @@ $('btn-submit').addEventListener('click', async () => {
   }
 });
 
+applyTheme(currentTheme()); // 主题初始化：同步按钮文案与 theme-color（head 已设好 data-theme）
 connectWS();
 // 首次加载兜底：WS 握手前的空档先用 REST 铺一次数据（无密钥时不发请求）
 if (hasSecret()) refresh();