codebee 0.1.53 → 0.1.54

package/app/ui/board.css

@@ -0,0 +1,292 @@
+/* CodeBee 任务驾驶舱（/board.html）：挂墙大屏，固定深色科技风。
+   色板取自默认皮肤「深海 ocean」，另加蜜蜂琥珀色点缀。 */
+
+:root {
+  --bg: #0a1220;
+  --panel: #111d33;
+  --panel2: #16253f;
+  --line: #22355433;
+  --txt: #dce7f7;
+  --dim: #7d90ad;
+  --blue: #3ba9f5;
+  --violet: #6d6cf6;
+  --amber: #ffb84d;
+  --green: #35c98c;
+  --red: #ff6b6b;
+  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body { height: 100%; }
+
+body {
+  background:
+    radial-gradient(1100px 500px at 70% -10%, #16294a66, transparent 65%),
+    radial-gradient(#1c2c4a 1px, transparent 1.5px) 0 0 / 26px 26px,
+    var(--bg);
+  color: var(--txt);
+  font: 15px/1.45 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
+  overflow: hidden;
+  display: flex; flex-direction: column;
+}
+
+.hidden { display: none !important; }
+
+/* ---------------------------------------------------------------- 顶栏 */
+#hd {
+  height: 58px; flex: none;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0 22px;
+  border-bottom: 1px solid var(--line);
+  background: linear-gradient(180deg, #14233dcc, #101c31aa);
+}
+.hd-brand { display: flex; align-items: center; gap: 12px; }
+.hd-name { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
+.hd-right { display: flex; align-items: center; gap: 12px; }
+.hd-pill {
+  font: 13px var(--mono); color: var(--dim);
+  border: 1px solid var(--line); border-radius: 20px;
+  padding: 4px 12px; background: #ffffff08;
+}
+.hd-pill.warn { color: #ffd0d0; border-color: #ff6b6b66; background: #ff6b6b14; }
+.hd-pill.off { color: var(--red); border-color: #ff6b6b88; }
+.hd-clock { font: 600 22px var(--mono); color: var(--blue); letter-spacing: 1px; }
+
+/* ---------------------------------------------------------------- KPI */
+#kpis {
+  flex: none; display: grid;
+  grid-template-columns: repeat(6, 1fr); gap: 12px;
+  padding: 12px 22px 4px;
+}
+.kpi {
+  background: linear-gradient(180deg, var(--panel2), var(--panel));
+  border: 1px solid var(--line); border-radius: 12px;
+  padding: 12px 16px 10px; position: relative; overflow: hidden;
+}
+.kpi::before {
+  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+  background: var(--kc, var(--blue)); opacity: .85;
+}
+.kpi { --kc: var(--blue); }
+.k-run { --kc: var(--amber); } .k-queue { --kc: var(--blue); }
+.k-done { --kc: var(--green); } .k-fail { --kc: var(--red); }
+.k-tok { --kc: var(--violet); } .k-cost { --kc: var(--green); }
+.k-num { font: 700 30px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
+.k-fail .k-num { color: var(--red); }
+.k-run .k-num { color: var(--amber); }
+.k-label { margin-top: 3px; font-size: 12.5px; color: var(--dim); letter-spacing: 1px; }
+
+/* ---------------------------------------------------------------- 主区 */
+#main {
+  flex: 1; min-height: 0;
+  display: grid; grid-template-columns: 1fr 380px; gap: 12px;
+  padding: 8px 22px 16px;
+}
+.sec-title {
+  font-size: 13px; color: var(--dim); letter-spacing: 2px;
+  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
+}
+.sec-title::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--amber); }
+
+#wall { min-height: 0; display: flex; flex-direction: column; }
+#wall-cards {
+  flex: 1; min-height: 0; overflow-y: auto;
+  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
+  align-content: start; padding-right: 4px;
+}
+#wall-cards::-webkit-scrollbar { width: 6px; }
+#wall-cards::-webkit-scrollbar-thumb { background: #2a3f6299; border-radius: 3px; }
+
+/* 运行中任务卡 */
+.card {
+  background: linear-gradient(180deg, var(--panel2), var(--panel));
+  border: 1px solid var(--line); border-radius: 12px;
+  padding: 14px 16px 12px; position: relative; overflow: hidden;
+}
+.card::before {
+  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
+  background: var(--amber);
+  animation: pulse 2.2s ease-in-out infinite;
+}
+@keyframes pulse { 50% { opacity: .35; } }
+.card-top { display: flex; align-items: baseline; gap: 10px; }
+.c-type {
+  flex: none; font-size: 11.5px; color: var(--amber);
+  border: 1px solid #ffb84d55; border-radius: 4px; padding: 1px 7px;
+  background: #ffb84d12;
+}
+.c-title {
+  font-size: 15.5px; font-weight: 600; white-space: nowrap;
+  overflow: hidden; text-overflow: ellipsis; flex: 1;
+}
+.c-elapsed { flex: none; font: 600 14px var(--mono); color: var(--blue); }
+.c-steps {
+  margin-top: 10px; display: flex; gap: 4px; align-items: center;
+}
+.c-steps i {
+  flex: 1; height: 7px; border-radius: 3px; background: #223554;
+  min-width: 6px;
+}
+.c-steps i.d { background: var(--green); }
+.c-steps i.r { background: var(--amber); animation: seg 1.1s ease-in-out infinite; }
+@keyframes seg { 50% { opacity: .4; } }
+.c-stepinfo {
+  margin-top: 8px; font-size: 13px; color: var(--txt);
+  display: flex; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden;
+}
+.c-stepinfo .no { color: var(--amber); font: 600 12.5px var(--mono); flex: none; }
+.c-stepinfo .ag { color: var(--dim); font-size: 12px; flex: none; }
+.c-stepinfo .sm { overflow: hidden; text-overflow: ellipsis; }
+
+/* 模型 / 厂商 / 智能体徽章 + 本次消耗 */
+.c-meta {
+  margin-top: 9px; display: flex; gap: 6px; align-items: center; overflow: hidden;
+}
+.b {
+  flex: none; font: 600 11.5px var(--mono);
+  border-radius: 4px; padding: 2px 8px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
+}
+.b-model { color: #9fd0ff; border: 1px solid #3ba9f566; background: #3ba9f514; }
+.b-prov { color: #c9b8ff; border: 1px solid #6d6cf666; background: #6d6cf614; }
+.b-agent { color: var(--dim); border: 1px solid #7d90ad44; background: #ffffff08; }
+.b.dim { color: #55688c; border-style: dashed; }
+.c-run-tok { flex: none; margin-left: auto; font: 11.5px var(--mono); color: #6fbf9b; }
+
+/* 实时思考/输出窗口 */
+.c-live {
+  margin-top: 9px; position: relative;
+  background: #0c1628; border: 1px solid #22355480; border-radius: 8px;
+  padding: 6px 9px 7px;
+}
+.c-live-tag {
+  position: absolute; right: 8px; top: 5px;
+  font: 600 10px var(--mono); letter-spacing: 1px; color: var(--amber);
+  border: 1px solid #ffb84d44; border-radius: 3px; padding: 0 5px;
+  background: #ffb84d10;
+}
+.c-live-text {
+  margin: 0; font: 11px/1.55 var(--mono); color: #8fb3d9;
+  white-space: pre; overflow: hidden; max-height: 6.4em;
+  text-overflow: clip;
+}
+.c-pct { margin-top: 8px; font: 11.5px var(--mono); color: var(--dim); }
+
+/* 排队行：label 与 chips 垂直居中对齐；多个排队时行内横向滚动 */
+.queue-row {
+  flex: none; margin-top: 12px; font-size: 13px;
+  display: flex; align-items: center; gap: 12px;
+  height: 42px; overflow: hidden;
+}
+.q-label { flex: none; color: var(--blue); }
+#queue-chips {
+  flex: 1; min-width: 0;
+  display: flex; align-items: center; gap: 8px;
+  overflow-x: auto; overflow-y: hidden; padding: 2px 2px 4px;
+}
+#queue-chips::-webkit-scrollbar { height: 5px; }
+#queue-chips::-webkit-scrollbar-thumb { background: #2a3f6299; border-radius: 3px; }
+#queue-chips::-webkit-scrollbar-track { background: transparent; }
+#queue-chips .chip {
+  flex: none; display: inline-flex; align-items: center; height: 26px;
+  padding: 0 12px;
+  border: 1px solid #3ba9f544; border-radius: 13px; color: var(--txt);
+  background: #3ba9f510; font-size: 12.5px;
+  max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+/* 空态 */
+.wall-empty {
+  flex: 1; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 10px;
+}
+.idle-bee { width: 110px; height: 110px; opacity: .8; }
+.idle-t1 { font-size: 22px; font-weight: 600; color: var(--dim); letter-spacing: 2px; }
+.idle-t2 { font-size: 13.5px; color: #55688c; }
+
+/* ---------------------------------------------------------------- 右栏 */
+#rail { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
+.rail-card {
+  background: linear-gradient(180deg, var(--panel2), var(--panel));
+  border: 1px solid var(--line); border-radius: 12px;
+  padding: 12px 14px;
+}
+.rail-card.grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+
+/* 7 日趋势（纯 div 柱状） */
+.trend { display: flex; align-items: flex-end; gap: 8px; height: 86px; padding-top: 4px; }
+.trend .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
+.trend .bar i {
+  width: 100%; border-radius: 3px 3px 0 0; min-height: 2px;
+  background: linear-gradient(180deg, var(--violet), var(--blue));
+  opacity: .9;
+}
+.trend .bar.zero i { background: #223554; }
+.trend .bar b { font: 400 10px var(--mono); color: var(--dim); font-weight: 400; }
+
+/* 模型 TOP5 */
+.models { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
+.model-row { display: grid; grid-template-columns: 118px 1fr 52px; gap: 8px; align-items: center; }
+.model-row .nm { font-size: 12px; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.model-row .tk { height: 8px; border-radius: 4px; background: #223554; overflow: hidden; }
+.model-row .tk i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--violet)); }
+.model-row .vl { font: 11px var(--mono); color: var(--dim); text-align: right; }
+.models .empty { color: #55688c; font-size: 12.5px; padding: 6px 0; }
+
+/* 最近动态 */
+#recent { flex: 1; min-height: 0; overflow-y: auto; }
+#recent::-webkit-scrollbar { width: 6px; }
+#recent::-webkit-scrollbar-thumb { background: #2a3f6299; border-radius: 3px; }
+.r-row {
+  display: flex; gap: 9px; align-items: baseline;
+  padding: 7px 2px; border-bottom: 1px dashed #22355466; font-size: 13px;
+}
+.r-row:last-child { border-bottom: none; }
+.r-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
+.r-dot.done { background: var(--green); box-shadow: 0 0 6px #35c98c88; }
+.r-dot.failed { background: var(--red); box-shadow: 0 0 6px #ff6b6b88; }
+.r-dot.cancelled { background: #55688c; }
+.r-t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.r-t.failed { color: #ffb3b3; }
+.r-d { flex: none; font: 11px var(--mono); color: var(--dim); }
+.recent .empty { color: #55688c; font-size: 12.5px; padding: 6px 0; }
+
+/* ---------------------------------------------------------------- 令牌门 */
+.gate {
+  position: fixed; inset: 0; z-index: 50;
+  background: #0a1220ee; backdrop-filter: blur(3px);
+  display: flex; align-items: center; justify-content: center;
+}
+.gate-box { text-align: center; }
+.gate-title { font-size: 20px; font-weight: 700; }
+.gate-sub { color: var(--dim); font-size: 13px; margin: 6px 0 16px; }
+#gate-token {
+  display: block; width: 280px; margin: 0 auto 12px;
+  background: var(--panel); color: var(--txt);
+  border: 1px solid #3a507a; border-radius: 8px;
+  padding: 10px 12px; font-size: 15px; outline: none; text-align: center;
+}
+#gate-token:focus { border-color: var(--blue); }
+#gate-ok {
+  background: var(--blue); color: #06111f; font-weight: 700;
+  border: none; border-radius: 8px; padding: 10px 26px; font-size: 14px; cursor: pointer;
+}
+.gate-err { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 18px; }
+
+/* ---------------------------------------------------------------- 自适应 */
+@media (max-width: 1250px) {
+  #main { grid-template-columns: 1fr 320px; }
+  #wall-cards { grid-template-columns: 1fr; }
+  #kpis { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 900px) {
+  body { overflow: auto; }
+  #main { grid-template-columns: 1fr; }
+  #wall-cards { max-height: none; overflow: visible; }
+}
+
+/* 大屏挂墙一般关动效的系统偏好也尊重一下 */
+@media (prefers-reduced-motion: reduce) {
+  .card::before, .c-steps i.r { animation: none; }
+}

package/app/ui/board.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>CodeBee</title>
+<link rel="icon" href="/icons/icon-192.png">
+<link rel="stylesheet" href="/board.css">
+</head>
+<body>
+
+<!-- 远程访问令牌门（本机免输；与主界面共用 orch.token） -->
+<div id="gate" class="gate hidden">
+  <div class="gate-box">
+    <div class="gate-title" data-i18n="需要访问令牌">需要访问令牌</div>
+    <div class="gate-sub" data-i18n="启动 CodeBee 时控制台会显示">启动 CodeBee 时控制台会显示</div>
+    <input id="gate-token" type="password" data-i18n-ph="访问令牌" placeholder="访问令牌" autocomplete="off">
+    <button id="gate-ok" data-i18n="进入大屏">进入大屏</button>
+    <div id="gate-err" class="gate-err"></div>
+  </div>
+</div>
+
+<header id="hd">
+  <div class="hd-brand">
+    <div class="hd-name">CodeBee</div>
+  </div>
+  <div class="hd-right">
+    <div id="hd-pool" class="hd-pill" title="执行池占用">—</div>
+    <div id="hd-health" class="hd-pill warn hidden" title=""></div>
+    <div id="hd-conn" class="hd-pill off hidden" data-i18n="连接断开">连接断开</div>
+    <div id="hd-clock" class="hd-clock">--:--:--</div>
+  </div>
+</header>
+
+<section id="kpis">
+  <div class="kpi k-run"><div class="k-num" id="k-running">0</div><div class="k-label" data-i18n="运行中">运行中</div></div>
+  <div class="kpi k-queue"><div class="k-num" id="k-queued">0</div><div class="k-label" data-i18n="排队中">排队中</div></div>
+  <div class="kpi k-done"><div class="k-num" id="k-done">0</div><div class="k-label" data-i18n="今日完成">今日完成</div></div>
+  <div class="kpi k-fail"><div class="k-num" id="k-failed">0</div><div class="k-label" data-i18n="今日失败">今日失败</div></div>
+  <div class="kpi k-tok"><div class="k-num" id="k-tokens">0</div><div class="k-label" data-i18n="今日 tokens">今日 tokens</div></div>
+  <div class="kpi k-cost"><div class="k-num" id="k-cost">$0.00</div><div class="k-label" data-i18n="今日成本">今日成本</div></div>
+</section>
+
+<main id="main">
+  <section id="wall">
+    <div class="sec-title" data-i18n="运行中任务">运行中任务</div>
+    <div id="wall-cards"></div>
+    <div id="wall-empty" class="wall-empty hidden">
+      <svg viewBox="0 0 48 48" class="idle-bee" aria-hidden="true">
+        <ellipse cx="24" cy="28" rx="13" ry="16" fill="#3a4a68"/>
+        <path d="M11 22h26M11 30h26M13 38h22" stroke="#0d1626" stroke-width="5" stroke-linecap="round"/>
+        <ellipse cx="13" cy="12" rx="9" ry="6" fill="#2a3a58" opacity=".8"/>
+        <ellipse cx="35" cy="12" rx="9" ry="6" fill="#2a3a58" opacity=".8"/>
+        <circle cx="24" cy="11" r="6" fill="#0d1626"/>
+      </svg>
+      <div class="idle-t1" data-i18n="蜂巢空闲 · 等蜂回巢">蜂巢空闲 · 等蜂回巢</div>
+      <div class="idle-t2" data-i18n="没有正在运行的任务，新任务在主界面创建后会实时出现在这里">没有正在运行的任务，新任务在主界面创建后会实时出现在这里</div>
+    </div>
+    <div id="queue-row" class="queue-row hidden">
+      <span class="q-label" data-i18n="排队等待">排队等待</span>
+      <span id="queue-chips"></span>
+    </div>
+  </section>
+
+  <aside id="rail">
+    <div class="rail-card">
+      <div class="sec-title" data-i18n="近 7 日 tokens">近 7 日 tokens</div>
+      <div id="trend" class="trend"></div>
+    </div>
+    <div class="rail-card">
+      <div class="sec-title" data-i18n="近 7 日模型 TOP5">近 7 日模型 TOP5</div>
+      <div id="models" class="models"></div>
+    </div>
+    <div class="rail-card grow">
+      <div class="sec-title" data-i18n="最近动态">最近动态</div>
+      <div id="recent" class="recent"></div>
+    </div>
+  </aside>
+</main>
+
+<script src="/i18n.js"></script>
+<script src="/board.js"></script>
+</body>
+</html>

package/app/ui/board.js

@@ -0,0 +1,259 @@
+/* CodeBee 任务驾驶舱（/board.html）：4s 轮询 /api/board（KB 级聚合端点），
+   不碰 /api/state 全量，也不占 SSE。 */
+"use strict";
+
+const $ = (s) => document.querySelector(s);
+const t = (k) => (window.t ? window.t(k) : k);   // i18n.js 先于本脚本加载
+const POLL_MS = 4000;
+
+// URL ?lang=en|zh 可覆盖语言（i18n.js 已按 localStorage 自动 apply 过一次，
+// 这里写回偏好并重刷静态文案；动态文案走 t() 每次渲染实时取）
+try {
+  const ql = new URLSearchParams(location.search).get("lang");
+  if ((ql === "en" || ql === "zh") && window.getLang && window.getLang() !== ql) {
+    window.setLang(ql);
+    if (window.applyI18n) window.applyI18n();
+  }
+} catch (e) { /* ignore */ }
+
+/* ---------------------------------------------------------------- 工具 */
+function fmtTokens(n) {
+  n = Number(n) || 0;
+  if (n >= 1e8) return (n / 1e8).toFixed(2) + t("亿");
+  if (n >= 1e4) return (n / 1e4).toFixed(1) + t("万");
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + "k";
+  return String(n);
+}
+function fmtCost(n) {
+  n = Number(n) || 0;
+  if (n >= 100) return "$" + n.toFixed(0);
+  if (n >= 1) return "$" + n.toFixed(2);
+  return "$" + n.toFixed(3);
+}
+function fmtDur(sec) {
+  sec = Math.max(0, Math.floor(Number(sec) || 0));
+  const h = Math.floor(sec / 3600), m = Math.floor((sec % 3600) / 60), s = sec % 60;
+  if (h) return h + "h" + String(m).padStart(2, "0") + "m";
+  return String(m).padStart(2, "0") + ":" + String(s).padStart(2, "0");
+}
+function parseTs(s) {
+  // 后端时间格式 "YYYY-MM-DD HH:MM:SS"；补 T 让各浏览器 Date 都能解析
+  const t = Date.parse(String(s || "").replace(" ", "T"));
+  return isNaN(t) ? 0 : t;
+}
+function esc(s) {
+  return String(s == null ? "" : s).replace(/[&<>"']/g,
+    (c) => ({"&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"}[c]));
+}
+
+/* ---------------------------------------------------------------- 令牌门 */
+function token() { return localStorage.getItem("orch.token") || ""; }
+
+function showGate(msg) {
+  $("#gate").classList.remove("hidden");
+  $("#gate-err").textContent = msg || "";
+  setTimeout(() => $("#gate-token").focus(), 50);
+}
+$("#gate-ok").addEventListener("click", submitGate);
+$("#gate-token").addEventListener("keydown", (e) => { if (e.key === "Enter") submitGate(); });
+function submitGate() {
+  const v = $("#gate-token").value.trim();
+  if (!v) return;
+  localStorage.setItem("orch.token", v);
+  $("#gate").classList.add("hidden");
+  poll();
+}
+
+/* ---------------------------------------------------------------- 拉取 */
+let connLost = false;
+
+async function poll() {
+  let data;
+  try {
+    const r = await fetch("/api/board", { headers: { "X-CodeBee-Token": token() } });
+    if (r.status === 401) { showGate(t("令牌不正确或已变更")); return; }
+    if (!r.ok) throw new Error("HTTP " + r.status);
+    data = await r.json();
+    if (connLost) { connLost = false; $("#hd-conn").classList.add("hidden"); }
+  } catch (e) {
+    if (!connLost) { connLost = true; $("#hd-conn").classList.remove("hidden"); }
+    return;
+  }
+  render(data);
+}
+
+/* ---------------------------------------------------------------- 渲染 */
+const cardEls = new Map();   // task_id -> 卡元素（复用防闪烁）
+
+function render(d) {
+  // KPI
+  $("#k-running").textContent = d.running.length;
+  $("#k-queued").textContent = d.queued.length;
+  $("#k-done").textContent = d.today_done;
+  $("#k-failed").textContent = d.today_failed;
+  $("#k-tokens").textContent = fmtTokens(d.usage_today.tokens);
+  $("#k-cost").textContent = fmtCost(d.usage_today.cost_usd);
+
+  // 顶栏
+  const pool = d.pool || {};
+  $("#hd-pool").textContent = t("蜂巢") + " " + (pool.alive || 0) + "/" + (pool.target || 0)
+    + " · " + t("对话") + " " + (pool.chat_alive || 0) + "/" + (pool.chat_pool || 0);
+  const downs = (d.health || []).filter((h) => h.status === "down" && !h.silenced);
+  const hp = $("#hd-health");
+  if (downs.length) {
+    hp.classList.remove("hidden");
+    hp.textContent = "⚠ " + downs.map((h) => h.provider).join("、") + " " + t("异常");
+    hp.title = downs.map((h) => (h.provider + " " + (h.model || "")).trim()).join("\n");
+  } else {
+    hp.classList.add("hidden");
+  }
+
+  renderWall(d);
+  renderTrend(d.trend || []);
+  renderModels(d.models || []);
+  renderRecent(d.recent || []);
+}
+
+function renderWall(d) {
+  const wrap = $("#wall-cards");
+  const empty = $("#wall-empty");
+  const has = d.running.length > 0;
+  empty.classList.toggle("hidden", has);
+  wrap.classList.toggle("hidden", !has);
+
+  const seen = new Set();
+  for (const c of d.running) {
+    seen.add(c.task_id);
+    let el = cardEls.get(c.task_id);
+    if (!el) {
+      el = document.createElement("div");
+      el.className = "card";
+      el.innerHTML =
+        '<div class="card-top"><span class="c-type"></span><span class="c-title"></span>' +
+        '<span class="c-elapsed" data-started=""></span></div>' +
+        '<div class="c-meta"><span class="b b-model"></span><span class="b b-prov"></span>' +
+        '<span class="b b-agent"></span><span class="c-run-tok"></span></div>' +
+        '<div class="c-steps"></div>' +
+        '<div class="c-stepinfo"><span class="no"></span><span class="ag"></span><span class="sm"></span></div>' +
+        '<div class="c-live"><span class="c-live-tag"></span><pre class="c-live-text"></pre></div>' +
+        '<div class="c-pct"></div>';
+      wrap.appendChild(el);
+      cardEls.set(c.task_id, el);
+    }
+    el.querySelector(".c-type").textContent = c.type_name || c.type || t("任务");
+    el.querySelector(".c-title").textContent = c.title || t("（未命名）");
+    const el2 = el.querySelector(".c-elapsed");
+    el2.dataset.started = c.started_at || "";
+    el2.textContent = fmtDur((Date.now() - parseTs(c.started_at)) / 1000);
+
+    // 模型 / 厂商 / 执行智能体徽章 + 本次消耗
+    const cur0 = c.current || {};
+    const bModel = el.querySelector(".b-model");
+    bModel.textContent = cur0.model || t("模型待定");
+    bModel.classList.toggle("dim", !cur0.model);
+    const bProv = el.querySelector(".b-prov");
+    bProv.textContent = cur0.provider || "";
+    bProv.classList.toggle("hidden", !cur0.provider);
+    const bAgent = el.querySelector(".b-agent");
+    bAgent.textContent = cur0.agent || "";
+    bAgent.classList.toggle("hidden", !cur0.agent);
+    const rt = el.querySelector(".c-run-tok");
+    const cost = Number(c.run_cost_usd) || 0;
+    rt.textContent = (c.run_tokens ? fmtTokens(c.run_tokens) + " tok" : "") +
+      (cost > 0 ? (c.run_tokens ? " · " : "") + "$" + cost.toFixed(cost >= 1 ? 2 : 3) : "");
+    rt.classList.toggle("hidden", !c.run_tokens && !(cost > 0));
+
+    // 分段进度条
+    const seg = el.querySelector(".c-steps");
+    const total = Math.max(c.steps_total || 0, 1);
+    if (seg.childElementCount !== total) {
+      seg.innerHTML = "";
+      for (let i = 0; i < total; i++) seg.appendChild(document.createElement("i"));
+    }
+    [...seg.children].forEach((b, i) => {
+      b.className = i < (c.steps_done || 0) ? "d" : (i === (c.steps_done || 0) ? "r" : "");
+    });
+
+    const cur = c.current || {};
+    el.querySelector(".no").textContent = cur.n ? ("#" + cur.n) : "—";
+    el.querySelector(".ag").textContent = cur.agent || "";
+    el.querySelector(".sm").textContent = cur.summary || t("执行中");
+
+    // 实时流窗口：思考/输出尾部多行（live_label 是 code，前端翻译）
+    const live = el.querySelector(".c-live");
+    const lt = cur.live_text || "";
+    live.classList.toggle("hidden", !lt);
+    if (lt) {
+      const tagMap = { output: t("输出"), thinking: t("思考") };
+      el.querySelector(".c-live-tag").textContent = tagMap[cur.live_label] || t("实时");
+      el.querySelector(".c-live-text").textContent = lt;
+    }
+
+    // 有预估时长则给完成度百分比
+    const pct = el.querySelector(".c-pct");
+    if (c.estimate_s && parseTs(c.started_at)) {
+      const p = Math.min(99, Math.round(((Date.now() - parseTs(c.started_at)) / 1000) / c.estimate_s * 100));
+      pct.textContent = t("预估 {0} · 进度≈{1}%", fmtDur(c.estimate_s), p);
+    } else {
+      pct.textContent = "";
+    }
+  }
+  for (const [tid, el] of cardEls) {
+    if (!seen.has(tid)) { el.remove(); cardEls.delete(tid); }
+  }
+
+  // 排队条
+  const qr = $("#queue-row");
+  qr.classList.toggle("hidden", !d.queued.length);
+  $("#queue-chips").innerHTML = d.queued.map((q) =>
+    '<span class="chip" title="' + esc(q.title) + '">' + esc(q.title) + "</span>").join("");
+}
+
+function renderTrend(trend) {
+  const box = $("#trend");
+  const max = Math.max(1, ...trend.map((t) => t.tokens || 0));
+  box.innerHTML = trend.map((t) => {
+    const h = Math.round((t.tokens || 0) / max * 100);
+    const label = String(t.day || "").slice(5);   // MM-DD
+    return '<div class="bar' + (t.tokens ? "" : " zero") + '" title="' + esc(t.day) + " · " +
+      fmtTokens(t.tokens) + '"><i style="height:' + Math.max(h, 3) + '%"></i><b>' + esc(label) + "</b></div>";
+  }).join("");
+}
+
+function renderModels(models) {
+  const box = $("#models");
+  if (!models.length) { box.innerHTML = '<div class="empty">' + t("暂无调用记录") + "</div>"; return; }
+  const max = Math.max(1, ...models.map((m) => m.tokens || 0));
+  box.innerHTML = models.map((m) =>
+    '<div class="model-row"><span class="nm" title="' + esc(m.model) + '">' + esc(m.model) + "</span>" +
+    '<span class="tk"><i style="width:' + Math.max(4, Math.round((m.tokens || 0) / max * 100)) + '%"></i></span>' +
+    '<span class="vl">' + fmtTokens(m.tokens) + "</span></div>").join("");
+}
+
+function renderRecent(recent) {
+  const box = $("#recent");
+  if (!recent.length) { box.innerHTML = '<div class="empty">' + t("还没有已完成的运行") + "</div>"; return; }
+  const dot = { done: "done", failed: "failed", cancelled: "cancelled" };
+  box.innerHTML = recent.map((r) => {
+    const cls = dot[r.status] || "cancelled";
+    const t = String(r.ended_at || "").slice(11, 16);
+    return '<div class="r-row"><span class="r-dot ' + cls + '"></span>' +
+      '<span class="r-t' + (r.status === "failed" ? " failed" : "") + '" title="' +
+      esc(r.title + (r.error ? " · " + r.error : "")) + '">' + esc(r.title) + "</span>" +
+      '<span class="r-d">' + (r.duration_s != null ? fmtDur(r.duration_s) : "—") + " · " + esc(t) + "</span></div>";
+  }).join("");
+}
+
+/* ---------------------------------------------------------------- 时钟与耗时每秒跳 */
+setInterval(() => {
+  const n = new Date();
+  const p = (x) => String(x).padStart(2, "0");
+  $("#hd-clock").textContent = p(n.getHours()) + ":" + p(n.getMinutes()) + ":" + p(n.getSeconds());
+  document.querySelectorAll(".c-elapsed[data-started]").forEach((el) => {
+    const st = parseTs(el.dataset.started);
+    if (st) el.textContent = fmtDur((Date.now() - st) / 1000);
+  });
+}, 1000);
+
+poll();
+setInterval(poll, POLL_MS);

package/app/ui/i18n.js

@@ -266,6 +266,7 @@
     "单击：卡内展开 diff；双击：弹窗查看": "Click: expand diff here; double-click: open in popup",
     "双击弹窗查看该文件的变更": "Double-click to view this file's changes in a popup",
     "复制": "Copy",
+    "复制日志全文": "Copy full log",
     "已复制": "Copied",
     "已载入原文，可修改后发送": "Original text loaded — edit and send",
     "选择文件夹": "Choose folder",
@@ -2521,6 +2522,29 @@
     "【": "[",
     "】": "]",
     "（已发 ": " (sent ",
+    // —— 任务驾驶舱大屏（board.html）——
+    "运行中任务": "Running tasks",
+    "近 7 日 tokens": "Tokens · last 7 days",
+    "近 7 日模型 TOP5": "Top models · 7 days",
+    "最近动态": "Recent activity",
+    "排队等待": "Queued",
+    "今日完成": "Done today",
+    "今日失败": "Failed today",
+    "今日 tokens": "Tokens today",
+    "今日成本": "Cost today",
+    "思考": "Thinking",
+    "连接断开": "Connection lost",
+    "进入大屏": "Enter board",
+    "模型待定": "Model pending",
+    "异常": "down",
+    "令牌不正确或已变更": "Token incorrect or changed",
+    "执行中": "In progress",
+    "（未命名）": "(untitled)",
+    "预估 {0} · 进度≈{1}%": "Est. {0} · ≈{1}%",
+    "蜂巢空闲 · 等蜂回巢": "Hive idle · waiting for bees",
+    "没有正在运行的任务，新任务在主界面创建后会实时出现在这里": "No running tasks — new ones created in the main UI appear here in real time.",
+    "还没有已完成的运行": "No finished runs yet",
+    "暂无调用记录": "No calls yet",
     "未命名": "Untitled",
   };