agentdynamics 0.4.0__py3-none-any.whl

agentdynamics/web/charts.js

@@ -0,0 +1,185 @@
+/* Minimal SVG chart kit: columns (stacked), line/area, hbars, 100% stack, sparkline. */
+const C = (() => {
+  const NS = "http://www.w3.org/2000/svg";
+  const css = (v) => getComputedStyle(document.documentElement).getPropertyValue(v).trim();
+  const SERIES = ["--s1", "--s2", "--s3", "--s4", "--s5", "--s6", "--s7", "--s8"];
+  // Phase colors follow the entity, never rank.
+  const PHASE = { explore: "--s1", edit: "--s2", verify: "--s3", execute: "--s4", plan: "--s7", delegate: "--s5",
+    vcs: "--s6", communicate: "--s8", respond: "--neutral", other: "--neutral" };
+  const color = (i) => `var(${SERIES[i % SERIES.length]})`;
+  const phaseColor = (p) => `var(${PHASE[p] || "--neutral"})`;
+  const tipEl = () => document.getElementById("tip");
+
+  function tip(html, ev) {
+    const t = tipEl();
+    if (!html) { t.style.display = "none"; return; }
+    t.innerHTML = html;
+    t.style.display = "block";
+    const w = t.offsetWidth, h = t.offsetHeight;
+    let x = ev.clientX + 14, y = ev.clientY + 14;
+    if (x + w > innerWidth - 8) x = ev.clientX - w - 14;
+    if (y + h > innerHeight - 8) y = ev.clientY - h - 14;
+    t.style.left = x + "px"; t.style.top = y + "px";
+  }
+  const hideTip = () => tip(null);
+
+  function el(tag, attrs = {}, parent) {
+    const e = document.createElementNS(NS, tag);
+    for (const k in attrs) e.setAttribute(k, attrs[k]);
+    if (parent) parent.appendChild(e);
+    return e;
+  }
+  function niceMax(v) {
+    if (!v || v <= 0) return 1;
+    const p = Math.pow(10, Math.floor(Math.log10(v)));
+    for (const m of [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10]) if (m * p >= v) return m * p;
+    return 10 * p;
+  }
+  // top-rounded rect path anchored to baseline
+  function colPath(x, y, w, h, r) {
+    r = Math.min(r, w / 2, h);
+    if (h <= 0) return "";
+    return `M${x},${y + h}V${y + r}Q${x},${y} ${x + r},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h}Z`;
+  }
+
+  /** columns(el, rows, {x, keys:[{key,label,color}], fmt, height, xfmt}) — stacked when several keys */
+  function columns(host, rows, o) {
+    host.innerHTML = "";
+    host.classList.add("chart");
+    const H = o.height || 200, W = host.clientWidth || 600;
+    const m = { l: 48, r: 8, t: 8, b: 24 };
+    const svg = el("svg", { viewBox: `0 0 ${W} ${H}`, height: H }, host);
+    const keys = o.keys;
+    const totals = rows.map((r) => keys.reduce((s, k) => s + (+r[k.key] || 0), 0));
+    const max = niceMax(Math.max(...totals, 0));
+    const iw = W - m.l - m.r, ih = H - m.t - m.b;
+    for (let i = 0; i <= 4; i++) {
+      const y = m.t + ih - (ih * i) / 4;
+      el("line", { x1: m.l, x2: W - m.r, y1: y, y2: y, class: "gridline" }, svg);
+      el("text", { x: m.l - 6, y: y + 4, "text-anchor": "end" }, svg).textContent = o.fmt((max * i) / 4);
+    }
+    if (!rows.length) return;
+    const bw = iw / rows.length, gap = Math.max(1, Math.min(6, bw * 0.25)), w = Math.max(1, bw - gap);
+    const every = Math.ceil(rows.length / Math.max(1, Math.floor(iw / 70)));
+    rows.forEach((r, i) => {
+      const x = m.l + i * bw + gap / 2;
+      let base = m.t + ih;
+      keys.forEach((k, ki) => {
+        const v = +r[k.key] || 0;
+        const h = (v / max) * ih;
+        if (h <= 0) return;
+        const top = ki === keys.length - 1 || keys.slice(ki + 1).every((kk) => !(+r[kk.key]));
+        const hh = Math.max(0, h - (ki ? 2 : 0));
+        const p = top ? colPath(x, base - h, w, hh, 3) : `M${x},${base - h}h${w}v${hh}h${-w}Z`;
+        el("path", { d: p, fill: k.color }, svg);
+        base -= h;
+      });
+      if (i % every === 0) el("text", { x: x + w / 2, y: H - 6, "text-anchor": "middle" }, svg).textContent = (o.xfmt || ((d) => d))(r[o.x]);
+      const hit = el("rect", { x: m.l + i * bw, y: m.t, width: bw, height: ih, fill: "transparent" }, svg);
+      hit.addEventListener("mousemove", (ev) => {
+        let h = `<b>${(o.xfmt || ((d) => d))(r[o.x])}</b>`;
+        [...keys].reverse().forEach((k) => {
+          if (keys.length > 1 && !(+r[k.key])) return;
+          h += `<div class="tr"><span><i style="background:${k.color}"></i>${k.label}</span><b>${o.fmt(+r[k.key] || 0)}</b></div>`;
+        });
+        if (keys.length > 1) h += `<div class="tr"><span>Total</span><b>${o.fmt(totals[i])}</b></div>`;
+        tip(h, ev);
+      });
+      hit.addEventListener("mouseleave", hideTip);
+      if (o.onClick) { hit.style.cursor = "pointer"; hit.addEventListener("click", () => o.onClick(r)); }
+    });
+    if (keys.length > 1) legend(host, keys);
+  }
+
+  function legend(host, keys) {
+    const lg = document.createElement("div");
+    lg.className = "legend";
+    lg.innerHTML = keys.map((k) => `<span><i style="background:${k.color}"></i>${k.label}</span>`).join("");
+    host.appendChild(lg);
+  }
+
+  /** line(el, pts:[{x,y,...}], {fmt, xfmt, height, area, color, label, tipExtra, refLine}) */
+  function line(host, pts, o) {
+    host.innerHTML = "";
+    host.classList.add("chart");
+    const H = o.height || 180, W = host.clientWidth || 600;
+    const m = { l: 52, r: 10, t: 10, b: 24 };
+    const svg = el("svg", { viewBox: `0 0 ${W} ${H}`, height: H }, host);
+    const iw = W - m.l - m.r, ih = H - m.t - m.b;
+    const max = niceMax(Math.max(...pts.map((p) => p.y), o.refLine || 0, 0));
+    const xs = pts.map((p) => p.x);
+    const x0 = Math.min(...xs), x1 = Math.max(...xs);
+    const sx = (v) => m.l + (x1 === x0 ? iw / 2 : ((v - x0) / (x1 - x0)) * iw);
+    const sy = (v) => m.t + ih - (v / max) * ih;
+    for (let i = 0; i <= 4; i++) {
+      const y = m.t + ih - (ih * i) / 4;
+      el("line", { x1: m.l, x2: W - m.r, y1: y, y2: y, class: "gridline" }, svg);
+      el("text", { x: m.l - 6, y: y + 4, "text-anchor": "end" }, svg).textContent = o.fmt((max * i) / 4);
+    }
+    if (!pts.length) return;
+    const col = o.color || "var(--s1)";
+    const d = pts.map((p, i) => `${i ? "L" : "M"}${sx(p.x)},${sy(p.y)}`).join("");
+    if (o.area) el("path", { d: `${d}L${sx(pts.at(-1).x)},${m.t + ih}L${sx(pts[0].x)},${m.t + ih}Z`, fill: col, opacity: 0.12 }, svg);
+    if (o.refLine) {
+      el("line", { x1: m.l, x2: W - m.r, y1: sy(o.refLine), y2: sy(o.refLine), stroke: "var(--critical)", "stroke-dasharray": "4 4", "stroke-width": 1 }, svg);
+      el("text", { x: W - m.r, y: sy(o.refLine) - 4, "text-anchor": "end" }, svg).textContent = o.refLabel || "";
+    }
+    el("path", { d, fill: "none", stroke: col, "stroke-width": 2, "stroke-linejoin": "round" }, svg);
+    const ticks = Math.min(6, pts.length);
+    for (let i = 0; i < ticks; i++) {
+      const p = pts[Math.round((i * (pts.length - 1)) / Math.max(1, ticks - 1))];
+      el("text", { x: sx(p.x), y: H - 6, "text-anchor": "middle" }, svg).textContent = (o.xfmt || ((v) => v))(p.x);
+    }
+    const cross = el("line", { y1: m.t, y2: m.t + ih, stroke: "var(--text-3)", "stroke-width": 1, opacity: 0 }, svg);
+    const dot = el("circle", { r: 4, fill: col, stroke: "var(--surface)", "stroke-width": 2, opacity: 0 }, svg);
+    const hit = el("rect", { x: m.l, y: m.t, width: iw, height: ih, fill: "transparent" }, svg);
+    hit.addEventListener("mousemove", (ev) => {
+      const r = svg.getBoundingClientRect();
+      const mx = ((ev.clientX - r.left) / r.width) * W;
+      let best = pts[0];
+      for (const p of pts) if (Math.abs(sx(p.x) - mx) < Math.abs(sx(best.x) - mx)) best = p;
+      cross.setAttribute("x1", sx(best.x)); cross.setAttribute("x2", sx(best.x)); cross.setAttribute("opacity", 0.5);
+      dot.setAttribute("cx", sx(best.x)); dot.setAttribute("cy", sy(best.y)); dot.setAttribute("opacity", 1);
+      tip(`<b>${(o.xfmt || ((v) => v))(best.x)}</b><div class="tr"><span>${o.label || "value"}</span><b>${o.fmt(best.y)}</b></div>${o.tipExtra ? o.tipExtra(best) : ""}`, ev);
+    });
+    hit.addEventListener("mouseleave", () => { hideTip(); cross.setAttribute("opacity", 0); dot.setAttribute("opacity", 0); });
+    if (o.onClick) hit.addEventListener("click", (ev) => {
+      const r = svg.getBoundingClientRect(); const mx = ((ev.clientX - r.left) / r.width) * W;
+      let best = pts[0]; for (const p of pts) if (Math.abs(sx(p.x) - mx) < Math.abs(sx(best.x) - mx)) best = p;
+      o.onClick(best);
+    });
+  }
+
+  /** hbars(el, items:[{label, value, color?, sub?, href?}], {fmt}) */
+  function hbars(host, items, o = {}) {
+    const max = Math.max(...items.map((i) => i.value), 0) || 1;
+    host.innerHTML = items.map((i) => `
+      <div class="hbar" ${i.title ? `title="${i.title}"` : ""}>
+        <div class="k">${i.href ? `<a href="${i.href}">${i.label}</a>` : i.label}</div>
+        <div class="track"><div class="fill" style="width:${(100 * i.value) / max}%;background:${i.color || "var(--s1)"}"></div></div>
+        <div class="v">${(o.fmt || ((v) => v))(i.value)}</div>
+      </div>`).join("") || `<div class="empty">No data</div>`;
+  }
+
+  /** stack100(el, parts:[{key,label,value,color}]) with legend */
+  function stack100(host, parts, o = {}) {
+    const tot = parts.reduce((s, p) => s + p.value, 0) || 1;
+    const bar = parts.filter((p) => p.value > 0).map((p) =>
+      `<div style="width:${(100 * p.value) / tot}%;background:${p.color}" data-l="${p.label}" data-v="${p.value}"></div>`).join("");
+    host.innerHTML = `<div class="stack100">${bar}</div>` + (o.legend === false ? "" :
+      `<div class="legend">${parts.filter((p) => p.value > 0).map((p) => `<span><i style="background:${p.color}"></i>${p.label} ${Math.round((100 * p.value) / tot)}%</span>`).join("")}</div>`);
+    host.querySelectorAll(".stack100 > div").forEach((d) => {
+      d.addEventListener("mousemove", (ev) => tip(`<b>${d.dataset.l}</b><div class="tr"><span>share</span><b>${Math.round((100 * d.dataset.v) / tot)}%</b></div>${o.fmt ? `<div class="tr"><span>value</span><b>${o.fmt(+d.dataset.v)}</b></div>` : ""}`, ev));
+      d.addEventListener("mouseleave", hideTip);
+    });
+  }
+
+  function sparkline(values, w = 90, h = 22, col = "var(--s1)") {
+    if (!values.length) return "";
+    const max = Math.max(...values) || 1;
+    const pts = values.map((v, i) => `${values.length === 1 ? w / 2 : (i * w) / (values.length - 1)},${h - 2 - (v / max) * (h - 4)}`).join(" ");
+    return `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}"><polyline points="${pts}" fill="none" stroke="${col}" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
+  }
+
+  return { columns, line, hbars, stack100, sparkline, color, phaseColor, tip, hideTip, css, PHASE };
+})();

agentdynamics/web/index.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>AgentDynamics</title>
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 13h4l3-8 4 14 3-9 2 3h4' fill='none' stroke='%232a78d6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
+<link rel="stylesheet" href="/style.css">
+</head>
+<body>
+<div class="app">
+  <aside class="side">
+    <div class="brand">
+      <svg width="22" height="22" viewBox="0 0 24 24"><path d="M2 13h4l3-8 4 14 3-9 2 3h4" fill="none" stroke="var(--accent)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      AgentDynamics
+    </div>
+    <nav id="nav"></nav>
+  </aside>
+  <div class="main">
+    <div class="topbar">
+      <label>Project <select id="f-project"><option value="">All projects</option></select></label>
+      <label id="f-env-wrap" hidden>Env <select id="f-env"></select></label>
+      <div class="seg" id="f-days">
+        <button data-v="1">24h</button><button data-v="7">7d</button><button data-v="30">30d</button><button data-v="">All</button>
+      </div>
+      <label title="Include delegated subagent runs as separate tasks"><input type="checkbox" id="f-sub"> Subagents as tasks</label>
+      <div class="spacer"></div>
+      <span class="small muted" id="refreshed"></span>
+      <button id="btn-refresh" title="Re-scan sources now">Refresh</button>
+      <button id="btn-theme" title="Toggle theme" aria-label="Toggle theme">◐</button>
+    </div>
+    <div id="page" class="page"><div class="loading">Loading…</div></div>
+  </div>
+</div>
+<div class="tip" id="tip"></div>
+<div class="toast" id="toast"></div>
+<script src="/charts.js"></script>
+<script src="/app.js"></script>
+</body>
+</html>

agentdynamics/web/style.css

@@ -0,0 +1,244 @@
+:root {
+  color-scheme: light;
+  --bg: #f4f4f2;
+  --surface: #fcfcfb;
+  --surface-2: #f0efec;
+  --border: #e2e1dc;
+  --text: #0b0b0b;
+  --text-2: #52514e;
+  --text-3: #7d7c77;
+  --accent: #2a78d6;
+  --accent-soft: #e3eefb;
+  --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b;
+  --good-text: #006300; --warning-text: #8a5a00; --critical-text: #b02a2a;
+  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
+  --neutral: #b4b2ab;
+  --grid: #ebeae6;
+  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
+  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --bg: #121211; --surface: #1a1a19; --surface-2: #232321; --border: #2f2f2c;
+    --text: #ffffff; --text-2: #c3c2b7; --text-3: #8d8c85;
+    --accent: #3987e5; --accent-soft: #1b2b40;
+    --good-text: #4cc94c; --warning-text: #fab219; --critical-text: #ef7070;
+    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
+    --neutral: #5d5c57; --grid: #2a2a28;
+    --shadow: none;
+  }
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #121211; --surface: #1a1a19; --surface-2: #232321; --border: #2f2f2c;
+  --text: #ffffff; --text-2: #c3c2b7; --text-3: #8d8c85;
+  --accent: #3987e5; --accent-soft: #1b2b40;
+  --good-text: #4cc94c; --warning-text: #fab219; --critical-text: #ef7070;
+  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
+  --neutral: #5d5c57; --grid: #2a2a28;
+  --shadow: none;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; height: 100%; }
+body {
+  background: var(--bg); color: var(--text);
+  font: 14px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-variant-numeric: tabular-nums;
+}
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+h1 { font-size: 20px; margin: 0; font-weight: 650; letter-spacing: -.01em; }
+h2 { font-size: 14px; margin: 0 0 10px; font-weight: 600; }
+h3 { font-size: 13px; margin: 0 0 6px; font-weight: 600; color: var(--text-2); }
+code, .mono { font-family: var(--mono); font-size: 12px; }
+
+.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
+.side {
+  background: var(--surface); border-right: 1px solid var(--border); padding: 16px 10px;
+  position: sticky; top: 0; height: 100vh; overflow-y: auto;
+}
+.brand { display: flex; align-items: center; gap: 8px; padding: 0 8px 16px; font-weight: 700; font-size: 15px; }
+.brand svg { flex: none; }
+.nav-group { margin-bottom: 14px; }
+.nav-group > div { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 4px 10px; }
+.nav-group a {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 6px 10px; border-radius: 6px; color: var(--text-2); font-size: 13.5px;
+}
+.nav-group a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
+.nav-group a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+.nav-group a small { color: var(--text-3); font-size: 11px; font-weight: 400; }
+
+.main { min-width: 0; }
+.topbar {
+  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
+  padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; z-index: 5;
+}
+.topbar .spacer { flex: 1; }
+.topbar label { font-size: 12px; color: var(--text-3); display: flex; gap: 6px; align-items: center; }
+select, input[type=text], input[type=number], textarea {
+  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
+  padding: 5px 8px; font: inherit; font-size: 13px;
+}
+button, .btn {
+  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
+  padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer;
+}
+button:hover { background: var(--surface-2); }
+button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
+.seg button { border: 0; border-radius: 0; padding: 5px 10px; }
+.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--good); }
+
+.page { padding: 20px 24px 60px; max-width: 1500px; }
+.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
+.page-head p { margin: 4px 0 0; color: var(--text-2); font-size: 13px; max-width: 780px; }
+
+.grid { display: grid; gap: 14px; }
+.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.g-3-2 { grid-template-columns: 3fr 2fr; }
+.g-2-1 { grid-template-columns: 2fr 1fr; }
+.span2 { grid-column: span 2; }
+@media (max-width: 1100px) { .g2, .g3, .g-3-2, .g-2-1 { grid-template-columns: 1fr; } .span2 { grid-column: auto; } }
+
+.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
+.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
+.card-head h2 { margin: 0; }
+.card-head .sub { color: var(--text-3); font-size: 12px; }
+
+.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
+.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); }
+.kpi .label { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
+.kpi .value { font-size: 24px; font-weight: 650; margin-top: 2px; letter-spacing: -.02em; }
+.kpi .hint { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
+
+table { width: 100%; border-collapse: collapse; font-size: 13px; }
+th { text-align: left; font-weight: 600; color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
+  padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; cursor: default; }
+th.sortable { cursor: pointer; }
+td { padding: 7px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; }
+tr.click { cursor: pointer; }
+tr.click:hover td { background: var(--surface-2); }
+td.num, th.num { text-align: right; white-space: nowrap; }
+.truncate { max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.table-wrap { overflow-x: auto; }
+
+.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
+  font-weight: 600; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
+.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neutral); }
+.pill.normal::before, .pill.satisfied::before, .pill.completed::before, .pill.ok::before { background: var(--good); }
+.pill.warning::before, .pill.tolerating::before, .pill.rework::before, .pill.info::before { background: var(--warning); }
+.pill.serious::before { background: var(--serious); }
+.pill.critical::before, .pill.frustrated::before, .pill.interrupted::before, .pill.failed::before { background: var(--critical); }
+.pill.in-progress::before { background: var(--accent); }
+.pill.info::before { background: var(--accent); }
+.tag { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--surface-2); color: var(--text-2); margin-right: 4px; border: 1px solid var(--border); }
+.tag.bad { color: var(--critical-text); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
+.tag.warn { color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 50%, transparent); }
+
+.muted { color: var(--text-3); }
+.small { font-size: 12px; }
+.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+.between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
+.empty { color: var(--text-3); padding: 24px; text-align: center; }
+.loading { color: var(--text-3); padding: 40px; text-align: center; }
+
+/* charts */
+.chart { position: relative; width: 100%; }
+.chart svg { display: block; width: 100%; overflow: visible; }
+.chart text { fill: var(--text-3); font-size: 11px; }
+.chart .gridline { stroke: var(--grid); stroke-width: 1; }
+.chart .axis { stroke: var(--border); }
+.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-2); margin-top: 6px; }
+.legend span { display: inline-flex; align-items: center; gap: 6px; }
+.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
+.tip {
+  position: fixed; z-index: 50; pointer-events: none; background: var(--surface); color: var(--text);
+  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.14);
+  max-width: 360px; display: none;
+}
+.tip b { font-weight: 600; }
+.tip .tr { display: flex; justify-content: space-between; gap: 16px; }
+.tip .tr i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }
+
+.hbar { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 70px; gap: 8px; align-items: center; font-size: 12.5px; margin: 5px 0; }
+.hbar .track { height: 10px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
+.hbar .fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--s1); }
+.hbar .v { text-align: right; color: var(--text-2); }
+.hbar .k { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.stack100 { display: flex; height: 14px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--surface); }
+.stack100 > div { height: 100%; }
+
+.score-row { display: grid; grid-template-columns: 110px 1fr 40px; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
+.score-row .track { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
+.score-row .fill { height: 100%; border-radius: 4px; }
+.big-score { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
+
+/* waterfall */
+.wf { font-size: 12px; }
+.wf-row { display: grid; grid-template-columns: 34px 170px 1fr 80px 70px; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--grid); cursor: pointer; }
+.wf-row:hover { background: var(--surface-2); }
+.wf-row.sel { background: var(--accent-soft); }
+.wf-track { position: relative; height: 14px; }
+.wf-bar { position: absolute; top: 2px; height: 10px; border-radius: 3px; min-width: 2px; }
+.wf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wf-detail { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; margin: 4px 0 8px; font-size: 12px; white-space: pre-wrap; word-break: break-word; font-family: var(--mono); max-height: 320px; overflow: auto; }
+
+.insight { border-left: 3px solid var(--neutral); padding: 10px 14px; background: var(--surface); border-radius: 0 10px 10px 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+.insight.warning { border-left-color: var(--warning); }
+.insight.ok { border-left-color: var(--good); }
+.insight.info { border-left-color: var(--accent); }
+.insight .metric { font-size: 18px; font-weight: 650; margin: 2px 0 4px; }
+.insight .advice { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
+
+.flow-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 14px; }
+@media (max-width: 1100px) { .flow-wrap { grid-template-columns: 1fr; } }
+.flow svg { width: 100%; display: block; }
+.flow .node rect { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
+.flow .node:hover rect { stroke: var(--accent); }
+.flow .node.sel rect { stroke: var(--accent); stroke-width: 2.5; }
+.flow .node text { fill: var(--text); font-size: 12px; }
+.flow .node text.sub { fill: var(--text-3); font-size: 10.5px; }
+.flow .edge { fill: none; stroke: var(--neutral); opacity: .7; }
+.flow .edge.err { stroke: var(--critical); }
+.flow .elabel { fill: var(--text-3); font-size: 10px; }
+.flow .col-title { fill: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
+
+.prompt-box { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; font-size: 13px; }
+details summary { cursor: pointer; color: var(--text-2); font-size: 12.5px; }
+.code-block { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; overflow-x: auto; font-family: var(--mono); font-size: 12px; white-space: pre; }
+.rule-row input[type=number] { width: 90px; }
+.toast { position: fixed; bottom: 18px; right: 18px; background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity .2s; z-index: 60; }
+.toast.show { opacity: 1; }
+
+@media (max-width: 760px) {
+  .app { grid-template-columns: 1fr; }
+  .side { position: static; height: auto; display: flex; overflow-x: auto; gap: 4px; padding: 8px; }
+  .brand { display: none; }
+  .side nav { display: flex; gap: 2px; }
+  .nav-group { display: flex; margin: 0; }
+  .nav-group > div { display: none; }
+  .nav-group a { white-space: nowrap; }
+  .page { padding: 16px; }
+  .topbar { padding: 8px 16px; }
+  .wf-row { grid-template-columns: 28px 110px 1fr 60px; }
+  .wf-row > :last-child { display: none; }
+}
+.spacer { flex: 1; }
+
+.stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
+.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 8px; }
+.stack span { font-size: 12px; color: var(--text-3); }
+.stack.on { border-color: var(--accent); background: var(--accent-soft); }
+.stack.on b { color: var(--accent); }
+.live { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--surface-2); font-size: 14px; }
+.live.ok { background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
+.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }