@narumitw/pi-inspect 0.1.0 → 0.2.1

package/docs/viewer.md

@@ -10,14 +10,19 @@ A narrow right-hand minimap summarizes the same filtered segment sequence in up
 
 **Source distinction is explicit.** After consent, context_with_system observes Pi messages after conversation-only context handlers and prompt/tool restoration. It returns nothing and does not modify the event. The primary view labels this as the last observed Pi-stage context, including its leaf/time when available; later context_with_system hooks, provider conversion and payload hooks can still differ. The advanced provider-payload copy is an independently timestamped hook-stage observation, not a guaranteed final transport body. Public callbacks have no request identity proving turn ownership: cache-warming and retry bodies may appear, so they are never attributed to the context leaf or observation time. Until a request is observed, the native active-leaf projection is labeled session-derived, not exact model input. Compaction/context edits use native Pi semantics, not the full session log. Session events and execution events are never silently appended to context.
 
-**Session events** is a secondary source view retaining the existing actual-parent Trace Explorer and timeline. Navigator and Event Inspector are collapsed by default and open only on request; choosing a Navigator event switches to Session events without changing the Pi leaf; captured live calls remain in a compact closed drawer and its empty primary region is omitted. The Session Navigator handles search, filtering and concise hierarchy navigation; the Trace Explorer handles progressive inline log inspection; the Event Inspector shows complete bounded historical/debugging details. Desktop side panes are resizable with pointer dragging or focused-separator ArrowLeft/ArrowRight/Home/End, and can be collapsed. Pointer cancellation, Escape, blur and unmount release drag listeners. When the viewport or resized sides leave insufficient trace space, side panes become Radix Dialog drawers with focus trapping, Escape dismissal and focus restoration. Widths and view choices are ephemeral browser state, not saved settings.
+**Context and Session have independent selection and reading state.** Context is full-width: it never shows Session filters, event Details, or an execution list. Current runtime prompt, tool schemas/exposure/active/callable state, and currently advertised skills are available under **Current runtime information**, not mixed into historical event evidence. This information may not yet have been sent to a model. Inventory cards mount only while their enclosing disclosures are open; closed schema/Data bodies do not mount recursive JSON or text previews, while bounded Copy remains available. JSON object disclosure state is retained within the existing bounded scope cache.
 
-Log rows use actual `parentId` relationships; live execution rows use only `parentToolCallId`. They are never merged into a fictional execution graph. Filters retain actual ancestors, visibly marked as context; trace child counts are labeled visible counts, not persisted totals. Explicit related-entry navigation can reveal a selected entry outside the current filters without clearing them; changing filters ends that exception. Metadata-only navigation items do not print JSON snippets. Entry and session names are sanitized before the 512-character bound; truncation is labeled. Raw exposes the full bounded captured entry value without changing its source. Long labels remain one line with ellipsis and hover text.
+**Session** answers what happened, with one primary navigation area and a content-first **Details** panel. **History** defaults to List and follows the active branch; entries are ordered by recorded ancestry, not timestamps, and grouped by user turn. Entries before the first user turn have their own group. Groups are reading aids, not execution parentage. User/assistant/tool summaries come from bounded redacted content; truncation is labeled. Missing leaves/parents and cycles produce explicit partial-history notices, never repaired links.
 
-**List is the default Session events mode.** Clicking a trace row selects and toggles it; its chevron toggles without changing selection. Enter selects, Space toggles, ArrowUp/ArrowDown move focus, ArrowRight expands or enters a child, and ArrowLeft collapses or moves to the recorded parent. Multiple rows can be expanded. Collapsing a parent retains descendant expansion state. Selected, expanded and keyboard-focused states are distinct. Inline Overview/Content/Raw/Metadata panels lazily fetch full bounded entries, display recorded text/output and tool arguments, and expose collapsible JSON objects/arrays. Inspector and navigator selection stay synchronized without navigating Pi.
+**Show internal events** includes generic Pi bookkeeping: custom state entries, labels, session metadata, and usage entries. Classification uses the original entry type, not a private extension name or message role; model-visible custom messages, including legacy messages with role `custom`, remain visible. Errors, compaction, branch summaries, system/context changes, model/thinking changes, and unknown types are not silently hidden. Matching hidden internal records are counted, excluding selected records retained visibly by the navigation exception. History searches show direct matches without every ancestor. Search covers the bounded summary/label inventory, not uncaptured full entry content.
 
-Trace pages contain at most 50 visible rows; navigator pages contain at most 100. Paging, filtering and collapse retain one visible keyboard tab target; ArrowUp/ArrowDown can cross trace pages. Arbitrary hierarchy levels are supported with iterative traversal, not a depth cap. Long chains use page-local/scaled indentation while retaining absolute ARIA levels and original parent IDs. Initial selection reveals its ancestors without fetching every ancestor\'s details. Detail request failures are shown with an explicit retry for both the Inspector and inline sections; historical-branch request failures have a separate selected-branch alert/retry that survives live snapshot refreshes; unavailable historical data remains a separate display state. Inline loads use four concurrent requests and a 64-entry immutable historical-detail cache; collapsing/unmounting rows cancels their work. JSON object disclosure state is isolated by scope and retained within a bounded 128-scope cache; Inspector historical sections use entry-specific scopes. Existing ingestion depth/node/character bounds still apply; UI expansion cannot recover omitted data.
+**Branch view** replaces the duplicate sidebar tree. It retains actual session-entry `parentId` links and access to off-branch entries. Its filters retain actual ancestors, visibly marked as context; child counts are visible counts, not persisted totals. **History at selected entry** explicitly changes the browser's history scope; **Follow active branch** restores automatic active-leaf tracking. Neither changes Pi's leaf. A selection outside the displayed branch is explicitly labeled. Related-entry navigation can reveal an entry outside filters without clearing them; changing filters ends that exception.
 
+Clicking a log row selects it without changing disclosure; its chevron toggles disclosure without selecting. Enter selects, Space toggles, ArrowUp/ArrowDown move focus, ArrowRight expands or enters a child in Branch view, and ArrowLeft collapses or moves to the recorded parent. Multiple rows can be expanded; collapsing a parent retains descendant expansion state. Inline Overview/Content/Raw/Metadata sections lazily load bounded recorded text/output, tool arguments, usage, and structured JSON. Complete inspection is available in Details.
+
+History and Branch pages contain at most 50 visible rows, with one visible keyboard tab target; ArrowUp/ArrowDown can cross pages. Branch ancestry traversal is iterative and uncapped by visual depth: page-local/scaled indentation preserves absolute ARIA levels and original parents. Initial reveal does not fetch every ancestor's details. Session filters and Details are collapsible, resizable desktop panes; pointer dragging and focused-separator ArrowLeft/ArrowRight/Home/End resize them. Cancellation, Escape, blur and unmount release drag listeners. Narrow layouts use focus-trapped Dialog drawers with Escape dismissal and focus restoration. Entry selection opens Details; headers expose these controls only in Session. View choices, filters, widths, and disclosure are ephemeral, not saved settings.
+
+Entry and branch failures have separate visible retries; unavailable historical checkpoints remain distinct from request failures. Live snapshots do not clear a failed selected-branch alert. Inline loads use four concurrent requests and a 64-entry immutable historical-detail cache; collapse, inactive views, disposal, and terminal session failures cancel owned requests. Historical section JSON disclosure is isolated by entry/section scope within a bounded 128-scope cache. Existing capture bounds still apply; UI expansion cannot recover omitted data.
 Malformed entry/parent IDs, non-string type/role/timestamp fields and all duplicated entry identities are excluded from navigation without manufacturing replacement IDs. Duplicate ancestor/detail identities are explicitly unavailable rather than selecting the last indexed occurrence. The overview labels the count and exposes up to 20 indexed raw diagnostic samples, each bounded to 2 KiB-equivalent characters; source entries are unchanged. Invalid leaf identities cannot become a browser selection or captured transcript anchor.
 
 A session-owned structural index is rebuilt on structural changes and released on stop/replacement. Inline requests reuse it and project only their validated ancestor path, not every off-branch entry; valid context-edit/compaction replay remains the native Pi result.
@@ -28,22 +33,28 @@ The compact overview distinguishes persisted entries, indexed assistant messages
 
 Each captured execution has a unique `occurrenceId`; `id` remains the provider/native raw tool-call ID. Repeated raw IDs retain separate history and occurrence-parent links. Transcript correlation requires the recorded owning-assistant anchor, not raw ID alone; overlapping invalid IDs are explicitly marked unavailable rather than assigning an ambiguous result. Evicting a selected occurrence returns selection to its remembered recorded anchor (or current leaf).
 
-Live calls occupy a collapsed bottom drawer, including when calls arrive. Opening it is explicit; its own scroll area shows parent-correlated records and allows selecting an execution in the Inspector. The navigation highlight then denotes that execution\'s recorded anchor entry, not a new transcript result.
+**Captured executions** is an explicit Session view, not a drawer attached to Context. Running/error counts remain visible in Session navigation without switching the user's view on arrival. Rows use occurrence-parent relationships; chevrons expand child navigation only. Arguments, results, relationships, correlation availability, reported duration and observed times appear once in the selection-owned Details panel. Root calls have no recorded parent; unresolved or invalid parent evidence is labeled unavailable. Correlation requires a recorded anchor and unambiguous IDs, not merely the absence of an error flag. Related execution buttons navigate real parent/child occurrences; **Inspect recorded anchor** returns to Branch view only when that anchor is represented. Eviction returns selection to its represented remembered anchor or current leaf; it switches Captured executions to Branch view but preserves History when already reading it.
 
 Timeline is an optional shared-axis view. Log timestamps are points, not duration spans. `observedStartedAt`/`observedEndedAt` are wall-clock samples taken on entry to this collector\'s actual start/end callbacks, after activation; their intervals are labeled observations, not provider transport timing. Public `durationMs` remains the separate monotonic time spent in `execute()`, absent if it did not run. Missing starts are never synthesized from durations; update/end-only, running or reversed-clock records do not become closed spans. Earlier callbacks or framework work can separate observation intervals from reported execution durations.
 
-The Inspector preserves Raw/Prompt/Tools/Context/Skills/Codemode, uses a non-wrapping horizontally scrollable tab strip, and disables inapplicable tabs consistently: Context is unavailable for non-transcript live events, Skills requires catalog/evidence, and Codemode requires recorded codemode source/output. It falls back to Raw if the selected tab becomes inapplicable. Structured metadata and object disclosure are the default; Raw JSON text is explicit. Data sections can be collapsed, and technical strings/JSON scroll horizontally rather than forcing page-wide overflow. The panel owns vertical scrolling, rather than stacking nested vertical code scrollers.
+**Details** defaults to Content: literal recorded message blocks, thinking, tool arguments/results, or internal-event payload. Metadata and Raw JSON are secondary; historical Prompt/Tools/Context/Skills/Codemode remain accessible in a horizontally scrollable tab strip. Live executions disable historical transcript tabs; their recorded anchor can be inspected separately. Inapplicable selections fall back to Content. Historical prompt sections, updates, previous-node diffs, declared tools, selected-entry contribution, and skill-read evidence never borrow the current runtime inventory as historical evidence. Full IDs remain in metadata/copy while identity headings use short IDs. Technical JSON can scroll within the pane without page-wide overflow.
 
-| View | Available | Limitations |
-| --- | --- | --- |
-| Tree / transcript | Raw entries, roots, branches, labels, compaction, summaries, and unknown entry previews | Up to 10,000 nodes, reserving the active leaf and bounded real ancestry; 50 trace rows and 100 navigator rows per page |
-| Prompt | Historical replay through Pi AI helpers, sections, updates, previous-node diff; separate current runtime prompt | Older history may have no system checkpoint; current runtime changes may not have been sent yet |
-| Tools / MCP | Configured tool schemas, namespace, exposure, active/callable status; historical declared tools on selected branch | Active does not equal provider-visible; full MCP connection/auth/config state is unavailable |
-| Skills | Currently advertised catalog, explicit skill invocation, successful exact-path reads and persisted nested-read metadata | Relative/aliased reads may lack evidence; old catalogs and model compliance are unknown |
-| Context | Pi's compaction/context-edit projection and selected-entry contribution | Request-local hooks and provider adapters may transform it further; not a final HTTP request |
-| Codemode | Script source, final printed output, public persisted nestedCalls metadata, and live correlated child results | Historical child results are not saved by Pi; metadata can be incomplete |
-| Live calls | Parent IDs, bounded args/results, status, reported duration, observed callback timestamps, partial updates | Session-wide, not a selected-branch Promise dependency graph; running calls at settle become unfinished |
+**View branch context**, in Details' Context tab, opens the same composition reader with a **Session-derived preview** identity and selected leaf. Native Pi compaction/context edits apply, but request-local hooks and provider serialization remain unknown: this is not a captured historical request. Missing checkpoints or invalid ancestry remain explicitly unavailable. The preview has no unrelated provider observation or current runtime inventory. **Back to last observed context** restores the observed reader and its independent search/disclosure/scroll state.
 
+| Capability | Location | Provenance / limitation |
+| --- | --- | --- |
+| Ordered model input, search, minimap, inline message/metadata/raw/copy | Context | Last observed Pi context; explicit session-derived active-leaf fallback until observed |
+| Current prompt, tools/MCP schemas and exposure, advertised skills | Context → Current runtime information | Current inventory, not historical request evidence; active ≠ provider-visible; MCP connection/auth state unavailable |
+| Provider payload | Context → Advanced independent provider observation | Independent time; request/leaf association unavailable, including warming/retries |
+| Conversation turns, summaries, internal entries, List/Timeline | Session → History | Selected branch ancestry; original entries unchanged; up to 50 visible rows per page |
+| Roots, branches, labels, unknown/malformed ancestry | Session → Branch view and overview diagnostics | Up to 10,000 nodes reserving active ancestry; original parent relationships, not call parentage |
+| Historical prompt, sections, updates, previous-node diff | Details → Prompt | Pi replay from stored checkpoints; missing historical checkpoints unavailable |
+| Historical declared tools and skill invocation/read evidence | Details → Tools / Skills | Branch-local stored evidence; old catalogs and model compliance unknown |
+| Branch projection and selected-entry contribution | Details → Context → View branch context | Explicit native session-derived preview, not final HTTP input |
+| Script source, printed output, persisted nested metadata | Details → Codemode and Raw | Historical child results are not saved by Pi; discovery/model helpers unavailable unless printed |
+| Live nested arguments/results, statuses, occurrence IDs, observed intervals | Session → Captured executions → Details | Session-wide public execution events; no invented Promise graph or request association |
+
+Timeline uses log timestamps as points and observed execution callbacks as intervals, never invented model/transport spans. History/List and History/Timeline show the same branch scope. The timing axis includes the indexed session and captured observations for comparison; it does not infer execution causality from adjacent log rows.
 Live results come from public `tool_execution_end` events, after the runtime's tool-result transformation pipeline (verified with a real nested call and a transforming hook). Partial updates are provisional. Unknown tools, schema failures, and permission blocks still have nested execution events. Direct transcript results remain authoritative persisted history. The inspector observes only: its context_with_system and before_provider_request handlers return nothing and never mutate messages or payloads; it registers no result-transforming handler.
 
 Codemode discovery helpers (`searchTools`, `describeTool`, `describeNamespace`, catalog helpers), sandbox local variables, and internal Promise scheduling are not normal child-tool events. `models.classify` and `models.generateImages` are also not normal nested tools: their complete input/output is unavailable unless printed. The generic Raw tab can show documented persisted metadata but the inspector never imports another extension or depends on private codemode implementation types.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@narumitw/pi-inspect",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Read-only browser inspector for Pi session context and live tool calls.",
   "type": "module",
   "license": "MIT",

package/src/entry-summary.ts

@@ -0,0 +1,34 @@
+import type { SessionEntry } from "@earendil-works/pi-coding-agent";
+import type { Json } from "./model.js";
+import { capture } from "./privacy.js";
+
+/** Summarize only an already redacted, bounded display copy. */
+export function readableSummary(entry: SessionEntry): { summary: string; summaryTruncated?: true } {
+  const source =
+    entry.type === "message"
+      ? "content" in entry.message
+        ? entry.message.content
+        : undefined
+      : entry.type === "custom_message"
+        ? entry.content
+        : entry.type === "compaction" || entry.type === "branch_summary"
+          ? entry.summary
+          : undefined;
+  if (source === undefined || source === null) return { summary: "" };
+  const captured = capture(source, 1024);
+  const text = (value: Json): string => {
+    if (typeof value === "string") return value;
+    if (!value || typeof value !== "object") return "";
+    if (Array.isArray(value)) return value.map(text).filter(Boolean).join(" · ");
+    if (typeof value.text === "string") return value.text;
+    if (value.type === "thinking") return "Thinking";
+    if (value.type === "image") return "Image";
+    if (value.type === "toolCall") return `${value.name ?? "Tool call"} ${JSON.stringify(value.arguments ?? {})}`;
+    return "";
+  };
+  const summary = text(captured.value).replace(/\s+/g, " ").trim();
+  return {
+    summary: summary.slice(0, 180),
+    summaryTruncated: captured.truncated || summary.length > 180 ? true : undefined,
+  };
+}

package/src/model.ts

@@ -8,6 +8,9 @@ export interface EntrySummary {
   parentId: string | null;
   kind: string;
   label: string;
+  summary?: string;
+  summaryTruncated?: boolean;
+  internal?: true;
   timestamp: string;
   name?: string;
   nameTruncated?: boolean;
@@ -102,6 +105,7 @@ export interface BranchView {
   declaredTools: Capture;
   promptUpdates: Capture;
   projection: Capture;
+  context?: ContextComposition;
   skillEvidence: Capture;
 }
 export interface DetailView {

package/src/projection.ts

@@ -16,9 +16,10 @@ type ReadonlySessionManager = ExtensionContext["sessionManager"];
 
 import { ancestry } from "./ancestry.js";
 import type { Collector } from "./collector.js";
-import { sessionContext } from "./context.js";
+import { captureContext, sessionContext } from "./context.js";
 import { correlatedCalls } from "./correlation.js";
 import { EntryIndex } from "./entry-index.js";
+import { readableSummary } from "./entry-summary.js";
 import { identityIssue, recordedLeaf } from "./identity.js";
 import type { BranchView, ContextComposition, DetailView, EntrySummary, SkillView, Snapshot } from "./model.js";
 import { nativeProjection } from "./native-projection.js";
@@ -48,6 +49,8 @@ export function summarize(entry: SessionEntry, label?: string): EntrySummary {
   return {
     id: entry.id,
     parentId: entry.parentId,
+    ...readableSummary(entry),
+    internal: ["custom", "label", "session_info", "usage"].includes(entry.type) ? true : undefined,
     kind,
     timestamp: entry.timestamp,
     name: displayName?.slice(0, 512),
@@ -199,6 +202,15 @@ export function branch(
       declaredTools: unavailable,
       promptUpdates: unavailable,
       projection: unavailable,
+      context: {
+        source: "session-derived",
+        leafId,
+        totalMessages: 0,
+        messages: [],
+        segments: [],
+        incomplete: true,
+        unavailable: issue,
+      },
       skillEvidence: unavailable,
     };
   }
@@ -305,6 +317,7 @@ export function branch(
       projection.entries.map((e) => ({ id: e.sourceEntry.id, messages: e.messages })),
       65536,
     ),
+    context: captureContext(projection.messages, "session-derived", leafId),
     skillEvidence: capturedEvidence,
   };
 }

package/src/web/app.tsx

@@ -5,17 +5,20 @@ import { createRoot } from "react-dom/client";
 import "@radix-ui/themes/styles.css";
 import "./style.css";
 import "./composition.css";
-import type { BranchView, Snapshot } from "../model.js";
+import "./session.css";
+import type { BranchView, ContextComposition as Composition, Snapshot } from "../model.js";
 import { generation, headers, RequestFailure, request, useDetail } from "./api.js";
+import { CapturedExecutions } from "./captured-executions.js";
 import { ContextComposition } from "./context-composition.js";
+import { ContextInventory } from "./context-inventory.js";
 import { type Filters, matches } from "./format.js";
+import { history, internalEntry } from "./history.js";
 import { Inspector } from "./inspector.js";
-import { LiveDrawer } from "./live-drawer.js";
 import { Overview } from "./overview.js";
 import { PaneDrawer, ResizeHandle, useNarrow } from "./panes.js";
 import { boundedSearch, searchNeedle } from "./search.js";
+import { SessionFilters } from "./session-filters.js";
 import { Trace } from "./trace.js";
-import { Sidebar } from "./tree.js";
 
 type Selection = { kind: "entry" | "call"; id: string; serial: number; filterVersion?: number; anchor?: string | null };
 function App() {
@@ -29,7 +32,10 @@ function App() {
   const [selection, setSelection] = useState<Selection>();
   const [view, setView] = useState("list");
   const [surface, setSurface] = useState("context");
-  const [liveOpen, setLiveOpen] = useState(false);
+  const [sessionView, setSessionView] = useState("history");
+  const [historyLeaf, setHistoryLeaf] = useState<string | null>(null);
+  const [showInternal, setShowInternal] = useState(false);
+  const [preview, setPreview] = useState<Composition>();
   const [filters, setFilters] = useState<Filters>({
     query: "",
     kind: "all",
@@ -46,7 +52,7 @@ function App() {
   const [error, setError] = useState("");
   const [connected, setConnected] = useState(false);
   const lifecycle = useRef<{ terminal: boolean; stream?: AbortController }>({ terminal: false });
-  const [tab, setTab] = useState("raw");
+  const [tab, setTab] = useState("content");
   const navTrigger = useRef<HTMLButtonElement>(null);
   const inspectorTrigger = useRef<HTMLButtonElement>(null);
   const [navOpen, setNavOpen] = useState(false);
@@ -67,11 +73,15 @@ function App() {
   const callAnchorAvailable = Boolean(selectedCall?.branchAnchor && represented.has(selectedCall.branchAnchor));
   const entryId =
     selection?.kind === "entry" ? selection.id : callAnchorAvailable ? (selectedCall?.branchAnchor ?? "") : "";
-  const {
-    detail,
-    error: detailError,
-    retry: retryDetails,
-  } = useDetail(selection?.kind === "entry" ? entryId : undefined);
+  const paneActive =
+    surface === "events" && revision >= 0 && (inspectorOpen || inspectorDrawer) && selection?.kind === "entry";
+  const { detail, error: detailError, retry: retryDetails } = useDetail(paneActive ? entryId : undefined);
+  const previousSelection = useRef<Selection | undefined>(undefined);
+  useEffect(() => {
+    if (sessionView === "executions" && previousSelection.current?.kind === "call" && selection?.kind === "entry")
+      setSessionView("branches");
+    previousSelection.current = selection;
+  }, [selection, sessionView]);
   const selectedNode = entries.find((node) => node.id === entryId);
   const preparedFilters = useMemo(() => ({ ...filters, query: searchNeedle(filters.query) }), [filters]);
   const matching = useMemo(
@@ -80,6 +90,9 @@ function App() {
   );
   function selectEntry(id: string) {
     setSurface("events");
+    if (sessionView === "executions") setSessionView("branches");
+    if (narrow) setInspectorDrawer(true);
+    else setInspectorOpen(true);
     setSelection((old) => ({ kind: "entry", id, serial: (old?.serial ?? 0) + 1, filterVersion }));
   }
   function selectCall(id: string) {
@@ -92,7 +105,9 @@ function App() {
       filterVersion,
       anchor: calls.find((call) => call.occurrenceId === id)?.branchAnchor,
     }));
-    setLiveOpen(true);
+    setSurface("events");
+    setSessionView("executions");
+    setTab("content");
   }
   useEffect(() => {
     const controller = new AbortController();
@@ -214,7 +229,8 @@ function App() {
   }, [revision]);
   useEffect(() => {
     setBranchError("");
-    if (!entryId) {
+    if (!entryId || !paneActive) {
+      branchOwner.current = undefined;
       setBranch(undefined);
       return;
     }
@@ -231,21 +247,26 @@ function App() {
           setBranchError("Could not load selected branch context.");
       });
     return () => controller.abort();
-  }, [entryId, branchAttempt]);
+  }, [entryId, branchAttempt, paneActive]);
 
-  const sidebar = (
-    <Sidebar
-      nodes={entries}
-      matches={matching}
-      total={snapshot?.totalEntries ?? 0}
-      selected={entryId}
-      serial={selection?.serial ?? 0}
-      filters={filters}
-      change={changeFilters}
-      revealSelected={selection?.filterVersion === filterVersion}
-      choose={selectEntry}
-    />
+  const scoped = useMemo(
+    () => history(entries, historyLeaf ?? snapshot?.leafId ?? null),
+    [entries, historyLeaf, snapshot?.leafId],
   );
+  const historyRows = useMemo(
+    () =>
+      scoped.rows.filter(
+        ({ node }) =>
+          showInternal || !internalEntry(node) || (selection?.filterVersion === filterVersion && node.id === entryId),
+      ),
+    [scoped.rows, showInternal, selection?.filterVersion, filterVersion, entryId],
+  );
+  const visibleHistory = useMemo(() => new Set(historyRows.map(({ node }) => node.id)), [historyRows]);
+  const hiddenMatches = scoped.rows.filter(
+    ({ node }) => internalEntry(node) && matching.has(node.id) && !visibleHistory.has(node.id),
+  ).length;
+  const sidebar = <SessionFilters filters={filters} change={changeFilters} />;
+  const selectedBranch = branch?.leafId === entryId ? branch : undefined;
   const inspector = (
     <Inspector
       selected={selection?.id ?? ""}
@@ -254,14 +275,22 @@ function App() {
       detailError={detailError}
       retryDetails={retryDetails}
       call={selectedCall}
-      branch={branch}
-      branchError={branchError}
+      branch={selectedBranch}
+      branchError={branchOwner.current?.entryId === entryId ? branchError : ""}
       retryBranch={() => setBranchAttempt((attempt) => attempt + 1)}
       snapshot={snapshot}
       tab={tab}
       changeTab={setTab}
       select={selectEntry}
       selectCall={selectCall}
+      preview={() => {
+        if (selectedBranch?.context) {
+          setPreview(selectedBranch.context);
+          setSurface("context");
+          setInspectorDrawer(false);
+          setNavDrawer(false);
+        }
+      }}
     />
   );
   return (
@@ -291,16 +320,26 @@ function App() {
         </div>
         <div className="header-actions">
           <fieldset className="surface-switch" aria-label="Inspection source">
-            <button type="button" aria-pressed={surface === "context"} onClick={() => setSurface("context")}>
+            <button
+              type="button"
+              aria-pressed={surface === "context"}
+              onClick={() => {
+                setPreview(undefined);
+                setSurface("context");
+                setInspectorDrawer(false);
+                setNavDrawer(false);
+              }}
+            >
               Context
             </button>
             <button type="button" aria-pressed={surface === "events"} onClick={() => setSurface("events")}>
-              Session events
+              Session
             </button>
           </fieldset>
           <IconButton
+            hidden={surface !== "events"}
             ref={navTrigger}
-            aria-label="Toggle navigator"
+            aria-label="Toggle filters"
             aria-expanded={narrow ? navDrawer : navOpen}
             variant="ghost"
             onClick={() => (narrow ? setNavDrawer(!navDrawer) : setNavOpen(!navOpen))}
@@ -308,8 +347,9 @@ function App() {
             <HamburgerMenuIcon />
           </IconButton>
           <IconButton
+            hidden={surface !== "events"}
             ref={inspectorTrigger}
-            aria-label="Toggle inspector"
+            aria-label="Toggle details"
             aria-expanded={narrow ? inspectorDrawer : inspectorOpen}
             variant="ghost"
             onClick={() => (narrow ? setInspectorDrawer(!inspectorDrawer) : setInspectorOpen(!inspectorOpen))}
@@ -347,58 +387,149 @@ function App() {
           narrow
             ? undefined
             : {
-                gridTemplateColumns: `${navSize}px ${navOpen ? 6 : 0}px minmax(0, 1fr) ${inspectorOpen ? 6 : 0}px ${inspectorSize}px`,
+                gridTemplateColumns:
+                  surface === "context"
+                    ? "0px 0px minmax(0, 1fr) 0px 0px"
+                    : `${navSize}px ${navOpen ? 6 : 0}px minmax(0, 1fr) ${inspectorOpen ? 6 : 0}px ${inspectorSize}px`,
               }
         }
       >
-        {!narrow && (
+        {!narrow && surface === "events" && (
           <>
             <div className="side-slot nav-slot" hidden={!navOpen}>
               {sidebar}
             </div>
             {navOpen && (
-              <ResizeHandle name="Resize navigator" value={navWidth} change={setNavWidth} min={180} max={420} />
+              <ResizeHandle name="Resize filters" value={navWidth} change={setNavWidth} min={180} max={420} />
             )}
           </>
         )}
         <div className="center-column">
           <div className="context-surface" hidden={surface !== "context"}>
-            <ContextComposition context={snapshot?.context} payload={snapshot?.providerObservation} />
+            <div className="observed-context" hidden={Boolean(preview)}>
+              <ContextComposition context={snapshot?.context} payload={snapshot?.providerObservation} />
+              <ContextInventory snapshot={snapshot} />
+            </div>
+            {preview && (
+              <div className="preview-context">
+                <div className="preview-heading">
+                  <strong>Session-derived preview · leaf {preview.leafId}</strong>
+                  <button type="button" onClick={() => setPreview(undefined)}>
+                    Back to last observed context
+                  </button>
+                </div>
+                <ContextComposition context={preview} preview />
+              </div>
+            )}
           </div>
           <div className="events-surface" hidden={surface !== "events"}>
             <Overview snapshot={snapshot} />
-            <Trace
-              entries={entries}
-              matches={matching}
-              selected={entryId}
-              serial={selection?.serial ?? 0}
-              revealSelected={selection?.filterVersion === filterVersion}
-              select={selectEntry}
-              view={view}
-              changeView={setView}
-              calls={calls}
-            />
+            <div className="session-toolbar">
+              <fieldset className="view-switch" aria-label="Session navigation">
+                {[
+                  ["history", "History"],
+                  ["branches", "Branch view"],
+                  ["executions", "Captured executions"],
+                ].map(([value, label]) => (
+                  <button
+                    type="button"
+                    key={value}
+                    aria-pressed={sessionView === value}
+                    onClick={() => setSessionView(value ?? "history")}
+                  >
+                    {label}
+                    {value === "executions"
+                      ? ` · ${calls.filter((call) => call.status === "running").length} running · ${calls.filter((call) => call.status === "error").length} errors`
+                      : ""}
+                  </button>
+                ))}
+              </fieldset>
+              {sessionView === "history" && (
+                <>
+                  <span>Branch leaf: {historyLeaf ?? snapshot?.leafId ?? "unavailable"}</span>
+                  <label>
+                    <input
+                      type="checkbox"
+                      checked={showInternal}
+                      onChange={(event) => setShowInternal(event.target.checked)}
+                    />{" "}
+                    Show internal events
+                  </label>
+                  {!showInternal && <span>{hiddenMatches} matching internal events hidden</span>}
+                  {historyLeaf && (
+                    <button type="button" onClick={() => setHistoryLeaf(null)}>
+                      Follow active branch
+                    </button>
+                  )}
+                  {scoped.issue && <span role="status">{scoped.issue}</span>}
+                  {entryId && !scoped.rows.some(({ node }) => node.id === entryId) && (
+                    <span role="status">Selected entry is outside this branch; use Branch view to locate it.</span>
+                  )}
+                </>
+              )}
+              {sessionView === "branches" && entryId && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setHistoryLeaf(entryId);
+                    setSessionView("history");
+                  }}
+                >
+                  History at selected entry
+                </button>
+              )}
+            </div>
+            <div className="session-primary" hidden={sessionView !== "history"}>
+              <Trace
+                entries={entries}
+                matches={matching}
+                selected={entryId}
+                serial={selection?.serial ?? 0}
+                revealSelected={selection?.filterVersion === filterVersion}
+                select={selectEntry}
+                view={view}
+                changeView={setView}
+                calls={calls}
+                historyRows={historyRows}
+                active={surface === "events" && sessionView === "history" && revision >= 0}
+              />
+            </div>
+            <div className="session-primary" hidden={sessionView !== "branches"}>
+              <Trace
+                entries={entries}
+                matches={matching}
+                selected={entryId}
+                serial={selection?.serial ?? 0}
+                revealSelected={selection?.filterVersion === filterVersion}
+                select={selectEntry}
+                view={view}
+                changeView={setView}
+                calls={calls}
+                active={surface === "events" && sessionView === "branches" && revision >= 0}
+              />
+            </div>
+            <div className="session-primary execution-primary" hidden={sessionView !== "executions"}>
+              <CapturedExecutions
+                entries={entries}
+                calls={calls}
+                selected={selectedCall?.occurrenceId}
+                select={selectCall}
+                open={surface === "events" && sessionView === "executions"}
+                view={view}
+                changeView={setView}
+                dropped={snapshot?.droppedCalls ?? 0}
+                invalidEvents={snapshot?.invalidCallEvents ?? 0}
+                filters={filters}
+                revealSelected={selection?.filterVersion === filterVersion}
+              />
+            </div>
           </div>
-          {(calls.length > 0 || surface === "events") && (
-            <LiveDrawer
-              entries={entries}
-              calls={calls}
-              selected={selectedCall?.occurrenceId}
-              select={selectCall}
-              open={liveOpen}
-              changeOpen={setLiveOpen}
-              view={view}
-              dropped={snapshot?.droppedCalls ?? 0}
-              invalidEvents={snapshot?.invalidCallEvents ?? 0}
-              filters={filters}
-            />
-          )}
         </div>
-        {!narrow && (
+        {!narrow && surface === "events" && (
           <>
             {inspectorOpen ? (
               <ResizeHandle
-                name="Resize inspector"
+                name="Resize details"
                 value={inspectorWidth}
                 change={setInspectorWidth}
                 min={260}
@@ -412,14 +543,14 @@ function App() {
           </>
         )}
       </main>
-      {narrow && (
+      {narrow && surface === "events" && (
         <>
-          <PaneDrawer trigger={navTrigger} name="Session navigator" side="left" open={navDrawer} change={setNavDrawer}>
+          <PaneDrawer trigger={navTrigger} name="Session filters" side="left" open={navDrawer} change={setNavDrawer}>
             {sidebar}
           </PaneDrawer>
           <PaneDrawer
             trigger={inspectorTrigger}
-            name="Event inspector"
+            name="Details"
             side="right"
             open={inspectorDrawer}
             change={setInspectorDrawer}