@session-link/viewer 0.2.0 → 0.3.0

package/RunViewer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { Component, useEffect, useMemo, useRef, useState } from "react";
 import {
   Bot,
   Braces,
@@ -60,7 +60,12 @@ const fmtCost = (n: number) => (n < 0.01 ? `$${n.toFixed(4)}` : `$${n.toFixed(2)
 
 const spanDur = (s: Span) => ts(s.ended_at) - ts(s.started_at);
 
-const spanLabel = (s: Span) => s.name || s.type;
+// Coerced defensively: the wire format is open, so `name` and `type` can
+// arrive as anything — a non-string label must not throw in every tree row.
+const spanLabel = (s: Span) =>
+  (typeof s.name === "string" && s.name) ||
+  (typeof s.type === "string" && s.type) ||
+  "span";
 
 function stringify(v: unknown): string {
   try {
@@ -118,8 +123,11 @@ function indexRun(run: Run): RunIndex {
   let sawCost = false;
   for (const s of run.spans) {
     if (s.type !== "llm_call") continue;
-    const label = `${s.model.provider ? s.model.provider + "/" : ""}${s.model.id}`;
-    if (!models.includes(label)) models.push(label);
+    // Open-world guard: a span may claim llm_call without carrying a model.
+    if (s.model) {
+      const label = `${s.model.provider ? s.model.provider + "/" : ""}${s.model.id}`;
+      if (!models.includes(label)) models.push(label);
+    }
     if (s.usage) {
       sawUsage = true;
       tin += s.usage.input_tokens ?? 0;
@@ -145,6 +153,84 @@ function indexRun(run: Run): RunIndex {
   };
 }
 
+/* ------------------------------------------------------------ boundaries */
+
+/**
+ * The format is open-world, so partial or odd documents are normal — data
+ * this build can't render must degrade to a card, never a white screen.
+ */
+class Boundary extends Component<
+  { fallback: (message: string) => React.ReactNode; children: React.ReactNode },
+  { message: string | null }
+> {
+  state: { message: string | null } = { message: null };
+  static getDerivedStateFromError(e: unknown) {
+    return { message: e instanceof Error ? e.message : String(e) };
+  }
+  render() {
+    if (this.state.message != null) return this.props.fallback(this.state.message);
+    return this.props.children;
+  }
+}
+
+/** Whole-viewer fallback — the calm version of a crash. */
+function ViewerFallback({ message, src }: { message: string; src?: string }) {
+  return (
+    <div
+      className="rv"
+      style={{
+        fontFamily: T.mono,
+        fontSize: 12,
+        color: T.faint,
+        border: `1px solid ${T.line}`,
+        borderRadius: 10,
+        background: T.panel,
+        padding: "48px 24px",
+        textAlign: "center",
+      }}
+    >
+      <div style={{ color: T.error }}>
+        this session couldn&apos;t be rendered — {message}
+      </div>
+      <div style={{ marginTop: 8 }}>
+        {src ? (
+          <>
+            the raw JSON is still valid — only this viewer build choked on it
+            {" · "}
+            <a href={src} style={{ color: T.ink }}>
+              raw JSON
+            </a>
+          </>
+        ) : (
+          /* No URL to point at (e.g. the run was inlined into the page) —
+             don't promise an escape hatch this card can't render. */
+          <>the document itself is intact — only this viewer build choked on it</>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Per-span fallback — replaces one span's detail, never the tree. */
+function SpanFallback({ message }: { message: string }) {
+  return (
+    <div
+      style={{
+        border: `1px dashed ${T.line}`,
+        borderRadius: 6,
+        padding: "10px 12px",
+        fontFamily: T.mono,
+        fontSize: 12,
+        color: T.faint,
+      }}
+    >
+      <span style={{ color: T.error }}>this span couldn&apos;t be rendered</span>
+      {" — "}
+      {message} · the raw view still works
+    </div>
+  );
+}
+
 /* ---------------------------------------------------------------- atoms */
 
 function Eyebrow({ children }: { children: React.ReactNode }) {
@@ -249,23 +335,76 @@ function BlobRefNote({ label, hash }: { label: string; hash: string }) {
   );
 }
 
+/** Past either bound, text mounts clamped behind an expander — one huge
+ *  tool result must not swamp the page (or the DOM) it lands on. */
+const CLAMP_LINES = 20;
+const CLAMP_CHARS = 4 * 1024;
+
+function ClampedText({
+  text,
+  render,
+}: {
+  text: string;
+  render: (visible: string) => React.ReactNode;
+}) {
+  const [showAll, setShowAll] = useState(false);
+  const lines = text.split("\n").length;
+  if (lines <= CLAMP_LINES && text.length <= CLAMP_CHARS) {
+    return <>{render(text)}</>;
+  }
+  const clipped =
+    text.slice(0, CLAMP_CHARS).split("\n").slice(0, CLAMP_LINES).join("\n") +
+    "\n…";
+  const kb = `${(text.length / 1024).toFixed(1)} KB`;
+  return (
+    <div style={{ display: "grid", gap: 6 }}>
+      {render(showAll ? text : clipped)}
+      <button
+        onClick={() => setShowAll((v) => !v)}
+        style={{
+          justifySelf: "start",
+          border: `1px solid ${T.line}`,
+          background: T.panel,
+          borderRadius: 6,
+          padding: "4px 9px",
+          fontFamily: T.mono,
+          fontSize: 11,
+          cursor: "pointer",
+          color: T.faint,
+        }}
+      >
+        {showAll
+          ? "collapse"
+          : lines > 1
+            ? `show all ${fmtInt(lines)} lines (${kb})`
+            : `show all ${kb}`}
+      </button>
+    </div>
+  );
+}
+
 function JsonBlock({ value, tall = false }: { value: unknown; tall?: boolean }) {
   return (
-    <pre
-      style={{
-        fontFamily: T.mono,
-        fontSize: 12,
-        lineHeight: 1.55,
-        background: T.soft,
-        borderRadius: 6,
-        padding: "10px 12px",
-        overflow: "auto",
-        maxHeight: tall ? 560 : 280,
-        whiteSpace: "pre",
-      }}
-    >
-      {stringify(value)}
-    </pre>
+    <ClampedText
+      text={stringify(value)}
+      render={(visible) => (
+        <pre
+          style={{
+            fontFamily: T.mono,
+            fontSize: 12,
+            lineHeight: 1.55,
+            background: T.soft,
+            borderRadius: 6,
+            padding: "10px 12px",
+            overflow: "auto",
+            maxHeight: tall ? 560 : 280,
+            whiteSpace: "pre",
+          }}
+        >
+          {visible}
+        </pre>
+      )}
+    />
   );
 }
 
@@ -275,9 +414,16 @@ function PartView({ part }: { part: ContentPart }) {
   switch (part.type) {
     case "text":
       return (
-        <div style={{ fontSize: 13.5, lineHeight: 1.6, whiteSpace: "pre-wrap" }}>
-          {part.text}
-        </div>
+        <ClampedText
+          text={part.text}
+          render={(visible) => (
+            <div
+              style={{ fontSize: 13.5, lineHeight: 1.6, whiteSpace: "pre-wrap" }}
+            >
+              {visible}
+            </div>
+          )}
+        />
       );
     case "thinking":
       return (
@@ -294,21 +440,26 @@ function PartView({ part }: { part: ContentPart }) {
           >
             thinking
           </summary>
-          <div
-            style={{
-              fontFamily: T.serif,
-              fontStyle: "italic",
-              fontSize: 13.5,
-              lineHeight: 1.6,
-              color: T.faint,
-              whiteSpace: "pre-wrap",
-              borderLeft: `2px solid ${T.line}`,
-              padding: "4px 0 4px 12px",
-              margin: "8px 0 0",
-            }}
-          >
-            {part.text}
-          </div>
+          <ClampedText
+            text={part.text}
+            render={(visible) => (
+              <div
+                style={{
+                  fontFamily: T.serif,
+                  fontStyle: "italic",
+                  fontSize: 13.5,
+                  lineHeight: 1.6,
+                  color: T.faint,
+                  whiteSpace: "pre-wrap",
+                  borderLeft: `2px solid ${T.line}`,
+                  padding: "4px 0 4px 12px",
+                  margin: "8px 0 0",
+                }}
+              >
+                {visible}
+              </div>
+            )}
+          />
         </details>
       );
     case "tool_call":
@@ -711,7 +862,9 @@ function TreeRow({
     <div
       id={`rv-row-${span.id}`}
       role="button"
-      tabIndex={0}
+      // Not a tab stop: the scroll container is the single keyboard surface,
+      // so focus can never strand on a row that scrolls out of the window.
+      tabIndex={-1}
       title={
         span.started_at
           ? `${spanLabel(span)} · ${new Date(span.started_at).toLocaleTimeString()}${Number.isFinite(dur) ? ` · ${fmtDur(dur)}` : ""}`
@@ -740,6 +893,9 @@ function TreeRow({
       {hasKids ? (
         <button
           aria-label={open ? "Collapse" : "Expand"}
+          // Not a tab stop — a focused chevron unmounting with its windowed
+          // row would strand focus; the scroll container is the tab stop.
+          tabIndex={-1}
           onClick={(e) => {
             e.stopPropagation();
             onToggle();
@@ -839,6 +995,8 @@ function TreeRow({
  *         sessions so the run's bytes travel once, gzipped, instead of
  *         being serialized into both the SSR markup and the hydration
  *         payload (an 11.8MB run made a 17.6MB page that way).
+ * Passing both is meaningful: `run` wins for rendering (no fetch happens),
+ * and `src` gives the crash fallback a raw-JSON link worth showing.
  */
 export function RunViewer({ run, src }: { run?: Run; src?: string }) {
   const [fetched, setFetched] = useState<Run | null>(null);
@@ -846,6 +1004,9 @@ export function RunViewer({ run, src }: { run?: Run; src?: string }) {
 
   useEffect(() => {
     if (run || !src) return;
+    // A changed src must never show the previous run or a stale error.
+    setFetched(null);
+    setLoadError(null);
     let alive = true;
     fetch(src)
       .then(async (r) => {
@@ -897,21 +1058,41 @@ export function RunViewer({ run, src }: { run?: Run; src?: string }) {
       </div>
     );
   }
-  return <LoadedViewer run={resolved} />;
+  return (
+    <Boundary
+      fallback={(message) => <ViewerFallback message={message} src={src} />}
+    >
+      <LoadedViewer run={resolved} />
+    </Boundary>
+  );
 }
 
 /** Every visible tree row is exactly this tall — the invariant the
  *  windowing math depends on, enforced by an explicit height on the row. */
 const ROW_H = 30;
 const OVERSCAN = 12;
+/** The list's cosmetic top padding — rows sit at PAD_TOP + i*ROW_H in
+ *  content coordinates, so every scroll computation must include it. */
+const PAD_TOP = 6;
 
-function LoadedViewer({ run }: { run: Run }) {
-  const idx = useMemo(() => indexRun(run), [run]);
-  const [sel, setSel] = useState<string | null>(idx.roots[0]?.id ?? null);
-  const [closed, setClosed] = useState<Set<string>>(new Set());
-  const [raw, setRaw] = useState(false);
-  const [copied, setCopied] = useState(false);
-
+/**
+ * The left column: header, counts, and the windowed span list. Scroll state
+ * lives HERE on purpose — a scroll frame re-renders these ~40 rows and
+ * never the span-detail panel next door.
+ */
+function TreeColumn({
+  idx,
+  sel,
+  closed,
+  onSelect,
+  onSetClosed,
+}: {
+  idx: RunIndex;
+  sel: string | null;
+  closed: Set<string>;
+  onSelect: (id: string) => void;
+  onSetClosed: React.Dispatch<React.SetStateAction<Set<string>>>;
+}) {
   /* The visible tree, flattened. Thousands of rows are normal for real
      agent traces, so only the window around the scroll position mounts —
      this array is cheap (plain objects), the DOM is what's rationed. */
@@ -945,65 +1126,35 @@ function LoadedViewer({ run }: { run: Run }) {
   const ensureVisible = (i: number) => {
     const el = treeRef.current;
     if (!el || i < 0) return;
-    const top = i * ROW_H;
+    const top = PAD_TOP + i * ROW_H;
     if (top < el.scrollTop) el.scrollTop = top;
     else if (top + ROW_H > el.scrollTop + el.clientHeight)
       el.scrollTop = top + ROW_H - el.clientHeight;
   };
 
-  /* deep link: read #span=<id> on mount, write it on select */
+  /* Scroll to the selection only when the SELECTION changes (deep link,
+     keyboard, click) — never when rows change identity, or expanding a
+     chevron 800 rows away from the selection would yank the viewport back
+     to it. No-op when already visible or hidden under a collapsed parent. */
+  const lastSel = useRef<string | null>(null);
   useEffect(() => {
-    try {
-      const m = window.location.hash.match(/span=([\w.-]+)/);
-      if (m && idx.byId.has(m[1])) {
-        setSel(m[1]);
-        ensureVisible(rows.findIndex((r) => r.span.id === m[1]));
-      }
-    } catch {
-      /* sandboxed embeds may not expose location — fine */
-    }
+    if (sel === lastSel.current) return;
+    lastSel.current = sel;
+    ensureVisible(rows.findIndex((r) => r.span.id === sel));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [idx]);
-
-  const select = (id: string) => {
-    setSel(id);
-    setCopied(false);
-    try {
-      history.replaceState(null, "", `#span=${id}`);
-    } catch {
-      /* ignore in sandboxes */
-    }
-  };
-
-  const copyLink = () => {
-    if (!sel) return;
-    let text = `#span=${sel}`;
-    try {
-      const u = new URL(window.location.href);
-      u.hash = `span=${sel}`;
-      text = u.toString();
-    } catch {
-      /* keep relative anchor */
-    }
-    navigator.clipboard?.writeText(text).catch(() => {});
-    setCopied(true);
-    window.setTimeout(() => setCopied(false), 1400);
-  };
-
-  const selected = sel ? idx.byId.get(sel) : undefined;
-  const created = new Date(run.created_at);
+  }, [sel, rows]);
 
   const { typeCounts, errorCount } = useMemo(() => {
     const counts: Array<[string, number]> = [];
     let errors = 0;
-    for (const s of run.spans) {
+    for (const s of idx.byId.values()) {
       if (s.status === "error") errors++;
       const entry = counts.find(([t]) => t === s.type);
       if (entry) entry[1]++;
       else counts.push([s.type, 1]);
     }
     return { typeCounts: counts, errorCount: errors };
-  }, [run]);
+  }, [idx]);
 
   /* keyboard: ↑/↓ move through visible rows, ←/→ collapse/expand. The
      handler lives on the scroll container (which is focusable — a focused
@@ -1012,16 +1163,18 @@ function LoadedViewer({ run }: { run: Run }) {
     if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       e.preventDefault();
       const at = rows.findIndex((r) => r.span.id === sel);
+      // Selection hidden under a collapsed ancestor: don't teleport to row 0.
+      if (at === -1) return;
       const ni = Math.min(rows.length - 1, Math.max(0, at + (e.key === "ArrowDown" ? 1 : -1)));
       const next = rows[ni];
       if (next) {
-        select(next.span.id);
+        onSelect(next.span.id);
         ensureVisible(ni);
-        treeRef.current?.focus();
+        treeRef.current?.focus({ preventScroll: true });
       }
     } else if ((e.key === "ArrowRight" || e.key === "ArrowLeft") && sel) {
       e.preventDefault();
-      setClosed((prev) => {
+      onSetClosed((prev) => {
         const next = new Set(prev);
         if (e.key === "ArrowRight") next.delete(sel);
         else next.add(sel);
@@ -1030,9 +1183,151 @@ function LoadedViewer({ run }: { run: Run }) {
     }
   };
 
-  /* the window: which slice of rows is actually in the DOM */
-  const first = Math.max(0, Math.floor(scrollTop / ROW_H) - OVERSCAN);
-  const last = Math.min(rows.length, Math.ceil((scrollTop + viewH) / ROW_H) + OVERSCAN);
+  /* the window: which slice of rows is actually in the DOM. scrollTop is
+     clamped so rows shrinking under a deep scroll (collapse-all) can't
+     produce an empty slice while the browser catches up. */
+  const top = Math.min(scrollTop, Math.max(0, rows.length * ROW_H - viewH));
+  const first = Math.max(0, Math.floor((top - PAD_TOP) / ROW_H) - OVERSCAN);
+  const last = Math.min(rows.length, Math.ceil((top - PAD_TOP + viewH) / ROW_H) + OVERSCAN);
+
+  return (
+    <div className="rv-tree">
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "baseline",
+          padding: "12px 12px 8px",
+          borderBottom: `1px solid ${T.line}`,
+        }}
+      >
+        <Eyebrow>trace</Eyebrow>
+        <span
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 10,
+            fontFamily: T.mono,
+            fontSize: 11,
+            color: T.faint,
+          }}
+        >
+          {typeCounts.map(([type, n]) => (
+            <span
+              key={type}
+              title={`${n} ${type} span${n === 1 ? "" : "s"}`}
+              style={{ display: "inline-flex", alignItems: "center", gap: 4 }}
+            >
+              <span
+                style={{
+                  width: 7,
+                  height: 7,
+                  borderRadius: 2,
+                  background: HUES[type] ?? HUES.custom,
+                }}
+              />
+              {n}
+            </span>
+          ))}
+          {errorCount > 0 && (
+            <span style={{ color: T.error, fontWeight: 600 }} title={`${errorCount} error span${errorCount === 1 ? "" : "s"}`}>
+              {errorCount} err
+            </span>
+          )}
+        </span>
+      </div>
+      {/* Windowed: rows are fixed-height, so visibility is arithmetic.
+          A spacer keeps the scrollbar honest; only [first, last) mount. */}
+      <div
+        ref={treeRef}
+        tabIndex={0}
+        aria-label="Trace spans"
+        onKeyDown={onTreeKey}
+        onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
+        style={{ padding: `${PAD_TOP}px 0`, overflowY: "auto", maxHeight: "min(72vh, 760px)" }}
+      >
+        <div style={{ height: rows.length * ROW_H, position: "relative" }}>
+          <div style={{ position: "absolute", top: first * ROW_H, left: 0, right: 0 }}>
+            {rows.slice(first, last).map(({ span, depth }) => (
+              <TreeRow
+                key={span.id}
+                span={span}
+                depth={depth}
+                idx={idx}
+                selected={sel === span.id}
+                hasKids={(idx.children.get(span.id) ?? []).length > 0}
+                open={!closed.has(span.id)}
+                onToggle={() => {
+                  onSetClosed((prev) => {
+                    const next = new Set(prev);
+                    if (next.has(span.id)) next.delete(span.id);
+                    else next.add(span.id);
+                    return next;
+                  });
+                  // Keep focus on the keyboard surface: a click focuses the
+                  // row/chevron, which may unmount when it scrolls out of
+                  // the window — stranding focus on <body> and killing
+                  // arrow-key nav.
+                  treeRef.current?.focus({ preventScroll: true });
+                }}
+                onSelect={() => {
+                  onSelect(span.id);
+                  treeRef.current?.focus({ preventScroll: true });
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LoadedViewer({ run }: { run: Run }) {
+  const idx = useMemo(() => indexRun(run), [run]);
+  const [sel, setSel] = useState<string | null>(idx.roots[0]?.id ?? null);
+  const [closed, setClosed] = useState<Set<string>>(new Set());
+  const [raw, setRaw] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  /* deep link: read #span=<id> on mount, write it on select. TreeColumn's
+     selection effect scrolls it into the window once it renders. */
+  useEffect(() => {
+    try {
+      const m = window.location.hash.match(/span=([\w.-]+)/);
+      if (m && idx.byId.has(m[1])) setSel(m[1]);
+    } catch {
+      /* sandboxed embeds may not expose location — fine */
+    }
+  }, [idx]);
+
+  const select = (id: string) => {
+    setSel(id);
+    setCopied(false);
+    try {
+      history.replaceState(null, "", `#span=${id}`);
+    } catch {
+      /* ignore in sandboxes */
+    }
+  };
+
+  const copyLink = () => {
+    if (!sel) return;
+    let text = `#span=${sel}`;
+    try {
+      const u = new URL(window.location.href);
+      u.hash = `span=${sel}`;
+      text = u.toString();
+    } catch {
+      /* keep relative anchor */
+    }
+    navigator.clipboard?.writeText(text).catch(() => {});
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1400);
+  };
+
+  const selected = sel ? idx.byId.get(sel) : undefined;
+  const created = new Date(run.created_at);
 
   return (
     <div className="rv" style={{ fontFamily: T.sans, color: T.ink }}>
@@ -1140,87 +1435,13 @@ function LoadedViewer({ run }: { run: Run }) {
 
       {/* ---------------------------------------------------- two panels */}
       <div className="rv-cols">
-        <div className="rv-tree">
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "baseline",
-              padding: "12px 12px 8px",
-              borderBottom: `1px solid ${T.line}`,
-            }}
-          >
-            <Eyebrow>trace</Eyebrow>
-            <span
-              style={{
-                display: "inline-flex",
-                alignItems: "center",
-                gap: 10,
-                fontFamily: T.mono,
-                fontSize: 11,
-                color: T.faint,
-              }}
-            >
-              {typeCounts.map(([type, n]) => (
-                <span
-                  key={type}
-                  title={`${n} ${type} span${n === 1 ? "" : "s"}`}
-                  style={{ display: "inline-flex", alignItems: "center", gap: 4 }}
-                >
-                  <span
-                    style={{
-                      width: 7,
-                      height: 7,
-                      borderRadius: 2,
-                      background: HUES[type] ?? HUES.custom,
-                    }}
-                  />
-                  {n}
-                </span>
-              ))}
-              {errorCount > 0 && (
-                <span style={{ color: T.error, fontWeight: 600 }} title={`${errorCount} error span${errorCount === 1 ? "" : "s"}`}>
-                  {errorCount} err
-                </span>
-              )}
-            </span>
-          </div>
-          {/* Windowed: rows are fixed-height, so visibility is arithmetic.
-              A spacer keeps the scrollbar honest; only [first, last) mount. */}
-          <div
-            ref={treeRef}
-            tabIndex={0}
-            aria-label="Trace spans"
-            onKeyDown={onTreeKey}
-            onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
-            style={{ padding: "6px 0", overflowY: "auto", maxHeight: "min(72vh, 760px)" }}
-          >
-            <div style={{ height: rows.length * ROW_H, position: "relative" }}>
-              <div style={{ position: "absolute", top: first * ROW_H, left: 0, right: 0 }}>
-                {rows.slice(first, last).map(({ span, depth }) => (
-                  <TreeRow
-                    key={span.id}
-                    span={span}
-                    depth={depth}
-                    idx={idx}
-                    selected={sel === span.id}
-                    hasKids={(idx.children.get(span.id) ?? []).length > 0}
-                    open={!closed.has(span.id)}
-                    onToggle={() =>
-                      setClosed((prev) => {
-                        const next = new Set(prev);
-                        if (next.has(span.id)) next.delete(span.id);
-                        else next.add(span.id);
-                        return next;
-                      })
-                    }
-                    onSelect={() => select(span.id)}
-                  />
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
+        <TreeColumn
+          idx={idx}
+          sel={sel}
+          closed={closed}
+          onSelect={select}
+          onSetClosed={setClosed}
+        />
 
         <div style={{ flex: 1, minWidth: 0, padding: "16px 20px 24px" }}>
           {selected ? (
@@ -1250,7 +1471,7 @@ function LoadedViewer({ run }: { run: Run }) {
                 <span
                   style={{ fontFamily: T.mono, fontSize: 11, color: T.faint }}
                 >
-                  {selected.type}
+                  {String(selected.type)}
                 </span>
                 {Number.isFinite(spanDur(selected)) && (
                   <span
@@ -1278,7 +1499,7 @@ function LoadedViewer({ run }: { run: Run }) {
                       padding: "2px 8px",
                     }}
                   >
-                    {selected.fidelity}
+                    {String(selected.fidelity)}
                   </span>
                 )}
                 <span style={{ flex: 1 }} />
@@ -1348,14 +1569,25 @@ function LoadedViewer({ run }: { run: Run }) {
                   }}
                 >
                   {selected.error.type ? `${selected.error.type}: ` : ""}
-                  {selected.error.message}
+                  {String(selected.error.message ?? "")}
                 </div>
               )}
 
               {raw ? (
-                <JsonBlock value={selected} tall />
+                /* Keyed like the Boundary below: without the key, this
+                   JsonBlock reconciles in place across selections and the
+                   clamp expander's showAll state leaks — span B would mount
+                   with span A's expansion. */
+                <JsonBlock key={sel ?? ""} value={selected} tall />
               ) : (
-                <>
+                /* Keyed by span: a new selection resets both a caught error
+                   and any expander state left inside the old detail. The raw
+                   toggle lives in the header above, so it stays usable when
+                   this subtree falls back. */
+                <Boundary
+                  key={sel ?? ""}
+                  fallback={(message) => <SpanFallback message={message} />}
+                >
                   <SpanDetail span={selected} />
                   {selected.metadata && Object.keys(selected.metadata).length > 0 && (
                     <>
@@ -1363,7 +1595,7 @@ function LoadedViewer({ run }: { run: Run }) {
                       <JsonBlock value={selected.metadata} />
                     </>
                   )}
-                </>
+                </Boundary>
               )}
             </>
           ) : (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@session-link/viewer",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "The session.link viewer — renders a session/v0 document as an interactive trace tree. React component; consume with a bundler that transpiles the package (e.g. Next transpilePackages).",
   "homepage": "https://session.link",
   "license": "MIT",