feat: add frontend dashboard, login page and portal entry

Public directory contains the Kanban SPA with dashboard UI, login page, and styles. Portal directory provides a standalone service entry page with CSS styling.
2026-05-15 11:13:59 +08:00
parent 673a5f9f62
commit 74279b9d35
7 changed files with 2230 additions and 0 deletions
--- a/portal/index.html
+++ b/portal/index.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>gahow-pc services</title>
+    <link rel="stylesheet" href="/portal.css">
+  </head>
+  <body>
+    <main class="shell">
+      <header class="topbar">
+        <div>
+          <h1>gahow-pc</h1>
+          <p>Local services</p>
+        </div>
+      </header>
+
+      <section class="service-section">
+        <div class="section-heading">
+          <h2>Services</h2>
+        </div>
+        <div class="service-grid">
+        <a class="service-card primary" href="https://gahow-pc.ipads-lab.se.sjtu.edu.cn:3443/">
+          <span class="service-icon">Gi</span>
+          <span class="service-topline">Repository</span>
+          <span class="service-name">Gitea</span>
+          <span class="service-desc">本地 Git 仓库与项目管理</span>
+          <span class="service-port">https :3443</span>
+        </a>
+        <a class="service-card primary" href="https://gahow-pc.ipads-lab.se.sjtu.edu.cn:8443/">
+          <span class="service-icon">Kb</span>
+          <span class="service-topline">Ops</span>
+          <span class="service-name">Kanban</span>
+          <span class="service-desc">GPU、额度、项目与 agent 任务</span>
+          <span class="service-port">https :8443</span>
+        </a>
+        <a class="service-card primary" href="https://gahow-pc.ipads-lab.se.sjtu.edu.cn:5443/">
+          <span class="service-icon">St</span>
+          <span class="service-topline">Finance</span>
+          <span class="service-name">Stock Agent</span>
+          <span class="service-desc">个人股票分析与日报</span>
+          <span class="service-port">https :5443</span>
+        </a>
+        </div>
+      </section>
+
+      <details class="api-section">
+        <summary>后端 API</summary>
+        <div class="service-grid">
+        <a class="service-card" href="https://gahow-pc.ipads-lab.se.sjtu.edu.cn:8443/api/health">
+          <span class="service-name">Kanban API</span>
+          <span class="service-port">https :8443/api</span>
+          <span class="service-desc">Kanban 前后端同一个 Node 服务</span>
+        </a>
+        <a class="service-card" href="https://gahow-pc.ipads-lab.se.sjtu.edu.cn:8788/api/health">
+          <span class="service-name">Stock Agent API</span>
+          <span class="service-port">https :8788/api</span>
+          <span class="service-desc">Express API，位于 /home/gahow/projects/stock-agent</span>
+        </a>
+        </div>
+      </details>
+    </main>
+  </body>
+</html>
--- a/portal/portal.css
+++ b/portal/portal.css
@@ -0,0 +1,166 @@
+:root {
+  color-scheme: light;
+  --bg: #f4f6f8;
+  --panel: #ffffff;
+  --ink: #17202c;
+  --muted: #697586;
+  --line: #d7dee8;
+  --accent: #2563eb;
+  --soft: #eef4ff;
+  --shadow: 0 16px 40px rgba(23, 32, 44, 0.08);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background:
+    radial-gradient(circle at 18% 10%, rgba(37, 99, 235, 0.12), transparent 28%),
+    radial-gradient(circle at 90% 18%, rgba(18, 128, 92, 0.11), transparent 26%),
+    var(--bg);
+  color: var(--ink);
+  font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.shell {
+  width: min(1180px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 42px 0 56px;
+}
+
+.topbar {
+  margin-bottom: 30px;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+h1 {
+  font-size: 34px;
+  line-height: 1.08;
+  letter-spacing: 0;
+}
+
+h2 {
+  font-size: 14px;
+  margin-bottom: 0;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.topbar p,
+.service-desc {
+  color: var(--muted);
+}
+
+.topbar p {
+  margin-top: 6px;
+}
+
+.service-section {
+  margin-top: 18px;
+}
+
+.section-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.section-heading span {
+  color: var(--muted);
+}
+
+.service-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 16px;
+}
+
+.service-card,
+.api-section {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+}
+
+.service-card {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px 14px;
+  min-height: 168px;
+  padding: 18px;
+  color: inherit;
+  text-decoration: none;
+  overflow: hidden;
+}
+
+.service-card:hover {
+  border-color: var(--accent);
+  transform: translateY(-1px);
+}
+
+.service-card.primary {
+  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
+}
+
+.service-name {
+  grid-column: 1 / -1;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.service-icon {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  background: var(--soft);
+  color: var(--accent);
+  font-weight: 800;
+}
+
+.service-topline {
+  align-self: center;
+  color: var(--muted);
+  font-weight: 650;
+}
+
+.service-desc {
+  grid-column: 1 / -1;
+}
+
+.service-port {
+  grid-column: 1 / -1;
+  justify-self: start;
+  border-radius: 999px;
+  background: var(--soft);
+  color: #1849a9;
+  padding: 3px 9px;
+}
+
+.api-section {
+  margin-top: 18px;
+  padding: 14px 16px;
+  box-shadow: none;
+}
+
+.api-section summary {
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.api-section .service-grid {
+  margin-top: 14px;
+}
--- a/public/app.js
+++ b/public/app.js
@@ -0,0 +1,628 @@
+let state = {
+  gpus: [],
+  quotas: [],
+  repos: [],
+  branches: [],
+  agentProfiles: [],
+  tasks: [],
+  selectedRepoId: null,
+  selectedBranch: null,
+  expandedGpuHosts: new Set(),
+  settings: { gpuHosts: [] },
+  errors: {}
+};
+
+const $ = (id) => document.getElementById(id);
+
+function percent(value, total) {
+  if (!Number.isFinite(value) || !Number.isFinite(total) || total <= 0) return 0;
+  return Math.max(0, Math.min(100, Math.round((value / total) * 100)));
+}
+
+function escapeHtml(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (char) => ({
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+  }[char]));
+}
+
+function formatDate(value) {
+  if (!value) return 'N/A';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return 'N/A';
+  return date.toLocaleString('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+}
+
+function formatDuration(start, end) {
+  const from = new Date(start).getTime();
+  const to = new Date(end).getTime();
+  if (!Number.isFinite(from) || !Number.isFinite(to) || to < from) return '';
+  const seconds = Math.max(1, Math.round((to - from) / 1000));
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  return rest ? `${hours}h ${rest}m` : `${hours}h`;
+}
+
+function statusLabel(status) {
+  return {
+    running: '运行中',
+    completed: '已完成',
+    failed: '失败'
+  }[status] || status || '未知';
+}
+
+function canResumeTask(task) {
+  return Boolean(task.sessionId && task.status !== 'running');
+}
+
+function shortSession(sessionId) {
+  return sessionId ? sessionId.slice(0, 8) : '无 Session';
+}
+
+function isGpuIdle(gpu) {
+  const memoryPercent = percent(gpu.memoryUsedMiB, gpu.memoryTotalMiB);
+  return memoryPercent < 5 && gpu.gpuUtilizationPercent < 5;
+}
+
+function toast(message, tone = '') {
+  if (!message) return;
+  const host = $('toastHost');
+  if (!host) return;
+  const node = document.createElement('div');
+  node.className = `toast ${tone}`.trim();
+  node.textContent = message;
+  host.appendChild(node);
+  setTimeout(() => {
+    node.style.transition = 'opacity 200ms ease';
+    node.style.opacity = '0';
+    setTimeout(() => node.remove(), 220);
+  }, 4500);
+}
+
+async function request(path, options) {
+  const response = await fetch(path, options);
+  if (response.status === 401) {
+    window.location.href = '/login';
+    throw new Error('未登录');
+  }
+  if (!response.ok) {
+    const text = await response.text().catch(() => '');
+    throw new Error(text || `${response.status} ${response.statusText}`);
+  }
+  return response.json();
+}
+
+const ERROR_LABELS = {
+  settings: '设置',
+  gpus: 'GPU',
+  quotas: '额度',
+  repos: '项目列表',
+  agentProfiles: 'Agent 配置',
+  tasks: '任务历史'
+};
+
+function renderErrorBanner() {
+  const banner = $('errorBanner');
+  if (!banner) return;
+  const entries = Object.entries(state.errors || {});
+  if (!entries.length) {
+    banner.hidden = true;
+    banner.innerHTML = '';
+    return;
+  }
+  banner.hidden = false;
+  banner.innerHTML = `
+    <div><strong>部分数据加载失败</strong></div>
+    <ul>${entries.map(([key, message]) => (
+      `<li><strong>${escapeHtml(ERROR_LABELS[key] || key)}</strong> · ${escapeHtml(message)}</li>`
+    )).join('')}</ul>
+  `;
+}
+
+function renderGpuHostsChips() {
+  const chips = $('gpuHostsChips');
+  if (!chips) return;
+  const hosts = state.settings?.gpuHosts || [];
+  if (!hosts.length) {
+    chips.innerHTML = '<span class="host-chip-empty">未配置任何机器</span>';
+    return;
+  }
+  const statusByHost = new Map(state.gpus.map((host) => [host.host, host.ok]));
+  chips.innerHTML = hosts.map((host) => {
+    const ok = statusByHost.get(host);
+    const cls = ok === true ? 'ok' : ok === false ? 'bad' : '';
+    const safe = escapeHtml(host);
+    return `<span class="host-chip ${cls}">
+      <span class="host-chip-dot" aria-hidden="true"></span>
+      <span class="host-chip-label">${safe}</span>
+      <button type="button" class="host-chip-remove" data-remove-host="${safe}" aria-label="删除 ${safe}" title="删除">
+        <svg viewBox="0 0 10 10" aria-hidden="true"><path d="M2.5 2.5l5 5M7.5 2.5l-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" fill="none"/></svg>
+      </button>
+    </span>`;
+  }).join('');
+}
+
+function renderGpus() {
+  const okHosts = state.gpus.filter((host) => host.ok).length;
+  $('gpuSummary').textContent = state.gpus.length ? `${okHosts}/${state.gpus.length} 在线` : '尚未配置';
+  renderGpuHostsChips();
+  $('gpuBoard').innerHTML = state.gpus.length ? state.gpus.map((host) => {
+    if (!host.ok) {
+      return `<article class="host-card">
+        <div class="host-title"><span>${escapeHtml(host.host)}</span><span class="status-bad">离线</span></div>
+        <div class="repo-meta">${escapeHtml(host.error || '无法获取 GPU 状态')}</div>
+      </article>`;
+    }
+    const idleCount = host.gpus.filter(isGpuIdle).length;
+    const totalCount = host.gpus.length;
+    const expanded = state.expandedGpuHosts.has(host.host);
+    const thumbRows = host.gpus.map((gpu) => {
+      const memoryPercent = percent(gpu.memoryUsedMiB, gpu.memoryTotalMiB);
+      const busy = !isGpuIdle(gpu);
+      return `<span class="gpu-thumb ${busy ? 'busy' : 'idle'}" title="#${gpu.index} GPU ${gpu.gpuUtilizationPercent}% · MEM ${memoryPercent}%"></span>`;
+    }).join('');
+    const gpuRows = host.gpus.map((gpu) => {
+      const memoryPercent = percent(gpu.memoryUsedMiB, gpu.memoryTotalMiB);
+      return `<article class="gpu-detail-card">
+        <div class="metric-row">
+          <strong>#${gpu.index} ${escapeHtml(gpu.name)}</strong>
+          <span>${gpu.gpuUtilizationPercent}% GPU</span>
+        </div>
+        <meter class="meter" min="0" max="100" low="50" high="85" optimum="10" value="${gpu.gpuUtilizationPercent}" title="GPU Util"></meter>
+        <div class="metric-row muted">
+          <span>${gpu.memoryUsedMiB} / ${gpu.memoryTotalMiB} MiB</span>
+          <span>${memoryPercent}% 显存</span>
+        </div>
+        <meter class="meter" min="0" max="100" low="50" high="85" optimum="10" value="${memoryPercent}" title="Memory"></meter>
+      </article>`;
+    }).join('');
+    return `<article class="host-card ${expanded ? 'expanded' : ''}">
+      <button class="host-summary" type="button" data-host="${escapeHtml(host.host)}" aria-expanded="${expanded}">
+        <span>
+          <strong>${escapeHtml(host.host)}</strong>
+          <span class="muted">${idleCount}/${totalCount} 空闲</span>
+        </span>
+        <span class="gpu-thumbs">${thumbRows}</span>
+        <span class="chip">${expanded ? '收起' : '展开'}</span>
+      </button>
+      ${expanded ? `<div class="gpu-list">${gpuRows || '<span class="muted">未发现 GPU</span>'}</div>` : ''}
+    </article>`;
+  }).join('') : '<div class="empty-state">还没有配置 GPU 机器</div>';
+}
+
+function renderQuotas() {
+  const okSources = state.quotas.filter((quota) => quota.ok).length;
+  $('quotaSummary').textContent = state.quotas.length ? `${okSources}/${state.quotas.length} 可用` : '未配置';
+  $('quotaBoard').innerHTML = state.quotas.length ? state.quotas.map((quota) => {
+    const summary = quota.summary || {};
+    const limit = summary.limit ?? null;
+    const used = summary.used ?? null;
+    const remaining = summary.remaining ?? null;
+    const usedPercent = limit && used !== null ? percent(used, limit) : null;
+    return `<article class="quota-card">
+      <div class="host-title">
+        <span>${escapeHtml(quota.label)}</span>
+        <span class="${quota.ok ? 'status-ok' : 'status-warn'}">${quota.ok ? '已更新' : '未配置'}</span>
+      </div>
+      ${quota.ok ? `
+        <div class="metric-row"><span class="muted">剩余</span><strong>${remaining ?? 'N/A'}</strong></div>
+        <div class="metric-row"><span class="muted">已用</span><strong>${used ?? 'N/A'}</strong></div>
+        ${usedPercent === null ? '' : `<meter class="meter" min="0" max="100" low="50" high="85" optimum="10" value="${usedPercent}"></meter>`}
+      ` : `<div class="repo-meta">${escapeHtml(quota.error || '尚未配置')}</div>`}
+    </article>`;
+  }).join('') : '<div class="empty-state">还没有配置额度数据源</div>';
+}
+
+function renderRepos() {
+  const selectedRepo = state.repos.find((repo) => repo.id === state.selectedRepoId);
+  $('repoSummary').textContent = state.repos.length
+    ? (selectedRepo ? `${state.repos.length} 个 · 当前 ${selectedRepo.fullName}` : `${state.repos.length} 个`)
+    : '暂无';
+  $('repoBoard').innerHTML = state.repos.length ? state.repos.map((repo) => {
+    const selected = repo.id === state.selectedRepoId ? ' selected' : '';
+    return `<article class="repo-card${selected}" data-id="${escapeHtml(repo.id)}">
+      <div class="repo-title">
+        <span>${escapeHtml(repo.fullName)}</span>
+        <span class="chip">${escapeHtml(repo.defaultBranch)}</span>
+      </div>
+      ${repo.description ? `<div class="repo-meta">${escapeHtml(repo.description)}</div>` : ''}
+      <div class="repo-meta">${escapeHtml(repo.cloneUrl)}</div>
+    </article>`;
+  }).join('') : '<div class="empty-state">无法读取项目，请检查 Gitea 配置</div>';
+  renderAgentContext();
+}
+
+function renderAgentContext() {
+  const repo = state.repos.find((item) => item.id === state.selectedRepoId);
+  const repoEl = $('agentContextRepo');
+  const branchEl = $('agentContextBranch');
+  if (!repoEl || !branchEl) return;
+  if (repo) {
+    repoEl.textContent = repo.fullName;
+    repoEl.classList.remove('empty');
+  } else {
+    repoEl.textContent = '从左侧选择一个项目';
+    repoEl.classList.add('empty');
+  }
+  if (state.selectedBranch) {
+    branchEl.textContent = state.selectedBranch;
+    branchEl.hidden = false;
+  } else {
+    branchEl.hidden = true;
+    branchEl.textContent = '';
+  }
+}
+
+function renderBranches() {
+  $('branchSelect').innerHTML = state.branches.length ? state.branches.map((branch) => {
+    const selected = branch.name === state.selectedBranch ? 'selected' : '';
+    return `<option value="${escapeHtml(branch.name)}" ${selected}>${escapeHtml(branch.name)}</option>`;
+  }).join('') : '<option value="">无可用 Branch</option>';
+  renderAgentContext();
+}
+
+function renderProfiles() {
+  $('profileSelect').innerHTML = state.agentProfiles.map((profile) => (
+    `<option value="${escapeHtml(profile.id)}">${escapeHtml(profile.label || profile.id)}</option>`
+  )).join('');
+}
+
+function taskMatchesSelection(task) {
+  return task.repoFullName === state.selectedRepoId && task.branch === state.selectedBranch && canResumeTask(task);
+}
+
+function renderResumeTasks() {
+  const options = state.tasks.filter(taskMatchesSelection);
+  const prev = $('resumeTaskSelect').value;
+  $('resumeTaskSelect').innerHTML = [
+    '<option value="">新 Session</option>',
+    ...options.map((task) => {
+      const prompt = task.prompt ? ` · ${task.prompt.slice(0, 40)}` : '';
+      const label = `${formatDate(task.finishedAt || task.createdAt)} · ${statusLabel(task.status)} · ${shortSession(task.sessionId)}${prompt}`;
+      return `<option value="${escapeHtml(task.id)}">${escapeHtml(label)}</option>`;
+    })
+  ].join('');
+  if (prev && options.some((task) => task.id === prev)) {
+    $('resumeTaskSelect').value = prev;
+  }
+  $('resumeTaskButton').disabled = options.length === 0;
+}
+
+function renderTerminal(label, content, tone = '', expanded = true) {
+  if (!content) return '';
+  const lineCount = content.split('\n').length;
+  const body = `<pre class="terminal-body" tabindex="0">${escapeHtml(content)}</pre>`;
+  if (!expanded) {
+    return `<details class="terminal ${tone}">
+      <summary class="terminal-head">
+        <span>${label}</span>
+        <span>${lineCount} lines</span>
+      </summary>
+      ${body}
+    </details>`;
+  }
+  return `<section class="terminal ${tone}">
+    <div class="terminal-head">
+      <span>${label}</span>
+      <span>${lineCount} lines</span>
+    </div>
+    ${body}
+  </section>`;
+}
+
+function taskFullBody(task, { expandedTerminals }) {
+  const duration = task.finishedAt ? formatDuration(task.createdAt, task.finishedAt) : '';
+  return `
+    <div class="task-head">
+      <div>
+        <strong>${escapeHtml(task.profileLabel)}</strong>
+        <div class="task-meta">${escapeHtml(task.repoFullName)} · ${escapeHtml(task.branch)}</div>
+      </div>
+      <div class="task-actions">
+        <span class="chip status-chip">${escapeHtml(statusLabel(task.status))}</span>
+      </div>
+    </div>
+    <div class="task-facts">
+      <span>${formatDate(task.createdAt)}</span>
+      ${task.finishedAt ? `<span>完成 ${formatDate(task.finishedAt)}</span>` : ''}
+      ${duration ? `<span>耗时 ${escapeHtml(duration)}</span>` : ''}
+      ${Number.isInteger(task.exitCode) ? `<span>Exit ${task.exitCode}</span>` : ''}
+      ${task.sessionId ? `<span class="session-id">Session ${escapeHtml(shortSession(task.sessionId))}</span>` : ''}
+      ${task.parentTaskId ? `<span>续自 ${escapeHtml(task.parentTaskId.slice(0, 8))}</span>` : ''}
+    </div>
+    <div class="task-meta workspace-path">${escapeHtml(task.workspace)}</div>
+    <div class="task-prompt">${escapeHtml(task.prompt)}</div>
+    ${renderTerminal('stderr', task.stderr, 'stderr', expandedTerminals)}
+    ${renderTerminal('stdout', task.stdout, '', expandedTerminals)}
+  `;
+}
+
+function renderActiveTaskCard(task) {
+  return `<article class="task-card active-task status-${escapeHtml(task.status)}">
+    ${taskFullBody(task, { expandedTerminals: true })}
+  </article>`;
+}
+
+function renderHistoryTaskCard(task) {
+  const duration = task.finishedAt ? formatDuration(task.createdAt, task.finishedAt) : '';
+  const promptPreview = (task.prompt || '').replace(/\s+/g, ' ').trim().slice(0, 100);
+  const resumeButton = canResumeTask(task)
+    ? `<button class="secondary-button small" type="button" data-resume-task="${escapeHtml(task.id)}">选择继续</button>`
+    : '';
+  return `<details class="task-card history-task status-${escapeHtml(task.status)}">
+    <summary class="task-summary">
+      <span class="chip status-chip">${escapeHtml(statusLabel(task.status))}</span>
+      <span class="task-summary-main">
+        <span class="task-summary-title">${escapeHtml(task.repoFullName)} · ${escapeHtml(task.branch)}</span>
+        ${promptPreview ? `<span class="task-summary-prompt muted">${escapeHtml(promptPreview)}</span>` : ''}
+      </span>
+      <span class="task-summary-resume">${resumeButton}</span>
+      <span class="task-summary-meta">
+        <span class="muted task-summary-date">${formatDate(task.finishedAt || task.createdAt)}</span>
+        <span class="muted task-summary-duration">${duration ? escapeHtml(duration) : ''}</span>
+      </span>
+      <span class="task-summary-chevron" aria-hidden="true">›</span>
+    </summary>
+    <div class="task-body">
+      ${taskFullBody(task, { expandedTerminals: false })}
+    </div>
+  </details>`;
+}
+
+function renderTaskCard(task) {
+  return task.status === 'running' ? renderActiveTaskCard(task) : renderHistoryTaskCard(task);
+}
+
+function renderTasks() {
+  const running = state.tasks.filter((task) => task.status === 'running').length;
+  const completed = state.tasks.filter((task) => task.status === 'completed').length;
+  const failed = state.tasks.filter((task) => task.status === 'failed').length;
+  $('taskSummary').textContent = `${running} 运行中 · ${completed} 已完成 · ${failed} 失败`;
+
+  const activeTasks = state.tasks.filter((task) => task.status === 'running');
+  const historyTasks = state.tasks.filter((task) => task.status !== 'running');
+  const sections = [];
+  if (activeTasks.length) {
+    sections.push(`<section class="task-section">
+      <div class="task-section-heading"><h3>运行中</h3><span class="muted">${activeTasks.length} 个</span></div>
+      <div class="task-list">${activeTasks.map(renderTaskCard).join('')}</div>
+    </section>`);
+  }
+  if (historyTasks.length) {
+    sections.push(`<section class="task-section">
+      <div class="task-section-heading"><h3>历史 Session</h3><span class="muted">${historyTasks.length} 个</span></div>
+      <div class="task-list history-list">${historyTasks.map(renderTaskCard).join('')}</div>
+    </section>`);
+  }
+  $('taskBoard').innerHTML = sections.join('') || '<div class="empty-state">暂无 Session</div>';
+}
+
+function render() {
+  if (!state.selectedRepoId && state.repos[0]) state.selectedRepoId = state.repos[0].id;
+  renderErrorBanner();
+  renderGpus();
+  renderQuotas();
+  renderRepos();
+  renderBranches();
+  renderProfiles();
+  renderResumeTasks();
+  renderTasks();
+}
+
+async function loadBranches() {
+  if (!state.selectedRepoId) {
+    state.branches = [];
+    state.selectedBranch = null;
+    renderBranches();
+    return;
+  }
+  try {
+    state.branches = await request(`/api/branches?repo=${encodeURIComponent(state.selectedRepoId)}`);
+  } catch (error) {
+    state.branches = [];
+    toast(`读取 branches 失败: ${error.message}`, 'error');
+  }
+  const repo = state.repos.find((item) => item.id === state.selectedRepoId);
+  if (!state.branches.some((branch) => branch.name === state.selectedBranch)) {
+    state.selectedBranch = state.branches.find((branch) => branch.name === repo?.defaultBranch)?.name || state.branches[0]?.name || null;
+  }
+  renderBranches();
+  renderResumeTasks();
+}
+
+async function refresh() {
+  const button = $('refreshButton');
+  button.disabled = true;
+  button.classList.add('loading');
+  try {
+    const data = await request('/api/dashboard');
+    state = { ...state, ...data, errors: data.errors || {} };
+    render();
+    await loadBranches();
+  } catch (error) {
+    toast(`刷新失败: ${error.message}`, 'error');
+  } finally {
+    button.disabled = false;
+    button.classList.remove('loading');
+  }
+}
+
+$('refreshButton').addEventListener('click', refresh);
+
+$('logoutButton').addEventListener('click', async () => {
+  try {
+    await fetch('/api/auth/logout', { method: 'POST' });
+  } finally {
+    window.location.href = '/login';
+  }
+});
+
+$('gpuBoard').addEventListener('click', (event) => {
+  const button = event.target.closest('.host-summary');
+  if (!button) return;
+  const host = button.dataset.host;
+  if (state.expandedGpuHosts.has(host)) state.expandedGpuHosts.delete(host);
+  else state.expandedGpuHosts.add(host);
+  renderGpus();
+});
+
+async function saveGpuHosts(gpuHosts, successMessage) {
+  try {
+    const settings = await request('/api/settings/gpu-hosts', {
+      method: 'PUT',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ gpuHosts })
+    });
+    state.settings = settings;
+    renderGpuHostsChips();
+    if (successMessage) toast(successMessage, 'success');
+    await refresh();
+    return true;
+  } catch (error) {
+    toast(`保存失败: ${error.message}`, 'error');
+    return false;
+  }
+}
+
+function setHostAdding(adding) {
+  const trigger = $('hostAddTrigger');
+  const form = $('hostAddForm');
+  const input = $('hostAddInput');
+  if (!trigger || !form) return;
+  form.hidden = !adding;
+  trigger.hidden = adding;
+  if (adding && input) {
+    input.value = '';
+    input.focus();
+  }
+}
+
+$('hostAddTrigger').addEventListener('click', () => setHostAdding(true));
+$('hostAddCancel').addEventListener('click', () => setHostAdding(false));
+$('hostAddInput').addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    setHostAdding(false);
+  }
+});
+
+$('hostAddForm').addEventListener('submit', async (event) => {
+  event.preventDefault();
+  const name = $('hostAddInput').value.trim();
+  if (!name) {
+    toast('请输入主机名', 'warn');
+    return;
+  }
+  const current = state.settings?.gpuHosts || [];
+  if (current.includes(name)) {
+    toast(`${name} 已存在`, 'warn');
+    return;
+  }
+  const ok = await saveGpuHosts([...current, name], `已添加 ${name}`);
+  if (ok) setHostAdding(false);
+});
+
+$('gpuHostsChips').addEventListener('click', async (event) => {
+  const button = event.target.closest('[data-remove-host]');
+  if (!button) return;
+  const host = button.dataset.removeHost;
+  const current = state.settings?.gpuHosts || [];
+  if (!current.includes(host)) return;
+  await saveGpuHosts(current.filter((item) => item !== host), `已移除 ${host}`);
+});
+
+$('repoBoard').addEventListener('click', (event) => {
+  const card = event.target.closest('.repo-card');
+  if (!card) return;
+  state.selectedRepoId = card.dataset.id;
+  state.selectedBranch = null;
+  renderRepos();
+  loadBranches();
+});
+
+$('branchSelect').addEventListener('change', (event) => {
+  state.selectedBranch = event.target.value;
+  renderResumeTasks();
+  renderAgentContext();
+});
+
+async function selectResumeTask(taskId) {
+  const task = state.tasks.find((item) => item.id === taskId);
+  if (!task) return;
+  state.selectedRepoId = task.repoFullName;
+  state.selectedBranch = task.branch;
+  renderRepos();
+  await loadBranches();
+  $('resumeTaskSelect').value = task.id;
+  $('taskForm').scrollIntoView({ behavior: 'smooth', block: 'start' });
+  $('promptInput').focus();
+}
+
+$('taskBoard').addEventListener('click', (event) => {
+  const button = event.target.closest('[data-resume-task]');
+  if (!button) return;
+  event.preventDefault();
+  event.stopPropagation();
+  selectResumeTask(button.dataset.resumeTask);
+});
+
+async function submitTask(resume) {
+  const repo = state.repos.find((item) => item.id === state.selectedRepoId);
+  const prompt = $('promptInput').value.trim();
+  if (!repo) {
+    toast('请先从左侧选择一个项目', 'warn');
+    return;
+  }
+  if (!prompt) {
+    toast('请输入命令', 'warn');
+    return;
+  }
+  const payload = {
+    repo,
+    branch: $('branchSelect').value,
+    profileId: $('profileSelect').value,
+    prompt,
+    resumeTaskId: resume ? $('resumeTaskSelect').value : ''
+  };
+  if (resume && !payload.resumeTaskId) {
+    toast('没有可继续的 Session', 'warn');
+    return;
+  }
+  const submitButtons = [$('startTaskButton'), $('resumeTaskButton')];
+  submitButtons.forEach((btn) => { if (btn) btn.disabled = true; });
+  try {
+    await request('/api/tasks', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload)
+    });
+    $('promptInput').value = '';
+    toast(resume ? 'Session 已继续' : '任务已启动', 'success');
+    await refresh();
+  } catch (error) {
+    toast(`启动任务失败: ${error.message}`, 'error');
+  } finally {
+    submitButtons.forEach((btn) => { if (btn) btn.disabled = false; });
+  }
+}
+
+$('taskForm').addEventListener('submit', async (event) => {
+  event.preventDefault();
+  await submitTask(false);
+});
+
+$('resumeTaskButton').addEventListener('click', () => submitTask(true));
+
+refresh();
+setInterval(refresh, 30000);
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <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">
+  </head>
+  <body>
+    <div class="bg-glow" aria-hidden="true"></div>
+    <main class="shell">
+      <header class="topbar">
+        <div class="brand">
+          <div class="brand-mark" aria-hidden="true">LK</div>
+          <div>
+            <h1>Local Kanban</h1>
+            <p id="subtitle" class="muted">GPU · 额度 · 项目 · Agent</p>
+          </div>
+        </div>
+        <div class="top-actions">
+          <button id="refreshButton" type="button" class="icon-button" title="刷新" aria-label="刷新">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 0 1 15.36-6.36L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15.36 6.36L3 16"/><path d="M3 21v-5h5"/></svg>
+          </button>
+          <button id="logoutButton" type="button" class="ghost-button">退出</button>
+        </div>
+      </header>
+
+      <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>
+          </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>
+      </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>
+          </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>
+      </section>
+    </main>
+    <div id="toastHost" class="toast-host" aria-live="polite"></div>
+    <script type="module" src="/app.js?v=20260514"></script>
+  </body>
+</html>
--- a/public/login.html
+++ b/public/login.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Login · Local Kanban</title>
+    <link rel="stylesheet" href="/styles.css">
+  </head>
+  <body>
+    <main class="login-shell">
+      <form id="loginForm" class="login-panel">
+        <h1>Local Kanban</h1>
+        <label>
+          Access Token
+          <input id="tokenInput" type="password" autocomplete="current-password" required autofocus>
+        </label>
+        <button type="submit">登录</button>
+        <p id="loginError" class="status-bad"></p>
+      </form>
+    </main>
+    <script type="module" src="/login.js"></script>
+  </body>
+</html>
--- a/public/login.js
+++ b/public/login.js
@@ -0,0 +1,18 @@
+const form = document.getElementById('loginForm');
+const tokenInput = document.getElementById('tokenInput');
+const loginError = document.getElementById('loginError');
+
+form.addEventListener('submit', async (event) => {
+  event.preventDefault();
+  loginError.textContent = '';
+  const response = await fetch('/api/auth/login', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ token: tokenInput.value })
+  });
+  if (response.ok) {
+    window.location.href = '/';
+    return;
+  }
+  loginError.textContent = response.status === 429 ? '尝试次数过多' : 'Token 无效';
+});
--- a/public/styles.css
+++ b/public/styles.css