@assistant-ui/react-devtools 1.2.6 → 1.2.7

package/src/utils/diff.ts

@@ -0,0 +1,41 @@
+export interface DiffEntry {
+  path: string;
+  kind: "added" | "removed" | "changed";
+  before?: unknown;
+  after?: unknown;
+}
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === "object" && !Array.isArray(value);
+
+/**
+ * Structural diff of two JSON-safe values by dotted path. Objects recurse
+ * key-by-key; arrays and primitives are compared as whole leaves. Used for the
+ * opt-in event payload diff, where most payloads are shallow.
+ */
+export const diffValues = (
+  before: unknown,
+  after: unknown,
+  base = "",
+): DiffEntry[] => {
+  if (isPlainObject(before) && isPlainObject(after)) {
+    const entries: DiffEntry[] = [];
+    const keys = new Set([...Object.keys(before), ...Object.keys(after)]);
+    for (const key of keys) {
+      const path = base ? `${base}.${key}` : key;
+      const hasBefore = key in before;
+      const hasAfter = key in after;
+      if (hasBefore && !hasAfter) {
+        entries.push({ path, kind: "removed", before: before[key] });
+      } else if (!hasBefore && hasAfter) {
+        entries.push({ path, kind: "added", after: after[key] });
+      } else {
+        entries.push(...diffValues(before[key], after[key], path));
+      }
+    }
+    return entries;
+  }
+
+  if (JSON.stringify(before) === JSON.stringify(after)) return [];
+  return [{ path: base || "(value)", kind: "changed", before, after }];
+};

package/src/utils/serialization.test.ts

@@ -2,9 +2,40 @@ import { describe, expect, it } from "vitest";
 import {
   REDACTED,
   redactSensitive,
+  sanitizeForMessage,
   serializeModelContext,
 } from "./serialization";
 
+describe("sanitizeForMessage", () => {
+  it("preserves shared (non-cyclic) sibling references instead of marking them circular", () => {
+    const shared = { value: 1 };
+
+    expect(sanitizeForMessage({ a: shared, b: shared })).toEqual({
+      a: { value: 1 },
+      b: { value: 1 },
+    });
+
+    const sharedArray = [1, 2];
+    expect(sanitizeForMessage({ a: sharedArray, b: sharedArray })).toEqual({
+      a: [1, 2],
+      b: [1, 2],
+    });
+  });
+
+  it("still detects genuine circular references", () => {
+    const cyclic: Record<string, unknown> = { name: "root" };
+    cyclic.self = cyclic;
+    expect(sanitizeForMessage(cyclic)).toEqual({
+      name: "root",
+      self: "[Circular]",
+    });
+
+    const cyclicArray: unknown[] = [];
+    cyclicArray.push(cyclicArray);
+    expect(sanitizeForMessage(cyclicArray)).toEqual(["[Circular]"]);
+  });
+});
+
 describe("redactSensitive", () => {
   it("masks credential-named keys but leaves lookalikes alone", () => {
     const out = redactSensitive({

package/src/utils/serialization.ts

@@ -34,9 +34,11 @@ export const sanitizeForMessage = (
   if (Array.isArray(value)) {
     if (seen.has(value as unknown as object)) return "[Circular]";
     seen.add(value as unknown as object);
-    return value
+    const result = value
       .map((entry) => sanitizeForMessage(entry, seen))
       .filter((item) => item !== undefined);
+    seen.delete(value as unknown as object);
+    return result;
   }
   if (typeof value === "object") {
     if (seen.has(value as object)) return "[Circular]";
@@ -47,6 +49,7 @@ export const sanitizeForMessage = (
     )) {
       result[key] = sanitizeForMessage(entry, seen);
     }
+    seen.delete(value as object);
     return result;
   }
   return value;

package/src/views/activity/EventLogRow.tsx

@@ -0,0 +1,108 @@
+import clsx from "clsx";
+import { eventScope, formatClockTime } from "../../utils/common";
+import type { EventLogEntry } from "../../data/types";
+import { PartDisclosure } from "../message/PartDisclosure";
+import { PayloadDiff } from "../runs/PayloadDiff";
+import { Chip, JSONTree } from "../ui";
+
+export const EventLogRow = ({
+  log,
+  previous,
+  showDiff = false,
+  timeLabel,
+}: {
+  log: EventLogEntry;
+  previous?: EventLogEntry | undefined;
+  showDiff?: boolean;
+  /** Overrides the default clock time label. */
+  timeLabel?: string | undefined;
+}) => {
+  const scope = eventScope(log.event);
+  const suffix = log.event.slice(scope.length + 1) || log.event;
+
+  return (
+    <div className="flex flex-col gap-1 py-1.5">
+      <div className="flex min-w-0 items-center gap-2">
+        <span className="text-muted-foreground w-16 shrink-0 font-mono text-[10px] tabular-nums">
+          {timeLabel ?? formatClockTime(log.time)}
+        </span>
+        <Chip className="shrink-0">{scope}</Chip>
+        <span className="text-foreground min-w-0 truncate text-[11px] font-medium">
+          {suffix}
+        </span>
+      </div>
+      <div className="ps-[4.5rem]">
+        <PartDisclosure label="Payload">
+          <JSONTree value={log.data} openDepth={0} compact />
+        </PartDisclosure>
+        {showDiff && previous ? (
+          <div className="mt-1">
+            <PartDisclosure label="Diff">
+              <PayloadDiff before={previous.data} after={log.data} />
+            </PartDisclosure>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export const ScopeFilterBar = ({
+  eventTypesByScope,
+  unselectedEventTypes,
+  toggleScope,
+  toggleEventType,
+}: {
+  eventTypesByScope: readonly (readonly [string, string[]])[];
+  unselectedEventTypes: ReadonlySet<string>;
+  toggleScope: (types: string[]) => void;
+  toggleEventType: (eventType: string) => void;
+}) => {
+  if (!eventTypesByScope.length) return null;
+
+  return (
+    <div className="flex flex-col gap-2 px-3 py-2">
+      {eventTypesByScope.map(([scope, types]) => {
+        const allSelected = types.every(
+          (type) => !unselectedEventTypes.has(type),
+        );
+        return (
+          <div key={scope} className="flex flex-wrap items-center gap-1.5">
+            <button
+              type="button"
+              onClick={() => toggleScope(types)}
+              className={clsx(
+                "rounded-md border px-1.5 py-0.5 text-[10px] font-medium transition-colors",
+                allSelected
+                  ? "bg-accent text-foreground"
+                  : "text-muted-foreground",
+              )}
+            >
+              {scope}
+            </button>
+            {types.map((eventType) => (
+              <label
+                key={eventType}
+                title={eventType}
+                className={clsx(
+                  "flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px] font-medium transition-colors",
+                  !unselectedEventTypes.has(eventType)
+                    ? "bg-accent text-foreground"
+                    : "text-muted-foreground",
+                )}
+              >
+                <input
+                  type="checkbox"
+                  checked={!unselectedEventTypes.has(eventType)}
+                  onChange={() => toggleEventType(eventType)}
+                  className="accent-foreground size-3 rounded"
+                />
+                <span>{eventType.slice(scope.length + 1) || eventType}</span>
+              </label>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/views/activity/EventStreamPane.tsx

@@ -0,0 +1,86 @@
+import { Fragment } from "react";
+import type { EventLogEntry } from "../../data/types";
+import { previousSameScope, useEventLogFilters } from "./activityNodes";
+import { EventLogRow, ScopeFilterBar } from "./EventLogRow";
+
+export const EventStreamPane = ({
+  logs,
+}: {
+  logs: readonly EventLogEntry[];
+}) => {
+  const {
+    eventTypes,
+    eventTypesByScope,
+    filteredLogs,
+    query,
+    setQuery,
+    showDiffs,
+    setShowDiffs,
+    toggleEventType,
+    toggleScope,
+    unselectedEventTypes,
+  } = useEventLogFilters(logs);
+
+  return (
+    <div className="flex flex-col">
+      {eventTypes.length ? (
+        <div className="border-border shrink-0 border-b">
+          <ScopeFilterBar
+            eventTypesByScope={eventTypesByScope}
+            unselectedEventTypes={unselectedEventTypes}
+            toggleScope={toggleScope}
+            toggleEventType={toggleEventType}
+          />
+          <div className="border-border flex items-center gap-2 border-t px-3 py-2">
+            <input
+              type="text"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Filter events…"
+              className="border-border bg-background text-foreground placeholder:text-muted-foreground h-7 flex-1 rounded-md border px-2 text-[12px]"
+            />
+            <label className="text-muted-foreground flex shrink-0 items-center gap-1.5 text-[11px]">
+              <input
+                type="checkbox"
+                checked={showDiffs}
+                onChange={() => setShowDiffs((prev) => !prev)}
+                className="accent-foreground size-3 rounded"
+              />
+              Diffs
+            </label>
+          </div>
+        </div>
+      ) : null}
+
+      <div className="flex flex-col px-3 pb-3">
+        {filteredLogs.length === 0 ? (
+          <div className="text-muted-foreground py-6 text-center text-[12px]">
+            {eventTypes.length === 0
+              ? "No events logged for this assistant instance."
+              : "No events match the current filters."}
+          </div>
+        ) : (
+          filteredLogs.map((log, index) => {
+            const previous = showDiffs
+              ? previousSameScope(filteredLogs, index)
+              : undefined;
+            return (
+              <Fragment key={`${log.event}-${log.time.getTime()}-${index}`}>
+                {log.event === "thread.runStart" && index > 0 ? (
+                  <div className="text-muted-foreground border-border/70 flex items-center gap-2 border-t py-2 text-[10px]">
+                    new run
+                  </div>
+                ) : null}
+                <EventLogRow
+                  log={log}
+                  previous={previous}
+                  showDiff={showDiffs}
+                />
+              </Fragment>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};

package/src/views/activity/OrphansPane.tsx

@@ -0,0 +1,23 @@
+import { formatClockTime } from "../../utils/common";
+import type { RunEventEntry } from "../runs/types";
+import { EventLogRow } from "./EventLogRow";
+
+export const OrphansPane = ({
+  events,
+}: {
+  events: readonly RunEventEntry[];
+}) => (
+  <div className="flex flex-col px-3 pb-3">
+    {events.map((entry, index) => (
+      <EventLogRow
+        key={`${entry.event}-${entry.time.getTime()}-${index}`}
+        log={{
+          time: entry.time,
+          event: entry.event,
+          data: entry.data,
+        }}
+        timeLabel={formatClockTime(entry.time)}
+      />
+    ))}
+  </div>
+);

package/src/views/activity/RunDetailPane.tsx

@@ -0,0 +1,128 @@
+import clsx from "clsx";
+import { formatClockTime, formatMs } from "../../utils/common";
+import { PartDisclosure } from "../message/PartDisclosure";
+import { Chip, JSONTree, SummaryItem, SummaryList, ToneBadge } from "../ui";
+import type { RunEventEntry, RunPreview } from "../runs/types";
+
+const SCOPE_TONE: Record<string, string> = {
+  thread: "bg-blue-500",
+  composer: "bg-emerald-500",
+  threadListItem: "bg-amber-500",
+};
+
+const clampPercent = (offset: number, span: number) =>
+  span > 0 ? Math.min(100, Math.max(0, (offset / span) * 100)) : 0;
+
+const eventLabel = (entry: RunEventEntry) =>
+  entry.event.slice(entry.scope.length + 1) || entry.event;
+
+const dotClass = (scope: string) => SCOPE_TONE[scope] ?? "bg-muted-foreground";
+
+const RULER_TICKS = 4;
+
+const Ruler = ({ spanMs }: { spanMs: number }) => (
+  <div className="flex items-center">
+    <span className="w-28 shrink-0" />
+    <div className="text-muted-foreground flex flex-1 justify-between font-mono text-[10px] tabular-nums">
+      {Array.from({ length: RULER_TICKS + 1 }, (_, index) => (
+        <span key={index}>{formatMs((spanMs * index) / RULER_TICKS)}</span>
+      ))}
+    </div>
+    <span className="w-10 shrink-0" />
+  </div>
+);
+
+const TimelineRow = ({
+  entry,
+  spanMs,
+}: {
+  entry: RunEventEntry;
+  spanMs: number;
+}) => (
+  <div className="flex items-center gap-2 py-0.5">
+    <span className="flex w-28 shrink-0 items-center gap-1.5">
+      <span
+        className={clsx(
+          "size-1.5 shrink-0 rounded-full",
+          dotClass(entry.scope),
+        )}
+      />
+      <span className="text-foreground truncate text-[11px]">
+        {eventLabel(entry)}
+      </span>
+    </span>
+    <div className="bg-muted/40 relative h-3 flex-1 rounded">
+      <span
+        title={`${entry.event} +${formatMs(entry.offsetMs)}`}
+        className={clsx(
+          "absolute top-0 h-full w-0.5 rounded",
+          dotClass(entry.scope),
+        )}
+        style={{ left: `${clampPercent(entry.offsetMs, spanMs)}%` }}
+      />
+    </div>
+    <span className="text-muted-foreground w-10 shrink-0 text-right font-mono text-[10px] tabular-nums">
+      +{formatMs(entry.offsetMs)}
+    </span>
+  </div>
+);
+
+export const RunDetailPane = ({ run }: { run: RunPreview }) => (
+  <div className="flex flex-col gap-3">
+    <SummaryList>
+      <SummaryItem label="Started" value={formatClockTime(run.startTime)} />
+      <SummaryItem
+        label="Duration"
+        value={
+          run.endTime === undefined ? (
+            <ToneBadge tone="blue" size="sm">
+              running
+            </ToneBadge>
+          ) : (
+            formatMs(run.durationMs ?? 0)
+          )
+        }
+      />
+      <SummaryItem label="Events" value={String(run.events.length)} />
+      {run.threadId ? (
+        <SummaryItem label="Thread" value={run.threadId} />
+      ) : null}
+    </SummaryList>
+
+    <div className="flex flex-col gap-0.5">
+      <Ruler spanMs={run.spanMs} />
+      {run.events.map((entry, index) => (
+        <TimelineRow
+          key={`${entry.event}-${index}`}
+          entry={entry}
+          spanMs={run.spanMs}
+        />
+      ))}
+    </div>
+
+    <div className="flex flex-col">
+      {run.events.map((entry, index) => {
+        const scope = entry.scope;
+        const suffix = eventLabel(entry);
+        return (
+          <div key={`detail-${entry.event}-${index}`} className="py-1.5">
+            <div className="flex min-w-0 items-center gap-2">
+              <span className="text-muted-foreground w-12 shrink-0 font-mono text-[10px] tabular-nums">
+                +{formatMs(entry.offsetMs)}
+              </span>
+              <Chip className="shrink-0">{scope}</Chip>
+              <span className="text-foreground min-w-0 truncate text-[11px] font-medium">
+                {suffix}
+              </span>
+            </div>
+            <div className="ps-[3.75rem]">
+              <PartDisclosure label="Payload">
+                <JSONTree value={entry.data} openDepth={0} compact />
+              </PartDisclosure>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  </div>
+);

package/src/views/activity/activityNodes.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import type { EventLogEntry } from "../../data/types";
+import { buildActivityNav, defaultActivitySelection } from "./activityNodes";
+
+const base = 2_000_000_000_000;
+const t = (ms: number) => new Date(base + ms);
+
+describe("buildActivityNav", () => {
+  it("lists stream, runs newest-first, and orphans", () => {
+    const logs: EventLogEntry[] = [
+      { time: t(0), event: "thread.runStart", data: { threadId: "T1" } },
+      { time: t(100), event: "composer.send", data: { threadId: "T1" } },
+      { time: t(200), event: "thread.runEnd", data: { threadId: "T1" } },
+      { time: t(300), event: "composer.edit", data: {} },
+    ];
+
+    const { nodes, runs, orphans } = buildActivityNav(logs);
+    expect(nodes[0]?.id).toBe("activity:stream");
+    expect(runs).toHaveLength(1);
+    expect(orphans).toHaveLength(1);
+    expect(nodes.some((node) => node.id === "activity:orphans")).toBe(true);
+    expect(defaultActivitySelection(nodes)).toBe("activity:run:run-0");
+  });
+});

package/src/views/activity/activityNodes.ts

@@ -0,0 +1,179 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { EventLogEntry } from "../../data/types";
+import { eventScope } from "../../utils/common";
+import { groupRuns } from "../runs/parse";
+import type { RunEventEntry, RunPreview } from "../runs/types";
+
+export type ActivityNode =
+  | { id: "activity:stream"; kind: "stream" }
+  | {
+      id: "activity:orphans";
+      kind: "orphans";
+      events: readonly RunEventEntry[];
+    }
+  | { id: `activity:run:${string}`; kind: "run"; run: RunPreview };
+
+const activityRunId = (runId: string) => `activity:run:${runId}` as const;
+
+export const buildActivityNav = (logs: readonly EventLogEntry[]) => {
+  const { runs, orphans } = groupRuns(logs);
+  const nodes: ActivityNode[] = [{ id: "activity:stream", kind: "stream" }];
+
+  for (const run of [...runs].reverse()) {
+    nodes.push({
+      id: activityRunId(run.id),
+      kind: "run",
+      run,
+    });
+  }
+
+  if (orphans.length) {
+    nodes.push({
+      id: "activity:orphans",
+      kind: "orphans",
+      events: orphans,
+    });
+  }
+
+  return { nodes, runs, orphans };
+};
+
+export const findActivityNode = (
+  nodes: readonly ActivityNode[],
+  nodeId: string | null,
+): ActivityNode | undefined =>
+  nodeId ? nodes.find((node) => node.id === nodeId) : undefined;
+
+export const defaultActivitySelection = (nodes: readonly ActivityNode[]) => {
+  const latestRun = nodes.find((node) => node.kind === "run");
+  if (latestRun) return latestRun.id;
+  if (nodes.some((node) => node.kind === "orphans")) return "activity:orphans";
+  return "activity:stream";
+};
+
+export const useEventLogFilters = (logs: readonly EventLogEntry[]) => {
+  const [unselectedEventTypes, setUnselectedEventTypes] = useState<Set<string>>(
+    new Set(),
+  );
+  const knownEventTypesRef = useRef(new Set<string>());
+  const [query, setQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [showDiffs, setShowDiffs] = useState(false);
+
+  useEffect(() => {
+    const id = setTimeout(
+      () => setDebouncedQuery(query.trim().toLowerCase()),
+      150,
+    );
+    return () => clearTimeout(id);
+  }, [query]);
+
+  const eventTypes = useMemo(() => {
+    const types = new Set<string>();
+    logs.forEach((log) => types.add(log.event));
+    return Array.from(types).sort();
+  }, [logs]);
+
+  const eventTypesByScope = useMemo(() => {
+    const grouped = new Map<string, string[]>();
+    for (const type of eventTypes) {
+      const scope = eventScope(type);
+      const existing = grouped.get(scope);
+      if (existing) {
+        existing.push(type);
+      } else {
+        grouped.set(scope, [type]);
+      }
+    }
+    return Array.from(grouped.entries());
+  }, [eventTypes]);
+
+  useEffect(() => {
+    setUnselectedEventTypes((prev) => {
+      const eventTypeSet = new Set(eventTypes);
+      const next = new Set(prev);
+      let changed = false;
+
+      Array.from(next).forEach((value) => {
+        if (!eventTypeSet.has(value)) {
+          next.delete(value);
+          knownEventTypesRef.current.delete(value);
+          changed = true;
+        }
+      });
+
+      eventTypes.forEach((type) => {
+        if (!knownEventTypesRef.current.has(type)) {
+          knownEventTypesRef.current.add(type);
+          changed = true;
+        }
+      });
+
+      return changed ? next : prev;
+    });
+  }, [eventTypes]);
+
+  const filteredLogs = useMemo(
+    () =>
+      logs.filter(
+        (log) =>
+          !unselectedEventTypes.has(log.event) &&
+          (debouncedQuery === "" ||
+            `${log.event} ${JSON.stringify(log.data)}`
+              .toLowerCase()
+              .includes(debouncedQuery)),
+      ),
+    [logs, unselectedEventTypes, debouncedQuery],
+  );
+
+  const toggleEventType = useCallback((eventType: string) => {
+    setUnselectedEventTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(eventType)) {
+        next.delete(eventType);
+      } else {
+        next.add(eventType);
+      }
+      return next;
+    });
+  }, []);
+
+  const toggleScope = useCallback((types: string[]) => {
+    setUnselectedEventTypes((prev) => {
+      const allSelected = types.every((type) => !prev.has(type));
+      const next = new Set(prev);
+      for (const type of types) {
+        if (allSelected) {
+          next.add(type);
+        } else {
+          next.delete(type);
+        }
+      }
+      return next;
+    });
+  }, []);
+
+  return {
+    eventTypes,
+    eventTypesByScope,
+    filteredLogs,
+    query,
+    setQuery,
+    showDiffs,
+    setShowDiffs,
+    toggleEventType,
+    toggleScope,
+    unselectedEventTypes,
+  };
+};
+
+export const previousSameScope = (
+  logs: readonly EventLogEntry[],
+  index: number,
+): EventLogEntry | undefined => {
+  const scope = eventScope(logs[index]!.event);
+  for (let cursor = index - 1; cursor >= 0; cursor -= 1) {
+    if (eventScope(logs[cursor]!.event) === scope) return logs[cursor];
+  }
+  return undefined;
+};

package/src/views/activity/index.ts

@@ -0,0 +1,10 @@
+export {
+  buildActivityNav,
+  defaultActivitySelection,
+  findActivityNode,
+} from "./activityNodes";
+export type { ActivityNode } from "./activityNodes";
+export { EventLogRow, ScopeFilterBar } from "./EventLogRow";
+export { EventStreamPane } from "./EventStreamPane";
+export { OrphansPane } from "./OrphansPane";
+export { RunDetailPane } from "./RunDetailPane";