@narumitw/pi-inspect 0.1.0 → 0.2.1

package/src/web/trace.tsx

@@ -5,6 +5,7 @@ import type { Call, EntrySummary } from "../model.js";
 import { Glyph, Status } from "./components.js";
 import { count, eventName, time } from "./format.js";
 import { flatten, hierarchy, label, reveal, withAncestors } from "./hierarchy.js";
+import { type HistoryRow, historySummary } from "./history.js";
 import { InlineEntry } from "./inline-entry.js";
 import { TimelineMark } from "./timeline.js";
 import { axis } from "./timing.js";
@@ -25,6 +26,8 @@ export function Trace({
   view,
   changeView,
   calls,
+  historyRows,
+  active = true,
 }: {
   entries: EntrySummary[];
   matches: Set<string>;
@@ -35,6 +38,8 @@ export function Trace({
   view: string;
   changeView(view: string): void;
   calls: Call[];
+  historyRows?: HistoryRow[];
+  active?: boolean;
 }) {
   const tree = useMemo(() => hierarchy(entries), [entries]);
   const keep = useMemo(
@@ -49,7 +54,25 @@ export function Trace({
   const focusRequest = useRef(false);
   const scroller = useRef<HTMLDivElement>(null);
   const rowRefs = useRef(new Map<string, HTMLDivElement>());
-  const rows = useMemo(() => flatten(tree, expanded, keep), [tree, expanded, keep]);
+  const rows = useMemo(
+    () =>
+      historyRows
+        ? historyRows
+            .filter(({ node }) => matches.has(node.id) || (revealSelected && node.id === selected))
+            .map((row, index, visible) => ({
+              ...row,
+              depth: 0,
+              childCount: 0,
+              heading:
+                index === 0 || visible[index - 1]?.turn !== row.turn
+                  ? row.turn === "before-user"
+                    ? "Before first user turn"
+                    : "User turn"
+                  : undefined,
+            }))
+        : flatten(tree, expanded, keep),
+    [tree, expanded, keep, historyRows, matches, revealSelected, selected],
+  );
   const pageRows = rows.slice(offset, offset + 50);
   const visibleFocused = pageRows.some((row) => row.node.id === focused) ? focused : (pageRows[0]?.node.id ?? "");
   const baseDepth = pageRows.length ? Math.min(...pageRows.map((row) => row.depth)) : 0;
@@ -58,15 +81,16 @@ export function Trace({
   const range = useMemo(() => axis(entries, calls), [entries, calls]);
   useEffect(() => {
     if (!tree.nodes.has(selected) || serial === lastReveal.current) return;
-    lastReveal.current = serial;
-    const next = reveal(tree, expanded, selected);
-    setExpanded(next);
-    const index = flatten(tree, next, keep).findIndex((row) => row.node.id === selected);
+    const next = historyRows ? expanded : reveal(tree, expanded, selected);
+    const index = (historyRows ? rows : flatten(tree, next, keep)).findIndex((row) => row.node.id === selected);
     if (index >= 0) {
+      // Keep reveal pending until the selection belongs to this projection.
+      lastReveal.current = serial;
+      if (!historyRows) setExpanded(next);
       setOffset(Math.floor(index / 50) * 50);
       setFocused(selected);
     }
-  }, [tree, selected, serial, expanded, keep]);
+  }, [tree, selected, serial, expanded, keep, historyRows, rows]);
   useEffect(() => {
     const element = rowRefs.current.get(visibleFocused);
     if (!element || !scroller.current) return;
@@ -97,11 +121,11 @@ export function Trace({
     rowRefs.current.get(id)?.focus({ preventScroll: true });
   }
   return (
-    <section className={`panel trace-panel trace-${view}`}>
+    <section className={`panel trace-panel trace-${view} ${historyRows ? "trace-history" : "trace-branches"}`}>
       <div className="trace-toolbar">
-        <Heading size="3">Trace explorer</Heading>
+        <Heading size="3">{historyRows ? "History" : "Branch view"}</Heading>
         <Text size="1" color="gray">
-          Session log hierarchy
+          {historyRows ? "Conversation groups · not execution parentage" : "Actual session ancestry · not a call stack"}
         </Text>
         <div className="trace-actions">
           <Button
@@ -129,19 +153,25 @@ export function Trace({
         </div>
       </div>
       <div className="trace-hint">
-        Row: select + toggle · Chevron: toggle only · ↑↓ navigate · ←→ collapse/expand · Enter select · Space toggle
+        Row: select · Chevron: toggle only · ↑↓ navigate · ←→ collapse/expand · Enter select · Space toggle
       </div>
       {view === "timeline" && (
         <div className="time-axis">
           <span>{range ? new Date(range.start).toISOString().slice(11, 23) : "No timing"}</span>
-          <span>● Log timestamp · ▰ Observed tool interval (live drawer)</span>
+          <span>● Log timestamp · ▰ Observed tool interval (captured executions)</span>
           <span>{range ? new Date(range.end).toISOString().slice(11, 23) : "—"}</span>
         </div>
       )}
       <div className="trace-scroll" ref={scroller}>
         <div role="tree" aria-label="Session trace" className="trace-tree">
-          {!rows.length && <div className="empty-state">No entries match. Filters keep actual ancestor context.</div>}
-          {pageRows.map(({ node: entry, depth, childCount }) => {
+          {!rows.length && (
+            <div className="empty-state">
+              {historyRows
+                ? "No visible entries match in this branch. Check filters or Show internal events."
+                : "No entries match. Filters keep actual ancestor context."}
+            </div>
+          )}
+          {pageRows.map(({ node: entry, depth, childCount, ...group }) => {
             const open = expanded.has(entry.id);
             const selectedRow = selected === entry.id;
             return (
@@ -154,11 +184,17 @@ export function Trace({
                 data-state={open ? "open" : "closed"}
                 style={{ marginLeft: (depth - baseDepth) * indent }}
               >
+                {"heading" in group && typeof group.heading === "string" && (
+                  <div className="turn-heading">{group.heading}</div>
+                )}
                 <div
                   role="treeitem"
                   aria-level={depth + 1}
                   aria-expanded={open}
                   aria-selected={selectedRow}
+                  aria-current={selectedRow ? "true" : undefined}
+                  data-entry-id={entry.id}
+                  data-match={matches.has(entry.id)}
                   tabIndex={visibleFocused === entry.id ? 0 : -1}
                   ref={(element) => {
                     if (element) rowRefs.current.set(entry.id, element);
@@ -170,7 +206,6 @@ export function Trace({
                   onClick={(event) => {
                     if (event.target !== event.currentTarget && (event.target as HTMLElement).closest("button")) return;
                     select(entry.id);
-                    toggle(entry.id);
                   }}
                   onKeyDown={(event) => {
                     if (event.target !== event.currentTarget || event.altKey || event.ctrlKey || event.metaKey) return;
@@ -213,13 +248,16 @@ export function Trace({
                     <Glyph kind={entry.kind} />
                     <span className="row-title">
                       <strong>{eventName(entry.kind)}</strong>
-                      <span title={label(entry)}>{label(entry)}</span>
+                      <span title={historySummary(entry)}>
+                        {historyRows ? historySummary(entry) : label(entry)}
+                        {entry.summaryTruncated && historyRows ? " · truncated" : ""}
+                      </span>
                     </span>
                     <code title={entry.id}>{entry.id.slice(0, 8)}</code>
                     {!matches.has(entry.id) && (
                       <span className="ancestor-badge">{selectedRow ? "selected outside filters" : "ancestor"}</span>
                     )}
-                    {depth === 0 && entry.parentId && tree.nodes.has(entry.parentId) && (
+                    {!historyRows && depth === 0 && entry.parentId && tree.nodes.has(entry.parentId) && (
                       <span className="ancestor-badge">recorded parent cycle</span>
                     )}
                   </div>
@@ -234,7 +272,7 @@ export function Trace({
                 </div>
                 {open && disclosed.has(entry.id) && (
                   <div className="entry-expanded">
-                    <InlineEntry entry={entry} inspect={select} />
+                    {active && <InlineEntry entry={entry} inspect={select} />}
                     {childCount > 0 && (
                       <span className="children-label">
                         {childCount} visible child {childCount === 1 ? "entry" : "entries"}
@@ -254,7 +292,9 @@ export function Trace({
         <span>
           {baseDepth
             ? `Absolute hierarchy level ${baseDepth + 1}+ · page-local indentation`
-            : "Original parents retained · browser-only selection"}
+            : historyRows
+              ? "Branch-scoped history · browser-only selection"
+              : "Original parents retained · browser-only selection"}
         </span>
         <Flex gap="2" align="center">
           <Button size="1" variant="ghost" disabled={!offset} onClick={() => setOffset(Math.max(0, offset - 50))}>

package/src/web/tree.tsx

@@ -1,281 +0,0 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import {
-  ChevronDownIcon,
-  ChevronRightIcon,
-  MagnifyingGlassIcon,
-  MixerHorizontalIcon,
-  Share2Icon,
-} from "@radix-ui/react-icons";
-import { Checkbox, Flex, Heading, IconButton, Select, Text, TextField } from "@radix-ui/themes";
-import { useEffect, useMemo, useRef, useState } from "react";
-import type { EntrySummary } from "../model.js";
-import { Glyph } from "./components.js";
-import { eventName, type Filters } from "./format.js";
-import { flatten, hierarchy, label, reveal, withAncestors } from "./hierarchy.js";
-import { scrollWithin } from "./trace.js";
-
-function Tree({
-  nodes,
-  matches,
-  selected,
-  serial,
-  revealSelected,
-  choose,
-}: {
-  nodes: EntrySummary[];
-  matches: Set<string>;
-  selected: string;
-  serial: number;
-  revealSelected: boolean;
-  choose(id: string): void;
-}) {
-  const tree = useMemo(() => hierarchy(nodes), [nodes]);
-  const keep = useMemo(
-    () => withAncestors(tree, new Set([...matches, ...(revealSelected && selected ? [selected] : [])])),
-    [tree, matches, revealSelected, selected],
-  );
-  const [expanded, setExpanded] = useState(new Set<string>());
-  const [offset, setOffset] = useState(0);
-  const previous = useRef<{ selected: string; serial: number; revealSelected: boolean } | undefined>(undefined);
-  const nav = useRef<HTMLElement>(null);
-  const rows = flatten(tree, expanded, keep);
-  useEffect(() => {
-    const old = previous.current;
-    if (
-      !tree.nodes.has(selected) ||
-      (old?.selected === selected && old.serial === serial && old.revealSelected === revealSelected)
-    )
-      return;
-    previous.current = { selected, serial, revealSelected };
-    const next = reveal(tree, expanded, selected);
-    setExpanded(next);
-    const index = flatten(tree, next, keep).findIndex((row) => row.node.id === selected);
-    if (index >= 0) setOffset(Math.floor(index / 100) * 100);
-  }, [selected, serial, revealSelected, tree, expanded, keep]);
-  const selectedVisible = rows.slice(offset, offset + 100).some((row) => row.node.id === selected);
-  const lastScroll = useRef<{ selected: string; offset: number; element: HTMLElement } | undefined>(undefined);
-  useEffect(() => {
-    const element = nav.current?.querySelector<HTMLElement>('[aria-current="true"]');
-    if (!selectedVisible || !nav.current || !element || element.dataset.entryId !== selected) return;
-    const last = lastScroll.current;
-    if (last?.selected === selected && last.offset === offset && last.element === element) return;
-    lastScroll.current = { selected, offset, element };
-    scrollWithin(nav.current, element);
-  }, [selected, offset, selectedVisible]);
-  useEffect(() => {
-    if (offset >= rows.length && offset) setOffset(0);
-  }, [offset, rows.length]);
-  const pageRows = rows.slice(offset, offset + 100);
-  const base = pageRows.length ? Math.min(...pageRows.map((row) => row.depth)) : 0;
-  const rail = Math.min(8, 64 / Math.max(1, ...pageRows.map((row) => row.depth - base)));
-  return (
-    <>
-      <nav ref={nav} className="tree-scroll" aria-label="Session branches">
-        {pageRows.map(({ node, depth, childCount }) => (
-          <div key={node.id} className="tree-row" style={{ paddingLeft: (depth - base) * rail }}>
-            {childCount ? (
-              <IconButton
-                variant="ghost"
-                size="1"
-                aria-label={`Toggle children of ${node.id}`}
-                aria-expanded={expanded.has(node.id)}
-                onClick={() =>
-                  setExpanded((previous) => {
-                    const next = new Set(previous);
-                    if (next.has(node.id)) next.delete(node.id);
-                    else next.add(node.id);
-                    return next;
-                  })
-                }
-              >
-                {expanded.has(node.id) ? <ChevronDownIcon /> : <ChevronRightIcon />}
-              </IconButton>
-            ) : (
-              <span className="tree-spacer" />
-            )}
-            <button
-              type="button"
-              className="node"
-              data-entry-id={node.id}
-              data-match={matches.has(node.id)}
-              aria-current={selected === node.id ? "true" : undefined}
-              onClick={() => choose(node.id)}
-              title={`${node.kind} · ${node.id}\n${label(node)}${node.nameTruncated ? " [truncated; inspect Raw for the complete captured value]" : ""}`}
-            >
-              <Glyph kind={node.kind} />
-              <span className="node-copy">
-                <span className="node-title">
-                  <strong>{eventName(node.kind)}</strong>
-                  <small>{node.id.slice(0, 8)}</small>
-                </span>
-                <span className="node-description">{label(node)}</span>
-              </span>
-            </button>
-          </div>
-        ))}
-      </nav>
-      {rows.length > 100 && (
-        <div className="nav-pagination">
-          <button type="button" disabled={!offset} onClick={() => setOffset(Math.max(0, offset - 100))}>
-            Previous nodes
-          </button>
-          <span>
-            {offset + 1}–{Math.min(offset + 100, rows.length)}
-          </span>
-          <button type="button" disabled={offset + 100 >= rows.length} onClick={() => setOffset(offset + 100)}>
-            Next nodes
-          </button>
-        </div>
-      )}
-    </>
-  );
-}
-export function Sidebar({
-  nodes,
-  matches,
-  total,
-  selected,
-  serial,
-  revealSelected,
-  choose,
-  filters,
-  change,
-}: {
-  nodes: EntrySummary[];
-  matches: Set<string>;
-  total: number;
-  selected: string;
-  serial: number;
-  revealSelected: boolean;
-  choose(id: string): void;
-  filters: Filters;
-  change(filters: Filters): void;
-}) {
-  const toggleGroup = (group: string) =>
-    change({
-      ...filters,
-      groups: filters.groups.includes(group)
-        ? filters.groups.filter((item) => item !== group)
-        : [...filters.groups, group],
-    });
-  return (
-    <aside className="sidebar">
-      <section className="panel tree-panel">
-        <div className="panel-heading">
-          <Heading size="3">
-            <Share2Icon />
-            Session tree
-          </Heading>
-          <Text size="1" color="gray">
-            {total} entries
-          </Text>
-        </div>
-        <div className="tree-controls">
-          <TextField.Root
-            aria-label="Search session"
-            placeholder="Search entries or content…"
-            value={filters.query}
-            onChange={(event) => change({ ...filters, query: event.target.value })}
-          >
-            <TextField.Slot>
-              <MagnifyingGlassIcon />
-            </TextField.Slot>
-          </TextField.Root>
-          <div className="filter-pills">
-            {["All", "Model", "Tool", "Custom"].map((group) => (
-              <button
-                type="button"
-                key={group}
-                aria-pressed={
-                  group === "All" ? !filters.groups.length : filters.groups.length === 1 && filters.groups[0] === group
-                }
-                onClick={() => change({ ...filters, kind: "all", groups: group === "All" ? [] : [group] })}
-              >
-                {group}
-              </button>
-            ))}
-          </div>
-        </div>
-        <Tree
-          nodes={nodes}
-          matches={matches}
-          selected={selected}
-          serial={serial}
-          revealSelected={revealSelected}
-          choose={choose}
-        />
-        <div className="tree-count">
-          {matches.size} matches / {total} entries
-        </div>
-      </section>
-      <Collapsible.Root className="panel filter-panel" defaultOpen={false}>
-        <Collapsible.Trigger asChild>
-          <button className="filters-toggle" type="button">
-            <MixerHorizontalIcon />
-            Filters
-            <ChevronDownIcon />
-          </button>
-        </Collapsible.Trigger>
-        <Collapsible.Content>
-          <label className="filter-check" htmlFor="filter-errors">
-            <span>Errors only</span>
-            <Checkbox
-              id="filter-errors"
-              checked={filters.errorsOnly}
-              onCheckedChange={(checked) => change({ ...filters, errorsOnly: checked === true })}
-            />
-          </label>
-          <label className="filter-check" htmlFor="filter-slow">
-            <span>Slow tool calls (&gt; 10s)</span>
-            <Checkbox
-              id="filter-slow"
-              checked={filters.slowOnly}
-              onCheckedChange={(checked) => change({ ...filters, slowOnly: checked === true })}
-            />
-          </label>
-          {[
-            ["Tool", "Tool events"],
-            ["Model", "Model events"],
-            ["Custom", "Custom events"],
-          ].map(([group, label]) => (
-            <label className="filter-check" key={group} htmlFor={`filter-${group}`}>
-              <span>{label}</span>
-              <Checkbox
-                id={`filter-${group}`}
-                checked={filters.groups.includes(group)}
-                onCheckedChange={() => toggleGroup(group)}
-              />
-            </label>
-          ))}
-          <Flex justify="between" align="center" gap="2">
-            <Text size="1" color="gray">
-              Entry type
-            </Text>
-            <Select.Root value={filters.kind} onValueChange={(kind) => change({ ...filters, kind })}>
-              <Select.Trigger aria-label="Filter entry type" variant="soft" />
-              <Select.Content>
-                {[
-                  "all",
-                  "user",
-                  "assistant",
-                  "toolResult",
-                  "system",
-                  "custom",
-                  "compaction",
-                  "branch_summary",
-                  "model_change",
-                  "thinking_level_change",
-                  "context_edit",
-                ].map((kind) => (
-                  <Select.Item key={kind} value={kind}>
-                    {kind}
-                  </Select.Item>
-                ))}
-              </Select.Content>
-            </Select.Root>
-          </Flex>
-        </Collapsible.Content>
-      </Collapsible.Root>
-    </aside>
-  );
-}