@x12i/memorix-service 3.7.6 → 3.7.8

package/dist/activity-ui.js

@@ -1,4 +1,4 @@
-/** HTML for GET /_live/activity — land / connect / fetch operator feed. */
+/** HTML for GET /_live/activity — pushed / processed / fetched operator feeds. */
 export function activityHtml() {
     return `<!DOCTYPE html>
 <html lang="en">
@@ -42,6 +42,13 @@ export function activityHtml() {
       margin: 0 0 10px; font-size: 12px; font-family: var(--mono);
       letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim);
     }
+    .quiet-banner {
+      margin: 0 0 18px; padding: 14px 16px;
+      border: 1px solid #e2b25a; background: #1c1810;
+      color: var(--text); font-size: 15px; line-height: 1.5;
+    }
+    .quiet-banner[hidden] { display: none; }
+    .quiet-banner strong { color: #e2b25a; font-weight: 600; }
     .health-grid {
       display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 14px; margin-bottom: 20px;
@@ -60,28 +67,30 @@ export function activityHtml() {
     .health-card .val span { color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 6px; }
     .health-card svg { width: 100%; height: 56px; display: block; }
     .health-card .hint { margin-top: 6px; font-size: 11px; color: var(--dim); font-family: var(--mono); }
-    .legend {
-      display: grid; gap: 10px; margin: 0 0 18px;
-      padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--line);
+    .tabs {
+      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 8px; margin: 0 0 16px;
     }
-    .legend-row {
-      display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: baseline;
-      font-size: 13px;
+    .tab, .btn {
+      appearance: none; border: 1px solid var(--line); background: var(--bg-elev); color: var(--muted);
+      font: 500 12px/1.3 var(--sans); padding: 12px 14px; cursor: pointer; border-radius: 2px;
     }
-    .legend-row strong {
-      font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
-      text-transform: uppercase; color: var(--accent); font-weight: 600;
+    .tab {
+      display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
     }
-    .legend-row span { color: var(--muted); }
-    .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
-    .tab, .btn {
-      appearance: none; border: 1px solid var(--line); background: transparent; color: var(--muted);
-      font: 500 12px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase;
-      padding: 10px 16px; cursor: pointer; border-radius: 2px;
+    .tab-name {
+      font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
+      text-transform: uppercase; font-weight: 600; color: var(--text);
     }
+    .tab-desc { font-size: 12px; font-weight: 400; color: var(--muted); }
     .tab[aria-selected="true"] {
       background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
     }
+    .tab[aria-selected="true"] .tab-name,
+    .tab[aria-selected="true"] .tab-desc { color: var(--accent-ink); }
+    @media (max-width: 720px) {
+      .tabs { grid-template-columns: 1fr; }
+    }
     .btn { background: var(--bg-row); color: var(--text); text-transform: none; letter-spacing: 0; }
     .btn:hover { border-color: var(--accent); }
     .lane-hint { margin: 0 0 14px; color: var(--muted); font-size: 13px; max-width: 72ch; }
@@ -113,10 +122,9 @@ export function activityHtml() {
       font-family: var(--mono); font-size: 12px;
     }
     .pause-bar[hidden] { display: none; }
-    .table-scroll {
-      max-height: min(62vh, 720px);
-      overflow: auto;
+    .table-wrap {
       border: 1px solid var(--line);
+      background: var(--bg-elev);
     }
     table.list {
       width: 100%; table-layout: fixed; border-collapse: collapse;
@@ -126,23 +134,21 @@ export function activityHtml() {
       text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
       vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     }
-    table.list td.detail-cell {
-      white-space: normal; overflow: visible; text-overflow: clip; vertical-align: top;
-    }
     th {
       font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
       color: var(--dim); font-weight: 500; background: #0d1016;
+      position: sticky; top: 0; z-index: 2;
     }
     tr:last-child td { border-bottom: 0; }
     tr:hover td { background: var(--bg-row); }
     tr.clickable { cursor: pointer; }
-    tr.open td { background: #1a2214; }
     .mono { font-family: var(--mono); font-size: 12px; color: var(--muted); }
     .badge {
       display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
       font-size: 11px; padding: 3px 8px; border: 1px solid var(--line);
+      max-width: 100%;
     }
-    .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
+    .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: 0 0 auto; }
     .badge.ok { color: var(--ok); }
     .badge.ok::before { background: var(--ok); }
     .badge.bad { color: var(--bad); }
@@ -151,11 +157,13 @@ export function activityHtml() {
     .badge.queued::before { background: var(--api); }
     .badge.ai { color: var(--ai); }
     .badge.ai::before { background: var(--ai); }
+    .badge.skip { color: var(--dim); }
     .detail {
       margin-top: 8px; padding: 12px; background: #0d1016; border: 1px solid var(--line);
       font-family: var(--mono); font-size: 11px; color: var(--muted);
     }
     .detail h3 { margin: 0 0 8px; font-size: 12px; color: var(--text); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
+    .detail .row { margin: 4px 0; }
     .edge-list { margin: 0; padding-left: 18px; }
     .edge-list li { margin: 2px 0; }
     .graph-svg {
@@ -167,26 +175,49 @@ export function activityHtml() {
     .graph-svg line { stroke: var(--api); stroke-width: 1.2; opacity: 0.85; }
     .empty { color: var(--muted); padding: 24px 0; }
     .dialog-back {
-      position: fixed; inset: 0; z-index: 30;
-      background: rgba(6, 8, 10, 0.72);
-      display: flex; align-items: flex-start; justify-content: center;
-      padding: 40px 20px; overflow: auto;
+      position: fixed; inset: 0; z-index: 40;
+      background: rgba(6, 8, 10, 0.45);
     }
-    .dialog-back[hidden] { display: none; }
+    .dialog-back[hidden] { display: none !important; }
     .dialog {
-      width: min(920px, 100%);
-      background: var(--bg-elev); border: 1px solid var(--line);
-      padding: 14px 18px 20px;
+      position: fixed; top: 0; right: 0; bottom: 0;
+      width: min(440px, 100vw);
+      margin: 0;
+      display: flex; flex-direction: column;
+      background: var(--bg-elev);
+      border-left: 1px solid var(--line);
+      box-shadow: -20px 0 48px rgba(0, 0, 0, 0.5);
     }
     .dialog-bar {
-      display: flex; align-items: center; justify-content: space-between; gap: 12px;
-      margin-bottom: 8px;
+      flex: 0 0 auto;
+      display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
+      padding: 16px 16px 14px;
+      background: #0d1016;
+      border-bottom: 1px solid var(--line);
+    }
+    .dialog-kicker {
+      font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
+      text-transform: uppercase; color: var(--accent); margin-bottom: 4px;
     }
     .dialog-bar strong {
-      font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
+      display: block; font-size: 14px; font-weight: 600; letter-spacing: 0;
+      text-transform: none; line-height: 1.35; word-break: break-word;
     }
-    .dialog .detail { margin-top: 0; border: 0; background: transparent; padding: 4px 0 0; }
-    .dialog .graph-svg { max-width: none; height: 280px; }
+    #dialog-body {
+      flex: 1 1 auto; overflow: auto;
+      padding: 16px 16px 32px;
+    }
+    .facts {
+      margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 10px 12px;
+      font-size: 13px;
+    }
+    .facts dt {
+      margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
+      text-transform: uppercase; color: var(--dim); padding-top: 3px;
+    }
+    .facts dd { margin: 0; color: var(--text); word-break: break-word; }
+    .dialog .detail { margin-top: 16px; }
+    .dialog .graph-svg { max-width: none; height: 220px; }
     footer { margin-top: 28px; color: var(--dim); font-size: 12px; }
     footer a { margin-right: 12px; }
   </style>
@@ -196,41 +227,33 @@ export function activityHtml() {
     <header>
       <div>
         <div class="brand">Memorix <span>activity</span></div>
-        <p class="sub">Live feed of writes in, Nexum knowledge connections (rules vs AI), and reads out. In-memory — last ~10 000 per lane; clears on process restart.</p>
+        <p class="sub">Three feeds: data pushed in, data Nexum is processing, and data fetched out. In-memory — last ~10 000 per feed; clears on process restart.</p>
       </div>
       <div class="meta">
         <div><strong>UI</strong> /_live/activity</div>
         <div><strong>API</strong> /_live/api/activity</div>
-        <div><a href="/_live">← live view</a> · <a href="/_live/changes">data changes</a></div>
+        <div><a href="/_live">← live view</a> · <a href="/_live/graph">stored graph</a> · <a href="/_live/changes">data changes</a></div>
       </div>
     </header>
 
+    <div class="quiet-banner" id="quiet-banner" hidden></div>
+
     <p class="section-label">Activity · last 60 minutes</p>
     <div class="health-grid" id="charts"></div>
 
-    <div class="legend" aria-label="What each tab means">
-      <div class="legend-row">
-        <strong>Land</strong>
-        <span>Data <em>written into</em> Memorix — <span class="mono">POST /api/data/content</span>. Column <em>Nexum</em> = did we enqueue analyze after this write?</span>
-      </div>
-      <div class="legend-row">
-        <strong>Connect</strong>
-        <span>Nexum built a knowledge graph. <em>rules · no AI</em> = deterministic; <em>AI</em> = semantic. Relations = Memorix relationship plans created.</span>
-      </div>
-      <div class="legend-row">
-        <strong>Fetch</strong>
-        <span>Data <em>read out of</em> Memorix — <span class="mono">GET /api/data/content</span>.</span>
-      </div>
-      <div class="legend-row">
-        <strong>Nexum gate</strong>
-        <span>Auto-analyze is <em>on by default</em> for types named by an installed <span class="mono">nexum.indexing-policy</span> (built-in default: <span class="mono">content</span> / <span class="mono">snapshots|knowx</span>; security-map estate products when that policy is installed). A type can be stored and still show <em>skipped · no policy</em> — that is the analyze allowlist, not the switch.</span>
-      </div>
-    </div>
-
-    <nav class="tabs" role="tablist">
-      <button class="tab" role="tab" aria-selected="true" data-lane="land">Land · writes</button>
-      <button class="tab" role="tab" aria-selected="false" data-lane="index">Connect · Nexum</button>
-      <button class="tab" role="tab" aria-selected="false" data-lane="fetch">Fetch · reads</button>
+    <nav class="tabs" role="tablist" aria-label="Activity type">
+      <button class="tab" role="tab" aria-selected="true" data-lane="land">
+        <span class="tab-name">Pushed</span>
+        <span class="tab-desc">Data written into Memorix</span>
+      </button>
+      <button class="tab" role="tab" aria-selected="false" data-lane="index">
+        <span class="tab-name">Processed</span>
+        <span class="tab-desc">Nexum working on that data</span>
+      </button>
+      <button class="tab" role="tab" aria-selected="false" data-lane="fetch">
+        <span class="tab-name">Fetched</span>
+        <span class="tab-desc">Data read out of Memorix</span>
+      </button>
     </nav>
     <p class="lane-hint" id="lane-hint"></p>
 
@@ -244,10 +267,10 @@ export function activityHtml() {
       <label>Caller
         <select id="f-caller"><option value="">All</option></select>
       </label>
-      <label>OT
+      <label>Object type
         <select id="f-ot"><option value="">All</option></select>
       </label>
-      <label>CT
+      <label>Content type
         <select id="f-ct"><option value="">All</option></select>
       </label>
       <label id="f-nexum-wrap">Nexum
@@ -283,17 +306,21 @@ export function activityHtml() {
       <span id="pause-msg">List held</span>
       <button class="btn" id="resume" type="button">Show new</button>
     </div>
-    <div class="table-scroll" id="table-scroll"></div>
+    <div class="table-wrap" id="table-wrap"></div>
     <footer>
       <a href="/_live">/_live</a>
+      <a href="/_live/graph">/_live/graph</a>
       <a href="/_live/changes">/_live/changes</a>
-      Click a row to open it. The list pauses only when you scroll away from the top.
+      Click a row to open a dialog. Live updates pause while a dialog is open or the page is scrolled down.
     </footer>
   </div>
   <div class="dialog-back" id="dialog-back" hidden>
     <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title">
       <div class="dialog-bar">
-        <strong id="dialog-title">Item</strong>
+        <div>
+          <div class="dialog-kicker" id="dialog-kicker">Detail</div>
+          <strong id="dialog-title">Item</strong>
+        </div>
         <button class="btn" id="dialog-close" type="button">Close</button>
       </div>
       <div id="dialog-body"></div>
@@ -301,7 +328,17 @@ export function activityHtml() {
   </div>
   <script>
     const $ = (id) => document.getElementById(id);
-    let lane = "land";
+    const LANE_FROM_HASH = {
+      pushed: "land", land: "land",
+      processed: "index", index: "index", connect: "index",
+      fetched: "fetch", fetch: "fetch",
+    };
+    const HASH_FROM_LANE = { land: "pushed", index: "processed", fetch: "fetched" };
+    function hashLane() {
+      const key = (location.hash || "").replace(/^#/, "").toLowerCase();
+      return LANE_FROM_HASH[key] || "land";
+    }
+    let lane = hashLane();
     let entries = [];
     let liveEntries = [];
     let followLive = true;
@@ -310,6 +347,8 @@ export function activityHtml() {
     let sizes = { land: 0, index: 0, fetch: 0 };
     let capacity = 10000;
     let seriesBuckets = [];
+    let startedAt = "";
+    let latest = { land: null, index: null, fetch: null };
     let filterState = { q: "", org: "", caller: "", ot: "", ct: "", nexum: "", how: "", hit: "" };
 
     function listHeld() {
@@ -317,39 +356,78 @@ export function activityHtml() {
     }
 
     function dialogTitle(e) {
-      const t = typeOf(e);
-      const id = e.recordId || (e.source && e.source.recordId) || (e.snapshot && e.snapshot.recordId) || "";
-      return [t.ot, t.ct, id].filter(Boolean).join(" / ") || "Item";
+      return e.recordId || (e.source && e.source.recordId) || (e.snapshot && e.snapshot.recordId) || "Item";
+    }
+
+    function laneLabel(e) {
+      if (e.lane === "index") return "Processed";
+      if (e.lane === "fetch") return "Fetched";
+      return "Pushed";
+    }
+
+    function fact(label, valueHtml) {
+      return "<dt>" + escapeHtml(label) + "</dt><dd>" + valueHtml + "</dd>";
+    }
+
+    function dialogOpen() {
+      return !$("dialog-back").hidden;
     }
 
     function openDialog(e) {
+      followLive = false;
+      document.body.style.overflow = "hidden";
+      $("dialog-kicker").textContent = laneLabel(e);
       $("dialog-title").textContent = dialogTitle(e);
       $("dialog-body").innerHTML = renderDetail(e);
       $("dialog-back").hidden = false;
+      updatePauseBar();
     }
 
     function closeDialog() {
       $("dialog-back").hidden = true;
       $("dialog-body").innerHTML = "";
+      document.body.style.overflow = "";
+      if (window.scrollY < 8) {
+        followLive = true;
+        applyLive();
+      } else {
+        updatePauseBar();
+      }
     }
 
-    document.querySelectorAll(".tab").forEach((tab) => {
-      tab.addEventListener("click", () => {
-        document.querySelectorAll(".tab").forEach((t) => t.setAttribute("aria-selected", "false"));
-        tab.setAttribute("aria-selected", "true");
-        lane = tab.dataset.lane;
-        closeDialog();
-        followLive = true;
-        pendingNew = 0;
-        syncFilterVisibility();
-        load(true);
+    function applyLaneChrome() {
+      document.querySelectorAll(".tab").forEach((t) => {
+        t.setAttribute("aria-selected", t.dataset.lane === lane ? "true" : "false");
       });
+      const hash = "#" + (HASH_FROM_LANE[lane] || "pushed");
+      if (location.hash !== hash) history.replaceState(null, "", hash);
+      syncFilterVisibility();
+    }
+
+    function switchLane(next) {
+      if (!next || next === lane) return;
+      lane = next;
+      $("dialog-back").hidden = true;
+      $("dialog-body").innerHTML = "";
+      document.body.style.overflow = "";
+      followLive = true;
+      pendingNew = 0;
+      applyLaneChrome();
+      load(true);
+    }
+
+    document.querySelectorAll(".tab").forEach((tab) => {
+      tab.addEventListener("click", () => switchLane(tab.dataset.lane));
     });
+    window.addEventListener("hashchange", () => switchLane(hashLane()));
     $("refresh").onclick = () => {
       followLive = true;
       load(true);
     };
     $("resume").onclick = () => {
+      $("dialog-back").hidden = true;
+      $("dialog-body").innerHTML = "";
+      document.body.style.overflow = "";
       followLive = true;
       applyLive();
     };
@@ -360,9 +438,9 @@ export function activityHtml() {
     document.addEventListener("keydown", (ev) => {
       if (ev.key === "Escape" && !$("dialog-back").hidden) closeDialog();
     });
-    $("table-scroll").addEventListener("scroll", () => {
-      if (ignoreScroll) return;
-      const atTop = $("table-scroll").scrollTop < 8;
+    window.addEventListener("scroll", () => {
+      if (ignoreScroll || dialogOpen()) return;
+      const atTop = window.scrollY < 8;
       if (atTop && !followLive) {
         followLive = true;
         if (pendingNew) applyLive();
@@ -371,7 +449,7 @@ export function activityHtml() {
         followLive = false;
         updatePauseBar();
       }
-    });
+    }, { passive: true });
     $("f-clear").onclick = () => {
       filterState = { q: "", org: "", caller: "", ot: "", ct: "", nexum: "", how: "", hit: "" };
       $("f-q").value = "";
@@ -407,7 +485,7 @@ export function activityHtml() {
       $("f-how-wrap").hidden = lane !== "index";
       $("f-hit-wrap").hidden = lane !== "fetch";
     }
-    syncFilterVisibility();
+    applyLaneChrome();
 
     function escapeHtml(s) {
       return String(s ?? "").replace(/[&<>"']/g, (c) => ({
@@ -433,31 +511,55 @@ export function activityHtml() {
       return '<span class="badge ' + cls + '">' + escapeHtml(s) + "</span>";
     }
 
-    function shortSkipReason(reason) {
+    function skipKind(reason) {
       const r = String(reason || "").toLowerCase();
-      if (!r) return "skipped";
-      if (r.includes("no matching")) return "skipped · no policy";
-      if (r.includes("disabled")) return "skipped · off";
-      if (r.includes("worker unset")) return "skipped · no worker";
-      if (r.includes("no analyzeable") || r.includes("no payload")) return "skipped · no payload";
-      if (r.includes("operational")) return "skipped · no ops db";
-      return "skipped · " + String(reason).slice(0, 40);
+      if (!r) return { short: "skip", label: "skipped" };
+      if (r.includes("no matching")) return { short: "no-pol", label: "skipped · no policy" };
+      if (r.includes("disabled")) return { short: "off", label: "skipped · off" };
+      if (r.includes("worker unset")) return { short: "no-wk", label: "skipped · no worker" };
+      if (r.includes("no analyzeable") || r.includes("no payload")) return { short: "empty", label: "skipped · no payload" };
+      if (r.includes("operational")) return { short: "no-db", label: "skipped · no ops db" };
+      return { short: "skip", label: "skipped" };
     }
 
-    /** Land-row Nexum cell: skipped | queued (rules vs AI appear on Connect). */
+    /** Compact land-row Nexum badge (full text lives in the dialog). */
     function nexumLandCell(indexing) {
       if (!indexing) return "—";
       if (indexing.status === "skipped") {
-        return '<span class="badge">' + escapeHtml(shortSkipReason(indexing.reason)) + "</span>";
+        const kind = skipKind(indexing.reason);
+        const tip = indexing.reason ? kind.label + " — " + indexing.reason : kind.label;
+        return '<span class="badge skip" title="' + escapeHtml(tip) + '">' + escapeHtml(kind.short) + "</span>";
       }
       if (indexing.status === "queued") {
-        return '<span class="badge queued">queued · analyze</span>';
+        return '<span class="badge queued" title="queued · analyze">queued</span>';
+      }
+      const s = String(indexing.status || "");
+      return '<span class="badge" title="' + escapeHtml(s) + '">' + escapeHtml(s.slice(0, 10)) + "</span>";
+    }
+
+    function nexumLandFull(indexing) {
+      if (!indexing) return "—";
+      if (indexing.status === "skipped") {
+        const kind = skipKind(indexing.reason);
+        return '<span class="badge skip">' + escapeHtml(kind.label) + "</span>" +
+          (indexing.reason
+            ? ' <span class="mono">' + escapeHtml(indexing.reason) + "</span>"
+            : "");
+      }
+      if (indexing.status === "queued") {
+        return '<span class="badge queued">queued · analyze</span>' +
+          (indexing.policy ? ' <span class="mono">policy ' + escapeHtml(indexing.policy) + "</span>" : "") +
+          (indexing.operationId ? ' <span class="mono">' + escapeHtml(indexing.operationId) + "</span>" : "");
       }
       return statusBadge(indexing.status);
     }
 
-    function modeBadge(mode) {
-      if (mode === "rules") return '<span class="badge ok">rules · no AI</span>';
+    function modeBadge(mode, compact) {
+      if (mode === "rules") {
+        return compact
+          ? '<span class="badge ok" title="rules · no AI">rules</span>'
+          : '<span class="badge ok">rules · no AI</span>';
+      }
       if (mode === "ai") return '<span class="badge ai">AI</span>';
       if (!mode) return "—";
       return '<span class="badge">unknown</span>';
@@ -492,7 +594,9 @@ export function activityHtml() {
         return;
       }
       bar.hidden = false;
-      const why = "Scrolled — list held in place";
+      const why = dialogOpen()
+        ? "Dialog open — list held"
+        : "Scrolled down — list held";
       $("pause-msg").textContent = pendingNew > 0 ? why + " · " + pendingNew + " new" : why;
       $("resume").textContent = pendingNew > 0 ? "Show " + pendingNew + " new" : "Resume live";
     }
@@ -501,10 +605,9 @@ export function activityHtml() {
       entries = liveEntries;
       pendingNew = 0;
       followLive = true;
-      const sc = $("table-scroll");
       ignoreScroll = true;
       render();
-      if (sc) sc.scrollTop = 0;
+      window.scrollTo(0, 0);
       updatePauseBar();
       requestAnimationFrame(() => { ignoreScroll = false; });
     }
@@ -538,17 +641,17 @@ export function activityHtml() {
       const last = (key) => (b.length ? Number(b[b.length - 1][key]) || 0 : 0);
       const cards = [
         {
-          title: "Writes · land",
+          title: "Pushed",
           value: sizes.land,
-          unit: "in ring",
+          unit: "in feed",
           series: b.map((x) => x.land),
           color: "#c8f082",
           hint: "last min " + last("land") + " · Σ60m " + sum("land"),
         },
         {
-          title: "Connect · Nexum",
+          title: "Processed",
           value: sizes.index,
-          unit: "in ring",
+          unit: "in feed",
           series: b.map((x) => x.connect),
           color: "#7eb8d4",
           hint: "rules Σ " + sum("connectRules") + " · AI Σ " + sum("connectAi"),
@@ -559,19 +662,20 @@ export function activityHtml() {
           unit: "Σ60m",
           series: b.map((x) => x.relations),
           color: "#d4a574",
-          hint: "Memorix relationship plans from connected graphs",
+          hint: "Relationship plans from Nexum graphs",
         },
         {
-          title: "Reads · fetch",
+          title: "Fetched",
           value: sizes.fetch,
-          unit: "in ring",
+          unit: "in feed",
           series: b.map((x) => x.fetch),
           color: "#3dba7a",
           hint: "last min " + last("fetch") + " · Σ60m " + sum("fetch"),
         },
       ];
       $("charts").innerHTML = cards.map((c) =>
-        '<div class="health-card"><h3>' + escapeHtml(c.title) + "</h3>" +
+        '<div class="health-card">' +
+        "<h3>" + escapeHtml(c.title) + "</h3>" +
         '<div class="val">' + escapeHtml(c.value) + "<span>" + escapeHtml(c.unit) + "</span></div>" +
         sparkline(c.series, c.color) +
         '<div class="hint">' + escapeHtml(c.hint) + "</div></div>"
@@ -619,57 +723,80 @@ export function activityHtml() {
     }
 
     function renderDetail(e) {
+      const t = typeOf(e);
       if (e.lane === "land") {
-        return '<div class="detail"><h3>Land · write</h3>' +
-          '<div>address <span class="mono">' + escapeHtml(e.objectType + "/" + e.contentType + "/" + e.recordId) + "</span></div>" +
-          "<div>revision <strong>" + escapeHtml(e.revision) + "</strong> · outcome " + escapeHtml(e.outcome) + "</div>" +
-          (e.indexing
-            ? "<div>Nexum " + nexumLandCell(e.indexing) +
-              (e.indexing.reason
-                ? ' <span class="mono">(' + escapeHtml(e.indexing.reason) + ")</span>"
-                : "") +
-              "</div>"
-            : "") +
-          "</div>";
+        return '<dl class="facts">' +
+          fact("Time", escapeHtml(fmtTime(e.ts))) +
+          fact("Org", escapeHtml(e.orgId || "—")) +
+          fact("Caller", escapeHtml(e.caller || "—")) +
+          fact("Object type", '<span class="mono">' + escapeHtml(t.ot || "—") + "</span>") +
+          fact("Content type", '<span class="mono">' + escapeHtml(t.ct || "—") + "</span>") +
+          fact("Record", '<span class="mono">' + escapeHtml(e.recordId || "—") + "</span>") +
+          fact("Revision", escapeHtml(e.revision)) +
+          fact("Outcome", escapeHtml(e.outcome || "—")) +
+          (e.indexing ? fact("Nexum", nexumLandFull(e.indexing)) : "") +
+          "</dl>";
       }
       if (e.lane === "fetch") {
-        return '<div class="detail"><h3>Fetch · read</h3>' +
-          "<div>mode " + escapeHtml(e.mode) + " · hit " + (e.hit ? "yes" : "no") +
-          (e.count != null ? " · count " + e.count : "") +
-          (e.knowledgeGraph ? " · knowledge-graph subject" : "") +
-          "</div></div>";
+        return '<dl class="facts">' +
+          fact("Time", escapeHtml(fmtTime(e.ts))) +
+          fact("Org", escapeHtml(e.orgId || "—")) +
+          fact("Caller", escapeHtml(e.caller || "—")) +
+          fact("Object type", '<span class="mono">' + escapeHtml(t.ot || "—") + "</span>") +
+          fact("Content type", '<span class="mono">' + escapeHtml(t.ct || "—") + "</span>") +
+          fact("Mode", escapeHtml(e.mode || "—")) +
+          fact("Record", '<span class="mono">' + escapeHtml(e.recordId || "—") + "</span>") +
+          fact("Hit", e.hit ? "yes" : "no") +
+          (e.count != null ? fact("Count", escapeHtml(e.count)) : "") +
+          (e.knowledgeGraph ? fact("Kind", "knowledge-graph subject") : "") +
+          "</dl>";
       }
-      let html = '<div class="detail"><h3>Connect · Nexum</h3>';
-      html += "<div>status " + statusBadge(e.status) + "</div>";
+      let html = '<dl class="facts">';
+      html += fact("Time", escapeHtml(fmtTime(e.ts)));
+      html += fact("Org", escapeHtml(e.orgId || "—"));
+      html += fact("Status", statusBadge(e.status));
       if (e.analyzeMode || e.analyzeMethod) {
-        html += "<div>analyze " + modeBadge(e.analyzeMode || "unknown") +
-          (e.analyzeMethod ? ' <span class="mono">(' + escapeHtml(e.analyzeMethod) + ")</span>" : "") +
-          "</div>";
+        html += fact("How", modeBadge(e.analyzeMode || "unknown", false) +
+          (e.analyzeMethod ? ' <span class="mono">' + escapeHtml(e.analyzeMethod) + "</span>" : ""));
       }
-      if (e.operationId) html += '<div>operation <span class="mono">' + escapeHtml(e.operationId) + "</span></div>";
-      if (e.source) html += "<div>source " + addr(e.source) + "</div>";
-      if (e.snapshot) html += "<div>snapshot " + addr(e.snapshot) + "</div>";
+      html += fact("Object type", '<span class="mono">' + escapeHtml(t.ot || "—") + "</span>");
+      html += fact("Content type", '<span class="mono">' + escapeHtml(t.ct || "—") + "</span>");
+      if (e.operationId) html += fact("Operation", '<span class="mono">' + escapeHtml(e.operationId) + "</span>");
+      if (e.source) html += fact("Source", addr(e.source));
+      if (e.snapshot) html += fact("Snapshot", addr(e.snapshot));
       if (e.sourceRefs && e.sourceRefs.length) {
-        html += '<div>sourceRefs <span class="mono">' + escapeHtml(e.sourceRefs.join(", ")) + "</span></div>";
+        html += fact("Source refs", '<span class="mono">' + escapeHtml(e.sourceRefs.join(", ")) + "</span>");
       }
-      html += "<div>nodes <strong>" + escapeHtml(e.nodeCount ?? 0) +
-        "</strong> · graph edges <strong>" + escapeHtml(e.edgeCount ?? 0) +
-        "</strong> · relations created <strong>" + escapeHtml(e.relationCount ?? 0) + "</strong></div>";
-      if (e.error) html += '<div style="color:var(--bad)">' + escapeHtml(e.error) + "</div>";
+      html += fact("Nodes", escapeHtml(e.nodeCount ?? 0));
+      html += fact("Graph edges", escapeHtml(e.edgeCount ?? 0));
+      html += fact("Relations", escapeHtml(e.relationCount ?? 0));
+      {
+        const snapId = e.snapshot && e.snapshot.recordId;
+        const src0 = e.sourceRefs && e.sourceRefs[0];
+        const graphHref = snapId
+          ? "/_live/graph?recordId=" + encodeURIComponent(snapId)
+          : src0
+            ? "/_live/graph?source=" + encodeURIComponent(src0)
+            : "/_live/graph";
+        html += fact("Graph", '<a href="' + escapeHtml(graphHref) + '">Open stored graph</a>');
+      }
+      if (e.error) html += fact("Error", '<span style="color:var(--bad)">' + escapeHtml(e.error) + "</span>");
+      html += "</dl>";
       const edges = e.edgeSummaries || [];
-      if (edges.length) {
-        html += "<h3 style='margin-top:12px'>Edges</h3><ul class='edge-list'>";
-        for (const ed of edges) {
-          html += "<li>" + escapeHtml(ed.from) + " → " + escapeHtml(ed.to) +
-            (ed.label ? " <span class='mono'>(" + escapeHtml(ed.label) + ")</span>" : "") +
-            "</li>";
+      if (edges.length || (e.nodeLabels && e.nodeLabels.length)) {
+        html += '<div class="detail">';
+        if (edges.length) {
+          html += "<h3>Edges</h3><ul class='edge-list'>";
+          for (const ed of edges) {
+            html += "<li>" + escapeHtml(ed.from) + " → " + escapeHtml(ed.to) +
+              (ed.label ? " <span class='mono'>(" + escapeHtml(ed.label) + ")</span>" : "") +
+              "</li>";
+          }
+          html += "</ul>";
         }
-        html += "</ul>";
-      }
-      if ((e.nodeLabels && e.nodeLabels.length) || edges.length) {
         html += renderGraphSvg(e.nodeLabels || [], edges);
+        html += "</div>";
       }
-      html += "</div>";
       return html;
     }
 
@@ -717,33 +844,95 @@ export function activityHtml() {
         fmtTime(e.ts),
         escapeHtml(e.orgId),
         statusBadge(e.status),
-        modeBadge(e.analyzeMode || (e.status === "connected" ? "unknown" : "")),
+        modeBadge(e.analyzeMode || (e.status === "connected" ? "unknown" : ""), true),
         ...typeCells(e),
         e.snapshot
           ? '<span class="mono">' + escapeHtml(e.snapshot.recordId) + "</span>"
           : "—",
         (e.relationCount != null || e.edgeCount != null)
-          ? escapeHtml((e.relationCount ?? 0) + " rel / " + (e.edgeCount ?? 0) + " edges")
+          ? '<span class="mono" title="' + escapeHtml((e.relationCount ?? 0) + " rel / " + (e.edgeCount ?? 0) + " edges") + '">' +
+            escapeHtml((e.relationCount ?? 0) + "/" + (e.edgeCount ?? 0)) + "</span>"
           : "—",
       ];
     }
 
     function headersForLane() {
-      if (lane === "land") return ["Time", "Org", "Caller", "OT", "CT", "Record", "Outcome", "Nexum"];
-      if (lane === "fetch") return ["Time", "Org", "Caller", "OT", "CT", "Mode", "Record", "Hit"];
-      return ["Time", "Org", "Status", "How", "OT", "CT", "Snapshot", "Relations"];
+      if (lane === "land") return ["Time", "Org", "Caller", "Object type", "Content type", "Record", "Outcome", "Nexum"];
+      if (lane === "fetch") return ["Time", "Org", "Caller", "Object type", "Content type", "Mode", "Record", "Hit"];
+      return ["Time", "Org", "Status", "How", "Object type", "Content type", "Snapshot", "Rel/Edges"];
     }
 
     const LANE_HINT = {
-      land: "<strong>Land</strong> — writes. <em>Nexum</em> column: skipped (with why) or queued · analyze. Rules vs AI only appear on Connect after analyze finishes.",
-      index: "<strong>Connect</strong> — Nexum graph builds. How = <em>rules · no AI</em> or <em>AI</em>. Relations = relationship plans created.",
-      fetch: "<strong>Fetch</strong> — recent reads (up to " + capacity + ").",
+      land: "<strong>Pushed</strong> — data written into Memorix. The <em>Nexum</em> column is short (<em>no-pol</em>, <em>queued</em>, …): whether this write was sent on to processing. Open a row for the full reason. Rules vs AI show on Processed after Nexum finishes.",
+      index: "<strong>Processed</strong> — Nexum working on pushed data. How = <em>rules</em> (no AI) or <em>AI</em>. Rel/Edges = relationship plans / graph edges (full counts in the dialog).",
+      fetch: "<strong>Fetched</strong> — data read out of Memorix (up to " + capacity + ").",
     };
 
+    function fmtWhen(iso) {
+      if (!iso) return "";
+      const d = new Date(iso);
+      return Number.isNaN(d.getTime()) ? String(iso) : d.toLocaleString();
+    }
+
+    function joinOr(names) {
+      if (names.length <= 1) return names[0] || "";
+      if (names.length === 2) return names[0] + " or " + names[1];
+      return names.slice(0, -1).join(", ") + ", or " + names[names.length - 1];
+    }
+
+    function applyFreshness(src) {
+      if (!src) return;
+      if (src.startedAt) startedAt = src.startedAt;
+      if (src.latest) {
+        latest = {
+          land: src.latest.land || null,
+          index: src.latest.index || null,
+          fetch: src.latest.fetch || null,
+        };
+      }
+    }
+
+    function renderBanner() {
+      const el = $("quiet-banner");
+      if (!el) return;
+      const rows = [
+        { quiet: "pushed", last: "push", n: sizes.land || 0, ts: latest.land },
+        { quiet: "processed", last: "processed event", n: sizes.index || 0, ts: latest.index },
+        { quiet: "fetched", last: "fetch", n: sizes.fetch || 0, ts: latest.fetch },
+      ];
+      const silent = rows.filter((r) => !r.n);
+      const active = rows.filter((r) => r.n && r.ts);
+      if (!silent.length) {
+        el.hidden = true;
+        el.innerHTML = "";
+        return;
+      }
+      const since = fmtWhen(startedAt);
+      let html = "<strong>Nothing " + escapeHtml(joinOr(silent.map((r) => r.quiet))) + "</strong>";
+      html += since
+        ? " since " + escapeHtml(since) + ", when this process started."
+        : " in this process.";
+      if (active.length) {
+        html += " " + active.map((r) =>
+          "Last " + escapeHtml(r.last) + " " + escapeHtml(fmtWhen(r.ts)) + "."
+        ).join(" ");
+      }
+      el.hidden = false;
+      el.innerHTML = html;
+    }
+
     function emptyMessage() {
-      if (lane === "land") return "No writes match these filters (or the ring is empty).";
-      if (lane === "index") return "No Nexum connects match these filters (or none yet).";
-      return "No reads match these filters (or the ring is empty).";
+      const n = laneSize();
+      const since = fmtWhen(startedAt);
+      const sinceBit = since ? " since " + since + "." : " in this process.";
+      if (!n) {
+        if (lane === "land") return "Nothing pushed" + sinceBit;
+        if (lane === "index") return "Nothing processed" + sinceBit;
+        return "Nothing fetched" + sinceBit;
+      }
+      if (lane === "land") return "No pushed data matches these filters.";
+      if (lane === "index") return "No processed data matches these filters.";
+      return "No fetched data matches these filters.";
     }
 
     function fillSelect(sel, values, current) {
@@ -802,37 +991,44 @@ export function activityHtml() {
       });
     }
 
+    function laneSize() {
+      if (lane === "land") return sizes.land || 0;
+      if (lane === "index") return sizes.index || 0;
+      return sizes.fetch || 0;
+    }
+
     function updateSummary(shownCount, totalCount) {
       $("summary").innerHTML =
-        "<span>writes <strong>" + sizes.land + "/" + capacity + "</strong></span>" +
-        "<span>connects <strong>" + sizes.index + "/" + capacity + "</strong></span>" +
-        "<span>reads <strong>" + sizes.fetch + "/" + capacity + "</strong></span>" +
-        "<span>showing <strong>" + shownCount + "</strong> of <strong>" + totalCount + "</strong></span>";
+        "<span>pushed <strong>" + sizes.land + "/" + capacity + "</strong></span>" +
+        "<span>processed <strong>" + sizes.index + "/" + capacity + "</strong></span>" +
+        "<span>fetched <strong>" + sizes.fetch + "/" + capacity + "</strong></span>" +
+        "<span>showing <strong>" + shownCount + "</strong> latest of <strong>" + totalCount + "</strong></span>";
     }
 
     function render() {
+      renderBanner();
       $("lane-hint").innerHTML = LANE_HINT[lane] || "";
       refreshFilterOptions(entries);
       const shown = filteredEntries();
-      updateSummary(shown.length, entries.length);
+      updateSummary(shown.length, laneSize());
       renderCharts();
       updatePauseBar();
 
-      const sc = $("table-scroll");
-      const prevScroll = sc.scrollTop;
+      const wrap = $("table-wrap");
+      const prevY = window.scrollY;
       ignoreScroll = true;
 
       if (!shown.length) {
-        sc.innerHTML = "<p class='empty'>" + escapeHtml(emptyMessage()) + "</p>";
+        wrap.innerHTML = "<p class='empty'>" + escapeHtml(emptyMessage()) + "</p>";
         requestAnimationFrame(() => { ignoreScroll = false; });
         return;
       }
       const heads = headersForLane();
       const colW = lane === "fetch"
-        ? ["8%","7%","10%","12%","14%","7%","30%","12%"]
+        ? ["8%","7%","9%","14%","16%","7%","27%","12%"]
         : lane === "index"
-          ? ["8%","7%","9%","11%","12%","14%","23%","16%"]
-          : ["8%","7%","11%","12%","14%","26%","8%","14%"];
+          ? ["8%","7%","8%","10%","14%","16%","25%","12%"]
+          : ["8%","7%","10%","14%","16%","26%","9%","10%"];
       let html = '<table class="list"><colgroup>' +
         colW.map((w) => '<col style="width:' + w + '">').join("") +
         "</colgroup><thead><tr>" + heads.map((h) => "<th>" + h + "</th>").join("") + "</tr></thead><tbody>";
@@ -846,10 +1042,10 @@ export function activityHtml() {
           }).join("") + "</tr>";
       });
       html += "</tbody></table>";
-      sc.innerHTML = html;
-      if (listHeld()) sc.scrollTop = prevScroll;
+      wrap.innerHTML = html;
+      if (listHeld()) window.scrollTo(0, prevY);
       requestAnimationFrame(() => { ignoreScroll = false; });
-      sc.querySelectorAll("tr.clickable").forEach((tr) => {
+      wrap.querySelectorAll("tr.clickable").forEach((tr) => {
         tr.addEventListener("click", () => {
           const k = tr.getAttribute("data-key");
           const e = shown.find((row) => stableKey(row) === k);
@@ -858,22 +1054,30 @@ export function activityHtml() {
       });
     }
 
+    let loadSeq = 0;
     async function load(applyNow) {
+      const seq = ++loadSeq;
+      const requested = lane;
       try {
         const [actRes, serRes] = await Promise.all([
-          fetch("/_live/api/activity?lane=" + encodeURIComponent(lane) + "&limit=10000"),
+          fetch("/_live/api/activity?lane=" + encodeURIComponent(requested) + "&limit=400"),
           fetch("/_live/api/activity-series?minutes=60"),
         ]);
+        if (seq !== loadSeq || requested !== lane) return;
         const body = await actRes.json();
+        if (seq !== loadSeq || requested !== lane) return;
         if (!actRes.ok || body.ok === false) throw new Error(body?.error?.message || ("HTTP " + actRes.status));
         liveEntries = body.entries || [];
         sizes = body.sizes || sizes;
         capacity = body.capacity || 10000;
+        applyFreshness(body);
         if (serRes.ok) {
           const ser = await serRes.json();
           seriesBuckets = ser.buckets || [];
           if (ser.sizes) sizes = ser.sizes;
+          applyFreshness(ser);
         }
+        if (seq !== loadSeq || requested !== lane) return;
         renderCharts();
         if (applyNow || !listHeld()) {
           entries = liveEntries;
@@ -882,11 +1086,13 @@ export function activityHtml() {
         } else {
           countNew();
           const shown = filteredEntries();
-          updateSummary(shown.length, entries.length);
+          updateSummary(shown.length, laneSize());
           updatePauseBar();
+          renderBanner();
         }
       } catch (err) {
-        $("table-scroll").innerHTML = "<p class='empty'>" + escapeHtml(err.message || String(err)) + "</p>";
+        if (seq !== loadSeq || requested !== lane) return;
+        $("table-wrap").innerHTML = "<p class='empty'>" + escapeHtml(err.message || String(err)) + "</p>";
       }
     }