@assistant-ui/react-devtools 1.2.6 → 1.2.7

package/src/views/message/types.ts

@@ -0,0 +1,137 @@
+import type { AttachmentPreview } from "../attachments/types";
+
+export interface PartStatusPreview {
+  readonly type: string;
+  readonly reason?: string;
+  readonly error?: unknown;
+}
+
+export interface ToolCallApprovalPreview {
+  readonly id?: string;
+  readonly approved?: boolean;
+  readonly reason?: string;
+  readonly isAutomatic?: boolean;
+}
+
+export interface ToolCallInterruptPreview {
+  readonly type?: string;
+  readonly payload?: unknown;
+}
+
+interface BasePartPreview {
+  readonly status?: PartStatusPreview;
+}
+
+export interface TextPartPreview extends BasePartPreview {
+  readonly type: "text";
+  readonly text: string;
+}
+
+export interface ReasoningPartPreview extends BasePartPreview {
+  readonly type: "reasoning";
+  readonly text: string;
+}
+
+export interface SourcePartPreview extends BasePartPreview {
+  readonly type: "source";
+  readonly sourceType?: string;
+  readonly title?: string;
+  readonly url?: string;
+}
+
+export interface ImagePartPreview extends BasePartPreview {
+  readonly type: "image";
+  readonly filename?: string;
+  readonly previewUrl?: string;
+  readonly sizeBytes?: number;
+}
+
+export interface FilePartPreview extends BasePartPreview {
+  readonly type: "file";
+  readonly filename?: string;
+  readonly mimeType?: string;
+  readonly sizeBytes?: number;
+}
+
+export interface AudioPartPreview extends BasePartPreview {
+  readonly type: "audio";
+  readonly format?: string;
+  readonly sizeBytes?: number;
+}
+
+export interface DataPartPreview extends BasePartPreview {
+  readonly type: "data";
+  readonly name?: string;
+  readonly data: unknown;
+}
+
+export interface GenerativeUiPartPreview extends BasePartPreview {
+  readonly type: "generative-ui";
+  readonly spec: unknown;
+}
+
+export interface ToolCallPartPreview extends BasePartPreview {
+  readonly type: "tool-call";
+  readonly toolCallId: string;
+  readonly toolName: string;
+  readonly args: unknown;
+  readonly argsText?: string;
+  readonly result?: unknown;
+  readonly isError?: boolean;
+  readonly artifact?: unknown;
+  readonly mcp?: unknown;
+  readonly modelContent?: unknown;
+  readonly interrupt?: ToolCallInterruptPreview;
+  readonly approval?: ToolCallApprovalPreview;
+  readonly subMessageCount: number;
+}
+
+export interface UnknownPartPreview extends BasePartPreview {
+  readonly type: "unknown";
+  readonly rawType: string;
+  readonly raw: unknown;
+}
+
+export type PartPreview =
+  | TextPartPreview
+  | ReasoningPartPreview
+  | SourcePartPreview
+  | ImagePartPreview
+  | FilePartPreview
+  | AudioPartPreview
+  | DataPartPreview
+  | GenerativeUiPartPreview
+  | ToolCallPartPreview
+  | UnknownPartPreview;
+
+export interface MessageTimingPreview {
+  readonly streamStartTime?: number;
+  readonly firstTokenTime?: number;
+  readonly totalStreamTime?: number;
+  readonly tokenCount?: number;
+  readonly tokensPerSecond?: number;
+  readonly totalChunks?: number;
+  readonly toolCallCount?: number;
+}
+
+export interface MessageUsagePreview {
+  readonly inputTokens: number;
+  readonly outputTokens: number;
+  readonly stepCount: number;
+}
+
+export interface MessagePreview {
+  readonly id: string;
+  readonly role: string;
+  readonly createdAt?: string;
+  readonly status?: PartStatusPreview;
+  readonly parts: readonly PartPreview[];
+  readonly attachments: readonly AttachmentPreview[];
+  readonly timing?: MessageTimingPreview;
+  readonly usage?: MessageUsagePreview;
+  readonly branchNumber?: number;
+  readonly branchCount?: number;
+  readonly index?: number;
+  readonly isOptimistic?: boolean;
+  readonly submittedFeedback?: string;
+}

package/src/views/model-context/ModelContextView.tsx

@@ -0,0 +1,71 @@
+import type { NormalizedTool } from "../../utils/toolNormalization";
+import { PartDisclosure } from "../message/PartDisclosure";
+import { Chip, JSONTree, ToneBadge } from "../ui";
+
+export const SystemPromptPane = ({ system }: { system: string }) => (
+  <div className="text-foreground text-[12px] wrap-break-word whitespace-pre-wrap">
+    {system}
+  </div>
+);
+
+export const ToolDetailPane = ({ tool }: { tool: NormalizedTool }) => (
+  <div className="flex flex-col gap-2">
+    <div className="flex flex-wrap items-center gap-1.5">
+      {tool.type ? <Chip>{tool.type}</Chip> : null}
+      {tool.providerId ? (
+        <ToneBadge tone="violet" size="sm">
+          {tool.providerId}
+        </ToneBadge>
+      ) : null}
+      {tool.display ? <Chip>{tool.display}</Chip> : null}
+      {tool.supportsDeferredResults ? <Chip>deferred</Chip> : null}
+      {tool.disabled ? (
+        <ToneBadge tone="amber" size="sm">
+          disabled
+        </ToneBadge>
+      ) : null}
+    </div>
+
+    {tool.description ? (
+      <p className="text-muted-foreground text-[11px] leading-snug">
+        {tool.description}
+      </p>
+    ) : null}
+
+    {tool.parameters !== undefined ? (
+      <PartDisclosure label="Parameters">
+        <JSONTree value={tool.parameters} openDepth={0} compact />
+      </PartDisclosure>
+    ) : null}
+    {tool.providerArgs !== undefined ? (
+      <PartDisclosure label="Provider args">
+        <JSONTree value={tool.providerArgs} openDepth={0} compact />
+      </PartDisclosure>
+    ) : null}
+    {tool.providerOptions !== undefined ? (
+      <PartDisclosure label="Provider options">
+        <JSONTree value={tool.providerOptions} openDepth={0} compact />
+      </PartDisclosure>
+    ) : null}
+    {tool.backendDefault !== undefined ? (
+      <PartDisclosure label="Backend defaults">
+        <JSONTree value={tool.backendDefault} openDepth={0} compact />
+      </PartDisclosure>
+    ) : null}
+    {tool.server !== undefined ? (
+      <PartDisclosure label="MCP server">
+        <JSONTree value={tool.server} openDepth={0} compact />
+      </PartDisclosure>
+    ) : null}
+  </div>
+);
+
+export const CallSettingsPane = ({
+  value,
+}: {
+  value: Record<string, unknown>;
+}) => <JSONTree value={value} openDepth={1} compact />;
+
+export const ConfigPane = ({ value }: { value: Record<string, unknown> }) => (
+  <JSONTree value={value} openDepth={1} compact />
+);

package/src/views/model-context/render.test.tsx

@@ -0,0 +1,24 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { ToolDetailPane } from "./ModelContextView";
+
+describe("ToolDetailPane", () => {
+  it("renders provider args and backend defaults from an already-normalized tool", () => {
+    const html = renderToStaticMarkup(
+      <ToolDetailPane
+        tool={{
+          name: "web_search",
+          type: "provider",
+          providerId: "openai.web_search_preview",
+          providerArgs: { searchContextSize: "high" },
+          backendDefault: { parameters: true },
+        }}
+      />,
+    );
+
+    expect(html).toContain("openai.web_search_preview");
+    expect(html).toContain("Provider args");
+    expect(html).toContain("searchContextSize");
+    expect(html).toContain("Backend defaults");
+  });
+});

package/src/views/nav.ts

@@ -0,0 +1,18 @@
+export type NavGroup<N extends { id: string }> = {
+  label: string;
+  nodes: N[];
+};
+
+export const flattenNav = <N extends { id: string }>(
+  groups: readonly NavGroup<N>[],
+): N[] => groups.flatMap((group) => group.nodes);
+
+export const findNavNode = <N extends { id: string }>(
+  groups: readonly NavGroup<N>[],
+  nodeId: string | null,
+): N | undefined =>
+  nodeId ? flattenNav(groups).find((node) => node.id === nodeId) : undefined;
+
+export const firstNavId = <N extends { id: string }>(
+  groups: readonly NavGroup<N>[],
+): string | null => flattenNav(groups)[0]?.id ?? null;

package/src/views/raw/RawDetail.tsx

@@ -0,0 +1,39 @@
+import { PartDisclosure } from "../message/PartDisclosure";
+import { ScopesView } from "../scopes";
+import { JSONTree } from "../ui";
+import { renderStatePreview } from "./statePreview";
+import type { RawNode } from "./rawNodes";
+
+export const RawDetail = ({
+  node,
+  state,
+  scopes,
+}: {
+  node: RawNode;
+  state: Record<string, unknown>;
+  scopes: unknown;
+}) => {
+  if (node.kind === "scopes") {
+    return (
+      <div className="flex flex-col gap-3">
+        <ScopesView scopes={scopes} />
+        {scopes !== undefined ? (
+          <PartDisclosure label="Raw JSON">
+            <JSONTree value={scopes} openDepth={1} compact />
+          </PartDisclosure>
+        ) : null}
+      </div>
+    );
+  }
+
+  const value = state[node.key];
+
+  return (
+    <div className="flex flex-col gap-3">
+      {renderStatePreview(node.key, value)}
+      <PartDisclosure label="Raw JSON">
+        <JSONTree value={value} openDepth={1} compact />
+      </PartDisclosure>
+    </div>
+  );
+};

package/src/views/raw/index.ts

@@ -0,0 +1,3 @@
+export { RawDetail } from "./RawDetail";
+export { buildRawNav } from "./rawNodes";
+export type { RawNavGroup, RawNode } from "./rawNodes";

package/src/views/raw/rawNodes.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { buildRawNav, sliceHint } from "./rawNodes";
+
+describe("buildRawNav", () => {
+  it("orders known slices and groups scopes separately", () => {
+    const groups = buildRawNav({
+      id: 1,
+      state: {
+        mcp: { servers: [] },
+        composer: { text: "hi", textLength: 2 },
+        thread: { messages: [{ id: "m1" }], isRunning: false },
+        tools: { search: ["SearchUI"] },
+      },
+      logs: [],
+      scopes: [{ name: "thread", source: "root", methods: ["send"] }],
+    });
+
+    expect(groups.map((group) => group.label)).toEqual(["State", "Graph"]);
+    const sliceKeys = groups[0]!.nodes.map((node) =>
+      node.kind === "slice" ? node.key : null,
+    );
+    expect(sliceKeys).toEqual(["thread", "composer", "tools", "mcp"]);
+  });
+});
+
+describe("sliceHint", () => {
+  it("summarizes thread and composer slices", () => {
+    expect(
+      sliceHint("thread", {
+        messages: [{ id: "m1" }, { id: "m2" }],
+        isRunning: false,
+      }),
+    ).toBe("2 msgs");
+    expect(sliceHint("composer", { text: "hello", textLength: 5 })).toBe(
+      "5 chars",
+    );
+  });
+});

package/src/views/raw/rawNodes.ts

@@ -0,0 +1,107 @@
+import type { ApiInfo } from "../../data/types";
+import { isRecord } from "../../utils/common";
+import {
+  parseComposerPreview,
+  parseThreadListPreview,
+  parseThreadPreview,
+} from "../thread";
+import { parseScopes } from "../scopes/parse";
+import type { NavGroup } from "../nav";
+
+export type RawNode =
+  | {
+      id: `raw:slice:${string}`;
+      kind: "slice";
+      key: string;
+      hint: string | null;
+    }
+  | { id: "raw:scopes"; kind: "scopes"; count: number };
+
+export type RawNavGroup = NavGroup<RawNode>;
+
+const SLICE_ORDER = [
+  "thread",
+  "threads",
+  "threadListItem",
+  "threadlistitem",
+  "composer",
+  "tools",
+  "mcp",
+] as const;
+
+const sortSliceKeys = (keys: string[]) => {
+  const rank = new Map<string, number>(
+    SLICE_ORDER.map((key, index) => [key, index]),
+  );
+  return [...keys].sort((left, right) => {
+    const leftRank = rank.get(left) ?? rank.get(left.toLowerCase()) ?? 999;
+    const rightRank = rank.get(right) ?? rank.get(right.toLowerCase()) ?? 999;
+    if (leftRank !== rightRank) return leftRank - rightRank;
+    return left.localeCompare(right);
+  });
+};
+
+export const sliceHint = (key: string, value: unknown): string | null => {
+  switch (key) {
+    case "thread": {
+      const thread = parseThreadPreview(value);
+      if (!thread) return null;
+      return `${thread.messages.length} msgs`;
+    }
+    case "threads": {
+      const threads = parseThreadListPreview(value);
+      if (!threads) return null;
+      return `${threads.threadIds.length} active`;
+    }
+    case "composer": {
+      const composer = parseComposerPreview(value);
+      if (!composer) return null;
+      return `${composer.textLength} chars`;
+    }
+    case "tools": {
+      if (!isRecord(value)) return null;
+      const count = Object.keys(value).length;
+      return count ? `${count} mapped` : "empty";
+    }
+    case "mcp": {
+      if (!isRecord(value)) return null;
+      const servers = Array.isArray(value.servers)
+        ? value.servers.length
+        : (Array.isArray(value.connectors) ? value.connectors.length : 0) +
+          (Array.isArray(value.customServers) ? value.customServers.length : 0);
+      return servers ? `${servers} servers` : "empty";
+    }
+    default:
+      return null;
+  }
+};
+
+export const buildRawNav = (data: ApiInfo): RawNavGroup[] => {
+  const sliceKeys = sortSliceKeys(Object.keys(data.state));
+  const stateNodes: RawNode[] = sliceKeys.map((key) => ({
+    id: `raw:slice:${key}`,
+    kind: "slice",
+    key,
+    hint: sliceHint(key, data.state[key]),
+  }));
+
+  const groups: RawNavGroup[] = [];
+  if (stateNodes.length) {
+    groups.push({ label: "State", nodes: stateNodes });
+  }
+
+  if (data.scopes !== undefined) {
+    groups.push({
+      label: "Graph",
+      nodes: [
+        {
+          id: "raw:scopes",
+          kind: "scopes",
+          count: parseScopes(data.scopes).length,
+        },
+      ],
+    });
+  }
+
+  return groups;
+};

package/src/views/raw/statePreview.tsx

@@ -0,0 +1,188 @@
+import { isRecord, truncate } from "../../utils/common";
+import { McpView } from "../mcp";
+import { ToolUIsView } from "../context";
+import {
+  ComposerAttachments,
+  ComposerFlags,
+  ComposerQueue,
+  ThreadDetails,
+  parseComposerPreview,
+  parseThreadListItemPreview,
+  parseThreadListPreview,
+  parseThreadPreview,
+} from "../thread";
+import { InfoCard, JSONTree, SummaryItem, SummaryList } from "../ui";
+
+const renderToolUIsStatePreview = (value: unknown) => (
+  <ToolUIsView value={value} />
+);
+
+const renderThreadsStatePreview = (value: unknown) => {
+  const state = parseThreadListPreview(value);
+  if (!state) {
+    return <JSONTree value={value} />;
+  }
+
+  const threadItems = state.threadItems.slice(0, 8);
+  const main = state.main;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <InfoCard title="Threads">
+        <SummaryList>
+          <SummaryItem label="Main thread" value={state.mainThreadId ?? "—"} />
+          <SummaryItem label="New thread" value={state.newThreadId ?? "—"} />
+          <SummaryItem label="Active" value={String(state.threadIds.length)} />
+          <SummaryItem
+            label="Archived"
+            value={String(state.archivedThreadIds.length)}
+          />
+        </SummaryList>
+      </InfoCard>
+
+      {threadItems.length ? (
+        <InfoCard title="Thread items" count={state.threadItems.length}>
+          <table className="w-full table-fixed text-left">
+            <thead className="text-muted-foreground text-[11px]">
+              <tr className="border-border border-b">
+                <th className="py-1.5 pr-3 font-medium">Title</th>
+                <th className="py-1.5 pr-3 font-medium">Status</th>
+                <th className="py-1.5 font-medium">Identifiers</th>
+              </tr>
+            </thead>
+            <tbody className="text-foreground text-[12px]">
+              {threadItems.map((item) => (
+                <tr
+                  key={item.id}
+                  className="border-border/70 border-b last:border-b-0"
+                >
+                  <td className="py-2 pr-3 align-top">
+                    <div className="text-foreground truncate font-medium">
+                      {item.title || "(untitled)"}
+                    </div>
+                    <div className="text-muted-foreground truncate font-mono text-[11px]">
+                      {item.id}
+                    </div>
+                  </td>
+                  <td className="text-muted-foreground py-2 pr-3 align-top">
+                    {item.status ?? "—"}
+                  </td>
+                  <td className="text-muted-foreground py-2 align-top font-mono text-[11px]">
+                    {item.remoteId ? `Remote: ${item.remoteId}` : null}
+                    {item.remoteId && item.externalId ? <br /> : null}
+                    {item.externalId ? `External: ${item.externalId}` : null}
+                    {!item.remoteId && !item.externalId ? "—" : null}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {state.threadItems.length > threadItems.length ? (
+            <div className="text-muted-foreground text-[11px]">
+              Showing first {threadItems.length}
+            </div>
+          ) : null}
+        </InfoCard>
+      ) : null}
+
+      {main ? <ThreadDetails thread={main} title="Main thread" /> : null}
+    </div>
+  );
+};
+
+const renderThreadStatePreview = (value: unknown) => {
+  const thread = parseThreadPreview(value);
+  if (!thread) {
+    return <JSONTree value={value} />;
+  }
+  return <ThreadDetails thread={thread} title="Thread" />;
+};
+
+const renderThreadListItemStatePreview = (value: unknown) => {
+  const item = parseThreadListItemPreview(value);
+  if (!item) {
+    return <JSONTree value={value} />;
+  }
+
+  return (
+    <SummaryList>
+      <SummaryItem label="ID" value={item.id} />
+      <SummaryItem label="Title" value={item.title ?? "(untitled)"} />
+      <SummaryItem label="Status" value={item.status ?? "—"} />
+      <SummaryItem label="Remote ID" value={item.remoteId ?? "—"} />
+      <SummaryItem label="External ID" value={item.externalId ?? "—"} />
+    </SummaryList>
+  );
+};
+
+const renderComposerStatePreview = (value: unknown) => {
+  const composer = parseComposerPreview(value);
+  if (!composer || !isRecord(value)) {
+    return <JSONTree value={value} />;
+  }
+
+  const text = typeof value.text === "string" ? value.text : "";
+  const runConfig = value.runConfig;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <InfoCard title="Composer">
+        <SummaryList>
+          <SummaryItem label="Role" value={composer.role ?? "—"} />
+          <SummaryItem
+            label="Text length"
+            value={String(composer.textLength)}
+          />
+          <SummaryItem
+            label="Attachments"
+            value={String(composer.attachments.length)}
+          />
+          <SummaryItem label="Mode" value={composer.type ?? "—"} />
+        </SummaryList>
+        <ComposerFlags composer={composer} />
+        <ComposerAttachments attachments={composer.attachments} />
+        <ComposerQueue queue={composer.queue} />
+      </InfoCard>
+
+      {text ? (
+        <InfoCard title="Text preview">
+          <p className="text-foreground text-[12px] wrap-break-word whitespace-pre-wrap">
+            {truncate(text, 240)}
+          </p>
+        </InfoCard>
+      ) : null}
+
+      {runConfig !== undefined ? (
+        <InfoCard title="Run config">
+          <JSONTree value={runConfig} />
+        </InfoCard>
+      ) : null}
+    </div>
+  );
+};
+
+export const renderStatePreview = (key: string, value: unknown) => {
+  switch (key) {
+    case "threads":
+      return renderThreadsStatePreview(value);
+    case "threadListItems":
+      return renderThreadsStatePreview({
+        threadItems: value,
+        threadIds: [],
+        archivedThreadIds: [],
+      });
+    case "thread":
+      return renderThreadStatePreview(value);
+    case "threadListItem":
+    case "threadlistitem":
+      return renderThreadListItemStatePreview(value);
+    case "tools":
+      return renderToolUIsStatePreview(value);
+    case "composer":
+      return renderComposerStatePreview(value);
+    case "mcp":
+      return <McpView value={value} />;
+    default:
+      return <JSONTree value={value} />;
+  }
+};

package/src/views/runs/PayloadDiff.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import { diffValues } from "../../utils/diff";
+import type { DiffEntry } from "../../utils/diff";
+
+const SIGN: Record<DiffEntry["kind"], { mark: string; tone: string }> = {
+  added: { mark: "+", tone: "text-emerald-600 dark:text-emerald-400" },
+  removed: { mark: "−", tone: "text-red-600 dark:text-red-400" },
+  changed: { mark: "~", tone: "text-amber-600 dark:text-amber-400" },
+};
+
+const format = (value: unknown) =>
+  typeof value === "string" ? `"${value}"` : JSON.stringify(value);
+
+export const PayloadDiff = ({
+  before,
+  after,
+}: {
+  before: unknown;
+  after: unknown;
+}) => {
+  const entries = diffValues(before, after);
+
+  if (entries.length === 0) {
+    return (
+      <div className="text-muted-foreground text-[11px]">
+        no change from the previous event in this scope
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-0.5 font-mono text-[11px]">
+      {entries.map((entry, index) => {
+        const { mark, tone } = SIGN[entry.kind];
+        return (
+          <div key={index} className="flex flex-wrap items-baseline gap-1.5">
+            <span className={clsx("shrink-0", tone)}>{mark}</span>
+            <span className="text-muted-foreground">{entry.path}</span>
+            <span className="text-foreground break-all">
+              {entry.kind === "changed"
+                ? `${format(entry.before)} → ${format(entry.after)}`
+                : format(entry.kind === "added" ? entry.after : entry.before)}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+};