@citeark/agent 0.3.20

package/src/dashboard/static/dashboard.js

@@ -0,0 +1,560 @@
+const state = {
+  data: null,
+  selectedId: null,
+  filter: "all",
+  loading: false,
+};
+
+const statusLabels = {
+  reproduced: "已复现",
+  approximately_reproduced: "近似复现",
+  completed: "已完成",
+  running: "运行中",
+  prepared: "已准备",
+  failed: "失败",
+  cancelled: "已取消",
+  inconclusive: "未定论",
+  not_reproduced: "未复现",
+  pending: "等待中",
+  skipped: "已跳过",
+};
+
+const elements = {
+  connection: document.querySelector(".connection"),
+  connectionLabel: document.querySelector("#connection-label"),
+  refresh: document.querySelector("#refresh-button"),
+  updatedAt: document.querySelector("#updated-at"),
+  totalRuns: document.querySelector("#total-runs"),
+  runningRuns: document.querySelector("#running-runs"),
+  decisiveRate: document.querySelector("#decisive-rate"),
+  reproducedRuns: document.querySelector("#reproduced-runs"),
+  totalDuration: document.querySelector("#total-duration"),
+  totalTokens: document.querySelector("#total-tokens"),
+  totalCost: document.querySelector("#total-cost"),
+  runCount: document.querySelector("#run-count"),
+  filters: document.querySelector("#filters"),
+  runList: document.querySelector("#run-list"),
+  detail: document.querySelector("#detail-panel"),
+};
+
+async function refresh() {
+  if (state.loading) return;
+  state.loading = true;
+  elements.refresh.disabled = true;
+  try {
+    const response = await fetch("/api/pipelines", { cache: "no-store" });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    state.data = await response.json();
+    if (!state.selectedId || !state.data.pipelines.some((item) => item.id === state.selectedId)) {
+      state.selectedId = state.data.pipelines[0]?.id ?? null;
+    }
+    setConnection(true);
+    render();
+  } catch (error) {
+    setConnection(false);
+    if (!state.data) {
+      elements.detail.innerHTML = `<div class="empty-state"><div class="empty-symbol">!</div><h2>无法读取流水线</h2><p>${escapeHtml(error.message)}。仪表盘会继续自动重试。</p></div>`;
+    }
+  } finally {
+    state.loading = false;
+    elements.refresh.disabled = false;
+  }
+}
+
+function render() {
+  renderSummary();
+  renderRunList();
+  renderDetail();
+  elements.updatedAt.textContent = `最近同步 ${formatDateTime(state.data.generatedAt)}`;
+}
+
+function renderSummary() {
+  const totals = state.data.totals;
+  elements.totalRuns.textContent = formatNumber(totals.runs);
+  elements.runningRuns.textContent = totals.running
+    ? `${totals.running} 个运行中 · ${totals.runningActive} 个活跃 · ${totals.attentionRequired} 个需关注`
+    : `${totals.completed} 个已结束 · ${totals.failed} 个失败`;
+  elements.decisiveRate.textContent = `${totals.decisiveRate}%`;
+  elements.reproducedRuns.textContent = `${totals.decisive}/${totals.assessed} 个已评估结果形成结论 · ${totals.reproduced} 个复现 · ${totals.approximatelyReproduced ?? 0} 个近似复现 · ${totals.inconclusive} 个无法判定`;
+  elements.totalDuration.textContent = formatDuration(totals.durationMs);
+  elements.totalTokens.textContent = usageTokenValue(totals.usage);
+  elements.totalCost.textContent = pricingLabel(totals.usage.pricing);
+}
+
+function renderRunList() {
+  const pipelines = filteredPipelines();
+  elements.runCount.textContent = String(pipelines.length);
+  if (!pipelines.length) {
+    elements.runList.innerHTML = '<div class="empty-list">当前筛选条件下没有运行记录</div>';
+    return;
+  }
+  elements.runList.innerHTML = pipelines.map((pipeline) => {
+    const status = displayStatus(pipeline);
+    const activity = pipeline.activity ?? {};
+    return `
+      <button class="run-item ${pipeline.id === state.selectedId ? "selected" : ""}" type="button" data-run-id="${escapeHtml(pipeline.id)}">
+        <div class="run-item-top">
+          <span class="status-badge status-${escapeHtml(status)}">${statusLabel(status)}</span>
+          <span class="run-id">${escapeHtml(shortId(pipeline.id))}</span>
+        </div>
+        <div class="run-title">${escapeHtml(pipeline.title)}</div>
+        ${pipeline.status === "running" ? `<div class="run-live health-${escapeHtml(activity.health ?? "quiet")}"><i></i><span>${escapeHtml(activity.healthLabel ?? "运行中")} · ${formatAge(activity.activityAgeMs)}有活动</span></div><div class="run-current">${escapeHtml(activity.currentAction ?? "等待执行事件")}</div>` : ""}
+        <div class="run-item-meta">
+          <span>${formatDuration(pipeline.durationMs)}</span>
+          <span>${escapeHtml(usageTokenLabel(pipeline.usage))}</span>
+          <span class="mini-progress"><i style="width:${safePercent(pipeline.progressPercent)}%"></i></span>
+        </div>
+      </button>`;
+  }).join("");
+}
+
+function renderDetail() {
+  const pipeline = state.data.pipelines.find((item) => item.id === state.selectedId);
+  if (!pipeline) {
+    elements.detail.innerHTML = '<div class="empty-state"><div class="empty-symbol">⌁</div><h2>还没有流水线记录</h2><p>启动一次 CiteArk Agent 全流水线后，阶段、Token、结果与产物会自动显示在这里。</p></div>';
+    return;
+  }
+
+  const status = displayStatus(pipeline);
+  const comparison = pipeline.comparison;
+  const usage = pipeline.usage;
+  const usageReported = usage.availability?.status !== "unavailable";
+  const tokenInput = Number(usage.inputTokens ?? 0) + Number(usage.cacheCreationInputTokens ?? 0);
+  const tokenCache = Number(usage.cacheReadInputTokens ?? 0);
+  const tokenOutput = Number(usage.outputTokens ?? 0);
+  const tokenTotal = Math.max(1, tokenInput + tokenCache + tokenOutput);
+  const completedChecks = pipeline.checks.filter((check) => check.status === "passed").length;
+
+  elements.detail.innerHTML = `
+    <div class="detail-header">
+      <div>
+        <div class="detail-title-row">
+          <span class="status-badge status-${escapeHtml(status)}">${statusLabel(status)}</span>
+          <span class="run-id">${escapeHtml(pipeline.id)}</span>
+        </div>
+        <h2>${escapeHtml(pipeline.title)}</h2>
+        <p class="detail-claim">${escapeHtml(pipeline.claim?.statement ?? pipeline.experiment?.title ?? "研究对象正在结构化")}</p>
+      </div>
+      <div class="progress-ring" style="--progress:${safePercent(pipeline.progressPercent)}" aria-label="完成度 ${safePercent(pipeline.progressPercent)}%">
+        <strong>${safePercent(pipeline.progressPercent)}%</strong><span>完成度</span>
+      </div>
+    </div>
+
+    ${renderLiveStatus(pipeline)}
+
+    <section class="pipeline-section">
+      <div class="section-heading">
+        <div><h3>全流程进度</h3><p>${formatDateTime(pipeline.createdAt)} 开始 · 累计 ${formatDuration(pipeline.durationMs)}</p></div>
+        <span class="run-id">当前阶段 ${escapeHtml(stageLabel(pipeline.phase))}</span>
+      </div>
+      <div class="pipeline-track">${pipeline.stages.map(renderStage).join("")}</div>
+    </section>
+
+    ${pipeline.error ? `<div class="error-box"><strong>失败原因：</strong>${escapeHtml(pipeline.error)}</div>` : ""}
+
+    <div class="detail-grid">
+      ${renderVerifiedConclusion(pipeline.verifiedConclusion)}
+
+      ${renderComparisonCard(comparison, pipeline.metric, pipeline.verificationStatus)}
+
+      <article class="data-card">
+        <div class="card-title"><h3>Token 消耗</h3><span>${usageReported ? `${usage.turns ?? 0} 个 Agent 回合 · ${pricingLabel(usage.pricing)}` : "Agent CLI 未返回用量"}</span></div>
+        <div class="token-total"><strong>${usageReported ? compactNumber(usage.totalTokens) : "—"}</strong><span>${usageReported ? "上下文处理量" : "暂不可统计"}</span></div>
+        <div class="token-bar" aria-label="Token 构成">
+          <i style="width:${(tokenInput / tokenTotal) * 100}%"></i>
+          <i style="width:${(tokenCache / tokenTotal) * 100}%"></i>
+          <i style="width:${(tokenOutput / tokenTotal) * 100}%"></i>
+        </div>
+        ${usageReported ? `<div class="token-legend">
+          <span>输入<strong>${compactNumber(tokenInput)}</strong></span>
+          <span>缓存读取<strong>${compactNumber(tokenCache)}</strong></span>
+          <span>输出<strong>${compactNumber(tokenOutput)}</strong></span>
+        </div>` : `<p class="muted">${escapeHtml(usage.availability?.reason ?? "未取得 Token 明细")}</p>`}
+      </article>
+
+      <article class="data-card">
+        <div class="card-title"><h3>Agent 与执行环境</h3><span>${escapeHtml(pipeline.environment.sandbox ?? "环境待分配")}</span></div>
+        <dl class="definition-grid">
+          <div><dt>运行时</dt><dd>${escapeHtml(pipeline.agent.runtime ?? "—")}</dd></div>
+          <div><dt>模型提供方</dt><dd>${escapeHtml(pipeline.agent.provider ?? "—")}</dd></div>
+          <div><dt>主模型</dt><dd>${escapeHtml(pipeline.agent.model ?? "—")}</dd></div>
+          <div><dt>子 Agent 模型</dt><dd>${escapeHtml(pipeline.agent.subagentModel ?? "—")}</dd></div>
+          <div><dt>资源</dt><dd>${resourceLabel(pipeline.environment)}</dd></div>
+          <div><dt>镜像</dt><dd class="hash" title="${escapeHtml(pipeline.environment.image ?? "")}">${escapeHtml(pipeline.environment.image ?? "—")}</dd></div>
+          ${pipeline.environment.cloud ? `<div><dt>云资源</dt><dd>${escapeHtml(cloudResourceLabel(pipeline.environment.cloud))}</dd></div>` : ""}
+          ${pipeline.environment.cloud ? `<div><dt>临时资源</dt><dd>${escapeHtml(cloudCleanupLabel(pipeline.environment.cloud.temporaryResources))}</dd></div>` : ""}
+          ${pipeline.environment.cloud ? `<div><dt>云计算用时</dt><dd>${formatDuration(Number(pipeline.environment.cloud.computeUsage?.jobRunSeconds ?? 0) * 1000)}</dd></div>` : ""}
+          ${pipeline.environment.cloud ? `<div><dt>云费用估算</dt><dd>${pipeline.environment.cloud.computeUsage?.estimatedCostUsd == null ? "等待账单/目录单价" : `$${Number(pipeline.environment.cloud.computeUsage.estimatedCostUsd).toFixed(4)}`}</dd></div>` : ""}
+          ${pipeline.resilience ? `<div><dt>断点续跑</dt><dd>${escapeHtml(resilienceLabel(pipeline.resilience))}</dd></div>` : ""}
+          ${pipeline.resilience?.latestCheckpoint ? `<div><dt>最近检查点</dt><dd>${escapeHtml(checkpointLabel(pipeline.resilience.latestCheckpoint))}</dd></div>` : ""}
+        </dl>
+      </article>
+
+      <article class="data-card">
+        <div class="card-title"><h3>计算调度决策</h3><span>${escapeHtml(computeClassLabel(pipeline.compute?.classification))}</span></div>
+        ${renderComputeDecision(pipeline.compute)}
+      </article>
+
+      <article class="data-card">
+        <div class="card-title"><h3>可验证成果</h3><span>${formatBytes(pipeline.artifacts.totalBytes)}</span></div>
+        <div class="artifact-summary">
+          <div><div class="artifact-number">${pipeline.artifacts.fileCount}</div><p>CAP 内固定文件</p></div>
+          <div class="artifact-flags">
+            ${pipeline.artifacts.attestation ? '<span class="artifact-flag">执行签名</span>' : ""}
+            ${pipeline.artifacts.attestation ? '<span class="artifact-flag">CAP 2.0 签名证明</span>' : ""}
+            ${pipeline.artifacts.researchCard ? '<span class="artifact-flag">结构化研究卡片</span>' : ""}
+            ${pipeline.artifacts.verifiedConclusion ? '<span class="artifact-flag">论文级验证结论</span>' : ""}
+            ${pipeline.artifacts.readme ? '<span class="artifact-flag">README 快照</span>' : ""}
+            ${pipeline.artifacts.archive ? '<span class="artifact-flag">.cap 已生成</span>' : ""}
+            ${pipeline.integrityStatus === "passed" ? '<span class="artifact-flag">完整性通过</span>' : ""}
+          </div>
+        </div>
+        <dl class="definition-grid">
+          <div><dt>Artifact Digest</dt><dd class="hash" title="${escapeHtml(pipeline.artifacts.artifactDigest ?? "")}">${escapeHtml(shortHash(pipeline.artifacts.artifactDigest))}</dd></div>
+          <div><dt>发布状态</dt><dd>${escapeHtml(publicationLabel(pipeline.publicationStatus))}</dd></div>
+          <div><dt>证据解析器</dt><dd>${escapeHtml(pipeline.parser ? `${pipeline.parser.id}@${pipeline.parser.version}` : "—")}</dd></div>
+          <div><dt>原始证据</dt><dd>${escapeHtml(pipeline.sourceEvidence?.path ?? "—")}</dd></div>
+          <div><dt>单文件大小</dt><dd>${pipeline.artifacts.archive ? formatBytes(pipeline.artifacts.archive.size) : "—"}</dd></div>
+          <div><dt>单文件 SHA-256</dt><dd class="hash" title="${escapeHtml(pipeline.artifacts.archive?.sha256 ?? "")}">${escapeHtml(shortHash(pipeline.artifacts.archive?.sha256))}</dd></div>
+          <div><dt>研究卡片摘要</dt><dd class="hash" title="${escapeHtml(pipeline.researchCard?.cardDigest ?? "")}">${escapeHtml(shortHash(pipeline.researchCard?.cardDigest))}</dd></div>
+        </dl>
+      </article>
+
+      <article class="data-card wide">
+        <div class="card-title"><h3>执行尝试</h3><span>${pipeline.attempts.length} 次记录</span></div>
+        ${renderAttempts(pipeline.attempts)}
+      </article>
+
+      <article class="data-card wide">
+        <div class="card-title"><h3>完整性检查</h3><span>${completedChecks}/${pipeline.checks.length} 项通过</span></div>
+        <div class="checks-row">${pipeline.checks.length ? pipeline.checks.map((check) => `<span class="check-chip ${escapeHtml(check.status)}" title="${escapeHtml(check.description ?? "")}">${escapeHtml(checkLabel(check.name))}</span>`).join("") : '<span class="check-chip">尚未进入验证阶段</span>'}</div>
+      </article>
+    </div>`;
+}
+
+function renderLiveStatus(pipeline) {
+  if (pipeline.status !== "running") return "";
+  const activity = pipeline.activity ?? {};
+  const events = activity.events ?? [];
+  return `<section class="live-status health-${escapeHtml(activity.health ?? "quiet")}">
+    <div class="live-status-heading">
+      <div>
+        <span class="live-eyebrow">实时运行状态</span>
+        <h3>${escapeHtml(activity.healthLabel ?? "运行中")}</h3>
+      </div>
+      <span class="live-refresh">每 ${Number(activity.refreshIntervalSeconds ?? 4)} 秒检查一次</span>
+    </div>
+    <div class="live-current">
+      <span>当前动作</span>
+      <strong>${escapeHtml(activity.currentAction ?? "等待 Agent 输出")}</strong>
+      <span class="live-reason">${escapeHtml(activity.reason ?? "正在等待新的可观测事件")}</span>
+    </div>
+    ${renderResilienceStatus(pipeline.resilience)}
+    <div class="live-metrics">
+      <div><span>控制器心跳</span><strong>${activity.lastHeartbeatAt ? `${formatAge(activity.heartbeatAgeMs)}前` : "缺少记录"}</strong></div>
+      <div><span>最近有效活动</span><strong>${activity.lastActivityAt ? `${formatAge(activity.activityAgeMs)}前` : "尚无记录"}</strong></div>
+      <div><span>最近输出或日志</span><strong>${activity.lastOutputAt ? `${formatAge(activity.outputAgeMs)}前` : "尚无输出"}</strong></div>
+      <div><span>当前阶段已运行</span><strong>${activity.currentStageStartedAt ? formatDuration(elapsedSince(activity.currentStageStartedAt)) : "—"}</strong></div>
+    </div>
+    <div class="activity-timeline">
+      <div class="activity-title"><strong>最近活动</strong><span>心跳只表示控制器存活；这里的事件表示 Agent、命令或日志实际发生了变化</span></div>
+      ${events.length ? `<ol>${events.slice(0, 8).map(renderActivityEvent).join("")}</ol>` : '<div class="empty-list">尚未捕获到 Agent 活动，等待下一次刷新</div>'}
+    </div>
+  </section>`;
+}
+
+function renderActivityEvent(event) {
+  const time = event.at
+    ? formatDateTime(event.at)
+    : event.order != null
+      ? `旧 trace #${Number(event.order) + 1}`
+      : event.observedAt
+        ? `文件更新 ${formatDateTime(event.observedAt)}`
+        : "未记录时间";
+  return `<li class="level-${escapeHtml(event.level ?? "info")}">
+    <i></i>
+    <div><strong>${escapeHtml(event.message)}</strong><span>${escapeHtml(time)} · ${activitySourceLabel(event.source)}</span></div>
+  </li>`;
+}
+
+function renderResilienceStatus(resilience) {
+  if (!resilience?.enabled) return "";
+  const attempt = resilience.infrastructureAttempt ?? 1;
+  const limit = resilience.infrastructureAttemptLimit ?? "—";
+  const checkpoint = resilience.latestCheckpoint;
+  return `<div class="resilience-status">
+    <div><span>基础设施执行</span><strong>第 ${attempt}/${limit} 次</strong></div>
+    <div><span>中断恢复</span><strong>${Number(resilience.resumeCount ?? 0)} 次</strong></div>
+    <div><span>关键检查点</span><strong>每 ${Number(resilience.criticalIntervalSeconds ?? 0)} 秒</strong></div>
+    <div><span>最近持久化</span><strong>${checkpoint?.createdAt ? formatDateTime(checkpoint.createdAt) : "等待首个检查点"}</strong></div>
+  </div>`;
+}
+
+function renderComputeDecision(compute) {
+  if (!compute) return '<div class="empty-list">等待计算调度记录</div>';
+  const profile = compute.selectedProfile ?? {};
+  const estimate = compute.estimate ?? {};
+  return `<dl class="definition-grid">
+    <div><dt>资源分类</dt><dd>${escapeHtml(computeClassLabel(compute.classification))}</dd></div>
+    <div><dt>选中规格</dt><dd>${escapeHtml(profile.label ?? profile.id ?? compute.profileId ?? "—")}</dd></div>
+    <div><dt>执行器</dt><dd>${escapeHtml(profile.executor ?? compute.executor ?? "—")}</dd></div>
+    <div><dt>加速器</dt><dd>${escapeHtml(acceleratorLabel(profile.accelerator ?? compute.accelerator))}</dd></div>
+    <div><dt>预计时长</dt><dd>${estimate.durationMinutes == null ? "未知" : `${escapeHtml(estimate.durationMinutes)} 分钟`}</dd></div>
+    <div><dt>预计计算费用</dt><dd>${estimate.costUsd == null && compute.estimatedCostUsd == null ? "未知" : `$${Number(estimate.costUsd ?? compute.estimatedCostUsd).toFixed(4)}`}</dd></div>
+    <div class="span-two"><dt>决策理由</dt><dd>${escapeHtml(compute.rationale ?? "未记录")}</dd></div>
+    <div class="span-two"><dt>决策摘要</dt><dd class="hash" title="${escapeHtml(compute.decisionDigest ?? "")}">${escapeHtml(shortHash(compute.decisionDigest))}</dd></div>
+  </dl>`;
+}
+
+function renderStage(stage) {
+  const marker = stage.status === "completed" || stage.status === "skipped"
+    ? "✓"
+    : stage.status === "failed"
+      ? "×"
+      : stage.status === "cancelled"
+        ? "−"
+        : "";
+  const timing = stage.durationMs != null
+    ? formatDuration(stage.durationMs)
+    : stage.status === "running"
+      ? "正在执行"
+      : statusLabel(stage.status);
+  return `<div class="stage ${escapeHtml(stage.status)}"><span class="stage-dot">${marker}</span><strong>${escapeHtml(stage.label)}</strong><small>${escapeHtml(timing)}</small></div>`;
+}
+
+function renderComparisonCard(comparison, metric, verificationStatus) {
+  if (!comparison) {
+    return `<article class="data-card"><div class="card-title"><h3>复现结果</h3><span>${statusLabel(verificationStatus ?? "pending")}</span></div><div class="empty-list">等待证据解析和 Claim 验证</div></article>`;
+  }
+  return `<article class="data-card">
+    <div class="card-title"><h3>论文结果 vs. 实际运行</h3><span>${escapeHtml(comparison.metric ?? metric?.metric ?? "指标")}</span></div>
+    <div class="comparison">
+      <div><div class="metric-value">${formatMetric(comparison.reportedValue, comparison.unit)}</div><span class="metric-label">论文报告</span></div>
+      <div class="comparison-arrow">→</div>
+      <div><div class="metric-value observed">${formatMetric(comparison.observedValue, comparison.unit)}</div><span class="metric-label">Agent 实测</span></div>
+    </div>
+    <p class="comparison-note">绝对差值 <strong>${formatMetric(comparison.absoluteDifference, comparison.unit)}</strong>，参考容差 <strong>±${formatMetric(comparison.tolerance, comparison.unit)}</strong>。科学状态由整组证据与协议条件的独立评估决定：${statusLabel(verificationStatus ?? "pending")}。</p>
+  </article>`;
+}
+
+function renderVerifiedConclusion(conclusion) {
+  if (!conclusion?.text) return "";
+  const coverage = conclusion.coverage ?? {};
+  return `<article class="data-card wide verified-conclusion-card">
+    <div class="card-title"><h3>论文级验证结论</h3><span>${escapeHtml(conclusionStatusLabel(conclusion.overallStatus))}</span></div>
+    <p class="verified-conclusion-text">${escapeHtml(conclusion.text)}</p>
+    <p class="comparison-note">覆盖 ${formatNumber(coverage.evaluatedClaims ?? 0)}/${formatNumber(coverage.structuredClaims ?? 0)} 项结构化主张 · ${formatNumber(coverage.reproduced ?? 0)} 项已复现 · ${formatNumber(coverage.approximatelyReproduced ?? 0)} 项近似复现 · ${formatNumber(coverage.notReproduced ?? 0)} 项未复现 · ${formatNumber(coverage.inconclusive ?? 0)} 项未定论</p>
+  </article>`;
+}
+
+function conclusionStatusLabel(value) {
+  return {
+    tested_claims_supported: "受测主张支持",
+    supported: "受测主张支持",
+    partially_supported: "部分支持",
+    not_supported: "未获支持",
+    inconclusive: "证据不足",
+  }[value] ?? "等待汇总";
+}
+
+function renderAttempts(attempts) {
+  if (!attempts.length) return '<div class="empty-list">Agent 尚未开始执行</div>';
+  return `<table class="attempt-table"><thead><tr><th>阶段</th><th>科学尝试</th><th>基础设施</th><th>执行位置</th><th>开始时间</th><th>耗时</th><th>退出状态</th></tr></thead><tbody>${attempts.map((attempt) => `<tr><td>${escapeHtml(attempt.stage)}</td><td>#${attempt.attempt}</td><td>${attempt.infrastructureAttempt ? `第 ${attempt.infrastructureAttempt}/${attempt.infrastructureAttemptLimit ?? "—"} 次${attempt.resumeCount ? ` · 恢复 ${attempt.resumeCount}` : ""}` : "—"}</td><td>${escapeHtml(attempt.batchState ? `GCP ${attempt.batchState}` : attempt.executor ?? "本机")}</td><td>${formatDateTime(attempt.startedAt)}</td><td>${formatDuration(attempt.durationMs)}</td><td class="${attempt.exitCode === 0 && !attempt.timedOut ? "exit-ok" : attempt.exitCode == null && !attempt.timedOut ? "" : "exit-fail"}">${attempt.timedOut ? "超时" : attempt.exitCode == null ? "运行中" : `code ${attempt.exitCode}`}</td></tr>`).join("")}</tbody></table>`;
+}
+
+function filteredPipelines() {
+  const pipelines = state.data?.pipelines ?? [];
+  if (state.filter === "all") return pipelines;
+  if (state.filter === "reproduced") return pipelines.filter((item) => new Set(["reproduced", "approximately_reproduced"]).has(item.verificationStatus));
+  if (state.filter === "failed") return pipelines.filter((item) => item.status === "failed" || item.verificationStatus === "not_reproduced");
+  return pipelines.filter((item) => item.status === state.filter);
+}
+
+function displayStatus(pipeline) {
+  if (["running", "prepared", "failed", "cancelled"].includes(pipeline.status)) return pipeline.status;
+  return pipeline.verificationStatus ?? pipeline.status;
+}
+
+function setConnection(online) {
+  elements.connection.classList.toggle("online", online);
+  elements.connection.classList.toggle("offline", !online);
+  elements.connectionLabel.textContent = online ? "实时同步中 · 每 4 秒刷新" : "连接中断 · 自动重试";
+}
+
+function stageLabel(value) {
+  const match = state.data?.pipelines.flatMap((pipeline) => pipeline.stages).find((stage) => stage.id === value);
+  return match?.label ?? (value === "completed" ? "全部完成" : value ?? "等待中");
+}
+
+function statusLabel(value) { return statusLabels[value] ?? value ?? "未知"; }
+function publicationLabel(value) { return value === "publishable" ? "可发布" : value === "draft" ? "草稿" : value ?? "—"; }
+function computeClassLabel(value) { return ({ "cpu-only": "仅 CPU", "gpu-optional": "GPU 可选", "gpu-required": "必须 GPU" })[value] ?? value ?? "尚未调度"; }
+function acceleratorLabel(value) { return value === "gpu" ? "GPU" : value === "cpu" ? "CPU" : value ?? "—"; }
+function pricingLabel(pricing) {
+  if (pricing?.currency === "USD" && Number(pricing.costUsd) > 0) {
+    return `Agent 报告 $${Number(pricing.costUsd).toFixed(2)}`;
+  }
+  if (!pricing || (!pricing.idleCny && !pricing.peakCny)) return "当前 API 未提供可核验费用";
+  return `官方价估算 ¥${Number(pricing.idleCny).toFixed(2)}–¥${Number(pricing.peakCny).toFixed(2)}`;
+}
+function shortId(value) { return value.length > 25 ? `${value.slice(0, 20)}…` : value; }
+function shortHash(value) { return value ? `${value.slice(0, 13)}…${value.slice(-8)}` : "—"; }
+function safePercent(value) { return Math.max(0, Math.min(100, Math.round(Number(value) || 0))); }
+
+function compactNumber(value) {
+  const number = Number(value ?? 0);
+  return new Intl.NumberFormat("zh-CN", { notation: number >= 10_000 ? "compact" : "standard", maximumFractionDigits: 1 }).format(number);
+}
+
+function usageTokenValue(usage) {
+  if (usage?.availability?.status === "unavailable") return "未取得";
+  const suffix = usage?.availability?.status === "partial" ? "+" : "";
+  return `${compactNumber(usage?.totalTokens)}${suffix}`;
+}
+
+function usageTokenLabel(usage) {
+  return usage?.availability?.status === "unavailable"
+    ? "Token 未取得"
+    : `${usageTokenValue(usage)} tokens`;
+}
+
+function formatNumber(value) { return new Intl.NumberFormat("zh-CN").format(Number(value ?? 0)); }
+
+function formatAge(value) {
+  if (value == null || !Number.isFinite(Number(value))) return "未知时间";
+  const seconds = Math.max(0, Math.round(Number(value) / 1000));
+  if (seconds < 5) return "刚刚";
+  if (seconds < 60) return `${seconds} 秒`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes} 分钟`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours} 小时 ${minutes % 60} 分钟`;
+  return `${Math.floor(hours / 24)} 天 ${hours % 24} 小时`;
+}
+
+function elapsedSince(value) {
+  const start = Date.parse(value);
+  const end = Date.parse(state.data?.generatedAt ?? new Date().toISOString());
+  return Number.isFinite(start) && Number.isFinite(end) ? Math.max(0, end - start) : null;
+}
+
+function activitySourceLabel(value) {
+  return value === "pipeline-monitor" ? "流水线事件" : value === "agent-trace" ? "Agent trace" : value ?? "执行记录";
+}
+
+function formatDuration(value) {
+  if (value == null || !Number.isFinite(Number(value))) return "—";
+  const seconds = Math.max(0, Math.round(Number(value) / 1000));
+  if (seconds < 60) return `${seconds} 秒`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes} 分 ${seconds % 60} 秒`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours} 小时 ${minutes % 60} 分`;
+}
+
+function formatDateTime(value) {
+  if (!value) return "—";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "—";
+  return new Intl.DateTimeFormat("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false }).format(date);
+}
+
+function formatMetric(value, unit) {
+  const number = Number(value);
+  if (!Number.isFinite(number)) return "—";
+  const formatted = new Intl.NumberFormat("zh-CN", { maximumFractionDigits: 3 }).format(number);
+  return unit === "percentage_points" ? `${formatted}%` : `${formatted} ${unit ?? ""}`.trim();
+}
+
+function formatBytes(value) {
+  const bytes = Number(value ?? 0);
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+}
+
+function resourceLabel(environment) {
+  const parts = [];
+  if (environment.cpus) parts.push(`${environment.cpus} CPU`);
+  if (environment.memoryGb) parts.push(`${environment.memoryGb} GB`);
+  if (environment.gpu && environment.gpu !== "none") parts.push(`GPU ${environment.gpu}`);
+  else parts.push("无 GPU");
+  return escapeHtml(parts.join(" · "));
+}
+
+function cloudResourceLabel(cloud) {
+  return [cloud.service === "batch" ? "GCP Batch" : cloud.service, cloud.region, cloud.machineType, cloud.provisioningModel]
+    .filter(Boolean)
+    .join(" · ");
+}
+
+function cloudCleanupLabel(resources) {
+  if (!resources?.cleanupPolicy?.deleteBatchJobs || !resources?.cleanupPolicy?.deleteStagingObjects) return "按调试参数保留";
+  if (resources.batchJobDeletionRequested === true && resources.stagingObjectsDeleted === true) return "清理请求已完成";
+  if (resources.batchJobDeletionRequested === false || resources.stagingObjectsDeleted === false) return "清理失败，需人工检查";
+  return "完成后自动清理";
+}
+
+function resilienceLabel(resilience) {
+  if (!resilience?.enabled) return "未启用";
+  return `已启用 · 关键 ${Number(resilience.criticalIntervalSeconds ?? 0)} 秒 · 完整 ${Number(resilience.fullIntervalSeconds ?? 0)} 秒`;
+}
+
+function checkpointLabel(checkpoint) {
+  const kind = checkpoint.kind === "full" ? "完整" : "关键";
+  return `${kind} · ${formatDateTime(checkpoint.createdAt)} · ${formatBytes(checkpoint.bytes)}`;
+}
+
+function checkLabel(value) {
+  const labels = {
+    run_record_present: "运行记录",
+    claim_binding: "Claim 绑定",
+    experiment_binding: "实验绑定",
+    contract_digest: "契约摘要",
+    evidence_digest: "证据摘要",
+    metric_binding: "指标绑定",
+    repository_commit: "仓库版本",
+    execution_succeeded: "执行成功",
+    no_scientific_change: "科学语义未改",
+    scientific_change_policy: "科学语义变更策略",
+    source_patch_accounted: "源码变更可追溯",
+    workspace_mutations_allowed: "工作区变更合规",
+    parser_evidence_declared: "解析证据声明",
+  };
+  if (labels[value]) return labels[value];
+  if (value?.startsWith("execution_record:")) return `记录 ${value.split(":")[1]}`;
+  if (value?.startsWith("command_fragment:")) return `命令 ${value.slice("command_fragment:".length)}`;
+  return value ?? "检查项";
+}
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+elements.runList.addEventListener("click", (event) => {
+  const button = event.target.closest("[data-run-id]");
+  if (!button) return;
+  state.selectedId = button.dataset.runId;
+  renderRunList();
+  renderDetail();
+});
+
+elements.filters.addEventListener("click", (event) => {
+  const button = event.target.closest("[data-filter]");
+  if (!button) return;
+  state.filter = button.dataset.filter;
+  for (const item of elements.filters.querySelectorAll(".filter")) item.classList.toggle("active", item === button);
+  const visible = filteredPipelines();
+  if (!visible.some((item) => item.id === state.selectedId)) state.selectedId = visible[0]?.id ?? state.data.pipelines[0]?.id ?? null;
+  renderRunList();
+  renderDetail();
+});
+
+elements.refresh.addEventListener("click", refresh);
+refresh();
+setInterval(refresh, 4_000);

package/src/dashboard/static/index.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light" />
+    <title>CiteArk Agent · 自主复现流水线</title>
+    <meta name="description" content="查看 CiteArk Agent 论文复现流水线的进度、心跳、当前动作、异常预警、耗时、Token、验证结果与 CAP 产物。" />
+    <link rel="stylesheet" href="/dashboard.css" />
+    <script src="/dashboard.js" defer></script>
+  </head>
+  <body>
+    <header class="topbar">
+      <div class="brand" aria-label="CiteArk Agent">
+        <span class="brand-mark" aria-hidden="true">C</span>
+        <span>CiteArk <strong>Agent</strong></span>
+      </div>
+      <div class="topbar-meta">
+        <span class="connection"><i></i><span id="connection-label">正在连接流水线</span></span>
+        <button class="icon-button" id="refresh-button" type="button" aria-label="立即刷新">↻</button>
+      </div>
+    </header>
+
+    <main class="page-shell">
+      <section class="page-heading">
+        <div>
+          <p class="eyebrow">AUTONOMOUS REPRODUCTION OBSERVATORY</p>
+          <h1>自主复现流水线</h1>
+          <p class="subtitle">从研究结构化到可验证产物，实时查看当前动作、心跳和异常预警。</p>
+        </div>
+        <div class="updated-at" id="updated-at">尚未同步</div>
+      </section>
+
+      <section class="summary-grid" aria-label="流水线总览">
+        <article class="summary-card">
+          <span class="summary-label">流水线</span>
+          <strong class="summary-value" id="total-runs">—</strong>
+          <span class="summary-note" id="running-runs">等待数据</span>
+        </article>
+        <article class="summary-card">
+          <span class="summary-label">严格判定率</span>
+          <strong class="summary-value mint" id="decisive-rate">—</strong>
+          <span class="summary-note" id="reproduced-runs">以已评估结果为分母</span>
+        </article>
+        <article class="summary-card">
+          <span class="summary-label">累计耗时</span>
+          <strong class="summary-value" id="total-duration">—</strong>
+          <span class="summary-note">所有可观测阶段</span>
+        </article>
+        <article class="summary-card accent-card">
+          <span class="summary-label">Token 总量</span>
+          <strong class="summary-value" id="total-tokens">—</strong>
+          <span class="summary-note" id="total-cost">模型费用待同步</span>
+        </article>
+      </section>
+
+      <section class="workspace">
+        <aside class="run-panel">
+          <div class="panel-heading">
+            <div>
+              <span class="section-kicker">运行队列</span>
+              <h2>复现任务</h2>
+            </div>
+            <span class="count-pill" id="run-count">0</span>
+          </div>
+          <div class="filters" id="filters" role="group" aria-label="筛选运行状态">
+            <button class="filter active" type="button" data-filter="all">全部</button>
+            <button class="filter" type="button" data-filter="running">运行中</button>
+            <button class="filter" type="button" data-filter="reproduced">已复现</button>
+            <button class="filter" type="button" data-filter="failed">失败</button>
+          </div>
+          <div class="run-list" id="run-list" aria-live="polite"></div>
+        </aside>
+
+        <section class="detail-panel" id="detail-panel" aria-live="polite">
+          <div class="empty-state">
+            <div class="empty-symbol">⌁</div>
+            <h2>正在读取流水线</h2>
+            <p>运行记录加载后，这里会显示当前动作、心跳、近期事件、阶段耗时与验证产物。</p>
+          </div>
+        </section>
+      </section>
+    </main>
+  </body>
+</html>