@narumitw/pi-inspect 0.0.0-stage → 0.1.0

package/src/web/context-composition.tsx

@@ -0,0 +1,324 @@
+import { ChevronDownIcon, ChevronRightIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { Heading, TextField } from "@radix-ui/themes";
+import { useEffect, useMemo, useState } from "react";
+import type { ContextComposition as Composition, ContextSegment, Snapshot } from "../model.js";
+import { Data, Glyph, Metadata } from "./components.js";
+import { output, record, time } from "./format.js";
+import { boundedSearch, searchNeedle } from "./search.js";
+import { useVirtualContext } from "./virtual-context.js";
+
+const categories = ["system", "user", "assistant", "toolCall", "toolResult", "other"] as const;
+const names: Record<string, string> = {
+  system: "System prompt",
+  user: "User message",
+  assistant: "Assistant",
+  toolCall: "Tool call",
+  toolResult: "Tool result",
+  other: "Other",
+};
+export function ContextComposition({
+  context,
+  payload,
+}: {
+  context?: Composition;
+  payload?: Snapshot["providerObservation"];
+}) {
+  const [query, search] = useState("");
+  const [category, filter] = useState("all");
+  const [expanded, expand] = useState(new Set<string>());
+  const [selected, select] = useState("");
+  const segments = context?.segments;
+  const needle = useMemo(() => searchNeedle(query), [query]);
+  const searchable = useMemo(
+    () => context?.messages.map((message) => output(message.value).toLowerCase()) ?? [],
+    [context?.messages],
+  );
+  const rows = useMemo(
+    () =>
+      (segments ?? []).filter((segment) => {
+        const message = searchable[segment.messageIndex] ?? "";
+        return (
+          (category === "all" || segment.category === category) &&
+          (`${segment.role} ${segment.kind} ${segment.preview}`.toLowerCase().includes(needle) ||
+            message.includes(needle))
+        );
+      }),
+    [segments, category, needle, searchable],
+  );
+  const ids = useMemo(() => rows.map((row) => row.id), [rows]);
+  const virtual = useVirtualContext(ids);
+  const [focused, focus] = useState("");
+  const visibleRows = rows.slice(virtual.range.start, virtual.range.end);
+  const tabTarget = visibleRows.some((row) => row.id === focused) ? focused : visibleRows[0]?.id;
+  useEffect(() => {
+    const valid = new Set(segments?.map((row) => row.id));
+    expand((old) => new Set([...old].filter((id) => valid.has(id))));
+    if (selected && !valid.has(selected)) select("");
+  }, [segments, selected]);
+  function toggle(id: string): void {
+    select(id);
+    expand((old) => {
+      const next = new Set(old);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+  const bucket = Math.max(1, Math.ceil(rows.length / 160));
+  return (
+    <section className="context-composition" aria-label="Context composition">
+      <div className="composition-heading">
+        <div>
+          <Heading size="5">Context composition</Heading>
+          <span className="composition-count">
+            {rows.length} captured segments · {context?.totalMessages ?? 0} messages · segment tokens unavailable
+          </span>
+        </div>
+        <fieldset className="context-filters" aria-label="Context category">
+          {[
+            ["all", "All"],
+            ["system", "System"],
+            ["user", "User"],
+            ["assistant", "Assistant"],
+            ["toolCall", "Tool call"],
+            ["toolResult", "Tool result"],
+          ].map(([value, label]) => (
+            <button
+              type="button"
+              key={value}
+              aria-pressed={category === value}
+              onClick={() => {
+                filter(value ?? "all");
+                virtual.reset();
+              }}
+            >
+              {label}
+            </button>
+          ))}
+        </fieldset>
+        <TextField.Root
+          aria-label="Search context"
+          placeholder="Search captured context…"
+          value={query}
+          onChange={(event) => {
+            search(boundedSearch(event.target.value));
+            virtual.reset();
+          }}
+        >
+          <TextField.Slot>
+            <MagnifyingGlassIcon />
+          </TextField.Slot>
+        </TextField.Root>
+      </div>
+      <div className="context-provenance" role="status">
+        {context?.source === "observed-pi-context"
+          ? "Last observed Pi context · context_with_system stage; later hooks and provider serialization may differ."
+          : "Session-derived context · native active-leaf projection; request-local hooks and provider serialization are unavailable."}
+        {context?.observedAt && (
+          <span>
+            {" "}
+            Observed {new Date(context.observedAt).toLocaleTimeString()} · leaf {context.leafId ?? "unavailable"}
+          </span>
+        )}
+        {context?.incomplete && (
+          <strong> Bounded capture is incomplete; only available captured content is searchable.</strong>
+        )}
+        {context?.unavailable && <strong> Unavailable: {context.unavailable}.</strong>}
+      </div>
+      <div className="composition-body">
+        <section
+          className="context-scroll"
+          ref={virtual.scroller}
+          onScroll={virtual.refresh}
+          aria-label="Context segments"
+        >
+          <div className="virtual-segments" style={{ height: virtual.totalHeight }}>
+            {visibleRows.map((segment, localIndex) => {
+              const index = virtual.range.start + localIndex;
+              const position = virtual.positions[index];
+              const open = expanded.has(segment.id);
+              return (
+                <div
+                  key={segment.id}
+                  className="context-segment"
+                  data-segment-id={segment.id}
+                  data-category={segment.category}
+                  style={{ top: position?.top }}
+                  ref={(element) => {
+                    if (element) virtual.elements.current.set(segment.id, element);
+                    else virtual.elements.current.delete(segment.id);
+                  }}
+                >
+                  <button
+                    type="button"
+                    className={`segment-row ${selected === segment.id ? "selected" : ""}`}
+                    tabIndex={tabTarget === segment.id ? 0 : -1}
+                    aria-expanded={open}
+                    aria-label={`${segment.position} ${segment.role === "developer" ? "Developer" : names[segment.category]} ${segment.preview}`}
+                    onFocus={() => focus(segment.id)}
+                    onClick={() => toggle(segment.id)}
+                    onKeyDown={(event) => {
+                      if (event.target !== event.currentTarget || event.ctrlKey || event.altKey || event.metaKey)
+                        return;
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        toggle(segment.id);
+                      } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+                        event.preventDefault();
+                        virtual.jump(
+                          event.key === "Home"
+                            ? 0
+                            : event.key === "End"
+                              ? rows.length - 1
+                              : Math.max(0, Math.min(rows.length - 1, index + (event.key === "ArrowDown" ? 1 : -1))),
+                          true,
+                        );
+                      } else if ((event.key === "ArrowRight" && !open) || (event.key === "ArrowLeft" && open)) {
+                        event.preventDefault();
+                        toggle(segment.id);
+                      }
+                    }}
+                  >
+                    <span className="segment-position">{segment.position}</span>
+                    <Glyph kind={segment.category} />
+                    <strong>
+                      {segment.role === "developer" ? "Developer" : names[segment.category]}
+                      {segment.category === "assistant" && segment.kind !== "assistant" && segment.kind !== "text"
+                        ? ` · ${segment.kind}`
+                        : ""}
+                    </strong>
+                    <span className="segment-preview" title={segment.preview}>
+                      {segment.preview}
+                    </span>
+                    {segment.timestamp && <time title={segment.timestamp}>{time(segment.timestamp)}</time>}
+                    <span className="segment-chevron" aria-hidden="true">
+                      {open ? <ChevronDownIcon /> : <ChevronRightIcon />}
+                    </span>
+                  </button>
+                  {open && context && <SegmentDetails key={segment.id} segment={segment} context={context} />}
+                </div>
+              );
+            })}
+          </div>
+          {!rows.length && (
+            <div className="empty-state">
+              No captured segments match. This view does not include unrelated session events.
+            </div>
+          )}
+        </section>
+        <nav className="context-minimap" aria-label="Context minimap">
+          {Array.from({ length: Math.ceil(rows.length / bucket) }, (_, index) => {
+            const start = index * bucket;
+            const end = Math.min(rows.length, start + bucket);
+            const group = rows.slice(start, end);
+            return (
+              <button
+                type="button"
+                key={group[0]?.id}
+                aria-label={`Jump to context position ${group[0]?.position}`}
+                title={`Filtered rows ${start + 1}–${end}`}
+                aria-current={start < virtual.viewport.end && end > virtual.viewport.start ? "true" : undefined}
+                onClick={() => virtual.jump(start, true)}
+              >
+                {categories.map((value) => {
+                  const size = group.filter((row) => row.category === value).length;
+                  return size ? <span key={value} data-category={value} style={{ flex: size }} /> : null;
+                })}
+              </button>
+            );
+          })}
+        </nav>
+      </div>
+      <div className="composition-footer">
+        <span>Messages and supported content blocks in source order · filtered minimap</span>
+        <span>
+          {Math.min(rows.length, virtual.range.start + 1)}–{Math.min(rows.length, virtual.range.end)} / {rows.length}
+        </span>
+      </div>
+      {payload && (
+        <details className="provider-observation">
+          <summary>
+            Advanced · independent provider observation (request association unavailable; may include warming/retries)
+          </summary>
+          <span>
+            Observed {new Date(payload.observedAt).toLocaleTimeString()} · not attributed to the context leaf/turn
+          </span>
+          <Data
+            label="Observed provider payload · redacted bounded copy"
+            data={payload.data}
+            scope="observed-provider-payload"
+          />
+        </details>
+      )}
+    </section>
+  );
+}
+function SegmentDetails({ segment, context }: { segment: ContextSegment; context: Composition }) {
+  const raw = context.messages[segment.messageIndex];
+  const message = record(raw?.value);
+  const block =
+    segment.blockIndex === undefined
+      ? message?.content === "" && message?.sections
+        ? message.sections
+        : (message?.content ?? message?.sections ?? raw?.value)
+      : Array.isArray(message?.content)
+        ? message.content[segment.blockIndex]
+        : undefined;
+  const item = record(block);
+  const content = item?.text ?? item?.thinking ?? item?.arguments ?? block;
+  return (
+    <div className="segment-details">
+      <section className="message-details">
+        <h3>Message details</h3>
+        <Metadata
+          rows={[
+            ["Role", segment.role],
+            ["Type", segment.kind],
+            ["Position", `${segment.position} / ${context.segments.length}`],
+            ["Source message", `${segment.messageIndex + 1} / ${context.totalMessages}`],
+            ...(segment.blockIndex === undefined
+              ? []
+              : [["Content block", String(segment.blockIndex + 1)] as [string, string]]),
+            ["Timestamp", segment.timestamp],
+            ["Tokens", "Unavailable for this segment"],
+          ]}
+        />
+      </section>
+      <div className="segment-content">
+        <Data
+          label="Content"
+          data={raw ? { value: content ?? null, truncated: raw.truncated } : undefined}
+          scope={`${segment.id}-content`}
+        />
+        {item?.type === "toolCall" && (
+          <Data
+            label={`Tool arguments · ${typeof item.name === "string" ? item.name : "unknown"}`}
+            data={{ value: item.arguments ?? null, truncated: Boolean(raw?.truncated) }}
+            scope={`${segment.id}-arguments`}
+            defaultOpen={false}
+          />
+        )}
+        <Data
+          label="Structured content"
+          data={raw ? { value: block ?? null, truncated: raw.truncated } : undefined}
+          scope={`${segment.id}-structured`}
+          defaultOpen={false}
+        />
+        <Data
+          label="Metadata"
+          data={
+            raw
+              ? {
+                  value: Object.fromEntries(Object.entries(message ?? {}).filter(([key]) => key !== "content")),
+                  truncated: raw.truncated,
+                }
+              : undefined
+          }
+          scope={`${segment.id}-metadata`}
+          defaultOpen={false}
+        />
+        <Data label="Raw JSON · captured message" data={raw} scope={`${segment.id}-raw`} defaultOpen={false} />
+      </div>
+    </div>
+  );
+}

package/src/web/entry-calls.ts

@@ -0,0 +1,14 @@
+import { correlatedCalls } from "../correlation.js";
+import type { Call, Capture } from "../model.js";
+import { record } from "./format.js";
+export function entryCalls(raw: Capture | undefined, calls: Call[], anchor?: string): Call[] {
+  const message = record(record(raw?.value)?.message);
+  const ids = new Set<string>();
+  if (message?.role === "toolResult" && typeof message.toolCallId === "string") ids.add(message.toolCallId);
+  if (message?.role === "assistant" && Array.isArray(message.content))
+    for (const block of message.content) {
+      const item = record(block);
+      if (item?.type === "toolCall" && typeof item.id === "string") ids.add(item.id);
+    }
+  return correlatedCalls(ids, anchor, calls);
+}

package/src/web/format.ts

@@ -0,0 +1,92 @@
+import type { Call, Capture, EntrySummary, Json } from "../model.js";
+
+export function output(value: Json): string {
+  return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+}
+export function record(value: Json | undefined): { [key: string]: Json } | undefined {
+  return value && typeof value === "object" && !Array.isArray(value) ? value : undefined;
+}
+export function duration(ms?: number): string {
+  return ms === undefined ? "—" : ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
+export function count(value?: number): string {
+  return value === undefined ? "—" : value.toLocaleString("en-US");
+}
+export function time(value: string): string {
+  return /^\d{4}-\d\d-\d\dT/.test(value) ? value.slice(11, 19) : value || "—";
+}
+export function group(kind: string): string {
+  return ["assistant", "model_change", "thinking_level_change"].includes(kind)
+    ? "Model"
+    : kind === "toolResult"
+      ? "Tool"
+      : ["custom", "custom_message"].includes(kind)
+        ? "Custom"
+        : "Other";
+}
+export function eventName(kind: string): string {
+  return kind === "assistant" ? "model" : kind === "toolResult" ? "tool_result" : kind;
+}
+export interface Filters {
+  query: string;
+  kind: string;
+  groups: string[];
+  errorsOnly: boolean;
+  slowOnly: boolean;
+}
+export function matches(entry: EntrySummary, filters: Filters, calls: Call[]): boolean {
+  const call = calls.find(
+    (call) =>
+      call.id === entry.toolCallId &&
+      call.branchAnchor === entry.toolAnchor &&
+      !call.parentOccurrenceId &&
+      !call.correlationUnavailable,
+  );
+  return (
+    (filters.kind === "all" || entry.kind === filters.kind) &&
+    (!filters.groups.length || filters.groups.includes(group(entry.kind))) &&
+    (!filters.errorsOnly || entry.status === "error" || call?.status === "error") &&
+    (!filters.slowOnly || (call?.durationMs ?? 0) > 10000) &&
+    `${entry.kind} ${entry.name ?? ""} ${entry.label} ${entry.id}`.toLowerCase().includes(filters.query)
+  );
+}
+export function matchesCall(call: Call, filters: Filters): boolean {
+  return (
+    (!filters.groups.length || filters.groups.includes("Tool")) &&
+    (!filters.errorsOnly || call.status === "error") &&
+    (!filters.slowOnly || (call.durationMs ?? 0) > 10000) &&
+    `${call.name} ${call.id}`.toLowerCase().includes(filters.query) &&
+    (filters.kind === "all" || filters.kind === "toolResult")
+  );
+}
+export function promptDiff(before?: Capture, after?: Capture): Capture {
+  const left = before ? output(before.value).split("\n") : [];
+  const right = after ? output(after.value).split("\n") : [];
+  let start = 0;
+  let end = 0;
+  while (start < left.length && start < right.length && left[start] === right[start]) start++;
+  while (
+    end < left.length - start &&
+    end < right.length - start &&
+    left[left.length - end - 1] === right[right.length - end - 1]
+  )
+    end++;
+  return {
+    value:
+      [
+        ...left.slice(start, left.length - end).map((line) => `- ${line}`),
+        ...right.slice(start, right.length - end).map((line) => `+ ${line}`),
+      ].join("\n") || "No prompt change",
+    truncated: Boolean(before?.truncated || after?.truncated),
+  };
+}
+export function scripts(data?: Capture): Capture | undefined {
+  const message = record(record(data?.value)?.message);
+  if (!message || !Array.isArray(message.content)) return;
+  const code = message.content.flatMap((block) => {
+    const item = record(block);
+    const args = record(item?.arguments);
+    return item?.type === "toolCall" && item.name === "codemode" && typeof args?.code === "string" ? [args.code] : [];
+  });
+  return code.length ? { value: code.join("\n\n"), truncated: Boolean(data?.truncated) } : undefined;
+}

package/src/web/hierarchy.ts

@@ -0,0 +1,117 @@
+export interface ParentNode {
+  id: string;
+  parentId: string | null;
+}
+export interface Hierarchy<T extends ParentNode> {
+  nodes: Map<string, T>;
+  children: Map<string, T[]>;
+  roots: T[];
+}
+export interface HierarchyRow<T> {
+  node: T;
+  depth: number;
+  childCount: number;
+}
+export function hierarchy<T extends ParentNode>(items: T[]): Hierarchy<T> {
+  const nodes = new Map(items.map((node) => [node.id, node]));
+  const children = new Map<string, T[]>();
+  const roots: T[] = [];
+  for (const node of items) {
+    if (!node.parentId || !nodes.has(node.parentId)) roots.push(node);
+    else {
+      const siblings = children.get(node.parentId) ?? [];
+      siblings.push(node);
+      children.set(node.parentId, siblings);
+    }
+  }
+  // Malformed rootless cycles remain inspectable; original parent IDs are never rewritten.
+  const reached = new Set<string>();
+  const stack = roots.slice();
+  const visit = () => {
+    while (stack.length) {
+      const node = stack.pop();
+      if (!node || reached.has(node.id)) continue;
+      reached.add(node.id);
+      stack.push(...(children.get(node.id) ?? []));
+    }
+  };
+  visit();
+  for (const node of items)
+    if (!reached.has(node.id)) {
+      roots.push(node);
+      stack.push(node);
+      visit();
+    }
+  return { nodes, children, roots };
+}
+export function ancestors<T extends ParentNode>(tree: Hierarchy<T>, id: string): string[] {
+  const result: string[] = [];
+  const seen = new Set([id]);
+  let parent = tree.nodes.get(id)?.parentId;
+  while (parent && tree.nodes.has(parent) && !seen.has(parent)) {
+    seen.add(parent);
+    result.push(parent);
+    parent = tree.nodes.get(parent)?.parentId;
+  }
+  return result;
+}
+export function withAncestors<T extends ParentNode>(tree: Hierarchy<T>, matches: Set<string>): Set<string> {
+  const keep = new Set(matches);
+  // Each parent edge is visited once even for very long linear histories.
+  for (const id of matches) {
+    let current = tree.nodes.get(id)?.parentId;
+    const seen = new Set([id]);
+    while (current && tree.nodes.has(current) && !seen.has(current)) {
+      seen.add(current);
+      if (keep.has(current)) break;
+      keep.add(current);
+      current = tree.nodes.get(current)?.parentId;
+    }
+  }
+  return keep;
+}
+export function flatten<T extends ParentNode>(
+  tree: Hierarchy<T>,
+  expanded: Set<string>,
+  keep?: Set<string>,
+): HierarchyRow<T>[] {
+  const rows: HierarchyRow<T>[] = [];
+  const seen = new Set<string>();
+  const stack = tree.roots
+    .slice()
+    .reverse()
+    .map((node) => ({ node, depth: 0 }));
+  while (stack.length) {
+    const row = stack.pop();
+    if (!row || seen.has(row.node.id) || (keep && !keep.has(row.node.id))) continue;
+    seen.add(row.node.id);
+    const children = (tree.children.get(row.node.id) ?? []).filter((node) => !keep || keep.has(node.id));
+    rows.push({ ...row, childCount: children.length });
+    if (expanded.has(row.node.id))
+      for (const node of children.slice().reverse()) stack.push({ node, depth: row.depth + 1 });
+  }
+  return rows;
+}
+export function reveal<T extends ParentNode>(tree: Hierarchy<T>, expanded: Set<string>, id: string): Set<string> {
+  return new Set([...expanded, ...ancestors(tree, id)]);
+}
+export function label(node: { kind: string; name?: string; label: string }): string {
+  if (node.name) return node.name;
+  if (node.label && !/^[[{]/.test(node.label.trim())) return node.label;
+  switch (node.kind) {
+    case "context_edit":
+      return "Context contribution updated";
+    case "compaction":
+      return "Compaction checkpoint";
+    case "branch_summary":
+      return "Branch summary";
+    case "custom":
+      return "Custom session entry";
+    case "label":
+      return "Entry label updated";
+    case "session_info":
+      return "Session metadata";
+    default:
+      return "Recorded session entry";
+  }
+}

package/src/web/inline-entry.tsx

@@ -0,0 +1,124 @@
+import { Button, Tabs, Text } from "@radix-ui/themes";
+import type { EntrySummary } from "../model.js";
+import { useDetail } from "./api.js";
+import { Data, Metadata } from "./components.js";
+import { count, eventName, record } from "./format.js";
+import { label } from "./hierarchy.js";
+
+export function InlineEntry({ entry, inspect }: { entry: EntrySummary; inspect(id: string): void }) {
+  const { detail, error, retry } = useDetail(entry.id);
+  const raw = record(detail?.raw.value);
+  const message = record(raw?.message);
+  const content = raw && Object.hasOwn(raw, "data") ? raw.data : message?.content;
+  const textBlocks =
+    Array.isArray(content) &&
+    content.every((block) => {
+      const item = record(block);
+      return item?.type === "text" && typeof item.text === "string";
+    })
+      ? content.map((block) => record(block)?.text).join("\n")
+      : undefined;
+  const preview = textBlocks ?? content;
+  const inputs = Array.isArray(message?.content)
+    ? message.content.flatMap((block) => {
+        const item = record(block);
+        return item?.type === "toolCall" ? [item.arguments ?? null] : [];
+      })
+    : [];
+  const usage = record(message?.usage);
+  const input = typeof usage?.input === "number" && usage.input >= 0 ? usage.input : undefined;
+  const output = typeof usage?.output === "number" && usage.output >= 0 ? usage.output : undefined;
+  const known = input !== undefined && output !== undefined;
+  return (
+    <div className="inline-entry">
+      <Tabs.Root defaultValue="overview" className="inline-tabs">
+        <Tabs.List>
+          <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+          <Tabs.Trigger value="content">Content</Tabs.Trigger>
+          <Tabs.Trigger value="raw">Raw</Tabs.Trigger>
+          <Tabs.Trigger value="metadata">Metadata</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="overview">
+          <div className="inline-summary">
+            <Metadata
+              rows={[
+                ["Type", eventName(entry.kind)],
+                ["Description", label(entry)],
+                ["Parent ID", entry.parentId ?? "root"],
+                ["Timestamp", entry.timestamp],
+                ...(entry.tokens === undefined ? [] : [["Tokens", count(entry.tokens)] as [string, string]]),
+              ]}
+            />
+            {known && (
+              <div className="usage-breakdown">
+                <div className="usage-bar">
+                  <span style={{ width: `${input + output ? (input / (input + output)) * 100 : 0}%` }} />
+                  <span style={{ width: `${input + output ? (output / (input + output)) * 100 : 0}%` }} />
+                </div>
+                <span>
+                  {count(input)} input · {count(output)} output (cache not included)
+                </span>
+              </div>
+            )}
+          </div>
+          {content !== undefined && (
+            <Data
+              label={entry.kind === "toolResult" ? "Recorded tool output" : "Recorded content"}
+              data={{ value: preview ?? null, truncated: Boolean(detail?.raw.truncated) }}
+              scope={`${entry.id}-content`}
+            />
+          )}
+          {inputs.length > 0 && (
+            <Data
+              label="Recorded tool arguments"
+              data={{ value: inputs, truncated: Boolean(detail?.raw.truncated) }}
+              scope={`${entry.id}-arguments`}
+              defaultOpen={false}
+            />
+          )}
+          <Button size="1" variant="ghost" onClick={() => inspect(entry.id)}>
+            Inspect complete entry →
+          </Button>
+        </Tabs.Content>
+        <Tabs.Content value="content">
+          <Data
+            label="Recorded content"
+            data={
+              content === undefined ? undefined : { value: preview ?? null, truncated: Boolean(detail?.raw.truncated) }
+            }
+            scope={`${entry.id}-content`}
+          />
+        </Tabs.Content>
+        <Tabs.Content value="raw">
+          <Data label="Raw entry · redacted display copy" data={detail?.raw} scope={`${entry.id}-raw`} />
+        </Tabs.Content>
+        <Tabs.Content value="metadata">
+          <Metadata
+            rows={[
+              ["ID", entry.id],
+              ["Parent ID", entry.parentId ?? "root"],
+              ["Timestamp", entry.timestamp],
+              ["Source", "Session log entry, not an execution span"],
+            ]}
+          />
+          <Data label="Contribution at this node" data={detail?.projected} scope={`${entry.id}-projection`} />
+        </Tabs.Content>
+      </Tabs.Root>
+      {error && (
+        <div role="alert">
+          <Text size="1" color="red">
+            {error}
+          </Text>
+          <Button size="1" variant="ghost" onClick={retry}>
+            Retry inline details
+          </Button>
+        </div>
+      )}
+      {!detail && !error && (
+        <Text size="1" color="gray">
+          Loading bounded entry details…
+        </Text>
+      )}
+    </div>
+  );
+}