feat: initialize unidesk platform

src/components/frontend/public/app.js

@@ -0,0 +1,153 @@
+const rawCfg = window.UNIDESK_CONFIG || { coreApiUrl: "http://127.0.0.1:18080", corePort: "18080" };
+const cfg = { ...rawCfg, coreApiUrl: resolveCoreApiUrl(rawCfg) };
+const state = { overview: null, nodes: [], events: [], tasks: [], activeModule: "ops", activeTab: "overview", lastRefresh: null };
+
+const $ = (id) => document.getElementById(id);
+const fmtTime = (value) => value ? new Date(value).toLocaleTimeString() : "--";
+const compactJson = (value) => JSON.stringify(value ?? {}, null, 0);
+
+function resolveCoreApiUrl(config) {
+  const api = new URL(config.coreApiUrl, window.location.href);
+  const pageHost = window.location.hostname;
+  const apiIsLoopback = api.hostname === "127.0.0.1" || api.hostname === "localhost";
+  const pageIsLoopback = pageHost === "127.0.0.1" || pageHost === "localhost";
+  if (apiIsLoopback && !pageIsLoopback) {
+    api.hostname = pageHost;
+    api.port = String(config.corePort || api.port || "18080");
+  }
+  return api.origin;
+}
+
+function setConnection(ok, text) {
+  const dot = $("conn-dot");
+  dot.className = `dot ${ok ? "ok" : "fail"}`;
+  $("conn-text").textContent = text;
+}
+
+async function api(path, options) {
+  const res = await fetch(`${cfg.coreApiUrl}${path}`, options);
+  const json = await res.json();
+  if (!res.ok || json.ok === false) throw new Error(json.error?.message || json.error || `HTTP ${res.status}`);
+  return json;
+}
+
+function metric(label, value, hint) {
+  return `<article class="metric"><div class="label">${label}</div><div class="value">${value}</div><div class="hint">${hint}</div></article>`;
+}
+
+function renderMetrics() {
+  const o = state.overview || {};
+  $("metric-grid").innerHTML = [
+    metric("DB Ready", o.dbReady ? "YES" : "NO", "PostgreSQL central state"),
+    metric("Online Nodes", o.onlineNodeCount ?? 0, `${o.nodeCount ?? 0} registered`),
+    metric("Active Sockets", o.activeSocketCount ?? 0, "Provider WebSocket"),
+    metric("Pending Tasks", o.pendingTaskCount ?? 0, "queued / running"),
+  ].join("");
+  $("refresh-age").textContent = state.lastRefresh ? `刷新 ${fmtTime(state.lastRefresh)}` : "--";
+}
+
+function renderNodes() {
+  $("node-count").textContent = `${state.nodes.length} nodes`;
+  $("nodes-body").innerHTML = state.nodes.map((node) => `
+    <tr>
+      <td><span class="badge ${node.status}">${node.status}</span></td>
+      <td><div>${node.name}</div><div class="code">${node.providerId}</div></td>
+      <td class="code">${compactJson(node.labels)}</td>
+      <td>${fmtTime(node.lastHeartbeat)}</td>
+    </tr>
+  `).join("") || `<tr><td colspan="4">暂无 Provider 节点</td></tr>`;
+  if (state.nodes[0] && !$("dispatch-provider").value) $("dispatch-provider").value = state.nodes[0].providerId;
+}
+
+function renderEvents() {
+  $("events-body").innerHTML = state.events.map((event) => `
+    <tr>
+      <td class="code">${event.id}</td>
+      <td>${event.type}</td>
+      <td class="code">${event.source}</td>
+      <td class="code">${compactJson(event.payload)}</td>
+      <td>${fmtTime(event.createdAt)}</td>
+    </tr>
+  `).join("") || `<tr><td colspan="5">暂无事件</td></tr>`;
+}
+
+function render() {
+  renderMetrics();
+  renderNodes();
+  renderEvents();
+  document.querySelectorAll("[data-panel]").forEach((panel) => {
+    const key = panel.getAttribute("data-panel");
+    panel.style.display = state.activeTab === "overview" ? "" : key === state.activeTab ? "" : key === "overview" && state.activeModule === "ops" ? "" : "none";
+  });
+}
+
+async function refresh() {
+  try {
+    const [overview, nodes, events] = await Promise.all([
+      api("/api/overview"),
+      api("/api/nodes"),
+      api("/api/events?limit=100"),
+    ]);
+    state.overview = overview;
+    state.nodes = nodes.nodes || [];
+    state.events = events.events || [];
+    state.lastRefresh = new Date();
+    setConnection(true, "核心在线");
+    render();
+  } catch (error) {
+    setConnection(false, error.message);
+  }
+}
+
+function bindNav() {
+  document.querySelectorAll(".module").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      document.querySelectorAll(".module").forEach((b) => b.classList.remove("active"));
+      btn.classList.add("active");
+      state.activeModule = btn.dataset.module;
+      if (state.activeModule === "nodes") setTab("nodes");
+      if (state.activeModule === "tasks") setTab("dispatch");
+      if (state.activeModule === "config") setTab("events");
+      if (state.activeModule === "ops") setTab("overview");
+    });
+  });
+  document.querySelectorAll(".tab").forEach((btn) => btn.addEventListener("click", () => setTab(btn.dataset.tab)));
+}
+
+function setTab(tab) {
+  state.activeTab = tab;
+  document.querySelectorAll(".tab").forEach((b) => b.classList.toggle("active", b.dataset.tab === tab));
+  render();
+}
+
+function bindDispatch() {
+  $("dispatch-form").addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const providerId = $("dispatch-provider").value.trim();
+    const command = $("dispatch-command").value;
+    const payloadText = $("dispatch-payload").value.trim();
+    try {
+      const payload = payloadText ? JSON.parse(payloadText) : {};
+      const result = await api("/api/dispatch", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ providerId, command, payload }),
+      });
+      $("dispatch-result").textContent = JSON.stringify(result, null, 2);
+      await refresh();
+    } catch (error) {
+      $("dispatch-result").textContent = `ERROR: ${error.message}`;
+    }
+  });
+}
+
+function tick() {
+  $("clock").textContent = new Date().toLocaleTimeString();
+}
+
+bindNav();
+bindDispatch();
+tick();
+setInterval(tick, 1000);
+refresh();
+setInterval(refresh, 5000);

src/components/frontend/public/index.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>UniDesk Control Plane</title>
+    <link rel="stylesheet" href="/style.css" />
+    <script>window.UNIDESK_CONFIG = __UNIDESK_CONFIG__;</script>
+  </head>
+  <body>
+    <div class="shell">
+      <aside class="rail" aria-label="Main modules">
+        <div class="brand">
+          <span class="brand-mark">UD</span>
+          <span class="brand-text">UniDesk</span>
+        </div>
+        <button class="module active" data-module="ops">运行总览</button>
+        <button class="module" data-module="nodes">资源节点</button>
+        <button class="module" data-module="tasks">任务调度</button>
+        <button class="module" data-module="config">系统配置</button>
+      </aside>
+      <main class="workspace">
+        <header class="topbar">
+          <div>
+            <p class="eyebrow">Distributed Work Platform</p>
+            <h1>控制平面</h1>
+          </div>
+          <div class="status-strip">
+            <span id="conn-dot" class="dot warn"></span>
+            <span id="conn-text">连接中</span>
+            <span id="clock">--:--:--</span>
+          </div>
+        </header>
+        <nav class="tabs" aria-label="Sub modules">
+          <button class="tab active" data-tab="overview">Overview</button>
+          <button class="tab" data-tab="nodes">Live Nodes</button>
+          <button class="tab" data-tab="events">Event Log</button>
+          <button class="tab" data-tab="dispatch">Dispatch</button>
+        </nav>
+        <section class="content-grid">
+          <section class="panel metrics-panel" data-panel="overview">
+            <div class="panel-head"><h2>核心指标</h2><span id="refresh-age">--</span></div>
+            <div class="metric-grid" id="metric-grid"></div>
+          </section>
+          <section class="panel table-panel" data-panel="nodes">
+            <div class="panel-head"><h2>Provider 节点</h2><span id="node-count">0</span></div>
+            <div class="table-wrap"><table><thead><tr><th>状态</th><th>Provider</th><th>标签</th><th>最后心跳</th></tr></thead><tbody id="nodes-body"></tbody></table></div>
+          </section>
+          <section class="panel table-panel" data-panel="events">
+            <div class="panel-head"><h2>事件流</h2><span>最近 100 条</span></div>
+            <div class="table-wrap"><table><thead><tr><th>ID</th><th>类型</th><th>来源</th><th>载荷</th><th>时间</th></tr></thead><tbody id="events-body"></tbody></table></div>
+          </section>
+          <section class="panel dispatch-panel" data-panel="dispatch">
+            <div class="panel-head"><h2>调度试运行</h2><span>真实 WebSocket 下发</span></div>
+            <form id="dispatch-form" class="dispatch-form">
+              <label>Provider ID<input id="dispatch-provider" placeholder="main-server" /></label>
+              <label>Command<select id="dispatch-command"><option value="docker.ps">docker.ps</option><option value="echo">echo</option></select></label>
+              <label class="wide">Payload JSON<textarea id="dispatch-payload">{"source":"frontend"}</textarea></label>
+              <button type="submit">下发任务</button>
+            </form>
+            <pre id="dispatch-result" class="result-block">等待操作</pre>
+          </section>
+        </section>
+      </main>
+    </div>
+    <script src="/app.js" defer></script>
+  </body>
+</html>

src/components/frontend/public/style.css

@@ -0,0 +1,329 @@
+:root {
+  --bg: #111820;
+  --panel: #17212b;
+  --panel-2: #1d2a35;
+  --line: #30404d;
+  --line-soft: #24323e;
+  --text: #dce7ec;
+  --muted: #8496a3;
+  --accent: #e2a329;
+  --accent-2: #4bb7aa;
+  --danger: #d86b55;
+  --ok: #6fbe73;
+  --rail: #0c1218;
+  --shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
+  font-family: "DIN Condensed", "Aptos Narrow", "Liberation Sans Narrow", "Noto Sans", sans-serif;
+}
+
+* { box-sizing: border-box; }
+html, body { min-height: 100%; }
+body {
+  margin: 0;
+  color: var(--text);
+  background:
+    linear-gradient(135deg, rgba(226, 163, 41, 0.08), transparent 28%),
+    linear-gradient(315deg, rgba(75, 183, 170, 0.08), transparent 30%),
+    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 36px),
+    var(--bg);
+  font-size: 13px;
+  letter-spacing: 0.01em;
+}
+
+button, input, select, textarea {
+  font: inherit;
+}
+
+.shell {
+  display: grid;
+  grid-template-columns: 176px minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.rail {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  padding: 12px 10px;
+  border-right: 1px solid var(--line);
+  background: linear-gradient(180deg, #0a1015, var(--rail));
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  height: 40px;
+  padding: 0 5px 12px;
+  border-bottom: 1px solid var(--line-soft);
+  margin-bottom: 10px;
+}
+
+.brand-mark {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 26px;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.brand-text {
+  font-size: 15px;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+}
+
+.module, .tab, .dispatch-form button {
+  border: 1px solid transparent;
+  color: var(--muted);
+  background: transparent;
+  cursor: pointer;
+}
+
+.module {
+  display: block;
+  width: 100%;
+  padding: 8px 10px;
+  margin: 4px 0;
+  text-align: left;
+  border-left: 3px solid transparent;
+}
+
+.module:hover, .module.active {
+  color: var(--text);
+  background: rgba(255,255,255,0.045);
+  border-left-color: var(--accent);
+}
+
+.workspace {
+  min-width: 0;
+  padding: 12px 14px 16px;
+}
+
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  min-height: 54px;
+  padding: 0 0 10px;
+  border-bottom: 1px solid var(--line);
+}
+
+.eyebrow {
+  margin: 0 0 2px;
+  color: var(--accent);
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+}
+
+h1, h2 { margin: 0; font-weight: 650; }
+h1 { font-size: 22px; letter-spacing: 0.08em; }
+h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.09em; }
+
+.status-strip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 9px;
+  border: 1px solid var(--line);
+  background: rgba(0,0,0,0.14);
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--muted);
+  box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
+}
+.dot.ok { background: var(--ok); }
+.dot.warn { background: var(--accent); }
+.dot.fail { background: var(--danger); }
+
+.tabs {
+  display: flex;
+  gap: 6px;
+  padding: 10px 0;
+  overflow-x: auto;
+}
+
+.tab {
+  padding: 7px 12px;
+  border-color: var(--line);
+  background: rgba(12, 18, 24, 0.58);
+  color: var(--muted);
+  min-width: 108px;
+}
+
+.tab.active, .tab:hover {
+  color: var(--text);
+  border-color: var(--accent-2);
+  background: rgba(75, 183, 170, 0.12);
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: minmax(320px, 0.9fr) minmax(520px, 1.6fr);
+  gap: 10px;
+  align-items: stretch;
+}
+
+.panel {
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)), var(--panel);
+  box-shadow: var(--shadow);
+  min-width: 0;
+}
+
+.panel-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  height: 38px;
+  padding: 0 10px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+}
+
+.metrics-panel { grid-column: 1 / 2; }
+.table-panel[data-panel="nodes"] { grid-column: 2 / 3; }
+.table-panel[data-panel="events"], .dispatch-panel { grid-column: 1 / -1; }
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  padding: 10px;
+}
+
+.metric {
+  padding: 10px;
+  min-height: 74px;
+  border: 1px solid var(--line-soft);
+  background: var(--panel-2);
+}
+
+.metric .label {
+  color: var(--muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+.metric .value {
+  margin-top: 8px;
+  color: var(--text);
+  font-size: 24px;
+  font-weight: 720;
+}
+.metric .hint {
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.table-wrap { overflow: auto; max-height: 46vh; }
+table { width: 100%; border-collapse: collapse; min-width: 680px; }
+th, td {
+  padding: 7px 9px;
+  border-bottom: 1px solid var(--line-soft);
+  text-align: left;
+  vertical-align: top;
+}
+th {
+  position: sticky;
+  top: 0;
+  background: #121b24;
+  color: var(--accent);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.11em;
+  z-index: 1;
+}
+td { color: var(--text); }
+.code, code {
+  font-family: "Cascadia Mono", "IBM Plex Mono", "Liberation Mono", monospace;
+  font-size: 12px;
+  color: #bfd7dc;
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 7px;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  background: rgba(0,0,0,0.18);
+}
+.badge.online { color: var(--ok); border-color: rgba(111, 190, 115, 0.45); }
+.badge.offline { color: var(--danger); border-color: rgba(216, 107, 85, 0.45); }
+
+.dispatch-panel { min-height: 230px; }
+.dispatch-form {
+  display: grid;
+  grid-template-columns: 1fr 180px auto;
+  gap: 8px;
+  padding: 10px;
+  align-items: end;
+}
+.dispatch-form label {
+  display: grid;
+  gap: 4px;
+  color: var(--muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+.dispatch-form .wide { grid-column: 1 / -1; }
+input, select, textarea {
+  width: 100%;
+  border: 1px solid var(--line);
+  color: var(--text);
+  background: #0d151c;
+  padding: 7px 8px;
+  outline: none;
+}
+textarea { min-height: 76px; resize: vertical; font-family: "Cascadia Mono", "IBM Plex Mono", monospace; }
+.dispatch-form button {
+  height: 33px;
+  padding: 0 14px;
+  border-color: var(--accent);
+  color: #130f08;
+  background: var(--accent);
+  font-weight: 700;
+}
+.result-block {
+  margin: 0 10px 10px;
+  padding: 8px;
+  max-height: 170px;
+  overflow: auto;
+  border: 1px solid var(--line-soft);
+  background: #0d151c;
+  color: #bfd7dc;
+}
+
+@media (max-width: 980px) {
+  .shell { grid-template-columns: 1fr; }
+  .rail {
+    position: static;
+    height: auto;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    overflow-x: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+  .brand { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; flex: 0 0 auto; }
+  .module { width: auto; white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
+  .module.active, .module:hover { border-bottom-color: var(--accent); }
+  .content-grid { grid-template-columns: 1fr; }
+  .metrics-panel, .table-panel[data-panel="nodes"], .table-panel[data-panel="events"], .dispatch-panel { grid-column: 1; }
+  .dispatch-form { grid-template-columns: 1fr; }
+}