@narumitw/pi-inspect 0.1.0 → 0.2.1

package/src/web/{live-drawer.tsx → captured-executions.tsx}

@@ -1,36 +1,38 @@
 import { ChevronDownIcon, ChevronRightIcon } from "@radix-ui/react-icons";
-import { Button, Text } from "@radix-ui/themes";
+import { Button, Heading, Text } from "@radix-ui/themes";
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { Call, EntrySummary } from "../model.js";
-import { CallView, Status } from "./components.js";
-import { duration, type Filters, matchesCall } from "./format.js";
+import { Status } from "./components.js";
+import { duration, type Filters, matchesCall, output } from "./format.js";
 import { flatten, hierarchy, reveal, withAncestors } from "./hierarchy.js";
 import { searchNeedle } from "./search.js";
 import { TimelineMark } from "./timeline.js";
 import { axis } from "./timing.js";
 
-export function LiveDrawer({
+export function CapturedExecutions({
   calls,
   entries,
   selected,
   select,
   open,
-  changeOpen,
   view,
+  changeView,
   dropped,
   invalidEvents,
   filters,
+  revealSelected,
 }: {
   calls: Call[];
   entries: EntrySummary[];
   selected?: string;
   select(id: string): void;
   open: boolean;
-  changeOpen(open: boolean): void;
   view: string;
+  changeView(view: string): void;
   dropped: number;
   invalidEvents: number;
   filters: Filters;
+  revealSelected: boolean;
 }) {
   const preparedFilters = useMemo(() => ({ ...filters, query: searchNeedle(filters.query) }), [filters]);
   const tree = useMemo(
@@ -50,9 +52,12 @@ export function LiveDrawer({
     () =>
       withAncestors(
         tree,
-        new Set(calls.filter((call) => matchesCall(call, preparedFilters)).map((call) => call.occurrenceId)),
+        new Set([
+          ...calls.filter((call) => matchesCall(call, preparedFilters)).map((call) => call.occurrenceId),
+          ...(revealSelected && selected ? [selected] : []),
+        ]),
       ),
-    [tree, calls, preparedFilters],
+    [tree, calls, preparedFilters, revealSelected, selected],
   );
   const [expanded, setExpanded] = useState(new Set<string>());
   const previous = useRef<string | undefined>(undefined);
@@ -72,17 +77,17 @@ export function LiveDrawer({
     }
   }, [selected, tree]);
   const rows = flatten(tree, expanded, keep);
+  const indent = Math.min(12, 140 / Math.max(1, ...rows.map((row) => row.depth)));
   const range = axis(entries, calls);
   return (
     <section className={`live-drawer ${open ? "drawer-open" : ""}`}>
-      <button type="button" className="live-drawer-toggle" aria-expanded={open} onClick={() => changeOpen(!open)}>
-        {open ? <ChevronDownIcon /> : <ChevronRightIcon />}
-        <strong>Live calls</strong>
+      <div className="live-drawer-toggle">
+        <Heading size="3">Captured executions</Heading>
         <span>
           {calls.length} captured · {calls.filter((call) => call.status === "error").length} errors · {dropped} evicted
         </span>
         <span className="drawer-scope">Session-wide · observed events</span>
-      </button>
+      </div>
       {open && (
         <div className="live-drawer-body">
           {invalidEvents > 0 && (
@@ -94,6 +99,13 @@ export function LiveDrawer({
             <Text size="1" color="gray">
               Reported durations are monotonic execute() timings; bars are observed callback intervals.
             </Text>
+            <div className="view-switch">
+              {["list", "timeline"].map((mode) => (
+                <button type="button" key={mode} aria-pressed={view === mode} onClick={() => changeView(mode)}>
+                  {mode === "list" ? "List" : "Timeline"}
+                </button>
+              ))}
+            </div>
             <Button size="1" variant="ghost" disabled={!keep.size} onClick={() => setExpanded(new Set(keep))}>
               Expand calls
             </Button>
@@ -109,7 +121,7 @@ export function LiveDrawer({
               className="live-trace-item"
               data-parent-id={call.parentId ?? ""}
               data-raw-id={call.rawId}
-              style={{ marginLeft: depth * 12 }}
+              style={{ marginLeft: depth * indent }}
             >
               <div className={`live-call-row ${selected === call.id ? "selected" : ""}`}>
                 <button
@@ -135,7 +147,10 @@ export function LiveDrawer({
                   onClick={() => select(call.id)}
                 >
                   <strong title={call.name}>{call.name}</strong>
-                  <code title={call.occurrenceId}>{call.rawId}</code>
+                  <span className="call-summary" title={output(call.args.value)}>
+                    {output(call.args.value).replace(/\s+/g, " ").slice(0, 120)}
+                  </span>
+                  <code title={call.rawId}>{call.rawId.slice(0, 16)}</code>
                   <Status value={call.status} />
                   <span>{duration(call.durationMs)}</span>
                 </button>
@@ -153,19 +168,6 @@ export function LiveDrawer({
                   />
                 )}
               </div>
-              {expanded.has(call.id) && (
-                <CallView
-                  call={{
-                    ...call,
-                    id: call.rawId,
-                    parentId: call.parentOccurrenceId
-                      ? (calls.find((parent) => parent.occurrenceId === call.parentOccurrenceId)?.id ??
-                        call.rawParentId)
-                      : call.rawParentId,
-                  }}
-                  all={calls}
-                />
-              )}
             </div>
           ))}
         </div>

package/src/web/components.tsx

@@ -11,10 +11,10 @@ import {
   PersonIcon,
   StackIcon,
 } from "@radix-ui/react-icons";
-import { Badge, Button, Flex, Text } from "@radix-ui/themes";
+import { Badge, Button, Flex } from "@radix-ui/themes";
 import { useEffect, useRef, useState } from "react";
-import type { Call, Capture, Json } from "../model.js";
-import { duration, group, output } from "./format.js";
+import type { Capture, Json } from "../model.js";
+import { group, output } from "./format.js";
 import { JsonTree } from "./json-tree.js";
 
 export function Glyph({ kind }: { kind: string }) {
@@ -178,50 +178,52 @@ export function Data({
           {data && <Copy key={value} value={value} />}
         </Flex>
       </div>
-      <div hidden={!open}>
-        {structured && (
-          <div className="data-mode">
-            {["tree", "text"].map((mode) => (
-              <button type="button" key={mode} aria-pressed={format === mode} onClick={() => setFormat(mode)}>
-                {mode === "tree" ? "Objects" : "JSON text"}
-              </button>
-            ))}
-            <span>Redacted display copy</span>
-          </div>
-        )}
-        {structured && format === "tree" && data ? (
-          <JsonTree value={data.value} scope={scope} />
-        ) : (
-          <pre className="code-preview">
-            {lines.slice(0, 1000).map((line, index) => {
-              const start = sourceOffset;
-              sourceOffset += line.length + 1;
-              return (
-                <span className="code-line" key={`line-${start}`}>
-                  <span className="line-number" aria-hidden="true">
-                    {index + 1}
+      {open && (
+        <div>
+          {structured && (
+            <div className="data-mode">
+              {["tree", "text"].map((mode) => (
+                <button type="button" key={mode} aria-pressed={format === mode} onClick={() => setFormat(mode)}>
+                  {mode === "tree" ? "Objects" : "JSON text"}
+                </button>
+              ))}
+              <span>Redacted display copy</span>
+            </div>
+          )}
+          {structured && format === "tree" && data ? (
+            <JsonTree value={data.value} scope={scope} />
+          ) : (
+            <pre className="code-preview">
+              {lines.slice(0, 1000).map((line, index) => {
+                const start = sourceOffset;
+                sourceOffset += line.length + 1;
+                return (
+                  <span className="code-line" key={`line-${start}`}>
+                    <span className="line-number" aria-hidden="true">
+                      {index + 1}
+                    </span>
+                    <code>{colored(line, budget)}</code>
                   </span>
-                  <code>{colored(line, budget)}</code>
+                );
+              })}
+              {lines.length > 1000 && (
+                <span className="preview-limit">
+                  Preview limited to 1,000 lines; Copy includes the bounded display value.
                 </span>
-              );
-            })}
-            {lines.length > 1000 && (
-              <span className="preview-limit">
-                Preview limited to 1,000 lines; Copy includes the bounded display value.
-              </span>
-            )}
-          </pre>
-        )}
-        {data &&
-          images(data.value).map((image) => (
-            <img
-              key={`${image.mimeType}-${image.data}`}
-              className="preview-image"
-              src={`data:${image.mimeType};base64,${image.data}`}
-              alt="Captured raster tool output"
-            />
-          ))}
-      </div>
+              )}
+            </pre>
+          )}
+          {data &&
+            images(data.value).map((image) => (
+              <img
+                key={`${image.mimeType}-${image.data}`}
+                className="preview-image"
+                src={`data:${image.mimeType};base64,${image.data}`}
+                alt="Captured raster tool output"
+              />
+            ))}
+        </div>
+      )}
     </section>
   );
 }
@@ -237,53 +239,3 @@ export function Metadata({ rows }: { rows: [string, string | undefined][] }) {
     </dl>
   );
 }
-export function CallView({ call, all, group: scope = "live" }: { call: Call; all: Call[]; group?: string }) {
-  return (
-    <div className="call" id={scope === "detail" ? `${scope}-call-${call.occurrenceId}` : undefined}>
-      <Flex align="center" gap="2">
-        <Glyph kind="toolResult" />
-        <Text weight="bold">{call.name}</Text>
-        <Status value={call.status} />
-      </Flex>
-      <Metadata
-        rows={[
-          ["Call ID", call.id],
-          ["Occurrence", call.occurrenceId],
-          ["Parent relationship", call.parentUnavailable],
-          [
-            "Correlation",
-            call.correlationUnavailable ? "Reused or overlapping raw IDs; association unavailable" : undefined,
-          ],
-          ["Source", "Observed tool execution"],
-          [
-            "Start observed",
-            call.observedStartedAt === undefined ? undefined : new Date(call.observedStartedAt).toISOString(),
-          ],
-          [
-            "End observed",
-            call.observedEndedAt === undefined ? undefined : new Date(call.observedEndedAt).toISOString(),
-          ],
-          ["Duration", duration(call.durationMs)],
-          ["Children", String(all.filter((child) => child.parentOccurrenceId === call.occurrenceId).length)],
-        ]}
-      />
-      {call.parentId &&
-        (all.some((parent) => parent.occurrenceId === call.parentOccurrenceId) ? (
-          <a className="parent-link" href={`#${scope}-call-${encodeURIComponent(call.parentOccurrenceId ?? "")}`}>
-            Parent {call.parentId}
-            <ChevronRightIcon />
-          </a>
-        ) : (
-          <Text size="1" color="gray">
-            Parent {call.parentId} (not captured)
-          </Text>
-        ))}
-      <Data label="Arguments" data={call.args} scope={`${call.occurrenceId}-args`} defaultOpen={false} />
-      <Data
-        label={call.result ? "Result · tool_execution event" : "Result · not captured"}
-        data={call.result}
-        scope={`${call.occurrenceId}-result`}
-      />
-    </div>
-  );
-}

package/src/web/context-composition.tsx

@@ -19,9 +19,11 @@ const names: Record<string, string> = {
 export function ContextComposition({
   context,
   payload,
+  preview = false,
 }: {
   context?: Composition;
   payload?: Snapshot["providerObservation"];
+  preview?: boolean;
 }) {
   const [query, search] = useState("");
   const [category, filter] = useState("all");
@@ -111,15 +113,18 @@ export function ContextComposition({
         </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."}
+        {preview
+          ? "Session-derived preview · selected branch projection; not a captured historical request."
+          : 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?.observedAt && <span> Leaf {context?.leafId ?? "unavailable"}.</span>}
         {context?.incomplete && (
           <strong> Bounded capture is incomplete; only available captured content is searchable.</strong>
         )}

package/src/web/context-inventory.tsx

@@ -0,0 +1,65 @@
+import { Badge, Card, Flex, Text } from "@radix-ui/themes";
+import { useState } from "react";
+import type { Snapshot } from "../model.js";
+import { Data } from "./components.js";
+
+export function ContextInventory({ snapshot }: { snapshot?: Snapshot }) {
+  const [open, setOpen] = useState(false);
+  const [toolsOpen, setToolsOpen] = useState(false);
+  const [skillsOpen, setSkillsOpen] = useState(false);
+  return (
+    <details className="context-inventory" open={open} onToggle={(event) => setOpen(event.currentTarget.open)}>
+      <summary>Current runtime information · not historical request evidence</summary>
+      {open && (
+        <div className="inventory-scroll">
+          <Data
+            label="Current runtime effective prompt · may not yet be sent"
+            data={snapshot?.currentPrompt}
+            defaultOpen={false}
+          />
+          <Text as="p" size="2" color="gray">
+            Current active ≠ provider-visible. MCP connection status is unavailable.
+          </Text>
+          <details open={toolsOpen} onToggle={(event) => setToolsOpen(event.currentTarget.open)}>
+            <summary>Current tools</summary>
+            {toolsOpen &&
+              snapshot?.tools.map((tool) => (
+                <Card key={tool.name} className="inventory-card">
+                  <Text weight="bold">{tool.name}</Text>
+                  <Flex gap="1" wrap="wrap">
+                    <Badge>{tool.namespace ?? "tool"}</Badge>
+                    <Badge>{tool.exposure}</Badge>
+                    <Badge>{tool.active ? "active" : "inactive"}</Badge>
+                    <Badge>{tool.callable ? "callable" : "not callable"}</Badge>
+                  </Flex>
+                  <Text as="p" size="2" color="gray">
+                    {tool.description}
+                  </Text>
+                  <Data label={`Schema · ${tool.name}`} data={tool.schema} defaultOpen={false} />
+                </Card>
+              ))}
+          </details>
+          <details open={skillsOpen} onToggle={(event) => setSkillsOpen(event.currentTarget.open)}>
+            <summary>Currently advertised skills</summary>
+            <Text as="p" size="2" color="gray">
+              Advertised or read does not prove model compliance. Historical catalogs are unavailable.
+            </Text>
+            {skillsOpen &&
+              snapshot?.skills.map((skill) => (
+                <Card key={skill.path} className="inventory-card">
+                  <Text weight="bold">{skill.name}</Text>
+                  <Badge>advertised</Badge>
+                  <Text as="p" size="2">
+                    {skill.description}
+                  </Text>
+                  <Text size="1" color="gray">
+                    {skill.path}
+                  </Text>
+                </Card>
+              ))}
+          </details>
+        </div>
+      )}
+    </details>
+  );
+}

package/src/web/format.ts

@@ -47,7 +47,9 @@ export function matches(entry: EntrySummary, filters: Filters, calls: Call[]): b
     (!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)
+    `${entry.kind} ${entry.name ?? ""} ${entry.label} ${entry.summary ?? ""} ${entry.id}`
+      .toLowerCase()
+      .includes(filters.query)
   );
 }
 export function matchesCall(call: Call, filters: Filters): boolean {

package/src/web/history.ts

@@ -0,0 +1,56 @@
+import type { EntrySummary } from "../model.js";
+import { label } from "./hierarchy.js";
+
+/** Pi bookkeeping entries do not contribute messages; custom_message always does. */
+export function internalEntry(entry: EntrySummary): boolean {
+  return !entry.status && entry.internal === true;
+}
+export interface HistoryRow {
+  node: EntrySummary;
+  turn: string;
+  heading?: string;
+}
+export function history(entries: EntrySummary[], leaf: string | null): { rows: HistoryRow[]; issue?: string } {
+  const byId = new Map(entries.map((entry) => [entry.id, entry]));
+  const path: EntrySummary[] = [];
+  const seen = new Set<string>();
+  let id = leaf;
+  let issue: string | undefined;
+  while (id) {
+    if (seen.has(id)) {
+      issue = "Recorded parent cycle; partial history only";
+      break;
+    }
+    if (path.length >= 10000) {
+      issue = "History inspection budget exceeded";
+      break;
+    }
+    const entry = byId.get(id);
+    if (!entry) {
+      issue = "Parent or branch leaf outside indexed data; partial history only";
+      break;
+    }
+    seen.add(id);
+    path.push(entry);
+    id = entry.parentId;
+  }
+  if (!leaf) issue = "Active branch leaf unavailable; use Branch view to inspect indexed entries";
+  const rows: HistoryRow[] = [];
+  let turn = "before-user";
+  let first = true;
+  for (const node of path.reverse()) {
+    const starts = first || node.kind === "user";
+    if (node.kind === "user") turn = node.id;
+    rows.push({
+      node,
+      turn,
+      heading: starts ? (node.kind === "user" ? "User turn" : "Before first user turn") : undefined,
+    });
+    first = false;
+  }
+  return { rows, issue };
+}
+
+export function historySummary(entry: EntrySummary): string {
+  return entry.summary || (entry.kind === "system" ? "System prompt update" : label(entry));
+}