@narumitw/pi-inspect 0.1.0 → 0.2.1

package/src/web/inspector.tsx

@@ -1,11 +1,13 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { ChevronRightIcon, CubeIcon } from "@radix-ui/react-icons";
-import { Badge, Button, Card, Flex, Heading, Tabs, Text } from "@radix-ui/themes";
+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 { CallView, Copy, Data, Metadata, Status } from "./components.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";
+import { ToolInspector } from "./tool-inspector.js";
 
 export function Inspector({
   selected,
@@ -22,6 +24,7 @@ export function Inspector({
   changeTab,
   select,
   selectCall,
+  preview,
 }: {
   selected: string;
   node?: EntrySummary;
@@ -37,6 +40,7 @@ export function Inspector({
   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);
@@ -62,24 +66,22 @@ export function Inspector({
   );
   const enabled = useMemo(
     () => [
+      "content",
       "raw",
-      "prompt",
-      "tools",
-      ...(isCall ? [] : ["context"]),
-      ...(hasSkills ? ["skills"] : []),
+      ...(isCall ? [] : ["prompt", "tools", "context", ...(hasSkills ? ["skills"] : [])]),
       ...(codemode ? ["codemode"] : []),
     ],
     [isCall, hasSkills, codemode],
   );
   useEffect(() => {
-    if (!enabled.includes(tab)) changeTab("raw");
+    if (!enabled.includes(tab)) changeTab("content");
   }, [enabled, tab, changeTab]);
   return (
     <section className="panel inspector-panel">
       <div className="panel-heading">
         <Heading size="3">
           <CubeIcon />
-          Event inspector
+          Details
         </Heading>
         {activeRaw && <Copy key={selected} value={output(activeRaw.value)} />}
       </div>
@@ -90,7 +92,8 @@ export function Inspector({
           </Text>
         )}
         <Heading size="4">
-          {call ? "Captured execution" : node ? eventName(node.kind) : "Entry"} · {selected || "no selection"}
+          {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"}
@@ -119,12 +122,96 @@ export function Inspector({
       )}
       <Tabs.Root value={tab} onValueChange={changeTab} className="inspector-tabs">
         <Tabs.List wrap="nowrap" aria-label="Event detail views">
-          {["raw", "prompt", "tools", "context", "skills", "codemode"].map((tab) => (
+          {["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">
@@ -248,60 +335,14 @@ export function Inspector({
           />
           <Data label="Historical sections" data={branch?.sections} scope={`${selected}-sections`} />
           <Data label="Prompt updates on branch" data={branch?.promptUpdates} scope={`${selected}-promptUpdates`} />
-          <Data label="Current runtime effective prompt · may not yet be sent" data={snapshot?.currentPrompt} />
         </Tabs.Content>
         <Tabs.Content value="tools">
-          <Data
-            label="Historical declared tools · preview branch"
-            data={branch?.declaredTools}
-            scope={`${selected}-declaredTools`}
-          />
-          <Text as="p" size="2" color="gray">
-            Current active ≠ provider-visible. MCP connection status is unavailable.
-          </Text>
-          {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>
-              <Collapsible.Root>
-                <Collapsible.Trigger asChild>
-                  <Button size="1" variant="ghost">
-                    Schema · {tool.name}
-                  </Button>
-                </Collapsible.Trigger>
-                <Collapsible.Content>
-                  <Data label="Schema" data={tool.schema} />
-                </Collapsible.Content>
-              </Collapsible.Root>
-            </Card>
-          ))}
+          <ToolInspector key={selected} 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>
-          {snapshot?.skills.map((skill) => (
-            <Card key={skill.path} className="inventory-card">
-              <Flex gap="2">
-                <Text weight="bold">{skill.name}</Text>
-                <Badge>advertised</Badge>
-              </Flex>
-              <Text as="p" size="2">
-                {skill.description}
-              </Text>
-              <Text size="1" color="gray">
-                {skill.path}
-              </Text>
-            </Card>
-          ))}
           <Data label="Evidence on preview branch" data={branch?.skillEvidence} scope={`${selected}-skillEvidence`} />
         </Tabs.Content>
         <Tabs.Content value="context">
@@ -309,6 +350,9 @@ export function Inspector({
             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>
@@ -328,7 +372,9 @@ export function Inspector({
           />
           <Data label="Source / output / persisted nestedCalls" data={detail?.raw} />
           {captured.map((call) => (
-            <CallView key={call.occurrenceId} call={call} all={captured} group="detail" />
+            <Button key={call.occurrenceId} variant="ghost" onClick={() => selectCall(call.occurrenceId)}>
+              {call.name} · {call.occurrenceId} · inspect captured execution
+            </Button>
           ))}
         </Tabs.Content>
       </Tabs.Root>

package/src/web/recorded-content.tsx

@@ -0,0 +1,49 @@
+import type { Capture } from "../model.js";
+import { Data } from "./components.js";
+import { record } from "./format.js";
+
+export function RecordedContent({ data, scope }: { data?: Capture; scope: string }) {
+  const raw = record(data?.value);
+  const message = record(raw?.message);
+  const content =
+    message && Object.hasOwn(message, "content")
+      ? message.content
+      : raw && Object.hasOwn(raw, "data")
+        ? raw.data
+        : (raw?.content ?? raw?.summary ?? raw);
+  const blocks = Array.isArray(content) ? content : [content];
+  return (
+    <div className="recorded-content">
+      {blocks.slice(0, 128).map((block, index) => {
+        const item = record(block);
+        const name = typeof item?.name === "string" ? item.name : "unknown";
+        const label =
+          item?.type === "thinking"
+            ? "Thinking"
+            : item?.type === "toolCall"
+              ? `Tool call · ${name}`
+              : "Recorded content";
+        return (
+          <Data
+            // biome-ignore lint/suspicious/noArrayIndexKey: Historical content blocks are immutable and scoped by entry identity.
+            key={`${scope}-${index}`}
+            label={label}
+            data={
+              data && {
+                value: item?.text ?? item?.thinking ?? item?.arguments ?? block ?? null,
+                truncated: data.truncated || blocks.length > 128,
+              }
+            }
+            scope={`${scope}-content-${index}`}
+          />
+        );
+      })}
+      <Data
+        label="Metadata and Raw JSON · redacted display copy"
+        data={data}
+        scope={`${scope}-raw`}
+        defaultOpen={false}
+      />
+    </div>
+  );
+}

package/src/web/session-filters.tsx

@@ -0,0 +1,100 @@
+import { Checkbox, Heading, Select, TextField } from "@radix-ui/themes";
+import { useId } from "react";
+import type { Filters } from "./format.js";
+
+/** Filters only: ancestry lives in the primary Branch view, never a duplicate sidebar. */
+export function SessionFilters({ filters, change }: { filters: Filters; change(filters: Filters): void }) {
+  const id = useId();
+  return (
+    <aside className="sidebar panel session-filters">
+      <div className="panel-heading">
+        <Heading size="3">Session filters</Heading>
+      </div>
+      <TextField.Root
+        aria-label="Search session"
+        placeholder="Search entries or content…"
+        value={filters.query}
+        onChange={(event) => change({ ...filters, query: event.target.value })}
+      />
+      <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>
+      <details className="filter-panel">
+        <summary>Filters</summary>
+        <label className="filter-check" htmlFor={`${id}-errors`}>
+          <span>Errors only</span>
+          <Checkbox
+            id={`${id}-errors`}
+            checked={filters.errorsOnly}
+            onCheckedChange={(checked) => change({ ...filters, errorsOnly: checked === true })}
+          />
+        </label>
+        <label className="filter-check" htmlFor={`${id}-slow`}>
+          <span>Slow tool calls (&gt; 10s)</span>
+          <Checkbox
+            id={`${id}-slow`}
+            checked={filters.slowOnly}
+            onCheckedChange={(checked) => change({ ...filters, slowOnly: checked === true })}
+          />
+        </label>
+        {["Tool", "Model", "Custom"].map((group) => (
+          <label className="filter-check" key={group} htmlFor={`${id}-${group}`}>
+            <span>{group} events</span>
+            <Checkbox
+              id={`${id}-${group}`}
+              checked={filters.groups.includes(group)}
+              onCheckedChange={() =>
+                change({
+                  ...filters,
+                  groups: filters.groups.includes(group)
+                    ? filters.groups.filter((item) => item !== group)
+                    : [...filters.groups, group],
+                })
+              }
+            />
+          </label>
+        ))}
+        <label className="filter-check" htmlFor={`${id}-kind`}>
+          <span>Entry type</span>
+          <Select.Root value={filters.kind} onValueChange={(kind) => change({ ...filters, kind })}>
+            <Select.Trigger id={`${id}-kind`} aria-label="Filter entry type" />
+            <Select.Content>
+              {[
+                "all",
+                "user",
+                "assistant",
+                "toolResult",
+                "system",
+                "custom",
+                "custom_message",
+                "compaction",
+                "branch_summary",
+                "model_change",
+                "thinking_level_change",
+                "context_edit",
+                "usage",
+                "label",
+                "session_info",
+              ].map((kind) => (
+                <Select.Item key={kind} value={kind}>
+                  {kind}
+                </Select.Item>
+              ))}
+            </Select.Content>
+          </Select.Root>
+        </label>
+      </details>
+    </aside>
+  );
+}

package/src/web/session.css

@@ -0,0 +1,114 @@
+.observed-context,
+.preview-context,
+.session-primary {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+.observed-context[hidden],
+.session-primary[hidden],
+.header-actions [hidden] {
+  display: none;
+}
+.context-inventory {
+  flex-shrink: 0;
+  border-top: 1px solid var(--panel-border);
+  padding: 6px 10px;
+  color: var(--secondary);
+}
+.context-inventory summary,
+.session-filters summary {
+  cursor: pointer;
+}
+.inventory-scroll {
+  overflow: auto;
+  max-height: 38dvh;
+}
+.preview-heading,
+.session-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 6px 0;
+  color: var(--secondary);
+  font-size: 12px;
+}
+.preview-heading strong {
+  overflow-wrap: anywhere;
+}
+.preview-heading button,
+.session-toolbar > button {
+  background: var(--panel-raised);
+  color: var(--gray-12);
+  border: 1px solid var(--panel-border);
+  border-radius: 4px;
+  padding: 5px;
+}
+.session-toolbar fieldset {
+  margin: 0;
+  border: 0;
+  flex-wrap: wrap;
+}
+.session-toolbar label {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+.session-filters {
+  padding: 8px;
+  overflow: auto;
+}
+.trace-history .trace-item {
+  border-left: 0;
+}
+.trace-history .trace-item::before {
+  display: none;
+}
+.turn-heading {
+  padding: 10px 8px 5px;
+  color: var(--muted);
+  font-weight: 600;
+}
+.execution-primary .live-drawer {
+  flex: 1;
+  max-height: none;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.execution-primary .live-drawer-body {
+  flex: 1;
+  min-height: 0;
+  max-height: none;
+}
+.execution-primary .live-drawer-toggle {
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+.call-summary {
+  flex: 2;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--muted);
+}
+.live-controls {
+  flex-wrap: wrap;
+}
+.recorded-content .code-preview {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+@media (max-width: 680px) {
+  .brand .rt-Heading {
+    display: none;
+  }
+  .session-toolbar {
+    font-size: 11px;
+    gap: 4px;
+  }
+}

package/src/web/style.css

@@ -1,6 +1,7 @@
 @import "./components.css";
 @import "./panels.css";
 @import "./trace.css";
+@import "./tool-inspector.css";
 
 :root,
 .radix-themes {
@@ -158,10 +159,10 @@ button:disabled {
   touch-action: none;
   grid-row: 1;
 }
-.pane-resizer[aria-label="Resize navigator"] {
+.pane-resizer[aria-label="Resize filters"] {
   grid-column: 2;
 }
-.pane-resizer[aria-label="Resize inspector"] {
+.pane-resizer[aria-label="Resize details"] {
   grid-column: 4;
 }
 .pane-resizer:hover,