feat(ui): GPU + Live Agents dashboard, dark theme
- drop quota / repos / headless-task panels; page is now GPU board + Live Agents (frontend only, headless task API still available) - Live Agents: grouped by tmux session, launch form (engine/session/cwd/ window name), open-terminal link per agent - compact GPU board: multi-column host cards, fixed 4-per-row GPU thumbs with status glow, expanded host spans full row - permanent dark theme tuned for a monitoring dashboard; terminal-styled session group headers; refresh now polls three light endpoints instead of the full dashboard aggregate Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Local Kanban</title>
|
||||
<link rel="stylesheet" href="/styles.css?v=20260514">
|
||||
<link rel="stylesheet" href="/styles.css?v=20260728d">
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-glow" aria-hidden="true"></div>
|
||||
@@ -14,7 +14,7 @@
|
||||
<div class="brand-mark" aria-hidden="true">LK</div>
|
||||
<div>
|
||||
<h1>Local Kanban</h1>
|
||||
<p id="subtitle" class="muted">GPU · 额度 · 项目 · Agent</p>
|
||||
<p id="subtitle" class="muted">GPU · Live Agents</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-actions">
|
||||
@@ -27,92 +27,61 @@
|
||||
|
||||
<div id="errorBanner" class="error-banner" hidden></div>
|
||||
|
||||
<section class="grid dashboard-grid">
|
||||
<section class="panel span-2">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title">
|
||||
<h2>GPU</h2>
|
||||
<span id="gpuSummary" class="badge"></span>
|
||||
</div>
|
||||
<section class="panel">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title">
|
||||
<h2>GPU</h2>
|
||||
<span id="gpuSummary" class="badge"></span>
|
||||
</div>
|
||||
<div class="gpu-hosts-row">
|
||||
<div id="gpuHostsChips" class="gpu-hosts-chips"></div>
|
||||
<button id="hostAddTrigger" type="button" class="host-add-button" title="添加机器">
|
||||
<span aria-hidden="true">+</span>
|
||||
<span>添加</span>
|
||||
</button>
|
||||
<form id="hostAddForm" class="host-add-form" hidden>
|
||||
<input id="hostAddInput" type="text" placeholder="主机名" autocomplete="off" spellcheck="false">
|
||||
<button type="submit" class="primary-button small">添加</button>
|
||||
<button id="hostAddCancel" type="button" class="link-button">取消</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="gpuBoard" class="gpu-board"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title">
|
||||
<h2>AI 额度</h2>
|
||||
<span id="quotaSummary" class="badge"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="quotaBoard" class="quota-board"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="gpu-hosts-row">
|
||||
<div id="gpuHostsChips" class="gpu-hosts-chips"></div>
|
||||
<button id="hostAddTrigger" type="button" class="host-add-button" title="添加机器">
|
||||
<span aria-hidden="true">+</span>
|
||||
<span>添加</span>
|
||||
</button>
|
||||
<form id="hostAddForm" class="host-add-form" hidden>
|
||||
<input id="hostAddInput" type="text" placeholder="主机名" autocomplete="off" spellcheck="false">
|
||||
<button type="submit" class="primary-button small">添加</button>
|
||||
<button id="hostAddCancel" type="button" class="link-button">取消</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="gpuBoard" class="gpu-board"></div>
|
||||
</section>
|
||||
|
||||
<section class="grid work-grid">
|
||||
<section class="panel project-panel">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title">
|
||||
<h2>项目</h2>
|
||||
<span id="repoSummary" class="badge"></span>
|
||||
</div>
|
||||
<section class="panel live-agent-panel">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title">
|
||||
<h2>Live Agents</h2>
|
||||
<span id="liveAgentSummary" class="badge"></span>
|
||||
</div>
|
||||
<div id="repoBoard" class="repo-board"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel agent-panel">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title">
|
||||
<h2>Agent</h2>
|
||||
<span id="taskSummary" class="badge"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="agentContext" class="agent-context">
|
||||
<span class="agent-context-label">当前项目</span>
|
||||
<span id="agentContextRepo" class="agent-context-repo">未选择</span>
|
||||
<span id="agentContextBranch" class="chip" hidden></span>
|
||||
</div>
|
||||
<form id="taskForm" class="task-form">
|
||||
<div class="task-controls">
|
||||
<label class="select-field">
|
||||
<span class="field-label">Branch</span>
|
||||
<select id="branchSelect" required></select>
|
||||
</label>
|
||||
<label class="select-field">
|
||||
<span class="field-label">AI 配置</span>
|
||||
<select id="profileSelect" required></select>
|
||||
</label>
|
||||
<label class="select-field">
|
||||
<span class="field-label">历史 Session</span>
|
||||
<select id="resumeTaskSelect"></select>
|
||||
</label>
|
||||
</div>
|
||||
<label class="prompt-field">
|
||||
<span class="field-label">命令</span>
|
||||
<textarea id="promptInput" rows="5" required placeholder="输入要交给 agent 的任务"></textarea>
|
||||
</label>
|
||||
<div class="form-actions">
|
||||
<button id="startTaskButton" type="submit" class="primary-button">启动任务</button>
|
||||
<button id="resumeTaskButton" type="button" class="secondary-button">继续 Session</button>
|
||||
</div>
|
||||
</form>
|
||||
<div id="taskBoard" class="task-board"></div>
|
||||
</section>
|
||||
</div>
|
||||
<form id="liveAgentForm" class="live-agent-form">
|
||||
<label class="select-field">
|
||||
<span class="field-label">Engine</span>
|
||||
<select id="liveAgentEngine">
|
||||
<option value="claude">Claude</option>
|
||||
<option value="codex">Codex</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="select-field">
|
||||
<span class="field-label">Session</span>
|
||||
<input id="liveAgentSession" type="text" placeholder="tmux session 名" autocomplete="off" spellcheck="false" required>
|
||||
</label>
|
||||
<label class="select-field live-agent-cwd">
|
||||
<span class="field-label">工作目录</span>
|
||||
<input id="liveAgentCwd" type="text" placeholder="/home/gahow/..." autocomplete="off" spellcheck="false" required>
|
||||
</label>
|
||||
<label class="select-field">
|
||||
<span class="field-label">Window 名 <span class="muted">(可选)</span></span>
|
||||
<input id="liveAgentWindowName" type="text" placeholder="默认 engine:目录名" autocomplete="off" spellcheck="false">
|
||||
</label>
|
||||
<button id="liveAgentLaunchButton" type="submit" class="primary-button">启动 Agent</button>
|
||||
</form>
|
||||
<div id="liveAgentBoard" class="live-agent-board"></div>
|
||||
</section>
|
||||
</main>
|
||||
<div id="toastHost" class="toast-host" aria-live="polite"></div>
|
||||
<script type="module" src="/app.js?v=20260514"></script>
|
||||
<script type="module" src="/app.js?v=20260728d"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user