hypgraph 0.7.5__tar.gz → 0.7.6__tar.gz

{hypgraph-0.7.5 → hypgraph-0.7.6}/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
  
+## 0.7.6 — 2026-10-29: the swarm as swimlanes, and the UI walked on a real record
+
+- **UI polish from a walk of a real swarm record.** Identical alerts collapse into one line with a count (a seat
+  that looped four times showed four lines); the six KPI tiles fit one row where the sixth sat orphaned below;
+  the grids break on the panel's own width, not the window's (container queries: an embed is narrower than its
+  page, and the Live view squeezed its graph to 130 px between two full columns); the theme follows the OS unless
+  the visitor chose one; a refusal relayed twice ("claim refused: claim
+  refused:") reads once in the event stream; `mount(…, {embed: true})` marks an app on a page of its own: it
+  grows to its content and scrolls nothing inside, so a wheel over it moves the page (twenty ticks over the
+  homepage's embed used to move nothing), and its feed shows the latest 15 events. hypgraph.com: the hero's chips no
+  longer wrap mid-phrase.
+
+- **The Live view shows the swarm as swimlanes.** Seats as rows in the order they first took work, time across,
+  every work order a bar coloured by how the record settled it (accepted, reworked, returned, cancelled, in
+  flight), every model call a tick above the bar and every tool call a tick below, refusals and failures in
+  red, the scheduler's reworks and escalations as marks on their own row, and the playhead sweeping across
+  during replay on a fixed axis. Hover anything for its figures; click an order for its trace. Drawn from the
+  telemetry the view already holds, no dependency.
+
 ## 0.7.5 — 2026-10-28: a cited source is a line of support, and a finding of failure is not a fall
 
 - **A cited source is a line of support, and a succeeded run's "failed" outcome is a finding, not a fall.**

{hypgraph-0.7.5 → hypgraph-0.7.6}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: hypgraph
-Version: 0.7.5
+Version: 0.7.6
 Summary: The evidence layer for AI research agents: a hash-chained research record that checks every claim as it is written and derives how well each is known.
 Project-URL: Homepage, https://hypgraph.com
 Project-URL: Documentation, https://hypgraph.com/engineers/

{hypgraph-0.7.5 → hypgraph-0.7.6}/src/hypgraph/__init__.py

@@ -16,7 +16,7 @@ Standing is derived on every read, never stored; every write is an event in a SH
 their numbers; reviews pin versions; independence is counted, not assumed. See https://hypgraph.com.
 """
 
-__version__ = "0.7.5"
+__version__ = "0.7.6"
 
 from .bundle import verify_bundle  # noqa: E402
 from .graph import Author, Graph, GraphError, file_sha256  # noqa: E402

{hypgraph-0.7.5 → hypgraph-0.7.6}/src/hypgraph/ui/hypgraph.css

@@ -64,7 +64,7 @@
 .hg .inv { display: grid; grid-template-columns: 8px 1fr; gap: 9px; align-items: start; }
 .hg .inv .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
 .hg .inv .t { font-weight: 550; color: var(--ink); line-height: 1.3; } .hg .inv .s { font-size: 11.5px; color: var(--ink3); }
-.hg .hg-main { overflow: auto; padding: 22px 26px 40px; min-height: 0; }
+.hg .hg-main { overflow: auto; padding: 22px 26px 40px; min-height: 0; container: hg-main / inline-size; }
 .hg .head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
 .hg .head h1 { margin: 0; font-size: 20px; letter-spacing: -.015em; }
 .hg .head p { margin: 4px 0 0; color: var(--ink2); max-width: 820px; }
@@ -84,13 +84,21 @@
 .hg .card > h3 .r { margin-left: auto; display: flex; gap: 6px; }
 .hg .card .body { padding: 12px 14px; }
 .hg .grid { display: grid; gap: 14px; }
-.hg .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
+.hg .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* 6, 3 or 2 to a row: never an orphan */
+@container hg-main (max-width: 900px) { .hg .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@container hg-main (max-width: 460px) { .hg .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+/* embedded on a page of its own: the window grows to its content and scrolls nothing inside, so a wheel over it
+   moves the page; the feed shows the latest events instead of scrolling */
+.hg.hg-embed .hg-app { height: auto; grid-template-rows: 52px auto; }
+.hg.hg-embed .hg-main, .hg.hg-embed .hg-nav { overflow: visible; }
+.hg.hg-embed .feed { max-height: none; overflow: visible; }
+.hg.hg-embed { overflow: visible; }
 .hg .kpi { padding: 12px 14px; } .hg .kpi .k { color: var(--ink2); font-size: 12px; }
 .hg .kpi .v { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
 .hg .kpi .s { color: var(--ink3); font-size: 11.5px; margin-top: 2px; }
 .hg .kpi.warn .v { color: var(--warn); } .hg .kpi.bad .v { color: var(--bad); } .hg .kpi.ok .v { color: var(--ok); }
 .hg .two { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
-@media (max-width: 1100px) { .hg .two { grid-template-columns: 1fr; } }
+@container hg-main (max-width: 860px) { .hg .two { grid-template-columns: 1fr; } }
 .hg table { width: 100%; border-collapse: collapse; }
 .hg th, .hg td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
 .hg th { font-size: 11.5px; font-weight: 600; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em;
@@ -146,7 +154,7 @@
 @keyframes hg-pulse { 0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .55); } 70% { box-shadow: 0 0 0 9px rgba(18, 183, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); } }
 .hg .scrub { flex: 1; min-width: 160px; accent-color: var(--accent); }
 .hg .live { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 380px); }
-@media (max-width: 1250px) { .hg .live { grid-template-columns: 1fr; } }
+@container hg-main (max-width: 1000px) { .hg .live { grid-template-columns: 1fr; } }   /* the panel's width, not the window's: an embed is narrower than its page */
 .hg .seat { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); }
 .hg .seat .av { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 12px;
   background: var(--sunken); color: var(--ink2); }
@@ -160,6 +168,34 @@
 .hg .tel-bad { color: var(--bad); font-weight: 600; } .hg .tel-warn { color: var(--warn); font-weight: 600; }
 .hg .fly { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px;
   vertical-align: 0; animation: hg-pulse 1.2s infinite; }
+/* the timeline: seats as rows, orders as bars, calls as ticks above (model) and below (tool) the bar */
+.hg .lanes { display: grid; gap: 3px; }
+.hg .lane-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; align-items: center; }
+.hg .lane-lbl { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; font-size: 12px; }
+.hg .lane-lbl b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hg .lane-lbl .dim { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hg .lane { position: relative; height: 28px; background: var(--sunken); border-radius: 4px; }
+.hg .lane .ord { position: absolute; top: 8px; height: 12px; border: 0; border-radius: 3px; padding: 0 4px; margin: 0; font: 600 10px/12px var(--mono);
+  color: #fff; text-align: left; overflow: hidden; white-space: nowrap; cursor: pointer; opacity: .92; box-sizing: border-box; }
+.hg .lane .ord:hover, .hg .lane .ord:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; z-index: 3; }
+.hg .ord.ok { background: var(--ok); } .hg .ord.warn { background: var(--warn); } .hg .ord.info { background: var(--info); }
+.hg .ord.off { background: var(--ink3); } .hg .ord.done { background: var(--accent-ink); } .hg .ord.open { background: var(--accent); animation: hg-blink 1.2s ease-in-out infinite; }
+.hg .lane .tick { position: absolute; top: 2px; height: 5px; min-width: 2px; border-radius: 1px; background: var(--ink); opacity: .6; z-index: 1; }
+.hg .lane .tick.tool { top: 21px; background: var(--ink3); }
+.hg .lane .tick.refused, .hg .lane .tick.bad { top: 21px; height: 6px; background: var(--bad); opacity: 1; min-width: 3px; z-index: 2; }
+.hg .lane .tick.model.bad { top: 1px; }
+.hg .lane .tick.open { opacity: 1; background: var(--accent); animation: hg-blink 1.2s ease-in-out infinite; }
+.hg .lane .mark { position: absolute; top: 9px; width: 10px; height: 10px; margin-left: -5px; background: var(--warn); transform: rotate(45deg); border-radius: 2px; z-index: 1; }
+.hg .lane .playhead { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--bad); z-index: 4; pointer-events: none; }
+.hg .lane-row.axis .lane { height: 16px; background: none; }
+.hg .lane-row.axis .lane span { position: absolute; top: 1px; font: 10.5px var(--mono); color: var(--ink3); transform: translateX(-50%); }
+.hg .lane-row.axis .lane span:first-child { transform: none; } .hg .lane-row.axis .lane span:last-child { transform: translateX(-100%); }
+.hg .legend { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 11.5px; margin-top: 10px; }
+.hg .legend .ord, .hg .legend .tick, .hg .legend .mark { position: static; display: inline-block; width: 16px; height: 10px; margin: 0 2px 0 0; vertical-align: middle; animation: none; }
+.hg .legend .tick { height: 5px; } .hg .legend .mark { width: 8px; height: 8px; transform: rotate(45deg); } .hg .legend .gap { width: 10px; }
+@container hg-main (max-width: 560px) { .hg .lane-row { grid-template-columns: 84px minmax(0, 1fr); } .hg .lane-lbl .dim { display: none; }
+  .hg .lane-row.axis .lane span:nth-child(even) { display: none; } }
+@keyframes hg-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
+@media (prefers-reduced-motion: reduce) { .hg .ord.open, .hg .lane .tick.open { animation: none; } }
 .hg .trace { display: grid; gap: 4px; }
 .hg .trace .tr { display: grid; grid-template-columns: minmax(160px, 300px) 1fr 64px; gap: 10px; align-items: center; font-size: 12px; }
 .hg .trace .tl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
@@ -171,7 +207,7 @@
 .hg .alerts li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; }
 .hg .alerts { list-style: none; margin: 0; padding: 0; }
 .hg .kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
-@media (max-width: 1000px) { .hg .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@container hg-main (max-width: 780px) { .hg .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 .hg .col { background: var(--surface2); border: 1px solid var(--line); border-radius: 9px; padding: 8px; min-height: 120px; }
 .hg .col h3 { margin: 2px 4px 8px; font-size: 11.5px; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; display: flex; }
 .hg .col h3 b { margin-left: auto; color: var(--ink2); }

{hypgraph-0.7.5 → hypgraph-0.7.6}/src/hypgraph/ui/hypgraph.js

@@ -10,13 +10,15 @@
  *     // or, with no server at all:  { source: HypGraph.BundleSource(bundleJson) }
  *   </script>
  *
- * Views (docs/ui-plan.md): Overview · Live · Pipeline · Graph · Evidence · Work orders · Audit log · Report, each in
+ * Views (docs/ui-plan.md): Overview · Live (with the swarm as swimlanes) · Pipeline · Graph · Evidence · Work orders · Audit log · Report, each in
  * the investigation's profile's own words (Requirement, Thesis, Solution…). Nothing here writes. Standing, stages and
  * gates come from the engine; a BundleSource shows what the bundle was exported with and re-verifies its hash chain
  * in the browser. An HttpSource follows the record live (GET /stream), falling back to polling on older hosts, and
  * hides what a host's API doesn't serve.
  *
- * Options: source (required) · theme ('light' | 'dark') · hash (keep the view in location.hash) · title · live ·
+ * Options: source (required) · theme ('light' | 'dark'; the OS's choice by default) · embed (on a page of its own:
+ * it grows to its content and scrolls nothing inside, the feed shows the latest 15 events) · hash (keep the view in
+ * location.hash) · title · live ·
  * play (open on the Live view and replay the run from its first event; also `#view=live&play=1`, and skipped when
  * the visitor asks for reduced motion) · onTheme(t) · operatorUrl · fileUrl(path). Keys: 1–8 views · ⌘K / Ctrl+K or / search · Esc close · t theme.
  * `HypAtlas` is kept as an alias of `HypGraph` for one release.
@@ -321,7 +323,9 @@
     opts = opts || {};
     const src = opts.source || HttpSource();
     root.classList.add('hg');
-    if (!root.dataset.theme) root.dataset.theme = opts.theme || 'light';
+    const prefersDark = () => !!(global.matchMedia && global.matchMedia('(prefers-color-scheme: dark)').matches);
+    if (!root.dataset.theme) root.dataset.theme = opts.theme || (prefersDark() ? 'dark' : 'light');
+    if (opts.embed) root.classList.add('hg-embed');   // on a page of its own, not the workbench: short feeds, no scroll trap
     const brand = opts.title && !/^atlas$/i.test(opts.title) ? esc(opts.title) : 'Hyp<b>Graph</b>';
     root.innerHTML = `<div class="hg-app">
       <header class="hg-top"><div class="hg-brand">${LOGO}<span>${brand}</span></div>
@@ -454,9 +458,14 @@
       if (m.tel.length) out.push(...telAlerts(m.tel));
       return out;
     }
-    const alertList = (items) => items.length ? `<ul class="alerts">${items.map(([lvl, txt, code]) =>
-      `<li><span class="pill ${lvl}">${lvl === 'bad' ? 'action' : lvl === 'warn' ? 'check' : 'note'}</span><span>${esc(txt)}${code ? ` <button class="btn" type="button" data-n="${esc(code)}" style="padding:1px 8px">open</button>` : ''}</span></li>`).join('')}</ul>`
-      : '<div class="dim">Nothing needs attention.</div>';
+    const alertList = (items) => {
+      const seen = new Map();                            // the same alert raised four times is one line, ×4
+      items.forEach(([lvl, txt, code]) => { const k = lvl + '|' + txt, h = seen.get(k); if (h) h.n++; else seen.set(k, { lvl, txt, code, n: 1 }); });
+      const rows = [...seen.values()];
+      return rows.length ? `<ul class="alerts">${rows.map(({ lvl, txt, code, n }) =>
+        `<li><span class="pill ${lvl}">${lvl === 'bad' ? 'action' : lvl === 'warn' ? 'check' : 'note'}</span><span>${esc(txt)}${n > 1 ? ` <span class="pill neutral" title="raised ${n} times">×${n}</span>` : ''}${code ? ` <button class="btn" type="button" data-n="${esc(code)}" style="padding:1px 8px">open</button>` : ''}</span></li>`).join('')}</ul>`
+        : '<div class="dim">Nothing needs attention.</div>';
+    };
 
     // ── telemetry (what the swarm did that the record can't see) ──
     function telUpTo() {                                   // the telemetry the current replay position has reached
@@ -515,7 +524,7 @@
       switch (t.kind) {
         case 'model_end': what = t.ok === false ? `<span class="tel-bad">model call failed</span> ${d(String(t.error || '').slice(0, 120))}`
           : `model ${d(t.model || '')} · ${fmtN(t.in || 0)}→${fmtN(t.out || 0)} tokens${t.usd ? ' · ' + fmtUsd(t.usd) : ''} · ${t.s}s${(t.tool_calls || []).length ? ' → ' + t.tool_calls.map(esc).join(', ') : ''}`; break;
-        case 'tool_end': what = refusedCall(t) ? `<span class="tel-warn">${esc(t.tool)} refused by the record</span> ${d(String(t.error || '').replace(/^refused:?\s*/, '').slice(0, 140))}`
+        case 'tool_end': what = refusedCall(t) ? `<span class="tel-warn">${esc(t.tool)} refused by the record</span> ${d(String(t.error || '').replace(/^refused:?\s*/, '').replace(/\b(\w+ refused):\s*\1:\s*/g, '$1: ').slice(0, 140))}`
           : t.ok === false ? `<span class="tel-bad">tool ${esc(t.tool)} failed</span> ${d(String(t.error || '').slice(0, 120))}` : `tool ${c(t.tool)} · ${t.s}s`; break;
         case 'order_start': what = `took ${c(t.order)} ${d('· ' + (t.model || ''))}`; break;
         case 'order_end': what = `finished ${c(t.order)} · ${t.calls || 0} call(s)${t.stopped ? ' ' + d('· ' + t.stopped) : ''}`; break;
@@ -552,6 +561,57 @@
         <div class="trace">${rows || '<div class="dim">No calls yet.</div>'}</div>`;
     }
 
+    function lanes(tel, running) {                     // the swarm as swimlanes: seats as rows, orders as bars, calls as ticks
+      const m = S.m, all = m.tel, following = S.cursor == null;
+      if (!all.length) return '';
+      const run = all.find((t) => t.kind === 'run_start'), end = all.find((t) => t.kind === 'run_end');
+      const seen = tel.length ? tel[tel.length - 1].ts : (run ? run.ts : all[0].ts);
+      const now = following && running ? Date.now() / 1000 : seen;       // the replay position, or the wall clock
+      const t0 = run ? run.ts : all[0].ts;
+      const t1 = Math.max(end ? end.ts : Math.max(all[all.length - 1].ts, now), t0 + 1);   // a fixed axis while replaying
+      const span = t1 - t0, x = (ts) => Math.min(100, Math.max(0, ((ts - t0) / span) * 100));
+      const fmtT = (s) => s >= 3600 ? `${Math.floor(s / 3600)}h${String(Math.floor((s % 3600) / 60)).padStart(2, '0')}` : `${Math.floor(s / 60)}:${String(Math.floor(Math.max(s, 0) % 60)).padStart(2, '0')}`;
+      const starts = tel.filter((t) => t.kind === 'order_start');
+      if (!starts.length) return '<div class="empty">Nobody has started yet.</div>';
+      const status = new Map((m.orders || []).map((o) => [o.code, o.status]));
+      const ends = new Map(tel.filter((t) => t.kind === 'order_end').map((t) => [t.span, t]));
+      const startOf = new Map(tel.filter((t) => t.kind === 'model_start' || t.kind === 'tool_start').map((t) => [t.span, t]));
+      const calls = tel.filter((t) => t.kind === 'model_end' || t.kind === 'tool_end');
+      const open = openSpans(tel).filter((t) => t.kind === 'model_start' || t.kind === 'tool_start');
+      const seats = [...new Set(starts.map((o) => o.seat).concat(calls.map((t) => t.seat)).filter(Boolean))];   // in the order they first took work; a seat that only made calls (the lead's report) still gets its row
+      const head = (following && running) || S.playing || !following ? `<u class="playhead" style="left:${x(now).toFixed(2)}%" title="${esc(fmtT(now - t0))}"></u>` : '';
+      const rows = seats.map((seat) => {
+        const bars = starts.filter((o) => o.seat === seat).map((o) => {
+          const e = ends.get(o.span), st = e ? (status.get(o.order) || 'ended') : 'open';   // until it ends, the viewer doesn't know how it ends
+          const a = x(o.ts), b = x(e ? e.ts : now);
+          const cls = st === 'accepted' ? 'ok' : st === 'reworked' ? 'warn' : st === 'cancelled' ? 'off' : st === 'returned' ? 'info' : e ? 'done' : 'open';
+          const title = `${o.order} · ${seat}${o.model ? ' · ' + o.model : ''}\n${e ? `${Number(e.s || e.ts - o.ts).toFixed(1)}s · ${e.calls || 0} call(s)${e.stopped ? ' · ' + e.stopped : ''}` : 'in flight'}\n${st}`;
+          return `<button type="button" class="ord ${cls}" data-act="lv-trace" data-order="${esc(o.order)}" style="left:${a.toFixed(2)}%;width:${Math.max(b - a, 0.4).toFixed(2)}%" title="${esc(title)}">${esc(o.order)}</button>`;
+        }).join('');
+        const ticks = calls.filter((t) => t.seat === seat).map((t) => {
+          const s = startOf.get(t.span), ts = s ? s.ts : t.ts - (Number(t.s) || 0);
+          const a = x(ts), w = Math.max(((Number(t.s) || 0) / span) * 100, 0.15);
+          const kind = t.kind === 'model_end' ? (t.ok === false ? 'bad' : 'model') : refusedCall(t) ? 'refused' : failed(t) ? 'bad' : 'tool';
+          const title = t.kind === 'model_end' ? `model ${t.model || ''} · ${fmtN(t.in || 0)}→${fmtN(t.out || 0)} tokens${t.usd ? ' · ' + fmtUsd(t.usd) : ''} · ${t.s}s${t.ok === false ? '\n' + String(t.error || '').slice(0, 120) : ''}`
+            : `${t.tool} · ${t.s}s${t.ok === false ? '\n' + String(t.error || '').replace(/^refused:?\s*/, '').slice(0, 120) : ''}`;
+          return `<u class="tick ${kind}" style="left:${a.toFixed(2)}%;width:${Math.min(w, 100 - a).toFixed(2)}%" title="${esc(title)}"></u>`;
+        }).join('');
+        const flying = open.filter((t) => t.seat === seat).map((t) => `<u class="tick open ${t.kind === 'model_start' ? 'model' : 'tool'}" style="left:${x(t.ts).toFixed(2)}%;width:${Math.max(x(now) - x(t.ts), 0.15).toFixed(2)}%" title="${esc(t.kind === 'model_start' ? `calling ${t.model || 'the model'}` : `running ${t.tool}`)}"></u>`).join('');
+        const mine = calls.filter((t) => t.seat === seat), n = mine.filter((t) => t.kind === 'model_end').length;
+        const usd = mine.reduce((a, t) => a + (Number(t.usd) || 0), 0), refs = mine.filter(refusedCall).length;
+        return `<div class="lane-row"><div class="lane-lbl"><b>${esc(seat)}</b><span class="dim">${n} call${n === 1 ? '' : 's'}${usd ? ' · ' + fmtUsd(usd) : ''}${refs ? ` · <span class="tel-warn">${refs} refused</span>` : ''}</span></div><div class="lane">${bars}${ticks}${flying}${head}</div></div>`;
+      }).join('');
+      const marks = tel.filter((t) => t.kind === 'decision' && /rework|escalat|cancel|moot/.test(String(t.event || ''))).map((t) =>
+        `<u class="mark" style="left:${x(t.ts).toFixed(2)}%" title="${esc(`scheduler: ${t.event}${t.order ? ' ' + t.order : ''}${t.why || t.missing ? ' — ' + String(t.why || t.missing).slice(0, 100) : ''}`)}"></u>`).join('');
+      const sched = marks ? `<div class="lane-row"><div class="lane-lbl"><b>scheduler</b><span class="dim">reworks · escalations</span></div><div class="lane">${marks}${head}</div></div>` : '';
+      const step = [5, 10, 15, 30, 60, 120, 300, 600, 1200, 1800, 3600].find((s) => span / s <= 8) || 3600;
+      let ax = '';
+      for (let s = 0; s <= span; s += step) ax += `<span style="left:${((s / span) * 100).toFixed(2)}%">${fmtT(s)}</span>`;
+      return `<div class="lanes">${rows}${sched}<div class="lane-row axis"><div class="lane-lbl"></div><div class="lane">${ax}</div></div></div>
+        <div class="legend dim"><i class="ord ok"></i> accepted <i class="ord warn"></i> reworked <i class="ord info"></i> returned <i class="ord off"></i> cancelled <i class="ord open"></i> in flight
+          <span class="gap"></span><u class="tick model"></u> model call <u class="tick tool"></u> tool call <u class="tick refused"></u> refused by the record <u class="tick bad"></u> failed <u class="mark"></u> rework · escalation</div>`;
+    }
+
     // ── views ──
     function vOverview() {
       const m = S.m, qs = m.board || [], claims = m.nodes.filter((n) => n.type === 'claim');
@@ -714,6 +774,7 @@
           <button class="btn" type="button" data-act="lv-live" ${following ? 'disabled' : ''}>${live ? 'Follow live' : 'Jump to end'}</button></div></div>
         ${tk.length ? `<div class="grid kpis" style="margin-bottom:10px">${tk.map(([k, v, s, c]) => `<div class="card kpi ${c || ''}"><div class="k">${esc(k)}</div><div class="v">${v}</div>${s ? `<div class="s">${esc(s)}</div>` : ''}</div>`).join('')}</div>` : ''}
         <div class="grid kpis" style="margin-bottom:14px">${kp.map(([k, v]) => `<div class="card kpi"><div class="k">${esc(k)}</div><div class="v">${v}</div></div>`).join('')}</div>
+        ${m.tel.length ? `<div class="card" style="margin-bottom:14px"><h3>Timeline <span class="sub">who held what, when — every call a tick; click an order for its trace</span></h3><div class="body">${lanes(tel, running)}</div></div>` : ''}
         ${m.tel.length ? (() => { const a = telAlerts(tel); return a.length ? `<div class="card" style="margin-bottom:14px"><h3>Alerts</h3><div class="body">${alertList(a)}</div></div>` : ''; })() : ''}
         <div class="grid live">
           <div class="card"><h3>Seats <span class="sub">who is working on what</span></h3>${seats(seen, tel)}</div>
@@ -725,10 +786,10 @@
         ${m.tel.length ? `<div class="card" style="margin-top:14px"><h3>Trace <span class="sub">where a work order's time went: each model and tool call</span></h3><div class="body">${trace(tel)}</div></div>` : ''}`;
     }
     function feed(seen, tel, running) {
-      const mode = S.feed || 'all';
-      const rec = mode === 'telemetry' ? [] : seen.slice(-300).map((e) => ({ ts: Date.parse(e.at) / 1000, e }));
-      const tl = mode === 'record' ? [] : tel.filter((t) => !t.kind.endsWith('_start') || t.kind === 'order_start' || t.kind === 'run_start').slice(-400).map((t) => ({ ts: t.ts, t }));
-      const all = rec.concat(tl).sort((a, b) => b.ts - a.ts || ((b.e ? b.e.seq : 0) - (a.e ? a.e.seq : 0))).slice(0, 400);
+      const mode = S.feed || 'all', cap = opts.embed ? 15 : 400;
+      const rec = mode === 'telemetry' ? [] : seen.slice(-cap).map((e) => ({ ts: Date.parse(e.at) / 1000, e }));
+      const tl = mode === 'record' ? [] : tel.filter((t) => !t.kind.endsWith('_start') || t.kind === 'order_start' || t.kind === 'run_start').slice(-cap).map((t) => ({ ts: t.ts, t }));
+      const all = rec.concat(tl).sort((a, b) => b.ts - a.ts || ((b.e ? b.e.seq : 0) - (a.e ? a.e.seq : 0))).slice(0, cap);
       return all.map((x, i) => x.e ? evRow(x.e, i === 0 && (S.playing || running)) : telRow(x.t)).join('') || '<div class="empty">Nothing yet.</div>';
     }
     function seats(seen, tel) {
@@ -959,6 +1020,7 @@
       if (a === 'lv-play') return S.playing ? (stopPlay(), render()) : play();
       if (a === 'lv-start') { stopPlay(); S.cursor = 0; return render(); }
       if (a === 'lv-live') { stopPlay(); S.cursor = null; return render(); }
+      if (a === 'lv-trace') { S.traceOrder = t.dataset.order || ''; render(); const el = $('#hg-trace-order'); if (el) el.scrollIntoView({ block: 'center', behavior: 'smooth' }); return; }
       if (a === 'print') return global.print();
       if (a === 'md') return download(`${slug}-report.md`, (m.report && m.report.markdown) || '', 'text/markdown');
       if (a === 'bundle') return download(`${slug}.bundle.json`, JSON.stringify(src.bundle), 'application/json');

{hypgraph-0.7.5 → hypgraph-0.7.6}/src/hypgraph/ui/index.html

@@ -21,7 +21,7 @@
 <script>
   const stored = (() => { try { return localStorage.getItem('hypgraph-theme'); } catch { return null; } })();
   HypGraph.mount(document.getElementById('app'), {
-    source: HypGraph.HttpSource('api/graph'), hash: true, theme: stored || 'light',
+    source: HypGraph.HttpSource('api/graph'), hash: true, theme: stored || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
     onTheme: (t) => { try { localStorage.setItem('hypgraph-theme', t); } catch { /* private mode */ } },
   });
 </script>