@narumitw/pi-inspect 0.0.0-stage → 0.2.0

package/src/web/captured-executions.tsx

@@ -0,0 +1,177 @@
+import { ChevronDownIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { Button, Heading, Text } from "@radix-ui/themes";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { Call, EntrySummary } from "../model.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 CapturedExecutions({
+  calls,
+  entries,
+  selected,
+  select,
+  open,
+  view,
+  changeView,
+  dropped,
+  invalidEvents,
+  filters,
+  revealSelected,
+}: {
+  calls: Call[];
+  entries: EntrySummary[];
+  selected?: string;
+  select(id: string): void;
+  open: boolean;
+  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(
+    () =>
+      hierarchy(
+        calls.map((call) => ({
+          ...call,
+          id: call.occurrenceId,
+          rawId: call.id,
+          rawParentId: call.parentId,
+          parentId: call.parentOccurrenceId ?? null,
+        })),
+      ),
+    [calls],
+  );
+  const keep = useMemo(
+    () =>
+      withAncestors(
+        tree,
+        new Set([
+          ...calls.filter((call) => matchesCall(call, preparedFilters)).map((call) => call.occurrenceId),
+          ...(revealSelected && selected ? [selected] : []),
+        ]),
+      ),
+    [tree, calls, preparedFilters, revealSelected, selected],
+  );
+  const [expanded, setExpanded] = useState(new Set<string>());
+  const previous = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    const chain: string[] = [];
+    let current = selected;
+    const visited = new Set<string>();
+    while (current && tree.nodes.has(current) && !visited.has(current)) {
+      visited.add(current);
+      chain.push(current);
+      current = tree.nodes.get(current)?.parentId ?? undefined;
+    }
+    const identity = chain.join("/");
+    if (selected && identity !== previous.current && tree.nodes.has(selected)) {
+      previous.current = identity;
+      setExpanded((old) => reveal(tree, old, selected));
+    }
+  }, [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" : ""}`}>
+      <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>
+      </div>
+      {open && (
+        <div className="live-drawer-body">
+          {invalidEvents > 0 && (
+            <Text size="1" color="gray">
+              {invalidEvents} invalid live events omitted; correlation unavailable
+            </Text>
+          )}
+          <div className="live-controls">
+            <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>
+            <Button size="1" variant="ghost" onClick={() => setExpanded(new Set())}>
+              Collapse calls
+            </Button>
+          </div>
+          {!rows.length && <div className="empty-state">No captured executions match these filters.</div>}
+          {rows.map(({ node: call, depth }) => (
+            <div
+              key={call.id}
+              id={`live-call-${call.occurrenceId}`}
+              className="live-trace-item"
+              data-parent-id={call.parentId ?? ""}
+              data-raw-id={call.rawId}
+              style={{ marginLeft: depth * indent }}
+            >
+              <div className={`live-call-row ${selected === call.id ? "selected" : ""}`}>
+                <button
+                  type="button"
+                  className="expand-button"
+                  aria-label={`Expand call ${call.id}`}
+                  aria-expanded={expanded.has(call.id)}
+                  onClick={() =>
+                    setExpanded((old) => {
+                      const next = new Set(old);
+                      if (next.has(call.id)) next.delete(call.id);
+                      else next.add(call.id);
+                      return next;
+                    })
+                  }
+                >
+                  {expanded.has(call.id) ? <ChevronDownIcon /> : <ChevronRightIcon />}
+                </button>
+                <button
+                  type="button"
+                  className="call-trigger"
+                  aria-label={`${call.name} · ${call.status}`}
+                  onClick={() => select(call.id)}
+                >
+                  <strong title={call.name}>{call.name}</strong>
+                  <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>
+                {view === "timeline" && (
+                  <TimelineMark
+                    range={range}
+                    call={{
+                      ...call,
+                      id: call.rawId,
+                      parentId: call.parentOccurrenceId
+                        ? (calls.find((parent) => parent.occurrenceId === call.parentOccurrenceId)?.id ??
+                          call.rawParentId)
+                        : call.rawParentId,
+                    }}
+                  />
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/web/components.css

@@ -0,0 +1,261 @@
+.event-glyph {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  display: inline-grid;
+  place-items: center;
+  color: var(--secondary);
+}
+.event-glyph svg {
+  width: 15px;
+  height: 15px;
+}
+.glyph-model {
+  color: #b2a4dd;
+}
+.glyph-tool {
+  color: #72b4c2;
+}
+.glyph-custom {
+  color: #af9ecb;
+}
+.glyph-thinking {
+  color: #78bdab;
+}
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  line-height: 15px;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.status svg {
+  width: 11px;
+  height: 11px;
+}
+.status-success,
+.status-ok {
+  color: #32c48d;
+}
+.status-error,
+.status-cancelled {
+  color: #ed7373;
+}
+.status-running {
+  color: #e5b45c;
+}
+.status-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  display: inline-block;
+  background: currentColor;
+}
+.view-switch {
+  display: inline-flex;
+  gap: 1px;
+  padding: 2px;
+  border-radius: 4px;
+  background: var(--code-bg);
+}
+.view-switch button {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  border: 0;
+  border-radius: 3px;
+  color: var(--secondary);
+  background: transparent;
+  font-size: 11px;
+}
+.view-switch button[aria-pressed="true"] {
+  background: var(--selected-bg);
+  color: var(--blue-11);
+}
+.metadata {
+  margin: 0;
+  font-size: 11px;
+  line-height: 17px;
+}
+.metadata > div {
+  display: grid;
+  grid-template-columns: minmax(85px, 36%) minmax(0, 1fr);
+  gap: 10px;
+  padding: 4px 0;
+}
+.metadata dt {
+  color: var(--secondary);
+}
+.metadata dd {
+  margin: 0;
+  min-width: 0;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+.call {
+  padding: 8px 10px;
+  background: var(--code-bg);
+  border-left: 1px solid var(--panel-border);
+}
+.call .rt-Text {
+  font-size: 12px;
+}
+.parent-link {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--blue-11);
+  font-size: 11px;
+  margin: 7px 0;
+}
+.data {
+  border-top: 1px solid var(--panel-border);
+  margin-top: 7px;
+  min-width: 0;
+}
+.data-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 0;
+  min-width: 0;
+}
+.section-toggle {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  gap: 5px;
+  background: none;
+  border: 0;
+  color: var(--secondary);
+  text-align: left;
+  font-size: 11px;
+  line-height: 16px;
+  padding: 2px 0;
+}
+.section-toggle svg {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+.chevron-open {
+  transform: rotate(90deg);
+}
+.copy-button {
+  color: var(--muted);
+  font-size: 10px;
+}
+.data-mode {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 10px;
+  margin-bottom: 4px;
+  color: var(--muted);
+}
+.data-mode button {
+  border: 0;
+  background: none;
+  color: var(--secondary);
+  padding: 3px 5px;
+  font-size: 10px;
+}
+.data-mode button[aria-pressed="true"] {
+  color: var(--blue-11);
+  background: var(--selected-bg);
+  border-radius: 3px;
+}
+.data-mode > span {
+  margin-left: auto;
+}
+.code-preview {
+  font:
+    11px / 1.6 "Cascadia Code",
+    Consolas,
+    monospace;
+  white-space: pre;
+  overflow-x: auto;
+  margin: 0;
+  padding: 4px 0 8px;
+}
+.code-line {
+  display: flex;
+  min-width: max-content;
+}
+.line-number {
+  width: 32px;
+  text-align: right;
+  padding-right: 10px;
+  flex-shrink: 0;
+  color: var(--muted);
+  user-select: none;
+}
+.code-line code {
+  font: inherit;
+}
+.json-key {
+  color: #82b5e8;
+}
+.json-string {
+  color: #d8b28c;
+}
+.json-number {
+  color: #b7a4d9;
+}
+.light .json-key {
+  color: #245585;
+}
+.light .json-string {
+  color: #885523;
+}
+.light .json-number {
+  color: #6b409c;
+}
+.json-tree {
+  font:
+    11px / 1.7 Consolas,
+    monospace;
+  border: 0;
+  margin: 0;
+  padding: 2px 0 6px;
+  min-width: 0;
+  overflow-x: auto;
+}
+.json-object {
+  min-width: max-content;
+}
+.json-object summary {
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--secondary);
+}
+.json-summary {
+  color: var(--muted);
+  font-size: 10px;
+}
+.json-children {
+  padding-left: 16px;
+  border-left: 1px solid var(--panel-border);
+  margin-left: 5px;
+}
+.json-leaf {
+  white-space: pre;
+  min-width: max-content;
+}
+.preview-limit {
+  display: block;
+  padding: 6px;
+  color: var(--amber-11);
+  white-space: normal;
+}
+.preview-image {
+  max-width: 100%;
+  max-height: 220px;
+  object-fit: contain;
+  margin-top: 6px;
+}

package/src/web/components.tsx

@@ -0,0 +1,241 @@
+import {
+  ChatBubbleIcon,
+  CheckIcon,
+  ChevronRightIcon,
+  ClipboardCopyIcon,
+  CubeIcon,
+  ExclamationTriangleIcon,
+  FileTextIcon,
+  GearIcon,
+  LightningBoltIcon,
+  PersonIcon,
+  StackIcon,
+} from "@radix-ui/react-icons";
+import { Badge, Button, Flex } from "@radix-ui/themes";
+import { useEffect, useRef, useState } from "react";
+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 }) {
+  const Icon =
+    kind === "toolResult"
+      ? StackIcon
+      : kind === "toolCall"
+        ? GearIcon
+        : kind === "assistant"
+          ? ChatBubbleIcon
+          : kind === "user"
+            ? PersonIcon
+            : kind === "thinking_level_change"
+              ? GearIcon
+              : group(kind) === "Model"
+                ? CubeIcon
+                : group(kind) === "Tool"
+                  ? LightningBoltIcon
+                  : kind === "system"
+                    ? FileTextIcon
+                    : CubeIcon;
+  return (
+    <span
+      className={`event-glyph glyph-${group(kind).toLowerCase()} ${kind === "thinking_level_change" ? "glyph-thinking" : ""}`}
+    >
+      <Icon />
+    </span>
+  );
+}
+export function Status({ value = "recorded" }: { value?: string }) {
+  const label =
+    value === "ok" || value === "success"
+      ? "Success"
+      : value === "error"
+        ? "Error"
+        : value === "running"
+          ? "Running"
+          : value === "cancelled"
+            ? "Cancelled"
+            : value === "unfinished"
+              ? "Unfinished"
+              : "Recorded";
+  return (
+    <span className={`status status-${value}`}>
+      {label === "Success" ? (
+        <CheckIcon />
+      ) : label === "Error" ? (
+        <ExclamationTriangleIcon />
+      ) : (
+        <span className="status-dot" />
+      )}
+      {label}
+    </span>
+  );
+}
+function images(value: Json, found: { data: string; mimeType: string }[] = []): typeof found {
+  if (!value || typeof value !== "object" || found.length >= 4) return found;
+  if (
+    !Array.isArray(value) &&
+    value.type === "image" &&
+    typeof value.data === "string" &&
+    typeof value.mimeType === "string" &&
+    /^(image\/(png|jpeg|gif|webp))$/.test(value.mimeType) &&
+    value.data.length <= 16384 &&
+    /^[A-Za-z0-9+/]*={0,2}$/.test(value.data)
+  ) {
+    if (!found.some((image) => image.data === value.data && image.mimeType === value.mimeType))
+      found.push({ data: value.data, mimeType: value.mimeType });
+  } else for (const child of Object.values(value)) images(child, found);
+  return found;
+}
+export function Copy({ value }: { value: string }) {
+  const mounted = useRef(false);
+  const [feedback, setFeedback] = useState("");
+  const [pending, setPending] = useState(false);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  async function copy() {
+    setPending(true);
+    try {
+      await navigator.clipboard.writeText(value);
+      if (mounted.current) setFeedback("Copied");
+    } catch {
+      if (mounted.current) setFeedback("Copy failed");
+    } finally {
+      if (mounted.current) setPending(false);
+    }
+  }
+  return (
+    <Button
+      size="1"
+      variant="ghost"
+      className="copy-button"
+      disabled={pending}
+      onClick={() => void copy()}
+      aria-label="Copy display data"
+    >
+      <ClipboardCopyIcon />
+      {feedback || "Copy"}
+    </Button>
+  );
+}
+function colored(line: string, budget: { remaining: number }) {
+  if (line.length > 2000 || budget.remaining <= 0) return line;
+  const fragments = [];
+  let cursor = 0;
+  for (const match of line.matchAll(/("(?:[^"\\]|\\.)*"|\b(?:true|false|null|\d+(?:\.\d+)?)\b)/g)) {
+    if (--budget.remaining < 0) return line;
+    if (match.index > cursor) fragments.push(line.slice(cursor, match.index));
+    const part = match[0];
+    fragments.push(
+      <span
+        key={match.index}
+        className={
+          part.startsWith('"')
+            ? /^\s*:/.test(line.slice(match.index + part.length))
+              ? "json-key"
+              : "json-string"
+            : "json-number"
+        }
+      >
+        {part}
+      </span>,
+    );
+    cursor = match.index + part.length;
+  }
+  fragments.push(line.slice(cursor));
+  return fragments;
+}
+export function Data({
+  data,
+  label,
+  defaultOpen = true,
+  scope = label,
+}: {
+  data?: Capture;
+  label: string;
+  defaultOpen?: boolean;
+  scope?: string;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const [format, setFormat] = useState("tree");
+  const value = data ? output(data.value) : "unavailable";
+  const lines = value.split("\n");
+  const budget = { remaining: 512 };
+  let sourceOffset = 0;
+  const structured = data?.value !== null && typeof data?.value === "object";
+  return (
+    <section className="data">
+      <div className="data-toolbar">
+        <button type="button" className="section-toggle" aria-expanded={open} onClick={() => setOpen(!open)}>
+          <ChevronRightIcon className={open ? "chevron-open" : ""} />
+          <span>{label}</span>
+        </button>
+        <Flex align="center" gap="2">
+          {data?.truncated && <Badge color="amber">truncated</Badge>}
+          {data && <Copy key={value} value={value} />}
+        </Flex>
+      </div>
+      {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>
+                );
+              })}
+              {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>
+      )}
+    </section>
+  );
+}
+export function Metadata({ rows }: { rows: [string, string | undefined][] }) {
+  return (
+    <dl className="metadata">
+      {rows.map(([key, value]) => (
+        <div key={key}>
+          <dt>{key}</dt>
+          <dd title={value}>{value || "unavailable"}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}