@narumitw/pi-inspect 0.0.0-stage → 0.2.0

package/src/web/panels.css

@@ -0,0 +1,267 @@
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  gap: 5px;
+}
+.tree-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.tree-controls {
+  padding: 0 9px 8px;
+}
+.tree-controls .rt-TextFieldRoot {
+  background: var(--panel-raised);
+  box-shadow: none;
+  border: 1px solid var(--panel-border);
+  font-size: 11px;
+}
+.filter-pills {
+  display: flex;
+  gap: 4px;
+  margin-top: 7px;
+}
+.filter-pills button {
+  flex: 1;
+  padding: 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--secondary);
+  font-size: 11px;
+}
+.filter-pills button[aria-pressed="true"] {
+  background: var(--selected-bg);
+  color: var(--blue-11);
+}
+.tree-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 2px 5px;
+}
+.tree-row {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 2px;
+}
+.tree-row .rt-IconButton {
+  width: 18px;
+  height: 22px;
+  flex-shrink: 0;
+  color: var(--muted);
+}
+.tree-spacer {
+  width: 18px;
+  flex-shrink: 0;
+}
+.node {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  padding: 5px 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--gray-12);
+  text-align: left;
+}
+.node:hover {
+  background: var(--surface-hover);
+}
+.node[aria-current="true"] {
+  background: var(--selected-bg);
+  box-shadow: inset 2px 0 var(--blue-9);
+}
+.node-copy {
+  min-width: 0;
+  flex: 1;
+  display: block;
+}
+.node-title {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  white-space: nowrap;
+}
+.node-title strong {
+  font-size: 11px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.node-title small {
+  font:
+    10px / 1.4 Consolas,
+    monospace;
+  color: var(--muted);
+  flex-shrink: 0;
+}
+.node-description {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--secondary);
+  font-size: 10px;
+  line-height: 15px;
+}
+.tree-count,
+.nav-pagination {
+  border-top: 1px solid var(--panel-border);
+  padding: 6px;
+  color: var(--muted);
+  text-align: center;
+  font-size: 10px;
+}
+.nav-pagination {
+  display: flex;
+  justify-content: space-between;
+  gap: 4px;
+}
+.nav-pagination button {
+  background: none;
+  border: 0;
+  color: var(--secondary);
+  font-size: 10px;
+}
+.filter-panel {
+  flex-shrink: 0;
+  padding: 0 9px;
+}
+.filters-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 6px;
+  background: none;
+  border: 0;
+  color: var(--secondary);
+  padding: 8px 0;
+  font-size: 12px;
+}
+.filters-toggle svg {
+  width: 14px;
+}
+.filter-check {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 8px 0;
+  font-size: 11px;
+  color: var(--secondary);
+  cursor: pointer;
+}
+.filter-panel .rt-Flex {
+  padding-bottom: 9px;
+}
+.filter-panel .rt-SelectTrigger {
+  max-width: 135px;
+  font-size: 11px;
+}
+.inspector-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.inspector-identity {
+  padding: 2px 10px 8px;
+}
+.inspector-identity .rt-Heading {
+  font-size: 14px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+.inspector-identity .rt-Text {
+  font-size: 11px;
+  line-height: 16px;
+}
+.inspector-tabs {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 8px 8px;
+}
+.inspector-tabs > .rt-TabsList {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--panel-bg);
+  margin-bottom: 6px;
+  flex-shrink: 0;
+}
+.inspector-tabs .rt-TabsTrigger {
+  padding: 0 7px;
+  height: 31px;
+  font-size: 11px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  text-transform: capitalize;
+}
+.inspector-tabs .rt-TabsTriggerInner,
+.inspector-tabs .rt-TabsTriggerInnerHidden {
+  padding: 0;
+}
+.inspector-tabs .rt-TabsContent {
+  padding-top: 0;
+}
+.format-toolbar {
+  display: flex;
+  justify-content: end;
+  padding: 3px 0 6px;
+}
+.inspector-metadata {
+  padding: 0 3px 5px;
+}
+.inspector-metadata .metadata > div {
+  border-bottom: 1px solid var(--panel-border);
+}
+.related {
+  border-top: 1px solid var(--panel-border);
+  padding: 5px 0;
+  margin-top: 8px;
+}
+.related > .rt-Button {
+  width: 100%;
+  justify-content: space-between;
+}
+.related button:not(.rt-Button) {
+  display: block;
+  padding: 7px 4px;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+  color: var(--secondary);
+  font-size: 11px;
+}
+.inventory-card {
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--panel-border);
+  border-radius: 0;
+  box-shadow: none;
+  margin: 6px 0;
+  padding: 9px 2px;
+}
+.inventory-card .rt-Flex {
+  margin: 5px 0;
+}
+.inventory-card .rt-Text {
+  overflow-wrap: anywhere;
+  font-size: 11px;
+}

package/src/web/panes.tsx

@@ -0,0 +1,123 @@
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { Dialog, IconButton } from "@radix-ui/themes";
+import { type ReactNode, type RefObject, useEffect, useState } from "react";
+
+export function useNarrow(): boolean {
+  const [width, setWidth] = useState(() => window.innerWidth);
+  useEffect(() => {
+    const changed = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", changed);
+    return () => window.removeEventListener("resize", changed);
+  }, []);
+  return width <= 1100;
+}
+export function PaneDrawer({
+  name,
+  open,
+  change,
+  children,
+  side,
+  trigger,
+}: {
+  name: string;
+  open: boolean;
+  change(open: boolean): void;
+  children: ReactNode;
+  side: string;
+  trigger: RefObject<HTMLButtonElement | null>;
+}) {
+  return (
+    <Dialog.Root open={open} onOpenChange={change}>
+      <Dialog.Content
+        className={`side-drawer side-drawer-${side}`}
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          if (trigger.current?.isConnected) trigger.current.focus({ preventScroll: true });
+        }}
+      >
+        <div className="drawer-title">
+          <Dialog.Title>{name}</Dialog.Title>
+          <Dialog.Close>
+            <IconButton aria-label={`Close ${name}`} variant="ghost">
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </div>
+        <Dialog.Description className="sr-only">Read-only browser panel. Escape closes this drawer.</Dialog.Description>
+        {children}
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}
+export function ResizeHandle({
+  name,
+  value,
+  change,
+  min,
+  max,
+  inverse = false,
+}: {
+  name: string;
+  value: number;
+  change(value: number): void;
+  min: number;
+  max: number;
+  inverse?: boolean;
+}) {
+  const [dragging, setDragging] = useState(false);
+  const [start, setStart] = useState({ x: 0, value: 0 });
+  useEffect(() => {
+    if (!dragging) return;
+    const controller = new AbortController();
+    const move = (event: PointerEvent) =>
+      change(Math.max(min, Math.min(max, start.value + (event.clientX - start.x) * (inverse ? -1 : 1))));
+    const end = () => setDragging(false);
+    window.addEventListener("pointermove", move, { signal: controller.signal });
+    window.addEventListener("pointerup", end, { signal: controller.signal });
+    window.addEventListener("pointercancel", end, { signal: controller.signal });
+    window.addEventListener("blur", end, { signal: controller.signal });
+    window.addEventListener(
+      "keydown",
+      (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          end();
+        }
+      },
+      { signal: controller.signal },
+    );
+    return () => controller.abort();
+  }, [dragging, start, change, min, max, inverse]);
+  return (
+    <hr
+      aria-label={name}
+      aria-orientation="vertical"
+      aria-valuenow={Math.round(value)}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      tabIndex={0}
+      className="pane-resizer"
+      onPointerDown={(event) => {
+        if (event.button !== 0) return;
+        event.preventDefault();
+        setStart({ x: event.clientX, value });
+        setDragging(true);
+      }}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") {
+          setDragging(false);
+          return;
+        }
+        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+        event.preventDefault();
+        change(
+          event.key === "Home"
+            ? min
+            : event.key === "End"
+              ? max
+              : Math.max(min, Math.min(max, value + (event.key === "ArrowRight" ? 10 : -10) * (inverse ? -1 : 1))),
+        );
+      }}
+    />
+  );
+}

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/search.ts

@@ -0,0 +1,16 @@
+// Display-only browser ingestion. Strip complete terminal sequences before bounding the query.
+export function boundedSearch(value: string): string {
+  return (
+    value
+      // biome-ignore lint/suspicious/noControlCharactersInRegex: Intentional terminal-control sanitation.
+      .replace(/(?:\x1b[\]^_P]|[\x90\x9d\x9e\x9f])[\s\S]*?(?:\x07|\x1b\\|\x9c|$)/g, "")
+      // biome-ignore lint/suspicious/noControlCharactersInRegex: Intentional CSI and escape sanitation.
+      .replace(/(?:\x1b\[|\x9b)[0-?]*[ -/]*[@-~]|\x1b[ -/]*[@-~]/g, "")
+      // biome-ignore lint/suspicious/noControlCharactersInRegex: Search contains no terminal controls.
+      .replace(/[\x00-\x1f\x7f-\x9f]/g, "")
+      .slice(0, 512)
+  );
+}
+export function searchNeedle(value: string): string {
+  return boundedSearch(value).toLowerCase();
+}

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