nlm-memory 0.4.1 → 0.5.0

package/src/ui/pages/Thread.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { useDataset, relativeAge } from "../lib/dataset.js";
-import type { DatasetSession } from "../lib/dataset.js";
+import type { DatasetSession, Dataset } from "../lib/dataset.js";
 import { SessionDrawer } from "../components/SessionDrawer.js";
 import { PromoteOpenButton } from "../components/PromoteOpenButton.js";
 import { SessionListSkeleton, Skeleton } from "../components/Skeleton.js";
@@ -14,6 +14,8 @@ export function ThreadPage() {
   const drawerSid = params.get("session");
 
   const [sort, setSort] = useState<ThreadSort>(() => readViewSettings().threadSort);
+  const [decisionsExpanded, setDecisionsExpanded] = useState(false);
+  const [openExpanded, setOpenExpanded] = useState(false);
 
   const thread = useMemo(() => {
     if (!data || !entity) return [];
@@ -54,23 +56,7 @@ export function ThreadPage() {
   if (!data) return null;
 
   if (!entity) {
-    return (
-      <div className="page-pad">
-        <h2 className="page-title">Thread</h2>
-        <p className="muted">Pick an entity to view its reasoning history.</p>
-        <ul className="entity-grid">
-          {data.entities.slice(0, 48).map((e) => (
-            <li key={e.canonical}>
-              <Link to={`/thread?entity=${encodeURIComponent(e.canonical)}`} className="card card-lift entity-card">
-                <span className="dot" style={{ background: data.entity_colors[e.canonical] ?? "#666" }} />
-                <span className="entity-name">{e.canonical}</span>
-                <span className="muted small">{e.session_count}</span>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
-    );
+    return <EntityPicker data={data} />;
   }
 
   const decisions = thread.flatMap((s) => s.decisions.map((d) => ({ d, sid: s.id, when: s.started_at })));
@@ -85,31 +71,41 @@ export function ThreadPage() {
         <h2 className="page-title">{entity}</h2>
         <span className="muted">{thread.length} session{thread.length === 1 ? "" : "s"}</span>
         <span className="header-spacer" />
-        <select className="form-input" value={sort} onChange={(e) => setSort(e.target.value as "recent" | "oldest")}>
-          <option value="recent">Most recent first</option>
-          <option value="oldest">Oldest first</option>
-        </select>
+        <div className="filter-group" role="group" aria-label="Sort order">
+          {(["recent", "oldest"] as const).map((s) => (
+            <button key={s} type="button" className={`chip${sort === s ? " active" : ""}`} onClick={() => setSort(s)}>
+              {s === "recent" ? "recent first" : "oldest first"}
+            </button>
+          ))}
+        </div>
       </div>
 
       <div className="thread-grid">
         <section className="card">
           <header className="card-head"><h3>Decisions</h3><span className="muted small">{decisions.length}</span></header>
           <ul className="marker-list">
-            {decisions.slice(0, 30).map((d, i) => (
+            {(decisionsExpanded ? decisions : decisions.slice(0, 30)).map((d, i) => (
               <li key={i} className="marker-row">
                 <span className="live-tag" data-kind="decision">decision</span>
                 <span className="marker-text">{d.d}</span>
                 <button type="button" className="link-button" onClick={() => openSession(d.sid)}>{relativeAge(d.when)}</button>
               </li>
             ))}
-            {decisions.length === 0 && <li className="muted small">No decisions captured.</li>}
+            {decisions.length === 0 && <li className="muted empty-row">No decisions captured yet.</li>}
+            {decisions.length > 30 && (
+              <li style={{ padding: "8px 14px" }}>
+                <button type="button" className="link-button" onClick={() => setDecisionsExpanded((v) => !v)}>
+                  {decisionsExpanded ? "Show less" : `Showing 30 of ${decisions.length} — show all`}
+                </button>
+              </li>
+            )}
           </ul>
         </section>
 
         <section className="card">
           <header className="card-head"><h3>Open questions</h3><span className="muted small">{open.length}</span></header>
           <ul className="marker-list">
-            {open.slice(0, 30).map((o, i) => (
+            {(openExpanded ? open : open.slice(0, 30)).map((o, i) => (
               <li key={`${o.id}-${i}`} className="marker-row marker-row-promotable">
                 <span className="live-tag" data-kind="open">open</span>
                 <span className="marker-text">{o.q}</span>
@@ -119,16 +115,35 @@ export function ThreadPage() {
                 </div>
               </li>
             ))}
-            {open.length === 0 && <li className="muted small">No open questions.</li>}
+            {open.length === 0 && <li className="muted empty-row">No open questions captured yet.</li>}
+            {open.length > 30 && (
+              <li style={{ padding: "8px 14px" }}>
+                <button type="button" className="link-button" onClick={() => setOpenExpanded((v) => !v)}>
+                  {openExpanded ? "Show less" : `Showing 30 of ${open.length} — show all`}
+                </button>
+              </li>
+            )}
           </ul>
         </section>
       </div>
 
-      <ThreadSessionList thread={thread} onOpenSession={openSession} />
+      <ThreadSessionList thread={thread} entity={entity} onOpenSession={openSession} />
 
-      {drawerSid && (
-        <SessionDrawer sessionId={drawerSid} onClose={closeSession} entityColor={entityColor} />
-      )}
+      {drawerSid && (() => {
+        const idx = thread.findIndex((s) => s.id === drawerSid);
+        const prevId = idx < thread.length - 1 ? thread[idx + 1]!.id : null;
+        const nextId = idx > 0 ? thread[idx - 1]!.id : null;
+        return (
+          <SessionDrawer
+            sessionId={drawerSid}
+            onClose={closeSession}
+            onNavigate={openSession}
+            prevSessionId={prevId}
+            nextSessionId={nextId}
+            entityColor={entityColor}
+          />
+        );
+      })()}
     </div>
   );
 }
@@ -139,20 +154,30 @@ const PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const;
 
 function ThreadSessionList({
   thread,
+  entity,
   onOpenSession,
 }: {
   thread: DatasetSession[];
+  entity: string;
   onOpenSession: (id: string) => void;
 }) {
+  const [runtimeFilter, setRuntimeFilter] = useState<string>("all");
   const [query, setQuery] = useState("");
   const [status, setStatus] = useState<StatusFilter>("all");
   const [markers, setMarkers] = useState<MarkerFilter>("all");
   const [pageSize, setPageSize] = useState<number>(25);
   const [page, setPage] = useState(0);
 
+  const threadRuntimes = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const s of thread) counts.set(s.runtime, (counts.get(s.runtime) ?? 0) + 1);
+    return [...counts.entries()].sort((a, b) => b[1] - a[1]).map(([r]) => r);
+  }, [thread]);
+
   const filtered = useMemo(() => {
     const q = query.toLowerCase().trim();
     return thread.filter((s) => {
+      if (runtimeFilter !== "all" && s.runtime !== runtimeFilter) return false;
       if (status !== "all" && s.status !== status) return false;
       if (markers === "decisions" && s.decisions.length === 0) return false;
       if (markers === "open" && s.open_questions.length === 0) return false;
@@ -164,10 +189,13 @@ function ThreadSessionList({
         s.open.some((o) => o.toLowerCase().includes(q))
       );
     });
-  }, [thread, query, status, markers]);
+  }, [thread, query, status, markers, runtimeFilter]);
 
   // Reset page when filter inputs change
-  useEffect(() => { setPage(0); }, [query, status, markers, pageSize]);
+  useEffect(() => { setPage(0); }, [query, status, markers, pageSize, runtimeFilter]);
+
+  // Reset runtime filter when entity changes
+  useEffect(() => { setRuntimeFilter("all"); }, [entity]);
 
   const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));
   const currentPage = Math.min(page, pageCount - 1);
@@ -178,36 +206,72 @@ function ThreadSessionList({
     <>
       <div className="thread-sessions-head">
         <h3 className="section-title thread-sessions-title">Sessions</h3>
-        <input
-          className="search-input"
-          placeholder="search label, summary, decisions, open…"
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-        />
+        <div className="search-wrap">
+          <input
+            className="search-input"
+            placeholder="search label, summary, decisions, open…"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Escape") setQuery(""); }}
+          />
+          {query && (
+            <button type="button" className="search-clear" onClick={() => setQuery("")} aria-label="Clear search">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+          )}
+        </div>
       </div>
 
       <div className="thread-filters">
-        <div className="filter-group" role="group" aria-label="Status filter">
-          {(["all", "active", "idle", "closed", "superseded"] as const).map((s) => (
+        {threadRuntimes.length > 1 && (
+          <div className="filter-group" role="group" aria-label="Agent filter">
             <button
-              key={s}
               type="button"
-              className={`chip${status === s ? " active" : ""}`}
-              data-status={s === "all" ? undefined : s}
-              onClick={() => setStatus(s)}
-            >{s}</button>
-          ))}
+              className={`chip${runtimeFilter === "all" ? " active" : ""}`}
+              onClick={() => setRuntimeFilter("all")}
+            >all</button>
+            {threadRuntimes.map((r) => {
+              const count = thread.filter((s) => s.runtime === r).length;
+              return (
+                <button
+                  key={r}
+                  type="button"
+                  className={`chip${runtimeFilter === r ? " active" : ""}`}
+                  onClick={() => setRuntimeFilter(r)}
+                >{r} · {count}</button>
+              );
+            })}
+          </div>
+        )}
+        <div className="filter-group" role="group" aria-label="Status filter">
+          {(["all", "active", "idle", "closed", "superseded"] as const).map((s) => {
+            const count = s === "all" ? thread.length : thread.filter((x) => x.status === s).length;
+            return (
+              <button
+                key={s}
+                type="button"
+                className={`chip${status === s ? " active" : ""}`}
+                data-status={s === "all" ? undefined : s}
+                onClick={() => setStatus(s)}
+              >{s} · {count}</button>
+            );
+          })}
         </div>
         <div className="filter-group" role="group" aria-label="Marker filter">
-          {(["all", "decisions", "open"] as const).map((m) => (
-            <button
-              key={m}
-              type="button"
-              className={`chip${markers === m ? " active" : ""}`}
-              data-marker={m === "all" ? undefined : m}
-              onClick={() => setMarkers(m)}
-            >{m === "all" ? "all markers" : m}</button>
-          ))}
+          {(["all", "decisions", "open"] as const).map((m) => {
+            const count = m === "decisions"
+              ? thread.filter((s) => s.decisions.length > 0).length
+              : thread.filter((s) => s.open_questions.length > 0).length;
+            return (
+              <button
+                key={m}
+                type="button"
+                className={`chip${markers === m ? " active" : ""}`}
+                data-marker={m === "all" ? undefined : m}
+                onClick={() => setMarkers(m)}
+              >{m === "all" ? "all" : `${m} · ${count}`}</button>
+            );
+          })}
         </div>
         <span className="header-spacer" />
         <span className="muted small">{filtered.length} match{filtered.length === 1 ? "" : "es"}</span>
@@ -225,7 +289,7 @@ function ThreadSessionList({
           </li>
         ))}
         {slice.length === 0 && (
-          <li className="muted small empty-row">
+          <li className="muted empty-row">
             {thread.length === 0 ? "No sessions yet." : "No sessions match the current filters."}
           </li>
         )}
@@ -260,3 +324,150 @@ function ThreadSessionList({
   );
 }
 
+type EntitySort = "most-active" | "least-active" | "a-z" | "z-a";
+const ENTITY_PAGE_SIZE_OPTIONS = [24, 48, 96] as const;
+
+function EntityPicker({ data }: { data: Dataset }) {
+  const [runtimeFilter, setRuntimeFilter] = useState<string>("all");
+  const [entitySearch, setEntitySearch] = useState("");
+  const [sort, setSort] = useState<EntitySort>("most-active");
+  const [pageSize, setPageSize] = useState<number>(48);
+  const [page, setPage] = useState(0);
+
+  const entityRuntimeMap = useMemo(() => {
+    const m = new Map<string, Set<string>>();
+    for (const s of data.sessions) {
+      for (const e of s.entities) {
+        let set = m.get(e);
+        if (!set) { set = new Set(); m.set(e, set); }
+        set.add(s.runtime);
+      }
+    }
+    return m;
+  }, [data.sessions]);
+
+  const sortedRuntimes = useMemo(() => {
+    return [...data.runtimes].sort((a, b) => b.sessions_total - a.sessions_total);
+  }, [data.runtimes]);
+
+  const filtered = useMemo(() => {
+    const q = entitySearch.toLowerCase().trim();
+    const matches = q
+      ? data.entities.filter((e) => e.canonical.toLowerCase().includes(q))
+      : [...data.entities];
+    const result = runtimeFilter === "all"
+      ? matches
+      : matches.filter((e) => entityRuntimeMap.get(e.canonical)?.has(runtimeFilter) ?? false);
+    result.sort((a, b) => {
+      if (sort === "most-active") return b.session_count - a.session_count;
+      if (sort === "least-active") return a.session_count - b.session_count;
+      if (sort === "a-z") return a.canonical.localeCompare(b.canonical);
+      return b.canonical.localeCompare(a.canonical);
+    });
+    return result;
+  }, [data.entities, entitySearch, sort, runtimeFilter, entityRuntimeMap]);
+
+  useEffect(() => { setPage(0); }, [entitySearch, sort, pageSize, runtimeFilter]);
+
+  const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));
+  const currentPage = Math.min(page, pageCount - 1);
+  const start = currentPage * pageSize;
+  const slice = filtered.slice(start, start + pageSize);
+
+  return (
+    <div className="page-pad">
+      <h2 className="page-title">Thread</h2>
+      <p className="muted">Pick an entity to view its reasoning history.</p>
+      <div className="thread-sessions-head" style={{ marginTop: 16 }}>
+        <div className="search-wrap" style={{ maxWidth: 320 }}>
+          <input
+            className="search-input"
+            placeholder="search entities…"
+            value={entitySearch}
+            onChange={(e) => setEntitySearch(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Escape") setEntitySearch(""); }}
+          />
+          {entitySearch && (
+            <button type="button" className="search-clear" onClick={() => setEntitySearch("")} aria-label="Clear search">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+          )}
+        </div>
+        <span className="header-spacer" />
+        <span className="muted small">
+          {entitySearch
+            ? `${filtered.length} of ${data.entities.length} entities`
+            : `${data.entities.length} entities`}
+        </span>
+      </div>
+      <div className="thread-filters">
+        <div className="filter-group" role="group" aria-label="Agent filter">
+          <button
+            type="button"
+            className={`chip${runtimeFilter === "all" ? " active" : ""}`}
+            onClick={() => setRuntimeFilter("all")}
+          >all</button>
+          {sortedRuntimes.map((r) => (
+            <button
+              key={r.name}
+              type="button"
+              className={`chip${runtimeFilter === r.name ? " active" : ""}`}
+              onClick={() => setRuntimeFilter(r.name)}
+            >{r.name} · {r.sessions_total}</button>
+          ))}
+        </div>
+        <div className="filter-group" role="group" aria-label="Sort order">
+          {(["most-active", "least-active", "a-z", "z-a"] as const).map((s) => (
+            <button
+              key={s}
+              type="button"
+              className={`chip${sort === s ? " active" : ""}`}
+              onClick={() => setSort(s)}
+            >
+              {s === "most-active" ? "most active" : s === "least-active" ? "least active" : s}
+            </button>
+          ))}
+        </div>
+      </div>
+      <ul className="entity-grid">
+        {slice.map((e) => (
+          <li key={e.canonical}>
+            <Link to={`/thread?entity=${encodeURIComponent(e.canonical)}`} className="card card-lift entity-card">
+              <span className="dot" style={{ background: data.entity_colors[e.canonical] ?? "#666" }} />
+              <span className="entity-name">{e.canonical}</span>
+              <span className="muted small">{e.session_count}</span>
+            </Link>
+          </li>
+        ))}
+        {slice.length === 0 && (
+          <li style={{ gridColumn: "1 / -1" }} className="muted empty-row">No entities match.</li>
+        )}
+      </ul>
+      {filtered.length > pageSize && (
+        <div className="pagination">
+          <div className="page-size">
+            <label className="form-label">Per page</label>
+            <select
+              className="form-input form-input-inline"
+              value={pageSize}
+              onChange={(e) => setPageSize(Number.parseInt(e.target.value, 10))}
+            >
+              {ENTITY_PAGE_SIZE_OPTIONS.map((n) => <option key={n} value={n}>{n}</option>)}
+            </select>
+          </div>
+          <span className="header-spacer" />
+          <span className="muted small">
+            {start + 1}–{Math.min(start + pageSize, filtered.length)} of {filtered.length}
+          </span>
+          <div className="page-nav">
+            <button type="button" className="chip" disabled={currentPage === 0} onClick={() => setPage(0)}>« first</button>
+            <button type="button" className="chip" disabled={currentPage === 0} onClick={() => setPage((p) => Math.max(0, p - 1))}>‹ prev</button>
+            <span className="page-indicator mono">{currentPage + 1} / {pageCount}</span>
+            <button type="button" className="chip" disabled={currentPage >= pageCount - 1} onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}>next ›</button>
+            <button type="button" className="chip" disabled={currentPage >= pageCount - 1} onClick={() => setPage(pageCount - 1)}>last »</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/styles.css

@@ -1314,7 +1314,7 @@ a.session-label:hover { color: var(--accent); }
   --river-label-w: 200px;
   --river-row-gap: 3px;
   --river-cell-gap: 2px;
-  --river-cell-h: 16px;
+  --river-cell-h: 20px;
   padding: 12px;
   width: 100%;
   display: flex;
@@ -1461,7 +1461,7 @@ a.session-label:hover { color: var(--accent); }
 }
 
 .river-cell {
-  transition: transform 0.08s ease, outline-color var(--ease);
+  transition: outline-color var(--ease);
   outline: 1px solid transparent;
   outline-offset: 1px;
   position: relative;
@@ -1469,7 +1469,6 @@ a.session-label:hover { color: var(--accent); }
 }
 
 .river-cell:hover {
-  transform: scale(1.3);
   outline-color: rgba(255, 255, 255, 0.7);
   z-index: 1;
 }
@@ -1626,6 +1625,55 @@ a.session-label:hover { color: var(--accent); }
   gap: 6px;
 }
 
+/* ── Supersedence banners (SessionDrawer) ───────────────────────────────── */
+.supersedence-banner {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: var(--r-sm);
+  margin-bottom: 10px;
+  font-size: var(--text-sm);
+}
+.supersedence-banner--superseded {
+  background: rgba(255, 107, 53, 0.08);
+  border: 1px solid rgba(255, 107, 53, 0.25);
+  color: var(--danger);
+}
+.supersedence-banner--supersedes {
+  background: rgba(168, 168, 168, 0.06);
+  border: 1px solid var(--border-2);
+  color: var(--text-2);
+}
+.supersedence-label {
+  font-weight: 500;
+  white-space: nowrap;
+}
+.supersedence-ids {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.supersedence-id {
+  color: inherit;
+  opacity: 0.8;
+}
+.supersedence-link {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.supersedence-link:hover {
+  opacity: 0.75;
+}
+
 /* ── Card head with stacked filters ──────────────────────────────────── */
 .card-head.card-head-stack {
   flex-direction: column;
@@ -1678,8 +1726,6 @@ a.session-label:hover { color: var(--accent); }
 
 .thread-filters .filter-group { flex-wrap: wrap; }
 
-.empty-row { padding: 16px 14px; }
-
 .pagination {
   display: flex;
   align-items: center;
@@ -1764,3 +1810,81 @@ a.session-label:hover { color: var(--accent); }
 .pagination.pagination-compact .page-indicator { min-width: 40px; padding: 0 4px; font-size: var(--text-xs); }
 .pagination.pagination-compact .chip { padding: 1px 6px; font-size: var(--text-xs); }
 .pagination.pagination-compact .form-label { font-size: 9px; }
+
+/* ── River date label month boundary ───────────────────────────────────── */
+.river-date-cell--month-start {
+  border-left: 1px solid var(--border-2);
+  padding-left: 3px;
+}
+
+/* ── River legend ────────────────────────────────────────────────────────── */
+.river-legend { display: flex; align-items: center; gap: 3px; }
+.river-legend-cell { width: 12px; height: 12px; border-radius: 2px; background: var(--surface-2); }
+.river-legend-cell.tier-1 { background: rgba(232,255,110,0.20); }
+.river-legend-cell.tier-2 { background: rgba(232,255,110,0.40); }
+.river-legend-cell.tier-3 { background: rgba(232,255,110,0.65); }
+.river-legend-cell.tier-4 { background: var(--accent); }
+
+/* ── Empty row ───────────────────────────────────────────────────────────── */
+.empty-row { color: var(--text-2); padding: 16px 0; font-size: var(--text-sm); }
+
+/* ── Session meta 2-line wrap ───────────────────────────────────────────── */
+.session-meta {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+}
+
+/* ── Search clear button ─────────────────────────────────────────────────── */
+.search-wrap { position: relative; display: flex; align-items: center; }
+.search-wrap .search-input { padding-right: 28px; width: 100%; }
+.search-clear { position: absolute; right: 6px; background: none; border: none; color: var(--text-3); cursor: pointer; display: flex; align-items: center; padding: 0; }
+.search-clear:hover { color: var(--text-1); }
+
+/* ── Drawer nav buttons ──────────────────────────────────────────────────── */
+.drawer-nav {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  flex-shrink: 0;
+}
+.drawer-nav-btn {
+  background: none;
+  border: 1px solid var(--border-2);
+  color: var(--text-3);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px;
+  border-radius: var(--r-sm);
+  transition: color var(--ease), border-color var(--ease), background var(--ease);
+}
+.drawer-nav-btn:hover:not(:disabled) { color: var(--text-1); border-color: var(--border-3); background: var(--surface-2); }
+.drawer-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+
+/* ── Dot pulse animation ─────────────────────────────────────────────────── */
+.dot-pulse {
+  animation: dot-pulse 2s ease-in-out infinite;
+}
+@keyframes dot-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(1.35); }
+}
+
+/* ── Search page additions ───────────────────────────────────────────────── */
+.search-hint { margin: 8px 0 12px; }
+
+.search-header { position: sticky; top: 0; z-index: 10; background: var(--surface-0); padding-bottom: 12px; border-bottom: 1px solid var(--border-1); margin-bottom: 16px; }
+
+.session-row.is-active { background: var(--surface-2); border-left: 2px solid var(--accent); padding-left: 12px; }
+
+.live-tag[data-kind="summary"] { background: var(--surface-2); color: var(--text-2); }
+.live-tag[data-kind="label"]   { background: var(--surface-2); color: var(--text-1); }
+.live-tag[data-kind="entity"]  { background: var(--accent-glow); border-color: rgba(232,255,110,0.25); color: var(--accent); }
+
+.match-snippet { color: var(--text-2); font-size: var(--text-xs); line-height: var(--lh-base); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
+.match-snippet mark { background: rgba(232,255,110,0.15); color: var(--accent); padding: 0 2px; border-radius: 2px; }

package/tests/integration/getbyids-sqlite.test.ts

@@ -58,3 +58,43 @@ describe("SqliteSessionStore.getByIds", () => {
     expect(s1?.body).toBe("");
   });
 });
+
+describe("SqliteSessionStore.getById — supersedence edges", () => {
+  let tmp: string;
+  let store: SqliteSessionStore;
+
+  beforeEach(() => {
+    tmp = mkdtempSync(join(tmpdir(), "nlm-getbyid-edges-"));
+    store = new SqliteSessionStore({
+      dbPath: join(tmp, "canonical.sqlite"),
+      migrationsDir: MIGRATIONS_DIR,
+    });
+    store.insertSessionForTest(makeSession({ id: "old", label: "old session" }));
+    store.insertSessionForTest(makeSession({ id: "new", label: "new session" }));
+    store.insertEdgeForTest("new", "old", "supersedes");
+  });
+
+  afterEach(() => {
+    store.close();
+    rmSync(tmp, { recursive: true, force: true });
+  });
+
+  it("superseding session reports what it supersedes", async () => {
+    const s = await store.getById("new");
+    expect(s?.supersedes).toEqual(["old"]);
+    expect(s?.supersededBy).toBeNull();
+  });
+
+  it("superseded session reports what superseded it", async () => {
+    const s = await store.getById("old");
+    expect(s?.supersededBy).toBe("new");
+    expect(s?.supersedes).toEqual([]);
+  });
+
+  it("session with no edges has null supersededBy and empty supersedes", async () => {
+    store.insertSessionForTest(makeSession({ id: "unrelated", label: "standalone" }));
+    const s = await store.getById("unrelated");
+    expect(s?.supersededBy).toBeNull();
+    expect(s?.supersedes).toEqual([]);
+  });
+});