@citeark/agent 0.3.20

package/src/dashboard/server.mjs

@@ -0,0 +1,79 @@
+import { createServer } from "node:http";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { listPipelineDashboard } from "./data.mjs";
+
+const STATIC_ROOT = path.join(path.dirname(fileURLToPath(import.meta.url)), "static");
+const STATIC_FILES = new Map([
+  ["/", ["index.html", "text/html; charset=utf-8"]],
+  ["/dashboard.css", ["dashboard.css", "text/css; charset=utf-8"]],
+  ["/dashboard.js", ["dashboard.js", "text/javascript; charset=utf-8"]],
+]);
+
+export async function startDashboardServer({
+  pipelinesDirectory = ".citeark/pipelines",
+  host = "127.0.0.1",
+  port = 4310,
+} = {}) {
+  const root = path.resolve(pipelinesDirectory);
+  const server = createServer(async (request, response) => {
+    try {
+      const url = new URL(request.url ?? "/", `http://${request.headers.host ?? "localhost"}`);
+      if (request.method !== "GET") return sendJson(response, 405, { error: "仅支持 GET 请求" });
+
+      if (url.pathname === "/api/health") {
+        return sendJson(response, 200, { status: "ok", pipelinesDirectory: root });
+      }
+      if (url.pathname === "/api/pipelines") {
+        return sendJson(response, 200, await listPipelineDashboard(root));
+      }
+      if (url.pathname.startsWith("/api/pipelines/")) {
+        const id = decodeURIComponent(url.pathname.slice("/api/pipelines/".length));
+        const dashboard = await listPipelineDashboard(root);
+        const pipeline = dashboard.pipelines.find((item) => item.id === id);
+        return pipeline
+          ? sendJson(response, 200, pipeline)
+          : sendJson(response, 404, { error: "未找到该流水线" });
+      }
+
+      const asset = STATIC_FILES.get(url.pathname);
+      if (!asset) return sendJson(response, 404, { error: "页面不存在" });
+      const [filename, contentType] = asset;
+      const body = await readFile(path.join(STATIC_ROOT, filename));
+      response.writeHead(200, {
+        "content-type": contentType,
+        "cache-control": "no-store",
+        "x-content-type-options": "nosniff",
+        "content-security-policy": "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self'",
+      });
+      response.end(body);
+    } catch (error) {
+      sendJson(response, 500, { error: error instanceof Error ? error.message : String(error) });
+    }
+  });
+
+  await new Promise((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(Number(port), host, resolve);
+  });
+  const address = server.address();
+  const actualPort = typeof address === "object" && address ? address.port : Number(port);
+  return {
+    server,
+    host,
+    port: actualPort,
+    url: `http://${host}:${actualPort}`,
+    pipelinesDirectory: root,
+  };
+}
+
+function sendJson(response, status, value) {
+  response.writeHead(status, {
+    "content-type": "application/json; charset=utf-8",
+    "cache-control": "no-store",
+    "x-content-type-options": "nosniff",
+  });
+  response.end(`${JSON.stringify(value)}\n`);
+}

package/src/dashboard/static/dashboard.css

@@ -0,0 +1,366 @@
+:root {
+  --ink: #17201d;
+  --ink-soft: #52605b;
+  --muted: #7c8984;
+  --line: #dfe6e2;
+  --line-strong: #cbd7d1;
+  --paper: #f7f9f8;
+  --card: #ffffff;
+  --mint: #0b8f6a;
+  --mint-dark: #08664f;
+  --mint-soft: #e7f6f0;
+  --cyan: #1e9caf;
+  --cyan-soft: #e7f6f8;
+  --amber: #b87816;
+  --amber-soft: #fff5df;
+  --red: #c44d4d;
+  --red-soft: #fff0ef;
+  --shadow: 0 18px 50px rgba(22, 48, 38, 0.07);
+  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", sans-serif;
+  color: var(--ink);
+  background: var(--paper);
+  font-synthesis: none;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at 82% -15%, rgba(38, 177, 147, 0.12), transparent 30rem),
+    linear-gradient(180deg, #fbfcfb 0, var(--paper) 18rem);
+}
+
+button { font: inherit; }
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  height: 62px;
+  padding: 0 max(22px, calc((100vw - 1500px) / 2));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(210, 221, 216, 0.9);
+  background: rgba(255, 255, 255, 0.86);
+  backdrop-filter: blur(16px);
+}
+
+.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; letter-spacing: -0.02em; }
+.brand strong { color: var(--mint); font-weight: 680; }
+.brand-mark {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 9px 9px 9px 3px;
+  color: white;
+  background: var(--ink);
+  font: 700 16px/1 Georgia, serif;
+  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.12);
+}
+
+.topbar-meta { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 12px; }
+.connection { display: flex; align-items: center; gap: 7px; }
+.connection i { width: 7px; height: 7px; border-radius: 999px; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
+.connection.online i { background: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); }
+.connection.offline i { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
+.icon-button {
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: white;
+  color: var(--ink-soft);
+  cursor: pointer;
+  transition: .18s ease;
+}
+.icon-button:hover { border-color: var(--line-strong); color: var(--mint-dark); transform: rotate(20deg); }
+
+.page-shell { width: min(1500px, 100%); margin: 0 auto; padding: 34px 22px 50px; }
+.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
+.eyebrow, .section-kicker { margin: 0 0 8px; color: var(--mint); font-size: 10px; font-weight: 750; letter-spacing: .16em; }
+h1 { margin: 0; font-size: clamp(30px, 4vw, 45px); line-height: 1.08; letter-spacing: -.045em; font-weight: 680; }
+.subtitle { margin: 11px 0 0; color: var(--ink-soft); font-size: 14px; }
+.updated-at { color: var(--muted); font-size: 11px; white-space: nowrap; }
+
+.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 27px; }
+.summary-card {
+  min-height: 126px;
+  padding: 19px 20px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--line);
+  border-radius: 15px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 7px 28px rgba(31, 56, 47, 0.035);
+}
+.summary-card.accent-card { background: linear-gradient(140deg, #edf9f4, #fff); border-color: #cbe8dc; }
+.summary-label { color: var(--ink-soft); font-size: 11px; font-weight: 650; }
+.summary-value { margin-top: 10px; font-size: 29px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
+.summary-value.mint { color: var(--mint-dark); }
+.summary-note { margin-top: auto; color: var(--muted); font-size: 10px; }
+
+.workspace {
+  display: grid;
+  grid-template-columns: 340px minmax(0, 1fr);
+  min-height: 670px;
+  margin-top: 15px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 17px;
+  background: var(--card);
+  box-shadow: var(--shadow);
+}
+.run-panel { min-width: 0; border-right: 1px solid var(--line); background: #fbfcfb; }
+.panel-heading { padding: 20px 19px 13px; display: flex; align-items: center; justify-content: space-between; }
+.panel-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
+.count-pill { min-width: 28px; padding: 4px 8px; border-radius: 999px; background: var(--mint-soft); color: var(--mint-dark); text-align: center; font-size: 11px; font-weight: 700; }
+.filters { padding: 0 14px 14px; display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
+.filter { padding: 6px 9px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; white-space: nowrap; }
+.filter:hover { color: var(--ink); background: #eef2f0; }
+.filter.active { color: white; background: var(--ink); }
+.run-list { max-height: 890px; overflow-y: auto; }
+.run-item {
+  width: 100%;
+  padding: 17px 18px;
+  text-align: left;
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  border-left: 3px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  transition: .16s ease;
+}
+.run-item:hover { background: white; }
+.run-item.selected { border-left-color: var(--mint); background: white; box-shadow: 0 9px 25px rgba(25, 53, 43, .055); }
+.run-item-top, .run-item-meta { display: flex; align-items: center; gap: 8px; }
+.run-item-top { justify-content: space-between; }
+.run-title { margin: 9px 0 7px; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 650; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
+.run-id { overflow: hidden; color: var(--muted); font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
+.run-item-meta { justify-content: space-between; color: var(--muted); font-size: 9px; }
+.run-live { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 650; }
+.run-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px currentColor; opacity: .76; }
+.run-live.health-active { color: var(--mint-dark); }
+.run-live.health-active i { box-shadow: 0 0 0 3px var(--mint-soft); animation: heartbeat-pulse 2.2s ease-out infinite; }
+.run-live.health-quiet, .run-live.health-delayed { color: var(--amber); }
+.run-live.health-quiet i, .run-live.health-delayed i { box-shadow: 0 0 0 3px var(--amber-soft); }
+.run-live.health-stalled, .run-live.health-failed { color: var(--red); }
+.run-live.health-stalled i, .run-live.health-failed i { box-shadow: 0 0 0 3px var(--red-soft); }
+.run-current {
+  min-height: 2.8em;
+  margin: 6px 0 10px;
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--ink-soft);
+  font-size: 9px;
+  line-height: 1.4;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.mini-progress { width: 52px; height: 3px; overflow: hidden; border-radius: 999px; background: #e8eeeb; }
+.mini-progress i { display: block; height: 100%; border-radius: inherit; background: var(--mint); }
+
+@keyframes heartbeat-pulse {
+  0%, 100% { transform: scale(1); }
+  45% { transform: scale(1.22); }
+}
+
+.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; }
+.status-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
+.status-reproduced, .status-completed { color: var(--mint-dark); background: var(--mint-soft); }
+.status-running, .status-prepared { color: #167b91; background: var(--cyan-soft); }
+.status-failed, .status-not_reproduced { color: var(--red); background: var(--red-soft); }
+.status-cancelled { color: var(--ink-soft); background: #edf1ef; }
+.status-inconclusive { color: var(--amber); background: var(--amber-soft); }
+
+.detail-panel { min-width: 0; background: white; }
+.empty-state { min-height: 670px; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }
+.empty-symbol { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #cfe5db; border-radius: 18px; color: var(--mint); background: var(--mint-soft); font-size: 27px; }
+.empty-state h2 { margin: 16px 0 4px; font-size: 18px; }
+.empty-state p { max-width: 390px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
+
+.detail-header { padding: 25px 27px 22px; display: flex; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); }
+.detail-title-row { display: flex; align-items: center; gap: 9px; }
+.detail-header h2 { max-width: 820px; margin: 10px 0 7px; font-size: clamp(21px, 3vw, 28px); line-height: 1.22; letter-spacing: -.035em; }
+.detail-claim { max-width: 850px; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
+.progress-ring {
+  --progress: 0;
+  flex: 0 0 auto;
+  width: 78px;
+  height: 78px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: conic-gradient(var(--mint) calc(var(--progress) * 1%), #e9efec 0);
+  position: relative;
+}
+.progress-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: white; }
+.progress-ring strong, .progress-ring span { z-index: 1; }
+.progress-ring strong { font-size: 18px; font-variant-numeric: tabular-nums; }
+.progress-ring span { margin-top: 23px; position: absolute; color: var(--muted); font-size: 8px; }
+
+.live-status {
+  margin: 18px 27px 0;
+  padding: 18px 20px 19px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: #fbfdfc;
+}
+.live-status.health-active { border-color: #bfe3d5; background: linear-gradient(135deg, var(--mint-soft), #fbfdfc 62%); }
+.live-status.health-quiet, .live-status.health-delayed { border-color: #ecd8ae; background: linear-gradient(135deg, var(--amber-soft), #fffdf9 62%); }
+.live-status.health-stalled, .live-status.health-failed { border-color: #ebc1bd; background: linear-gradient(135deg, var(--red-soft), #fffafa 62%); }
+.live-status-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
+.live-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
+.live-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
+.health-active .live-eyebrow { color: var(--mint-dark); }
+.health-active .live-eyebrow::before { background: var(--mint); box-shadow: 0 0 0 4px rgba(11, 143, 106, .12); animation: heartbeat-pulse 2.2s ease-out infinite; }
+.health-quiet .live-eyebrow, .health-delayed .live-eyebrow { color: var(--amber); }
+.health-quiet .live-eyebrow::before, .health-delayed .live-eyebrow::before { background: var(--amber); box-shadow: 0 0 0 4px rgba(184, 120, 22, .12); }
+.health-stalled .live-eyebrow, .health-failed .live-eyebrow { color: var(--red); }
+.health-stalled .live-eyebrow::before, .health-failed .live-eyebrow::before { background: var(--red); box-shadow: 0 0 0 4px rgba(196, 77, 77, .12); }
+.live-status-heading h3 { margin: 6px 0 0; font-size: 17px; letter-spacing: -.02em; }
+.live-refresh { color: var(--muted); font-size: 9px; white-space: nowrap; }
+.live-current { margin: 14px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
+.live-current strong { color: var(--ink); }
+.live-reason { display: block; margin-top: 3px; color: var(--muted); }
+.live-metrics { margin-top: 15px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
+.live-metrics div { min-width: 0; padding: 10px 11px; border: 1px solid rgba(203, 215, 209, .72); border-radius: 9px; background: rgba(255, 255, 255, .72); }
+.live-metrics span { display: block; color: var(--muted); font-size: 8px; }
+.live-metrics strong { display: block; margin-top: 4px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.activity-timeline { margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(203, 215, 209, .75); }
+.resilience-status { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
+.resilience-status > div { padding: 9px 10px; border: 1px solid rgba(33, 146, 112, .2); border-radius: 8px; background: rgba(237, 250, 245, .8); }
+.resilience-status span, .resilience-status strong { display: block; }
+.resilience-status span { color: var(--muted); font-size: 8px; }
+.resilience-status strong { margin-top: 4px; color: var(--ink-soft); font-size: 9px; }
+.activity-title { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
+.activity-title strong { font-size: 10px; }
+.activity-title span { color: var(--muted); font-size: 8px; text-align: right; }
+.activity-timeline ol { margin: 11px 0 0; padding: 0; list-style: none; }
+.activity-timeline li { position: relative; display: grid; grid-template-columns: 69px minmax(0, 1fr); gap: 12px; padding: 0 0 11px 13px; color: var(--ink-soft); font-size: 9px; line-height: 1.48; }
+.activity-timeline li:last-child { padding-bottom: 0; }
+.activity-timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
+.activity-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 2px; top: 11px; bottom: 2px; width: 1px; background: var(--line-strong); }
+.activity-timeline li.level-warning::before { background: var(--amber); }
+.activity-timeline li.level-error::before { background: var(--red); }
+.activity-timeline time { color: var(--muted); font: 8px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.activity-timeline li strong, .activity-timeline li span { display: block; }
+.activity-timeline li strong { color: var(--ink-soft); font-weight: 620; }
+.activity-timeline li span { margin-top: 2px; color: var(--muted); font-size: 8px; }
+
+.pipeline-section { padding: 22px 27px 25px; border-bottom: 1px solid var(--line); }
+.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
+.section-heading h3 { margin: 0; font-size: 14px; letter-spacing: -.015em; }
+.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
+.pipeline-track { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
+.stage { position: relative; min-width: 0; padding: 0 13px 0 0; }
+.stage:not(:last-child)::after { content: ""; position: absolute; left: 22px; right: 0; top: 9px; height: 1px; background: var(--line-strong); }
+.stage.completed:not(:last-child)::after { background: var(--mint); }
+.stage-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--line-strong); border-radius: 50%; color: white; background: white; font-size: 10px; }
+.stage.completed .stage-dot, .stage.skipped .stage-dot { border-color: var(--mint); background: var(--mint); }
+.stage.running .stage-dot, .stage.prepared .stage-dot { border-color: var(--cyan); background: white; box-shadow: inset 0 0 0 4px var(--cyan-soft), 0 0 0 4px rgba(30,156,175,.08); }
+.stage.failed .stage-dot { border-color: var(--red); background: var(--red); }
+.stage.cancelled .stage-dot { border-color: var(--muted); background: var(--muted); }
+.stage strong { display: block; margin-top: 10px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.stage small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
+
+.detail-grid { padding: 17px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; background: #f9fbfa; }
+.data-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: white; }
+.data-card.wide { grid-column: 1 / -1; }
+.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
+.card-title h3 { margin: 0; font-size: 13px; }
+.card-title span { color: var(--muted); font-size: 9px; }
+.comparison { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center; gap: 12px; }
+.metric-value { font-size: clamp(24px, 4vw, 38px); line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
+.metric-value.observed { color: var(--mint-dark); }
+.metric-label { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; }
+.comparison-arrow { color: var(--line-strong); font-size: 26px; text-align: center; }
+.comparison-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
+.comparison-note strong { color: var(--ink); }
+.verified-conclusion-card { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); }
+.verified-conclusion-text { margin: 8px 0 14px; color: var(--ink); font-size: 15px; line-height: 1.8; }
+
+.token-total { display: flex; align-items: baseline; gap: 7px; }
+.token-total strong { font-size: 31px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
+.token-total span { color: var(--muted); font-size: 9px; }
+.token-bar { display: flex; height: 8px; margin: 14px 0 13px; overflow: hidden; border-radius: 999px; background: #edf1ef; }
+.token-bar i:nth-child(1) { background: var(--mint); }
+.token-bar i:nth-child(2) { background: #88cdbd; }
+.token-bar i:nth-child(3) { background: var(--cyan); }
+.token-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
+.token-legend span { color: var(--muted); font-size: 8px; }
+.token-legend strong { display: block; margin-top: 3px; color: var(--ink); font-size: 10px; font-variant-numeric: tabular-nums; }
+
+.definition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 18px; }
+.definition-grid div { min-width: 0; }
+.definition-grid dt { color: var(--muted); font-size: 8px; }
+.definition-grid dd { margin: 4px 0 0; overflow: hidden; font-size: 10px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
+.definition-grid .span-two { grid-column: 1 / -1; }
+.definition-grid .span-two dd { line-height: 1.55; white-space: normal; }
+.hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px !important; }
+
+.artifact-summary { display: flex; align-items: center; gap: 20px; margin-bottom: 15px; }
+.artifact-number { font-size: 31px; font-weight: 700; letter-spacing: -.04em; }
+.artifact-summary p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
+.artifact-flags { display: flex; flex-wrap: wrap; gap: 6px; }
+.artifact-flag { padding: 5px 7px; border: 1px solid #cce6db; border-radius: 7px; color: var(--mint-dark); background: var(--mint-soft); font-size: 8px; font-weight: 650; }
+
+.attempt-table { width: 100%; border-collapse: collapse; font-size: 9px; }
+.attempt-table th { padding: 0 8px 8px; color: var(--muted); font-weight: 550; text-align: left; }
+.attempt-table td { padding: 9px 8px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
+.exit-ok { color: var(--mint-dark); font-weight: 700; }
+.exit-fail { color: var(--red); font-weight: 700; }
+.checks-row { display: flex; flex-wrap: wrap; gap: 7px; }
+.check-chip { padding: 6px 8px; border-radius: 8px; color: var(--ink-soft); background: #f2f5f3; font-size: 8px; }
+.check-chip.passed { color: var(--mint-dark); background: var(--mint-soft); }
+.error-box { margin: 0 17px 17px; padding: 13px 15px; border: 1px solid #f0c9c5; border-radius: 10px; color: #913d3d; background: var(--red-soft); font-size: 10px; line-height: 1.55; }
+.empty-list { padding: 40px 22px; color: var(--muted); font-size: 11px; text-align: center; }
+
+@media (max-width: 1040px) {
+  .summary-grid { grid-template-columns: repeat(2, 1fr); }
+  .workspace { grid-template-columns: 290px minmax(0, 1fr); }
+  .live-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .pipeline-track { grid-template-columns: repeat(3, 1fr); gap: 20px 0; }
+  .stage:nth-child(3)::after { display: none; }
+}
+
+@media (max-width: 760px) {
+  .topbar { padding-inline: 15px; }
+  .connection span { display: none; }
+  .page-shell { padding: 25px 12px 34px; }
+  .page-heading { align-items: flex-start; flex-direction: column; }
+  .summary-grid { gap: 8px; }
+  .summary-card { min-height: 112px; padding: 15px; }
+  .workspace { display: block; }
+  .run-panel { border-right: 0; border-bottom: 1px solid var(--line); }
+  .run-list { display: flex; max-height: none; overflow-x: auto; }
+  .run-item { flex: 0 0 270px; border-right: 1px solid var(--line); border-left: 0; border-bottom: 0; border-top: 3px solid transparent; }
+  .run-item.selected { border-top-color: var(--mint); }
+  .detail-header { padding: 20px; }
+  .progress-ring { width: 66px; height: 66px; }
+  .live-status { margin: 12px 12px 0; padding: 16px; }
+  .pipeline-section { padding: 20px; }
+  .pipeline-track { grid-template-columns: repeat(2, 1fr); }
+  .stage:nth-child(3)::after { display: block; }
+  .stage:nth-child(2n)::after { display: none; }
+  .detail-grid { grid-template-columns: 1fr; padding: 10px; }
+  .data-card.wide { grid-column: auto; }
+}
+
+@media (max-width: 440px) {
+  .summary-value { font-size: 24px; }
+  .detail-header { align-items: flex-start; }
+  .live-status-heading, .activity-title { align-items: flex-start; flex-direction: column; gap: 7px; }
+  .live-metrics { grid-template-columns: 1fr; }
+  .activity-title span { text-align: left; }
+  .resilience-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .activity-timeline li { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; }
+  .progress-ring { width: 58px; height: 58px; }
+  .progress-ring strong { font-size: 15px; }
+  .comparison { grid-template-columns: 1fr 28px 1fr; }
+  .metric-value { font-size: 25px; }
+}