75153b7fe9
Some checks are pending
build-and-push / image (push) Waiting to run
- All 14 panes rewritten with rich controls: KPIs, sparklines, meter gauges, presets, history sidebars, search/filter, bulk actions, schema-driven forms, copy buttons, auto-refresh. - Backend /api/system enriched with cpu_count, rss_bytes, mem_total, mem_used_pct, loadavg[], user/system CPU times, max_rss_kb. - CSS additions: .meter/.gauge, .seg, .chip(s), .spark, .slider, .dl, .link-card, details.card-d plus utility classes. - ui.js helpers: copyToClipboard, withCopy/bindCopyButtons, sparkline, meterRow, fmtBytes/fmtNum, historyStore, inputFromSchema, collectSchemaForm. - Files pane added; iCloud duplicate '*2' files removed.
159 lines
9.3 KiB
HTML
159 lines
9.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>CxWebApp · Control Center</title>
|
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
|
|
<link rel="stylesheet" href="/static/css/tokens.css" />
|
|
<link rel="stylesheet" href="/static/css/app.css" />
|
|
<script>
|
|
try {
|
|
const t = localStorage.getItem('cx_theme');
|
|
if (t === 'dark' || (!t && matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
} catch (_) {}
|
|
</script>
|
|
</head>
|
|
<body data-mcp-base="http://127.0.0.1:8082">
|
|
<div class="app">
|
|
<aside class="sidebar" aria-label="Main navigation">
|
|
<div class="brand">
|
|
<div class="mark">Cx</div>
|
|
<div>
|
|
<div class="name">CxWebApp</div>
|
|
<div class="ver" id="brand-ver">loading…</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-group">
|
|
<div class="label">Platform</div>
|
|
<button class="nav-item" data-tab="dashboard">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
|
<span>Dashboard</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="agent">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
|
|
<span>Agent</span>
|
|
<span class="pill" id="nav-agent-pill">·</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="inbox">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5h13l3 7v6a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2v-6Z"/></svg>
|
|
<span>Inbox</span>
|
|
<span class="pill" id="nav-inbox-pill"></span>
|
|
</button>
|
|
<button class="nav-item" data-tab="tools">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a4 4 0 1 0 5 5L21 13l-2 2-8-8 2-2 1.7 1.3Z"/><path d="M3 21l6-6"/></svg>
|
|
<span>Tools</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="items">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/></svg>
|
|
<span>Items</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="nav-group">
|
|
<div class="label">Services</div>
|
|
<button class="nav-item" data-tab="diffusion">
|
|
<svg class="ic" 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"/><circle cx="12" cy="12" r="8"/></svg>
|
|
<span>Diffusion</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="demand">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 17 9 11 13 15 21 7"/><polyline points="14 7 21 7 21 14"/></svg>
|
|
<span>Demand</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="lang">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/></svg>
|
|
<span>Lang</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="slack">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9V5a2 2 0 1 1 4 0v4"/><path d="M22 14h-4a2 2 0 1 1 0-4h4"/><path d="M10 15v4a2 2 0 1 1-4 0v-4"/><path d="M2 10h4a2 2 0 1 1 0 4H2"/></svg>
|
|
<span>Slack</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="mac">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="12" rx="2"/><line x1="8" y1="22" x2="16" y2="22"/><line x1="12" y1="18" x2="12" y2="22"/></svg>
|
|
<span>macOS</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="files">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>
|
|
<span>Files · Platform</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="nav-group">
|
|
<div class="label">Develop</div>
|
|
<button class="nav-item" data-tab="api">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
|
<span>API Explorer</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="websocket">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12a10 10 0 0 1 20 0"/><path d="M5 12a7 7 0 0 1 14 0"/><circle cx="12" cy="12" r="2"/></svg>
|
|
<span>WebSocket</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="system">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
<span>System</span>
|
|
</button>
|
|
<button class="nav-item" data-tab="about">
|
|
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
|
<span>About</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<span id="footer-build">build —</span>
|
|
<span><a href="/api/health" target="_blank" rel="noopener">health</a></span>
|
|
</div>
|
|
</aside>
|
|
|
|
<header class="header">
|
|
<div class="crumb">
|
|
<span class="muted">CxWebApp</span>
|
|
<span class="sep">/</span>
|
|
<span id="crumb-tab">Dashboard</span>
|
|
</div>
|
|
<div class="grow"></div>
|
|
<button class="cmd-trigger" id="cmd-trigger" title="Open command palette (⌘K)">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="20" y1="20" x2="17" y2="17"/></svg>
|
|
<span>Search or jump…</span>
|
|
<kbd>⌘K</kbd>
|
|
</button>
|
|
<span class="pill ok" id="health-pill" title="Backend health"><span class="dot"></span><span id="health-text">checking</span></span>
|
|
<button class="icon-btn" id="theme-toggle" title="Toggle theme" aria-label="Toggle theme">
|
|
<svg 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 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
|
|
</button>
|
|
</header>
|
|
|
|
<main class="main" id="main">
|
|
<section class="pane" data-pane="dashboard"></section>
|
|
<section class="pane" data-pane="agent"></section>
|
|
<section class="pane" data-pane="inbox"></section>
|
|
<section class="pane" data-pane="tools"></section>
|
|
<section class="pane" data-pane="items"></section>
|
|
<section class="pane" data-pane="diffusion"></section>
|
|
<section class="pane" data-pane="demand"></section>
|
|
<section class="pane" data-pane="lang"></section>
|
|
<section class="pane" data-pane="slack"></section>
|
|
<section class="pane" data-pane="mac"></section>
|
|
<section class="pane" data-pane="files"></section>
|
|
<section class="pane" data-pane="api"></section>
|
|
<section class="pane" data-pane="websocket"></section>
|
|
<section class="pane" data-pane="system"></section>
|
|
<section class="pane" data-pane="about"></section>
|
|
</main>
|
|
</div>
|
|
|
|
<div class="palette-bg" id="palette-bg" aria-hidden="true">
|
|
<div class="palette" role="dialog" aria-label="Command palette">
|
|
<input id="palette-input" type="text" placeholder="Jump to a view, run a tool, or search the API…" autocomplete="off" />
|
|
<ul id="palette-list"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toasts" id="toasts" aria-live="polite" aria-atomic="true"></div>
|
|
|
|
<script type="module" src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|