@narumitw/pi-inspect 0.0.0-stage → 0.1.0

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,289 @@
+import {
+  ChatBubbleIcon,
+  CheckIcon,
+  ChevronRightIcon,
+  ClipboardCopyIcon,
+  CubeIcon,
+  ExclamationTriangleIcon,
+  FileTextIcon,
+  GearIcon,
+  LightningBoltIcon,
+  PersonIcon,
+  StackIcon,
+} from "@radix-ui/react-icons";
+import { Badge, Button, Flex, Text } 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 { 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>
+      <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}
+                  </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>
+  );
+}
+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>
+  );
+}