nlm-memory 0.4.1 → 0.5.0

package/src/ui/components/SessionDrawer.tsx

@@ -1,9 +1,3 @@
-/**
- * SessionDrawer — right-side detail panel for a single session.
- * Fetches /api/session/:id on open. Shared between Thread (entity timeline)
- * and Pulse (Recent sessions) — and ready for any future caller.
- */
-
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { SessionDrawerSkeleton } from "./Skeleton.js";
@@ -21,16 +15,20 @@ interface SessionDetail {
   entities: string[];
   decisions: string[];
   open: string[];
+  supersededBy: string | null;
+  supersedes: string[];
 }
 
 interface SessionDrawerProps {
   sessionId: string;
   onClose: () => void;
-  /** Optional dot color (Thread passes the entity color). */
   entityColor?: string;
+  onNavigate?: (id: string) => void;
+  prevSessionId?: string | null;
+  nextSessionId?: string | null;
 }
 
-export function SessionDrawer({ sessionId, onClose, entityColor }: SessionDrawerProps) {
+export function SessionDrawer({ sessionId, onClose, entityColor, onNavigate, prevSessionId, nextSessionId }: SessionDrawerProps) {
   const [session, setSession] = useState<SessionDetail | null>(null);
   const [error, setError] = useState<string | null>(null);
 
@@ -54,16 +52,22 @@ export function SessionDrawer({ sessionId, onClose, entityColor }: SessionDrawer
           entities: Array.isArray(raw["entities"]) ? (raw["entities"] as string[]) : [],
           decisions: Array.isArray(raw["decisions"]) ? (raw["decisions"] as string[]) : [],
           open: Array.isArray(raw["open"]) ? (raw["open"] as string[]) : [],
+          supersededBy: typeof raw["supersededBy"] === "string" ? (raw["supersededBy"] as string) : null,
+          supersedes: Array.isArray(raw["supersedes"]) ? (raw["supersedes"] as string[]) : [],
         });
       })
       .catch((e: unknown) => setError(e instanceof Error ? e.message : String(e)));
   }, [sessionId]);
 
   useEffect(() => {
-    const onEsc = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-    window.addEventListener("keydown", onEsc);
-    return () => window.removeEventListener("keydown", onEsc);
-  }, [onClose]);
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") { onClose(); return; }
+      if (e.key === "ArrowLeft" && prevSessionId != null && onNavigate) onNavigate(prevSessionId);
+      if (e.key === "ArrowRight" && nextSessionId != null && onNavigate) onNavigate(nextSessionId);
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose, onNavigate, prevSessionId, nextSessionId]);
 
   return (
     <>
@@ -72,32 +76,75 @@ export function SessionDrawer({ sessionId, onClose, entityColor }: SessionDrawer
         <header className="drawer-head">
           {entityColor && <span className="dot" style={{ background: entityColor }} />}
           <h3 className="drawer-title">{session?.label ?? sessionId}</h3>
+          {(prevSessionId != null || nextSessionId != null) && onNavigate && (
+            <div className="drawer-nav">
+              <button
+                type="button"
+                className="drawer-nav-btn"
+                disabled={prevSessionId == null}
+                onClick={() => prevSessionId && onNavigate(prevSessionId)}
+                aria-label="Previous session"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+              </button>
+              <button
+                type="button"
+                className="drawer-nav-btn"
+                disabled={nextSessionId == null}
+                onClick={() => nextSessionId && onNavigate(nextSessionId)}
+                aria-label="Next session"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
+              </button>
+            </div>
+          )}
           <button type="button" className="drawer-close" onClick={onClose} aria-label="Close">×</button>
         </header>
         {error && <div className="muted error drawer-body">{error}</div>}
         {!session && !error && <SessionDrawerSkeleton />}
         {session && (
           <div className="drawer-body">
-            <dl className="kv-list">
-              <dt className="kv-label">Status</dt>
-              <dd className="kv-value"><span className={`chip-inline status-${session.status}`}>{session.status}</span></dd>
-              <dt className="kv-label">Started</dt>
-              <dd className="kv-value mono small">{session.startedAt ?? "—"}</dd>
-              <dt className="kv-label">Duration</dt>
-              <dd className="kv-value">{session.durationMin ?? "—"} min</dd>
-              <dt className="kv-label">Runtime</dt>
-              <dd className="kv-value mono small">{session.runtime}</dd>
-              <dt className="kv-label">Session ID</dt>
-              <dd className="kv-value mono small">{session.id}</dd>
-            </dl>
-            {session.entities.length > 0 && (
-              <>
-                <h4 className="drawer-section">Entities</h4>
-                <div className="entity-chips">
-                  {session.entities.map((e) => (
-                    <Link key={e} to={`/thread?entity=${encodeURIComponent(e)}`} className="chip" onClick={onClose}>{e}</Link>
+            {session.supersededBy && (
+              <div className="supersedence-banner supersedence-banner--superseded">
+                <span className="supersedence-label">Superseded by</span>
+                {onNavigate ? (
+                  <button
+                    type="button"
+                    className="supersedence-link"
+                    onClick={() => onNavigate(session.supersededBy!)}
+                  >
+                    {session.supersededBy}
+                  </button>
+                ) : (
+                  <span className="supersedence-id mono small">{session.supersededBy}</span>
+                )}
+              </div>
+            )}
+            {session.supersedes.length > 0 && (
+              <div className="supersedence-banner supersedence-banner--supersedes">
+                <span className="supersedence-label">Supersedes</span>
+                <span className="supersedence-ids">
+                  {session.supersedes.map((sid) => (
+                    onNavigate ? (
+                      <button
+                        key={sid}
+                        type="button"
+                        className="supersedence-link"
+                        onClick={() => onNavigate(sid)}
+                      >
+                        {sid}
+                      </button>
+                    ) : (
+                      <span key={sid} className="supersedence-id mono small">{sid}</span>
+                    )
                   ))}
-                </div>
+                </span>
+              </div>
+            )}
+            {session.summary && (
+              <>
+                <h4 className="drawer-section">Summary</h4>
+                <p className="drawer-paragraph">{session.summary}</p>
               </>
             )}
             {session.decisions.length > 0 && (
@@ -116,12 +163,28 @@ export function SessionDrawer({ sessionId, onClose, entityColor }: SessionDrawer
                 </ul>
               </>
             )}
-            {session.summary && (
+            {session.entities.length > 0 && (
               <>
-                <h4 className="drawer-section">Summary</h4>
-                <p className="drawer-paragraph">{session.summary}</p>
+                <h4 className="drawer-section">Entities</h4>
+                <div className="entity-chips">
+                  {session.entities.map((e) => (
+                    <Link key={e} to={`/thread?entity=${encodeURIComponent(e)}`} className="chip" onClick={onClose}>{e}</Link>
+                  ))}
+                </div>
               </>
             )}
+            <dl className="kv-list">
+              <dt className="kv-label">Status</dt>
+              <dd className="kv-value"><span className={`chip-inline status-${session.status}`}>{session.status}</span></dd>
+              <dt className="kv-label">Started</dt>
+              <dd className="kv-value mono small">{session.startedAt ?? "—"}</dd>
+              <dt className="kv-label">Duration</dt>
+              <dd className="kv-value">{session.durationMin ?? "—"} min</dd>
+              <dt className="kv-label">Runtime</dt>
+              <dd className="kv-value mono small">{session.runtime}</dd>
+              <dt className="kv-label">Session ID</dt>
+              <dd className="kv-value mono small">{session.id}</dd>
+            </dl>
             {session.body && (
               <>
                 <h4 className="drawer-section">Transcript excerpt</h4>

package/src/ui/pages/River.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { useDataset, relativeAge } from "../lib/dataset.js";
 import type { DatasetSession } from "../lib/dataset.js";
 import { SessionDrawer } from "../components/SessionDrawer.js";
+import { Skeleton } from "../components/Skeleton.js";
 import { readViewSettings } from "../lib/view-settings.js";
 
 type Span = "7d" | "30d" | "90d" | "all";
@@ -68,7 +69,12 @@ export function RiverPage() {
       }))
       .sort((a, b) => b.total - a.total)
       .slice(0, 24);
-    return { dates, laneRows, total: filtered.length };
+    const recentEntities = new Set<string>(
+      filtered
+        .filter(s => s.started_at && (now - Date.parse(s.started_at)) < 86_400_000)
+        .flatMap(s => s.entities)
+    );
+    return { dates, laneRows, total: filtered.length, recentEntities };
   }, [data, span]);
 
   const onCellClick = (entity: string, date: string) => {
@@ -135,7 +141,19 @@ export function RiverPage() {
     setDragRange(null);
   };
 
-  if (loading && !data) return <div className="page-pad"><div className="muted">Loading dataset…</div></div>;
+  if (loading && !data) return (
+    <div className="page-pad">
+      <div className="river-toolbar"><Skeleton h={22} w={80} /></div>
+      <div className="card" style={{ padding: 12 }}>
+        {Array.from({ length: 8 }).map((_, i) => (
+          <div key={i} className="river-row" style={{ marginBottom: 3 }}>
+            <Skeleton h={14} w={160} />
+            <Skeleton h={20} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
   if (error && !data) return <div className="page-pad"><div className="muted error">{error}</div></div>;
   if (!data || !view) return null;
 
@@ -153,6 +171,13 @@ export function RiverPage() {
             onClick={() => setSpan(s)}
           >{s}</button>
         ))}
+        <div className="river-legend" aria-label="Activity scale">
+          <span className="muted small">less</span>
+          {([0, 1, 2, 3, 4] as const).map((t) => (
+            <span key={t} className={`river-legend-cell tier-${t}`} />
+          ))}
+          <span className="muted small">more</span>
+        </div>
       </div>
 
       <div
@@ -173,40 +198,52 @@ export function RiverPage() {
         <div className="river-row river-row-dates">
           <div className="river-lane-label river-lane-label--header" aria-hidden="true" />
           <div className="river-cells">
-            {view.dates.map((d) => (
-              <div key={d} className="river-date-cell" title={d}>{d.slice(5)}</div>
-            ))}
-          </div>
-        </div>
-        {view.laneRows.map(({ entity, perDate, total }) => (
-          <div key={entity} className="river-row">
-            <button
-              type="button"
-              className="river-lane-label"
-              onClick={() => navigate(`/thread?entity=${encodeURIComponent(entity)}`)}
-            >
-              <span className="dot" style={{ background: data.entity_colors[entity] ?? "#666" }} />
-              <span className="river-lane-name">{entity}</span>
-              <span className="muted small">{total}</span>
-            </button>
-            <div className="river-cells">
-              {view.dates.map((d) => {
-                const v = perDate.get(d) ?? 0;
+            {(() => {
+              const len = view.dates.length;
+              const stride = len <= 60 ? 1 : len <= 120 ? 2 : len <= 250 ? 7 : 14;
+              return view.dates.map((d, index) => {
+                const isMonthStart = d.slice(8, 10) === "01";
+                const cls = ["river-date-cell", isMonthStart ? "river-date-cell--month-start" : ""].filter(Boolean).join(" ");
                 return (
-                  <div
-                    key={d}
-                    className={`river-cell tier-${tier(v)}`}
-                    onMouseEnter={(e) => setHover({ entity, date: d, count: v, x: e.clientX, y: e.clientY })}
-                    onMouseMove={(e) => setHover({ entity, date: d, count: v, x: e.clientX, y: e.clientY })}
-                    onMouseLeave={() => setHover(null)}
-                    onClick={() => v > 0 && onCellClick(entity, d)}
-                    style={v > 0 ? { cursor: "pointer" } : {}}
-                  />
+                  <div key={d} className={cls} title={d}>
+                    {index % stride === 0 ? d.slice(5) : ""}
+                  </div>
                 );
-              })}
-            </div>
+              });
+            })()}
           </div>
-        ))}
+        </div>
+        {view.laneRows.map(({ entity, perDate, total }) => {
+          const isRecent = view.recentEntities.has(entity);
+          return (
+            <div key={entity} className="river-row">
+              <button
+                type="button"
+                className="river-lane-label"
+                onClick={() => navigate(`/thread?entity=${encodeURIComponent(entity)}`)}
+              >
+                <span className={`dot${isRecent ? " dot-pulse" : ""}`} style={{ background: data.entity_colors[entity] ?? "#666" }} />
+                <span className="river-lane-name">{entity}</span>
+                <span className="muted small">{total}</span>
+              </button>
+              <div className="river-cells">
+                {view.dates.map((d) => {
+                  const v = perDate.get(d) ?? 0;
+                  return (
+                    <div
+                      key={d}
+                      className={`river-cell tier-${tier(v)}`}
+                      onMouseEnter={(e) => setHover({ entity, date: d, count: v, x: e.clientX, y: e.clientY })}
+                      onMouseLeave={() => setHover(null)}
+                      onClick={() => v > 0 && onCellClick(entity, d)}
+                      style={v > 0 ? { cursor: "pointer" } : {}}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
       </div>
 
       {view.laneRows.length === 0 && <div className="muted">No entities in this window.</div>}
@@ -229,17 +266,26 @@ export function RiverPage() {
         />
       )}
 
-      {sessionId && (
-        <SessionDrawer
-          sessionId={sessionId}
-          onClose={() => setSessionId(null)}
-          entityColor={(() => {
-            const s = data.sessions.find((x) => x.id === sessionId);
-            const e = s?.entities[0];
-            return e ? data.entity_colors[e] : undefined;
-          })()}
-        />
-      )}
+      {sessionId && (() => {
+        const siblingList = cellDrawer
+          ? cellDrawer.sessions
+          : [...data.sessions].filter((s) => s.started_at !== null).sort((a, b) => (b.started_at ?? "").localeCompare(a.started_at ?? ""));
+        const idx = siblingList.findIndex((s) => s.id === sessionId);
+        const prevId = idx < siblingList.length - 1 ? siblingList[idx + 1]!.id : null;
+        const nextId = idx > 0 ? siblingList[idx - 1]!.id : null;
+        const s = data.sessions.find((x) => x.id === sessionId);
+        const e = s?.entities[0];
+        return (
+          <SessionDrawer
+            sessionId={sessionId}
+            onClose={() => setSessionId(null)}
+            onNavigate={setSessionId}
+            prevSessionId={prevId}
+            nextSessionId={nextId}
+            entityColor={e ? data.entity_colors[e] : undefined}
+          />
+        );
+      })()}
     </div>
   );
 }