@narumitw/pi-inspect 0.0.0-stage → 0.2.0

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>
+  );
+}

package/src/web/inspector.tsx

@@ -0,0 +1,386 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ChevronRightIcon, CubeIcon } from "@radix-ui/react-icons";
+import { Button, Heading, Tabs, Text } from "@radix-ui/themes";
+import { useEffect, useMemo, useState } from "react";
+import type { BranchView, Call, Capture, DetailView, EntrySummary, Json, Snapshot } from "../model.js";
+import { Copy, Data, Metadata, Status } from "./components.js";
+import { entryCalls } from "./entry-calls.js";
+import { count, duration, eventName, output, promptDiff, record, scripts } from "./format.js";
+import { RecordedContent } from "./recorded-content.js";
+
+export function Inspector({
+  selected,
+  node,
+  detail,
+  detailError,
+  retryDetails,
+  call,
+  branch,
+  branchError,
+  retryBranch,
+  snapshot,
+  tab,
+  changeTab,
+  select,
+  selectCall,
+  preview,
+}: {
+  selected: string;
+  node?: EntrySummary;
+  detail?: DetailView;
+  detailError: string;
+  retryDetails(): void;
+  call?: Call;
+  branch?: BranchView;
+  branchError: string;
+  retryBranch(): void;
+  snapshot?: Snapshot;
+  tab: string;
+  changeTab(tab: string): void;
+  select(id: string): void;
+  selectCall(id: string): void;
+  preview(): void;
+}) {
+  const [format, setFormat] = useState("formatted");
+  const raw = record(detail?.raw.value);
+  const message = record(raw?.message);
+  const payload = raw?.data ?? message?.content;
+  const related = snapshot?.nodes.filter((entry) => entry.parentId === selected || entry.id === node?.parentId) ?? [];
+  const recordedCall = snapshot?.calls.find(
+    (item) => item.id === node?.toolCallId && item.branchAnchor === detail?.toolAnchor && !item.parentOccurrenceId,
+  );
+  const liveRaw: Capture | undefined = call
+    ? {
+        value: JSON.parse(JSON.stringify(call)) as Json,
+        truncated: Boolean(call.args.truncated || call.result?.truncated),
+      }
+    : undefined;
+  const activeRaw = liveRaw ?? detail?.raw;
+  const captured = entryCalls(detail?.raw, snapshot?.calls ?? [], detail?.toolAnchor);
+  const code = call ? (record(call.args.value)?.code as Json | undefined) : scripts(detail?.raw)?.value;
+  const codemode = call?.name === "codemode" || Boolean(scripts(detail?.raw)) || message?.toolName === "codemode";
+  const isCall = Boolean(call);
+  const hasSkills = Boolean(
+    snapshot?.skills.length || (Array.isArray(branch?.skillEvidence.value) && branch.skillEvidence.value.length),
+  );
+  const enabled = useMemo(
+    () => [
+      "content",
+      "raw",
+      ...(isCall ? [] : ["prompt", "tools", "context", ...(hasSkills ? ["skills"] : [])]),
+      ...(codemode ? ["codemode"] : []),
+    ],
+    [isCall, hasSkills, codemode],
+  );
+  useEffect(() => {
+    if (!enabled.includes(tab)) changeTab("content");
+  }, [enabled, tab, changeTab]);
+  return (
+    <section className="panel inspector-panel">
+      <div className="panel-heading">
+        <Heading size="3">
+          <CubeIcon />
+          Details
+        </Heading>
+        {activeRaw && <Copy key={selected} value={output(activeRaw.value)} />}
+      </div>
+      <div className="inspector-identity">
+        {call?.branchAnchor && !snapshot?.nodes.some((entry) => entry.id === call.branchAnchor) && (
+          <Text size="1" color="gray">
+            Recorded anchor omitted from this bounded inventory; navigator target unavailable.
+          </Text>
+        )}
+        <Heading size="4">
+          {call ? "Captured execution" : node ? eventName(node.kind) : "Entry"} ·{" "}
+          {selected.slice(0, 16) || "no selection"}
+        </Heading>
+        <Text size="2" color="gray">
+          {call?.name ?? node?.name ?? "Session log entry"}
+        </Text>
+      </div>
+      {detailError && (
+        <div role="alert" className="detail-failure">
+          {detailError}
+          <Button size="1" variant="ghost" onClick={retryDetails}>
+            Retry selected details
+          </Button>
+        </div>
+      )}
+      {branchError && (
+        <div role="alert" className="branch-failure">
+          {branchError}
+          <Button size="1" variant="ghost" onClick={retryBranch}>
+            Retry selected branch
+          </Button>
+        </div>
+      )}
+      {detail?.ancestryIssue && (
+        <Text role="status" size="1" color="amber">
+          Projection unavailable: {detail.ancestryIssue}. Raw entry retained.
+        </Text>
+      )}
+      <Tabs.Root value={tab} onValueChange={changeTab} className="inspector-tabs">
+        <Tabs.List wrap="nowrap" aria-label="Event detail views">
+          {["content", "raw", "prompt", "tools", "context", "skills", "codemode"].map((tab) => (
+            <Tabs.Trigger key={tab} value={tab} disabled={!enabled.includes(tab)}>
+              {tab}
+            </Tabs.Trigger>
+          ))}
+        </Tabs.List>
+        <Tabs.Content value="content">
+          {call ? (
+            <>
+              <Status value={call.status} />
+              <Data label="Arguments · redacted display copy" data={call.args} scope={`${call.occurrenceId}-args`} />
+              <Data label="Result · observed tool event" data={call.result} scope={`${call.occurrenceId}-result`} />
+              <div className="inspector-metadata">
+                <Metadata
+                  rows={[
+                    ["Source", "Observed tool execution"],
+                    [
+                      "Parent relationship",
+                      call.parentUnavailable ??
+                        call.parentOccurrenceId ??
+                        (call.parentId ? "unavailable" : "none (root)"),
+                    ],
+                    [
+                      "Correlation",
+                      call.correlationUnavailable || !call.branchAnchor
+                        ? "unavailable"
+                        : "Recorded anchor only; not request association",
+                    ],
+                    ["Reported duration", duration(call.durationMs)],
+                    ["Occurrence", call.occurrenceId],
+                    ["Raw call ID", call.id],
+                    ["Anchor entry", call.branchAnchor ?? undefined],
+                    [
+                      "Start observed",
+                      call.observedStartedAt === undefined ? undefined : new Date(call.observedStartedAt).toISOString(),
+                    ],
+                    [
+                      "End observed",
+                      call.observedEndedAt === undefined ? undefined : new Date(call.observedEndedAt).toISOString(),
+                    ],
+                    [
+                      "Children",
+                      String(
+                        snapshot?.calls.filter((child) => child.parentOccurrenceId === call.occurrenceId).length ?? 0,
+                      ),
+                    ],
+                  ]}
+                />
+              </div>
+              {call.parentId && !snapshot?.calls.some((parent) => parent.occurrenceId === call.parentOccurrenceId) && (
+                <Text size="1" color="gray">
+                  Parent {call.parentId} (not captured)
+                </Text>
+              )}
+              {snapshot?.calls
+                .filter(
+                  (item) =>
+                    item.parentOccurrenceId === call.occurrenceId || item.occurrenceId === call.parentOccurrenceId,
+                )
+                .map((item) => (
+                  <Button
+                    key={item.occurrenceId}
+                    size="1"
+                    variant="ghost"
+                    onClick={() => selectCall(item.occurrenceId)}
+                  >
+                    Related execution · {item.name} · {item.occurrenceId}
+                  </Button>
+                ))}
+              {call.branchAnchor && snapshot?.nodes.some((entry) => entry.id === call.branchAnchor) && (
+                <Button variant="ghost" size="1" onClick={() => select(call.branchAnchor ?? "")}>
+                  Inspect recorded anchor →
+                </Button>
+              )}
+            </>
+          ) : (
+            <>
+              <Text as="p" size="1" color="gray">
+                Session log entry · bounded recorded content
+              </Text>
+              {node?.status && <Status value={node.status} />}
+              <RecordedContent data={detail?.raw} scope={selected} />
+            </>
+          )}
+          {!detail && !call && !detailError && (
+            <Text size="1" color="gray">
+              Loading bounded entry details…
+            </Text>
+          )}
+        </Tabs.Content>
+        <Tabs.Content value="raw">
+          <div className="format-toolbar">
+            <div className="view-switch">
+              {["formatted", "json"].map((mode) => (
+                <button type="button" key={mode} aria-pressed={format === mode} onClick={() => setFormat(mode)}>
+                  {mode === "formatted" ? "Overview" : "Raw JSON"}
+                </button>
+              ))}
+            </div>
+          </div>
+          {format === "formatted" && (
+            <div className="inspector-metadata">
+              <Metadata
+                rows={(call
+                  ? [
+                      ["Source", "Observed tool execution"],
+                      ["Tool", call.name],
+                      ["ID", call.id],
+                      ["Parent call", call.parentId],
+                      ["Reported duration", call.durationMs === undefined ? undefined : duration(call.durationMs)],
+                      [
+                        "Start observed",
+                        call.observedStartedAt === undefined
+                          ? undefined
+                          : new Date(call.observedStartedAt).toISOString(),
+                      ],
+                      [
+                        "End observed",
+                        call.observedEndedAt === undefined ? undefined : new Date(call.observedEndedAt).toISOString(),
+                      ],
+                      ["Anchor entry", call.branchAnchor ?? undefined],
+                    ]
+                  : [
+                      ["Source", "Session log entry"],
+                      ["Type", node?.kind ?? (typeof raw?.type === "string" ? raw.type : undefined)],
+                      [
+                        node?.kind === "custom" || node?.kind === "custom_message"
+                          ? "Custom type"
+                          : node?.kind === "assistant"
+                            ? "Model"
+                            : "Name",
+                        node?.name,
+                      ],
+                      ["ID", selected],
+                      ["Parent ID", node?.parentId ?? "root"],
+                      ["Timestamp", node?.timestamp],
+                      [
+                        "Indexed children",
+                        count(snapshot?.nodes.filter((entry) => entry.parentId === selected).length),
+                      ],
+                      ["Tokens", node?.tokens === undefined ? undefined : count(node.tokens)],
+                      [
+                        "Reported tool duration",
+                        recordedCall?.durationMs === undefined ? undefined : duration(recordedCall.durationMs),
+                      ],
+                    ]
+                ).filter((row): row is [string, string] => typeof row[1] === "string")}
+              />
+              {(call?.status ?? node?.status) && <Status value={call?.status ?? node?.status} />}
+            </div>
+          )}
+          {format === "formatted" && call ? (
+            <>
+              <Data label="Arguments · redacted display copy" data={call.args} scope={`${call.occurrenceId}-args`} />
+              <Data label="Result · observed tool event" data={call.result} scope={`${call.occurrenceId}-result`} />
+              {call.branchAnchor && (
+                <Button variant="ghost" size="1" onClick={() => select(call.branchAnchor ?? "")}>
+                  Inspect recorded anchor →
+                </Button>
+              )}
+            </>
+          ) : (
+            <Data
+              label="Raw selected entry · redacted display copy"
+              data={
+                format === "formatted" && payload !== undefined
+                  ? { value: payload, truncated: Boolean(detail?.raw.truncated) }
+                  : activeRaw
+              }
+              scope={`${selected}-raw`}
+            />
+          )}
+          <Collapsible.Root className="related">
+            <Collapsible.Trigger asChild>
+              <Button variant="ghost" size="2">
+                Related {call ? "calls" : "entries"}
+                <ChevronRightIcon />
+              </Button>
+            </Collapsible.Trigger>
+            <Collapsible.Content>
+              {call
+                ? snapshot?.calls
+                    .filter(
+                      (item) =>
+                        item.parentOccurrenceId === call.occurrenceId || item.occurrenceId === call.parentOccurrenceId,
+                    )
+                    .map((item) => (
+                      <button type="button" key={item.occurrenceId} onClick={() => selectCall(item.occurrenceId)}>
+                        {item.name} · {item.id}
+                      </button>
+                    ))
+                : related.map((entry) => (
+                    <button type="button" key={entry.id} onClick={() => select(entry.id)}>
+                      {eventName(entry.kind)} · {entry.id}
+                    </button>
+                  ))}
+            </Collapsible.Content>
+          </Collapsible.Root>
+        </Tabs.Content>
+        <Tabs.Content value="prompt">
+          <Data label="Historical prompt · browser preview branch" data={branch?.prompt} scope={`${selected}-prompt`} />
+          <Data
+            label="Previous-node prompt · compare with selected branch"
+            data={branch?.previousPrompt}
+            scope={`${selected}-previousPrompt`}
+          />
+          <Data
+            label="Prompt diff · removed / added lines"
+            data={promptDiff(branch?.previousPrompt, branch?.prompt)}
+            scope={`${selected}-prompt-diff`}
+          />
+          <Data label="Historical sections" data={branch?.sections} scope={`${selected}-sections`} />
+          <Data label="Prompt updates on branch" data={branch?.promptUpdates} scope={`${selected}-promptUpdates`} />
+        </Tabs.Content>
+        <Tabs.Content value="tools">
+          <Data
+            label="Historical declared tools · preview branch"
+            data={branch?.declaredTools}
+            scope={`${selected}-declaredTools`}
+          />
+        </Tabs.Content>
+        <Tabs.Content value="skills">
+          <Text as="p" size="2" color="gray">
+            Advertised or read does not prove model compliance. Historical discovery may be unavailable.
+          </Text>
+          <Data label="Evidence on preview branch" data={branch?.skillEvidence} scope={`${selected}-skillEvidence`} />
+        </Tabs.Content>
+        <Tabs.Content value="context">
+          <Text as="p" size="2" color="gray">
+            Pi projection applies compaction and context edits. Request-local hooks can still transform it; this is not
+            the final provider HTTP request.
+          </Text>
+          <Button size="1" onClick={preview} disabled={!branch}>
+            View branch context
+          </Button>
+          <Data label="Projected branch entries" data={branch?.projection} scope={`${selected}-projection`} />
+          <Data label="Selected entry contribution" data={detail?.projected} scope={`${selected}-projected`} />
+        </Tabs.Content>
+        <Tabs.Content value="codemode">
+          <Text as="p" size="2" color="gray">
+            Script source, output and historical nested metadata appear in the selected raw entry. Child results before
+            activation are not captured. Sandbox variables, discovery-helper results and model-helper responses are
+            unavailable unless the script printed them.
+          </Text>
+          <Data
+            label="JavaScript source"
+            data={
+              typeof code === "string"
+                ? { value: code, truncated: Boolean(call?.args.truncated || detail?.raw.truncated) }
+                : undefined
+            }
+          />
+          <Data label="Source / output / persisted nestedCalls" data={detail?.raw} />
+          {captured.map((call) => (
+            <Button key={call.occurrenceId} variant="ghost" onClick={() => selectCall(call.occurrenceId)}>
+              {call.name} · {call.occurrenceId} · inspect captured execution
+            </Button>
+          ))}
+        </Tabs.Content>
+      </Tabs.Root>
+    </section>
+  );
+}

package/src/web/json-tree.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import type { Json } from "../model.js";
+
+const scopes = new Map<string, Map<string, boolean>>();
+function JsonNode({
+  value,
+  name,
+  path,
+  state,
+  root = false,
+}: {
+  value: Json;
+  name: string;
+  path: string;
+  state: Map<string, boolean>;
+  root?: boolean;
+}) {
+  const [open, setOpen] = useState(() => state.get(path) ?? root);
+  const structured = value !== null && typeof value === "object";
+  if (!structured)
+    return (
+      <div className="json-leaf">
+        <span className="json-key">{name}</span>:{" "}
+        <span className={typeof value === "string" ? "json-string" : "json-number"}>{JSON.stringify(value)}</span>
+      </div>
+    );
+  const entries = Object.entries(value);
+  return (
+    <details
+      className="json-object"
+      open={open}
+      onToggle={(event) => {
+        state.set(path, event.currentTarget.open);
+        setOpen(event.currentTarget.open);
+      }}
+    >
+      <summary>
+        <span className="json-key">{name}</span>{" "}
+        <span className="json-summary">
+          {Array.isArray(value) ? `[${entries.length} items]` : `{${entries.length} fields}`}
+        </span>
+      </summary>
+      {
+        <div className="json-children">
+          {entries.map(([key, child]) => (
+            <JsonNode
+              key={key}
+              value={child}
+              name={key}
+              state={state}
+              path={`${path}/${key.replaceAll("~", "~0").replaceAll("/", "~1")}`}
+            />
+          ))}
+        </div>
+      }
+    </details>
+  );
+}
+export function JsonTree({ value, scope }: { value: Json; scope: string }) {
+  let state = scopes.get(scope);
+  if (!state) {
+    state = new Map();
+    scopes.set(scope, state);
+    if (scopes.size > 128) {
+      const first = scopes.keys().next().value;
+      if (first !== undefined) scopes.delete(first);
+    }
+  }
+  return (
+    <fieldset className="json-tree" aria-label="Structured display data">
+      <JsonNode key={scope} value={value} name="$" path="$" state={state} root />
+    </fieldset>
+  );
+}

package/src/web/overview.tsx

@@ -0,0 +1,67 @@
+import type { Snapshot } from "../model.js";
+import { Data } from "./components.js";
+import { count, duration } from "./format.js";
+import { timestamp } from "./timing.js";
+
+export function Overview({ snapshot }: { snapshot?: Snapshot }) {
+  const nodes = snapshot?.nodes ?? [];
+  const stamps = nodes.map((node) => timestamp(node.timestamp)).filter((value): value is number => value !== undefined);
+  const tokens = nodes.filter((node) => node.tokens !== undefined);
+  const partial = (snapshot?.totalEntries ?? 0) > nodes.length;
+  const metrics = [
+    ["Entries", count(snapshot?.totalEntries), "All persisted entries, across branches."],
+    [
+      "Recorded span",
+      duration(stamps.length ? Math.max(...stamps) - Math.min(...stamps) : undefined),
+      "Indexed log timestamp range, not execution duration.",
+    ],
+    [
+      "Model messages",
+      snapshot ? `${nodes.filter((node) => node.kind === "assistant").length}${partial ? "+" : ""}` : "—",
+      "Assistant messages, not provider request count.",
+    ],
+    ["Captured calls", count(snapshot?.calls.length), "Bounded live records since consent."],
+    [
+      "Tokens",
+      tokens.length ? `${count(tokens.reduce((sum, node) => sum + (node.tokens ?? 0), 0))}${partial ? "+" : ""}` : "—",
+      "Persisted assistant totalTokens; excludes auxiliary usage.",
+    ],
+    [
+      "Log errors",
+      snapshot ? `${nodes.filter((node) => node.status === "error").length}${partial ? "+" : ""}` : "—",
+      "Indexed recorded error entries; live errors are separate.",
+    ],
+  ];
+  return (
+    <section className="overview" aria-label="Session overview">
+      <div className="overview-metrics">
+        {metrics.map(([name, value, hint]) => (
+          <div className="metric" key={name} title={hint}>
+            <span>{name}</span>
+            <strong>{value}</strong>
+          </div>
+        ))}
+      </div>
+      {Boolean(snapshot?.invalidEntryCount) && (
+        <details className="invalid-entries">
+          <summary>
+            {snapshot?.invalidEntryCount} invalid or ambiguous entries omitted from navigation; bounded raw evidence
+          </summary>
+          <Data
+            label="Invalid or ambiguous entry evidence · up to 20 indexed records"
+            data={{
+              value: (snapshot?.invalidEntries ?? []).map((item) => ({
+                index: item.index,
+                reason: item.reason,
+                raw: item.raw.value,
+                truncated: item.raw.truncated,
+              })),
+              truncated: (snapshot?.invalidEntryCount ?? 0) > 20,
+            }}
+            scope="invalid-identities"
+          />
+        </details>
+      )}
+    </section>
+  );
+}