hypercore-cli 1.1.0

package/dist/upgrade-7TGI3SXO.js

@@ -0,0 +1,83 @@
+import {
+  HYPERCORE_DIR
+} from "./chunk-V5UHPPSY.js";
+
+// src/commands/upgrade.ts
+import { readdir, copyFile, mkdir } from "fs/promises";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import { existsSync } from "fs";
+import chalk from "chalk";
+function getTemplatesDir() {
+  const thisFile = fileURLToPath(import.meta.url);
+  const distDir = dirname(thisFile);
+  const projectRoot = join(distDir, "..");
+  return join(projectRoot, "templates");
+}
+async function syncDir(srcDir, destDir, category, result) {
+  if (!existsSync(srcDir)) return;
+  await mkdir(destDir, { recursive: true });
+  let entries;
+  try {
+    entries = await readdir(srcDir);
+  } catch {
+    return;
+  }
+  for (const file of entries) {
+    const srcPath = join(srcDir, file);
+    const destPath = join(destDir, file);
+    if (existsSync(destPath)) {
+      result.skipped.push(`${category}/${file}`);
+    } else {
+      try {
+        await copyFile(srcPath, destPath);
+        result.added.push(`${category}/${file}`);
+      } catch (err) {
+        result.errors.push(`${category}/${file}: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    }
+  }
+}
+async function upgradeCommand() {
+  if (!existsSync(HYPERCORE_DIR)) {
+    console.log(chalk.red("\n  \u274C \u8BF7\u5148\u8FD0\u884C hypercore init \u521D\u59CB\u5316\n"));
+    process.exit(1);
+  }
+  console.log(chalk.bold("\n  \u{1F504} \u68C0\u67E5\u6A21\u677F\u66F4\u65B0\u2026\n"));
+  const templatesDir = getTemplatesDir();
+  if (!existsSync(templatesDir)) {
+    console.log(chalk.red("  \u274C \u672A\u627E\u5230\u6A21\u677F\u76EE\u5F55\n"));
+    return;
+  }
+  const result = { added: [], skipped: [], errors: [] };
+  await syncDir(join(templatesDir, "agents"), join(HYPERCORE_DIR, "agents"), "agents", result);
+  await syncDir(join(templatesDir, "skills"), join(HYPERCORE_DIR, "skills"), "skills", result);
+  await syncDir(join(templatesDir, "lines"), join(HYPERCORE_DIR, "lines"), "lines", result);
+  if (result.added.length > 0) {
+    console.log(chalk.green(`  \u2705 \u65B0\u589E ${result.added.length} \u4E2A\u6A21\u677F\uFF1A`));
+    for (const f of result.added) {
+      console.log(chalk.green(`     + ${f}`));
+    }
+  }
+  if (result.skipped.length > 0) {
+    console.log(chalk.dim(`
+  \u23ED\uFE0F  \u5DF2\u5B58\u5728 ${result.skipped.length} \u4E2A\uFF08\u672A\u8986\u76D6\uFF09\uFF1A`));
+    for (const f of result.skipped) {
+      console.log(chalk.dim(`     = ${f}`));
+    }
+  }
+  if (result.errors.length > 0) {
+    console.log(chalk.red(`
+  \u274C ${result.errors.length} \u4E2A\u9519\u8BEF\uFF1A`));
+    for (const e of result.errors) {
+      console.log(chalk.red(`     ${e}`));
+    }
+  }
+  if (result.added.length === 0 && result.errors.length === 0) {
+    console.log(chalk.dim("  \u6240\u6709\u6A21\u677F\u5DF2\u662F\u6700\u65B0\uFF0C\u65E0\u9700\u66F4\u65B0\u3002"));
+  }
+  console.log();
+}
+export {
+  upgradeCommand
+};

package/dist/verify-JUDKTPKZ.js

@@ -0,0 +1,14 @@
+import {
+  getMetricValue,
+  inferBaselineKey,
+  recordBaseline,
+  verifyCompletedItems
+} from "./chunk-IOPKN5GD.js";
+import "./chunk-2CMSCWQW.js";
+import "./chunk-MGLJ53QN.js";
+export {
+  getMetricValue,
+  inferBaselineKey,
+  recordBaseline,
+  verifyCompletedItems
+};

package/dist/web/static/app.js

@@ -0,0 +1,562 @@
+/**
+ * Hypercore Web Dashboard - Frontend Logic
+ * System-level management & monitoring panel
+ * Pure vanilla JS, no dependencies
+ */
+
+// ─── State ───────────────────────────────────────────────────
+const state = {
+  activeTab: 'overview',
+  lines: [],
+  selectedLine: null,
+  isRunning: false,
+  historyRuns: [],
+  refreshTimer: null,
+  connected: false,
+};
+
+const REFRESH_INTERVAL = 10_000; // 10s auto-refresh
+
+// ─── DOM References ──────────────────────────────────────────
+const $ = (sel) => document.querySelector(sel);
+
+// ─── API Helpers ─────────────────────────────────────────────
+const API = '/api';
+
+async function fetchJSON(path) {
+  const res = await fetch(`${API}${path}`);
+  if (!res.ok) throw new Error(`API error: ${res.status}`);
+  return res.json();
+}
+
+// ─── Utilities ───────────────────────────────────────────────
+function relativeTime(isoStr) {
+  if (!isoStr) return '-';
+  const diff = Date.now() - new Date(isoStr).getTime();
+  if (diff < 0) return 'just now';
+  if (diff < 60_000) return `${Math.floor(diff / 1000)}s ago`;
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+  return `${Math.floor(diff / 86_400_000)}d ago`;
+}
+
+function shortPath(fullPath) {
+  if (!fullPath) return '-';
+  const parts = fullPath.split('/');
+  return parts.length > 2 ? `~/${parts.slice(-2).join('/')}` : fullPath;
+}
+
+function updateTimestamp() {
+  const el = $('#last-updated');
+  if (el) {
+    const now = new Date();
+    el.textContent = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  }
+}
+
+// ─── Connection Health Check ─────────────────────────────────
+async function checkConnection() {
+  const dot = $('#connection-status');
+  try {
+    await fetchJSON('/config');
+    state.connected = true;
+    dot.className = 'status-dot online';
+    dot.title = 'Connected';
+  } catch {
+    state.connected = false;
+    dot.className = 'status-dot offline';
+    dot.title = 'Disconnected';
+  }
+}
+
+// ─── Tab Navigation ──────────────────────────────────────────
+document.querySelectorAll('.tab-btn').forEach(btn => {
+  btn.addEventListener('click', () => switchTab(btn.dataset.tab));
+});
+
+function switchTab(tab) {
+  state.activeTab = tab;
+  document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
+  document.querySelectorAll('.tab-content').forEach(c => c.classList.toggle('active', c.id === `tab-${tab}`));
+
+  if (tab === 'overview') loadOverview();
+  if (tab === 'lines' && state.lines.length === 0) loadLines();
+  if (tab === 'history') loadHistory();
+  if (tab === 'settings') loadSettings();
+}
+
+// ─── Markdown Renderer (simple) ──────────────────────────────
+function renderMarkdown(text) {
+  if (!text) return '';
+  let html = text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+  html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) =>
+    `<pre><code class="lang-${lang}">${code.trim()}</code></pre>`);
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+  html = html.replace(/^### (.+)$/gm, '<h4>$1</h4>');
+  html = html.replace(/^## (.+)$/gm, '<h3>$1</h3>');
+  html = html.replace(/^# (.+)$/gm, '<h2>$1</h2>');
+  html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
+  html = html.replace(/(<li>.*<\/li>)/gs, '<ul>$1</ul>');
+  html = html.replace(/<\/ul>\s*<ul>/g, '');
+  html = html.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+  html = html.replace(/\n\n/g, '</p><p>');
+  html = html.replace(/\n/g, '<br>');
+  return `<p>${html}</p>`;
+}
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// ─── Overview Tab ────────────────────────────────────────────
+async function loadOverview() {
+  const [configRes, gitRes, instancesRes, linesRes, historyRes] = await Promise.allSettled([
+    fetchJSON('/config'),
+    fetchJSON('/git/status'),
+    fetchJSON('/instances'),
+    fetchJSON('/lines'),
+    fetchJSON('/history'),
+  ]);
+
+  updateTimestamp();
+
+  // ── Instances card (wide, top priority) ──
+  const instancesBody = $('#card-instances-body');
+  if (instancesRes.status === 'fulfilled') {
+    const data = instancesRes.value;
+    const instances = data.instances || [];
+    if (instances.length === 0) {
+      instancesBody.innerHTML = `
+        <div class="empty-state">
+          <div class="empty-icon">\u{1F50C}</div>
+          <div class="empty-text">No active sessions</div>
+          <div class="empty-hint">Start a terminal with <code>hyper</code> to see it here</div>
+        </div>`;
+    } else {
+      let html = `<div class="instance-count">${instances.length} active</div>`;
+      html += '<div class="instances-list">';
+      for (const inst of instances) {
+        const current = inst.isCurrent;
+        const name = inst.projectName || inst.cwd.split('/').pop() || 'hyper';
+        const uptime = relativeTime(inst.startTime);
+        html += `<div class="instance-row${current ? ' current' : ''}">
+          <div class="instance-row-left">
+            <span class="instance-dot${current ? ' current' : ''}"></span>
+            <div class="instance-info">
+              <span class="instance-name">${escapeHtml(name)}${current ? ' <span class="badge-current">current</span>' : ''}</span>
+              <span class="instance-meta">${escapeHtml(inst.provider)}/${escapeHtml(inst.model)} \u00B7 ${shortPath(inst.cwd)}</span>
+            </div>
+          </div>
+          <div class="instance-row-right">
+            <span class="instance-port">:${inst.port}</span>
+            <span class="instance-uptime">${uptime}</span>
+          </div>
+        </div>`;
+      }
+      html += '</div>';
+      instancesBody.innerHTML = html;
+    }
+  } else {
+    instancesBody.innerHTML = '<span class="text-muted">Failed to load</span>';
+  }
+
+  // ── Model card ──
+  const modelBody = $('#card-model-body');
+  if (configRes.status === 'fulfilled') {
+    const c = configRes.value;
+    modelBody.innerHTML = `
+      <div class="card-stat"><span>Provider</span><span>${escapeHtml(c.provider)}</span></div>
+      <div class="card-stat"><span>Model</span><span>${escapeHtml(c.model)}</span></div>`;
+  } else {
+    modelBody.innerHTML = '<span class="text-muted">Failed to load</span>';
+  }
+
+  // ── Git card ──
+  const gitBody = $('#card-git-body');
+  if (gitRes.status === 'fulfilled') {
+    const g = gitRes.value;
+    if (!g.available) {
+      gitBody.innerHTML = '<span class="text-muted">Not a git repo</span>';
+    } else {
+      gitBody.innerHTML = `
+        <div class="card-stat"><span>Branch</span><span class="git-branch">${escapeHtml(g.branch)}</span></div>
+        <div class="card-stat"><span>HEAD</span><span>${escapeHtml(g.head)}</span></div>
+        <div class="card-stat"><span>Status</span><span>${g.uncommitted
+          ? '<span class="git-dirty">\u26A0 Uncommitted</span>'
+          : '<span class="git-clean">\u2713 Clean</span>'}</span></div>`;
+    }
+  } else {
+    gitBody.innerHTML = '<span class="text-muted">Failed to load</span>';
+  }
+
+  // ── Lines card ──
+  const linesBody = $('#card-lines-body');
+  if (linesRes.status === 'fulfilled') {
+    const l = linesRes.value;
+    const count = (l.lines || []).length;
+    linesBody.innerHTML = `
+      <div class="card-value-big">${count}</div>
+      <div class="card-value-label">available</div>`;
+    state.lines = l.lines || [];
+  } else {
+    linesBody.innerHTML = '<span class="text-muted">Failed to load</span>';
+  }
+
+  // ── Runs card ──
+  const runsBody = $('#card-runs-body');
+  if (historyRes.status === 'fulfilled') {
+    const h = historyRes.value;
+    const runs = h.runs || [];
+    const lastRun = runs.length > 0 ? relativeTime(runs[0].startTime) : '-';
+    runsBody.innerHTML = `
+      <div class="card-value-big">${runs.length}</div>
+      <div class="card-value-label">total runs</div>
+      <div class="card-stat" style="margin-top:8px"><span>Last run</span><span>${lastRun}</span></div>`;
+    state.historyRuns = runs;
+  } else {
+    runsBody.innerHTML = '<span class="text-muted">Failed to load</span>';
+  }
+}
+
+// ─── Settings Tab ────────────────────────────────────────────
+async function loadSettings() {
+  const [toolsRes, hooksRes] = await Promise.allSettled([
+    fetchJSON('/tools'),
+    fetchJSON('/hooks'),
+  ]);
+
+  const toolsEl = $('#settings-tools');
+  if (toolsRes.status === 'fulfilled') {
+    const tools = toolsRes.value.tools || [];
+    if (tools.length === 0) {
+      toolsEl.innerHTML = '<span class="text-muted">No tools registered</span>';
+    } else {
+      let html = `<div class="settings-tools-count">${tools.length} tools</div>`;
+      html += '<div class="settings-tools-grid">';
+      for (const tool of tools) {
+        html += `<span class="tool-tag" title="${escapeHtml(tool.description || '')}">${escapeHtml(tool.name)}</span>`;
+      }
+      html += '</div>';
+      toolsEl.innerHTML = html;
+    }
+  } else {
+    toolsEl.innerHTML = '<span class="text-muted">Failed to load</span>';
+  }
+
+  const hooksEl = $('#settings-hooks');
+  if (hooksRes.status === 'fulfilled') {
+    const data = hooksRes.value;
+    if (data.total === 0) {
+      hooksEl.innerHTML = '<span class="text-muted">No hooks configured</span>';
+    } else {
+      let html = '<div class="hooks-list">';
+      for (const [event, hooks] of Object.entries(data.byEvent)) {
+        html += `<div><span class="hook-event">${escapeHtml(event)}</span> <span class="hook-count">(${hooks.length})</span></div>`;
+      }
+      hooksEl.innerHTML = html + '</div>';
+    }
+  } else {
+    hooksEl.innerHTML = '<span class="text-muted">Failed to load</span>';
+  }
+}
+
+// ─── Production Lines ────────────────────────────────────────
+async function loadLines() {
+  const listEl = $('#lines-list');
+  listEl.innerHTML = '<div style="padding:12px;color:var(--text-muted)">Loading...</div>';
+  try {
+    const data = await fetchJSON('/lines');
+    state.lines = data.lines || [];
+    renderLinesList();
+  } catch {
+    listEl.innerHTML = '<div style="padding:12px;color:var(--red)">Failed to load</div>';
+  }
+}
+
+function renderLinesList() {
+  const listEl = $('#lines-list');
+  listEl.innerHTML = '';
+  if (state.lines.length === 0) {
+    listEl.innerHTML = '<div style="padding:12px;color:var(--text-muted)">No production lines found</div>';
+    return;
+  }
+  for (const line of state.lines) {
+    const item = document.createElement('div');
+    item.className = `line-item${state.selectedLine?.name === line.name ? ' active' : ''}`;
+    item.innerHTML = `
+      <div class="line-item-name">${line.icon || '\u{1F4CB}'} ${escapeHtml(line.name)}</div>
+      <div class="line-item-desc">${escapeHtml(line.description || '')}</div>`;
+    item.addEventListener('click', () => selectLine(line));
+    listEl.appendChild(item);
+  }
+}
+
+function selectLine(line) {
+  state.selectedLine = line;
+  renderLinesList();
+  $('#run-line-name').textContent = `${line.icon || '\u{1F3ED}'} ${line.name}`;
+
+  let html = `<p class="text-muted" style="margin-bottom:16px">${escapeHtml(line.description || '')}</p>`;
+  html += '<div class="run-form">';
+  if (line.inputs && line.inputs.length > 0) {
+    for (const inp of line.inputs) {
+      const req = inp.required ? ' *' : '';
+      html += `<div class="run-field">
+        <label>${escapeHtml(inp.name)}${req}</label>
+        <input type="text" name="${escapeHtml(inp.name)}" placeholder="${escapeHtml(inp.description || '')}"
+          ${inp.defaultValue ? `value="${escapeHtml(inp.defaultValue)}"` : ''}>
+        ${inp.description ? `<div class="field-hint">${escapeHtml(inp.description)}</div>` : ''}
+      </div>`;
+    }
+  } else {
+    html += '<p class="text-muted">No input parameters.</p>';
+  }
+  html += '<button class="btn-primary" id="btn-run-exec">\u25B6 Run</button></div>';
+  html += '<div id="run-output-area"></div>';
+
+  $('#run-content').innerHTML = html;
+  $('#btn-run-exec').addEventListener('click', () => runLine(line));
+}
+
+async function runLine(line) {
+  if (state.isRunning) return;
+  state.isRunning = true;
+  const btn = $('#btn-run-exec');
+  btn.disabled = true;
+  btn.textContent = 'Running...';
+
+  const inputs = {};
+  document.querySelectorAll('#run-content .run-field input').forEach(f => {
+    if (f.value.trim()) inputs[f.name] = f.value.trim();
+  });
+
+  const outputArea = $('#run-output-area');
+  outputArea.innerHTML = '<div class="run-output-stream" id="run-stream"></div>';
+  const streamEl = $('#run-stream');
+
+  try {
+    const response = await fetch('/api/run', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ lineName: line.name, inputs }),
+    });
+
+    if (!response.ok) {
+      let errMsg = `HTTP ${response.status}`;
+      try { const errData = await response.json(); errMsg = errData.error || errMsg; } catch { /* ignore */ }
+      throw new Error(errMsg);
+    }
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop() || '';
+      for (const rawLine of lines) {
+        if (!rawLine.startsWith('data: ')) continue;
+        try { handleRunEvent(JSON.parse(rawLine.slice(6)), streamEl); } catch { /* skip */ }
+      }
+    }
+  } catch (err) {
+    streamEl.innerHTML += `<div class="run-event run-event-error">\u274C ${escapeHtml(String(err))}</div>`;
+  }
+
+  state.isRunning = false;
+  btn.disabled = false;
+  btn.textContent = '\u25B6 Run';
+}
+
+function handleRunEvent(data, streamEl) {
+  const div = document.createElement('div');
+  div.className = 'run-event';
+
+  switch (data.type) {
+    case 'run_start':
+      div.className += ' run-event-station';
+      div.textContent = `\u{1F3ED} Starting: ${data.lineName}`;
+      break;
+    case 'station_start': {
+      const ct = streamEl.querySelector('.run-text-current');
+      if (ct) ct.classList.remove('run-text-current');
+      div.className += ' run-event-station';
+      div.textContent = `\u{1F4CD} Station ${data.index}/${data.total}: ${data.name} [${data.agentName}]`;
+      break;
+    }
+    case 'text': {
+      let textEl = streamEl.querySelector('.run-text-current');
+      if (!textEl) {
+        textEl = document.createElement('div');
+        textEl.className = 'run-event run-event-text run-text-current';
+        streamEl.appendChild(textEl);
+      }
+      textEl.textContent += data.content;
+      streamEl.scrollTop = streamEl.scrollHeight;
+      return;
+    }
+    case 'tool_call': {
+      const ct2 = streamEl.querySelector('.run-text-current');
+      if (ct2) ct2.classList.remove('run-text-current');
+      div.className += ' run-event-tool';
+      div.textContent = `\u{1F527} ${data.name}`;
+      break;
+    }
+    case 'station_complete': {
+      const ct3 = streamEl.querySelector('.run-text-current');
+      if (ct3) ct3.classList.remove('run-text-current');
+      div.className += ' run-event-complete';
+      div.textContent = `\u2705 ${data.name} complete`;
+      break;
+    }
+    case 'station_skipped':
+      div.innerHTML = `<span style="color:var(--yellow)">\u23ED Skipped: ${escapeHtml(data.name)}</span>`;
+      break;
+    case 'station_retry':
+      div.innerHTML = `<span style="color:var(--yellow)">\u{1F504} Retry ${data.attempt}/${data.maxRetry}: ${escapeHtml(data.name)}</span>`;
+      break;
+    case 'run_complete': {
+      div.className += ' run-event-complete';
+      const dur = data.duration ? `${(data.duration / 1000).toFixed(1)}s` : '';
+      const tok = data.totalTokens ? `${(data.totalTokens.inputTokens + data.totalTokens.outputTokens).toLocaleString()} tokens` : '';
+      const cost = data.cost ? `~$${data.cost.usd.toFixed(4)}` : '';
+      div.textContent = `\u2705 Complete! ${dur} \u00B7 ${tok}${cost ? ` \u00B7 ${cost}` : ''}`;
+      break;
+    }
+    case 'error':
+      div.className += ' run-event-error';
+      div.textContent = `\u274C ${data.content}`;
+      break;
+    default:
+      return;
+  }
+  streamEl.appendChild(div);
+  streamEl.scrollTop = streamEl.scrollHeight;
+}
+
+// ─── Run History ─────────────────────────────────────────────
+async function loadHistory() {
+  const listEl = $('#history-list');
+  listEl.innerHTML = '<div style="padding:12px;color:var(--text-muted)">Loading...</div>';
+  try {
+    const data = await fetchJSON('/history');
+    state.historyRuns = data.runs || [];
+    renderHistoryList();
+  } catch {
+    listEl.innerHTML = '<div style="padding:12px;color:var(--red)">Failed to load</div>';
+  }
+}
+
+function renderHistoryList() {
+  const listEl = $('#history-list');
+  listEl.innerHTML = '';
+  if (state.historyRuns.length === 0) {
+    listEl.innerHTML = '<div style="padding:12px;color:var(--text-muted)">No run history yet</div>';
+    return;
+  }
+  for (const run of state.historyRuns) {
+    const item = document.createElement('div');
+    item.className = 'history-item';
+    const date = run.startTime ? new Date(run.startTime).toLocaleString('zh-CN', { month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit' }) : '';
+    const tokens = run.totalTokens ? (run.totalTokens.inputTokens + run.totalTokens.outputTokens).toLocaleString() : '0';
+    item.innerHTML = `
+      <div class="history-item-line">${escapeHtml(run.lineName || run.file)}</div>
+      <div class="history-item-meta">${date} \u00B7 ${run.stationCount || 0} stations \u00B7 ${tokens} tokens</div>`;
+    item.addEventListener('click', function() { loadHistoryDetail(run.file, this); });
+    listEl.appendChild(item);
+  }
+}
+
+async function loadHistoryDetail(fileId, el) {
+  const titleEl = $('#history-detail-title');
+  const contentEl = $('#history-detail-content');
+  titleEl.textContent = 'Loading...';
+  contentEl.innerHTML = '<p class="text-muted">Loading...</p>';
+
+  document.querySelectorAll('.history-item').forEach(e => e.classList.remove('active'));
+  if (el) el.classList.add('active');
+
+  try {
+    const data = await fetchJSON(`/history/${fileId}`);
+    titleEl.textContent = data.lineName || fileId;
+
+    const startDate = data.startTime ? new Date(data.startTime).toLocaleString('zh-CN') : '';
+    const durationMs = data.startTime && data.endTime ? new Date(data.endTime) - new Date(data.startTime) : 0;
+    const duration = durationMs < 60000 ? `${(durationMs / 1000).toFixed(0)}s` : `${(durationMs / 60000).toFixed(1)}min`;
+    const totalTokens = data.totalTokens ? (data.totalTokens.inputTokens + data.totalTokens.outputTokens).toLocaleString() : '0';
+
+    let html = '<div class="detail-meta">';
+    html += `<div class="detail-meta-row"><span>Time</span><span>${escapeHtml(startDate)}</span></div>`;
+    html += `<div class="detail-meta-row"><span>Duration</span><span>${duration}</span></div>`;
+    html += `<div class="detail-meta-row"><span>Model</span><span>${escapeHtml(data.model || '')}</span></div>`;
+    html += `<div class="detail-meta-row"><span>Tokens</span><span>${totalTokens}</span></div>`;
+    if (data.userInputs) {
+      for (const [key, val] of Object.entries(data.userInputs)) {
+        html += `<div class="detail-meta-row"><span>${escapeHtml(key)}</span><span>${escapeHtml(String(val))}</span></div>`;
+      }
+    }
+    html += '</div>';
+
+    if (data.stations && data.stations.length > 0) {
+      for (const s of data.stations) {
+        const sT = s.tokens ? (s.tokens.inputTokens + s.tokens.outputTokens).toLocaleString() : '0';
+        html += '<div class="detail-station">';
+        html += `<div class="detail-station-header">\u{1F4CD} Station ${s.index}: ${escapeHtml(s.name)} [${escapeHtml(s.agent)}] \u00B7 ${sT} tokens</div>`;
+        if (s.output) {
+          html += `<div class="detail-station-output">${renderMarkdown(s.output.substring(0, 500))}${s.output.length > 500 ? '<p><em>... (truncated)</em></p>' : ''}</div>`;
+        }
+        html += '</div>';
+      }
+    }
+    contentEl.innerHTML = html;
+  } catch (err) {
+    contentEl.innerHTML = `<p style="color:var(--red)">Failed to load: ${escapeHtml(String(err))}</p>`;
+  }
+}
+
+// ─── Refresh Controls ────────────────────────────────────────
+function refreshCurrentTab() {
+  const btn = $('#btn-refresh');
+  btn.classList.add('spinning');
+  setTimeout(() => btn.classList.remove('spinning'), 600);
+
+  switch (state.activeTab) {
+    case 'overview': loadOverview(); break;
+    case 'lines': loadLines(); break;
+    case 'history': loadHistory(); break;
+    case 'settings': loadSettings(); break;
+  }
+}
+
+$('#btn-refresh').addEventListener('click', refreshCurrentTab);
+
+// Keyboard shortcut: R to refresh
+document.addEventListener('keydown', (e) => {
+  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+  if (e.key === 'r' || e.key === 'R') refreshCurrentTab();
+});
+
+// ─── Initialize ──────────────────────────────────────────────
+async function init() {
+  await Promise.all([loadOverview(), checkConnection()]);
+
+  // Auto-refresh every 10s when on Overview
+  state.refreshTimer = setInterval(() => {
+    if (state.activeTab === 'overview') loadOverview();
+    checkConnection();
+  }, REFRESH_INTERVAL);
+}
+
+init();