@assistant-ui/react-devtools 1.2.6 → 1.2.7

package/src/shell/tabs/ActivityTab.tsx

@@ -0,0 +1,161 @@
+import { useMemo } from "react";
+import { formatClockTime, formatMs } from "../../utils/common";
+import {
+  buildActivityNav,
+  defaultActivitySelection,
+  EventStreamPane,
+  findActivityNode,
+  OrphansPane,
+  RunDetailPane,
+} from "../../views/activity";
+import { Chip, PaneHeader, SelectableRow, ToneBadge } from "../../views/ui";
+import { NAV_COL, SplitLayout } from "../SplitLayout";
+import { useNavSelectionSync } from "./navSelection";
+import type { DevToolsTabContext } from "../registry";
+
+const detailTitle = (node: ReturnType<typeof findActivityNode>) => {
+  if (!node) return "Activity";
+  switch (node.kind) {
+    case "stream":
+      return "Event stream";
+    case "run":
+      return `Run #${node.run.index}`;
+    case "orphans":
+      return "Outside runs";
+    default:
+      return "Activity";
+  }
+};
+
+export const ActivityTab = ({
+  apiId,
+  data,
+  clearEvents,
+  selection,
+  setSelection,
+}: DevToolsTabContext) => {
+  const logs = data.logs;
+  const { nodes, runs } = useMemo(() => buildActivityNav(logs), [logs]);
+
+  const selectedId = useMemo(() => {
+    if (selection && findActivityNode(nodes, selection)) return selection;
+    return defaultActivitySelection(nodes);
+  }, [nodes, selection]);
+
+  useNavSelectionSync(selectedId, selection, setSelection);
+
+  const active = findActivityNode(nodes, selectedId);
+
+  if (!logs.length) {
+    return (
+      <div className="text-muted-foreground flex h-full items-center justify-center p-3 text-[12px]">
+        No events logged for this assistant instance.
+      </div>
+    );
+  }
+
+  return (
+    <SplitLayout
+      sizes={NAV_COL}
+      columns={[
+        {
+          key: "nav",
+          header: (
+            <PaneHeader
+              trailing={
+                <span>
+                  {runs.length} runs · {logs.length} events
+                </span>
+              }
+            >
+              Activity
+            </PaneHeader>
+          ),
+          children: nodes.map((node) => (
+            <SelectableRow
+              key={node.id}
+              selected={selectedId === node.id}
+              dense
+              onSelect={() => setSelection(node.id)}
+            >
+              {node.kind === "stream" ? (
+                <span className="text-foreground block py-1.5 font-medium">
+                  All events
+                  <span className="text-muted-foreground font-normal">
+                    {" "}
+                    · {logs.length}
+                  </span>
+                </span>
+              ) : node.kind === "run" ? (
+                <div className="flex min-w-0 items-center justify-between gap-2 py-1.5">
+                  <span className="text-foreground font-medium">
+                    Run #{node.run.index}
+                  </span>
+                  <div className="flex shrink-0 items-center gap-1.5">
+                    {node.run.endTime === undefined ? (
+                      <ToneBadge tone="blue" size="sm">
+                        running
+                      </ToneBadge>
+                    ) : (
+                      <Chip>{formatMs(node.run.durationMs ?? 0)}</Chip>
+                    )}
+                    <span className="text-muted-foreground font-mono text-[10px] tabular-nums">
+                      {formatClockTime(node.run.startTime)}
+                    </span>
+                  </div>
+                </div>
+              ) : (
+                <span className="text-foreground block py-1.5 font-medium">
+                  Outside runs
+                  <span className="text-muted-foreground font-normal">
+                    {" "}
+                    · {node.events.length}
+                  </span>
+                </span>
+              )}
+            </SelectableRow>
+          )),
+        },
+        {
+          key: "detail",
+          header: (
+            <PaneHeader
+              trailing={
+                active?.kind === "stream" && logs.length ? (
+                  <button
+                    type="button"
+                    onClick={() => clearEvents(apiId)}
+                    className="text-muted-foreground hover:text-foreground text-[11px] leading-none"
+                  >
+                    clear
+                  </button>
+                ) : active?.kind === "run" &&
+                  active.run.endTime === undefined ? (
+                  <ToneBadge tone="blue" size="sm">
+                    running
+                  </ToneBadge>
+                ) : active?.kind === "run" &&
+                  active.run.durationMs !== undefined ? (
+                  <Chip>{formatMs(active.run.durationMs)}</Chip>
+                ) : undefined
+              }
+            >
+              {detailTitle(active)}
+            </PaneHeader>
+          ),
+          children: active ? (
+            active.kind === "stream" ? (
+              <EventStreamPane logs={logs} />
+            ) : active.kind === "run" ? (
+              <div className="p-3">
+                <RunDetailPane run={active.run} />
+              </div>
+            ) : (
+              <OrphansPane events={active.events} />
+            )
+          ) : null,
+        },
+      ]}
+    />
+  );
+};

package/src/shell/tabs/ContextTab.test.tsx

@@ -0,0 +1,37 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { ContextTab } from "../../shell/tabs/ContextTab";
+
+describe("ContextTab", () => {
+  it("renders a master-detail layout with navigable context slices", () => {
+    const html = renderToStaticMarkup(
+      <ContextTab
+        apiId={1}
+        data={{
+          id: 1,
+          state: { tools: { search: ["SearchUI"] } },
+          logs: [],
+          modelContext: {
+            system: "You are helpful.",
+            tools: [
+              {
+                name: "search",
+                type: "function",
+                description: "Search the web",
+              },
+            ],
+          },
+        }}
+        clearEvents={() => {}}
+        theme="light"
+        selection="ctx:tool:search"
+        setSelection={() => {}}
+      />,
+    );
+
+    expect(html).toContain("System prompt");
+    expect(html).toContain("search");
+    expect(html).toContain("Search the web");
+    expect(html).toContain("Tool UI mappings");
+  });
+});

package/src/shell/tabs/ContextTab.tsx

@@ -0,0 +1,157 @@
+import { useMemo } from "react";
+import { truncate } from "../../utils/common";
+import {
+  ContextDetail,
+  buildContextNav,
+  toolUiCount,
+  type ContextNode,
+} from "../../views/context";
+import { findNavNode, flattenNav } from "../../views/nav";
+import { Chip, EmptyState, PaneHeader, SelectableRow } from "../../views/ui";
+import { NAV_COL, SplitLayout } from "../SplitLayout";
+import { useNavSelectionSync } from "./navSelection";
+import type { DevToolsTabContext } from "../registry";
+
+const detailTitle = (
+  node: ContextNode | undefined,
+  toolUiCountValue: number,
+) => {
+  if (!node) return "Context";
+  switch (node.kind) {
+    case "system":
+      return "System prompt";
+    case "tool":
+      return node.tool.name;
+    case "callSettings":
+      return "Call settings";
+    case "config":
+      return "Config";
+    case "mcp":
+      return "MCP";
+    case "toolUIs":
+      return toolUiCountValue
+        ? `Tool UI mappings · ${toolUiCountValue}`
+        : "Tool UI mappings";
+    default:
+      return "Context";
+  }
+};
+
+export const ContextTab = ({
+  data,
+  selection,
+  setSelection,
+}: DevToolsTabContext) => {
+  const groups = useMemo(() => buildContextNav(data), [data]);
+  const nodes = useMemo(() => flattenNav(groups), [groups]);
+  const toolUiCountValue = toolUiCount(data.state.tools);
+
+  const selectedNode = useMemo(() => {
+    if (selection && findNavNode(groups, selection)) {
+      return selection;
+    }
+    return nodes[0]?.id ?? null;
+  }, [groups, nodes, selection]);
+
+  useNavSelectionSync(selectedNode, selection, setSelection);
+
+  if (!nodes.length) {
+    return (
+      <div className="flex h-full items-center justify-center p-3">
+        <EmptyState>
+          No model context, MCP, or tool UI data for this instance.
+        </EmptyState>
+      </div>
+    );
+  }
+
+  const active = findNavNode(groups, selectedNode);
+
+  return (
+    <SplitLayout
+      sizes={NAV_COL}
+      columns={[
+        {
+          key: "nav",
+          header: <PaneHeader>Context</PaneHeader>,
+          children: groups.map((group) => (
+            <div key={group.label} className="flex flex-col">
+              <div className="text-muted-foreground px-3 pt-2 pb-0.5 text-[10px] font-medium tracking-wide uppercase">
+                {group.label}
+              </div>
+              {group.nodes.map((node) => (
+                <SelectableRow
+                  key={node.id}
+                  selected={selectedNode === node.id}
+                  dense
+                  onSelect={() => setSelection(node.id)}
+                >
+                  {node.kind === "system" ? (
+                    <div className="flex min-w-0 flex-col gap-0.5 py-1.5">
+                      <span className="text-foreground font-medium">
+                        System prompt
+                      </span>
+                      <span className="text-muted-foreground truncate text-[10px]">
+                        {truncate(node.preview, 48)}
+                      </span>
+                    </div>
+                  ) : node.kind === "tool" ? (
+                    <div className="flex min-w-0 items-center justify-between gap-2 py-1.5">
+                      <span className="text-foreground truncate font-medium">
+                        {node.tool.name}
+                      </span>
+                      {node.tool.type ? (
+                        <Chip className="shrink-0">{node.tool.type}</Chip>
+                      ) : null}
+                    </div>
+                  ) : node.kind === "callSettings" ? (
+                    <span className="text-foreground block py-1.5 font-medium">
+                      Call settings
+                    </span>
+                  ) : node.kind === "config" ? (
+                    <span className="text-foreground block py-1.5 font-medium">
+                      Config
+                    </span>
+                  ) : node.kind === "mcp" ? (
+                    <span className="text-foreground block py-1.5 font-medium">
+                      MCP servers
+                    </span>
+                  ) : (
+                    <span className="text-foreground block py-1.5 font-medium">
+                      Tool UI mappings
+                      {toolUiCountValue > 0 ? (
+                        <span className="text-muted-foreground font-normal">
+                          {" "}
+                          · {toolUiCountValue}
+                        </span>
+                      ) : null}
+                    </span>
+                  )}
+                </SelectableRow>
+              ))}
+            </div>
+          )),
+        },
+        {
+          key: "detail",
+          header: (
+            <PaneHeader
+              trailing={
+                active?.kind === "tool" && active.tool.type ? (
+                  <Chip>{active.tool.type}</Chip>
+                ) : undefined
+              }
+            >
+              {detailTitle(active, toolUiCountValue)}
+            </PaneHeader>
+          ),
+          children: active ? (
+            <div className="p-3">
+              <ContextDetail node={active} data={data} />
+            </div>
+          ) : null,
+        },
+      ]}
+    />
+  );
+};

package/src/shell/tabs/RawTab.test.tsx

@@ -0,0 +1,43 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { RawTab } from "./RawTab";
+
+describe("RawTab", () => {
+  it("renders structured slice previews with raw JSON disclosure", () => {
+    const html = renderToStaticMarkup(
+      <RawTab
+        apiId={1}
+        data={{
+          id: 1,
+          state: {
+            composer: {
+              text: "hello",
+              textLength: 5,
+              role: "user",
+              attachments: [],
+              queue: [],
+              canSend: true,
+            },
+            thread: {
+              messages: [],
+              isRunning: false,
+              suggestions: [],
+              capabilities: [],
+            },
+          },
+          logs: [],
+          scopes: [{ name: "thread", source: "root", methods: ["send"] }],
+        }}
+        clearEvents={() => {}}
+        theme="light"
+        selection="raw:slice:composer"
+        setSelection={() => {}}
+      />,
+    );
+
+    expect(html).toContain("composer");
+    expect(html).toContain("5 chars");
+    expect(html).toContain("Raw JSON");
+    expect(html).toContain("scopes");
+  });
+});

package/src/shell/tabs/RawTab.tsx

@@ -0,0 +1,123 @@
+import { useMemo } from "react";
+import { buildRawNav, RawDetail, type RawNode } from "../../views/raw";
+import { findNavNode, firstNavId } from "../../views/nav";
+import { Chip, EmptyState, PaneHeader, SelectableRow } from "../../views/ui";
+import { NAV_COL, SplitLayout } from "../SplitLayout";
+import { useNavSelectionSync } from "./navSelection";
+import type { DevToolsTabContext } from "../registry";
+
+const detailTitle = (node: RawNode | undefined) => {
+  if (!node) return "Raw";
+  if (node.kind === "scopes") return "Scopes";
+  return node.key;
+};
+
+export const RawTab = ({
+  data,
+  selection,
+  setSelection,
+}: DevToolsTabContext) => {
+  const groups = useMemo(() => buildRawNav(data), [data]);
+  const sliceCount = Object.keys(data.state).length;
+
+  const selectedId = useMemo(() => {
+    if (selection && findNavNode(groups, selection)) return selection;
+    return firstNavId(groups);
+  }, [groups, selection]);
+
+  useNavSelectionSync(selectedId, selection, setSelection);
+
+  const active = findNavNode(groups, selectedId);
+
+  if (!groups.length) {
+    return (
+      <div className="flex h-full items-center justify-center p-3">
+        <EmptyState>No runtime state reported for this instance.</EmptyState>
+      </div>
+    );
+  }
+
+  return (
+    <SplitLayout
+      sizes={NAV_COL}
+      columns={[
+        {
+          key: "nav",
+          header: (
+            <PaneHeader
+              trailing={
+                <span>
+                  {sliceCount} slice{sliceCount === 1 ? "" : "s"}
+                </span>
+              }
+            >
+              Raw
+            </PaneHeader>
+          ),
+          children: groups.map((group) => (
+            <div key={group.label} className="flex flex-col">
+              <div className="text-muted-foreground px-3 pt-2 pb-0.5 text-[10px] font-medium tracking-wide uppercase">
+                {group.label}
+              </div>
+              {group.nodes.map((node) => (
+                <SelectableRow
+                  key={node.id}
+                  selected={selectedId === node.id}
+                  dense
+                  onSelect={() => setSelection(node.id)}
+                >
+                  {node.kind === "slice" ? (
+                    <div className="flex min-w-0 items-center justify-between gap-2 py-1.5">
+                      <span className="text-foreground truncate font-medium">
+                        {node.key}
+                      </span>
+                      {node.hint ? (
+                        <span className="text-muted-foreground shrink-0 text-[10px]">
+                          {node.hint}
+                        </span>
+                      ) : null}
+                    </div>
+                  ) : (
+                    <div className="flex min-w-0 items-center justify-between gap-2 py-1.5">
+                      <span className="text-foreground font-medium">
+                        scopes
+                      </span>
+                      {node.count ? (
+                        <Chip className="shrink-0">{node.count}</Chip>
+                      ) : null}
+                    </div>
+                  )}
+                </SelectableRow>
+              ))}
+            </div>
+          )),
+        },
+        {
+          key: "detail",
+          header: (
+            <PaneHeader
+              trailing={
+                active?.kind === "slice" && active.hint ? (
+                  <span>{active.hint}</span>
+                ) : active?.kind === "scopes" && active.count ? (
+                  <Chip>{active.count}</Chip>
+                ) : undefined
+              }
+            >
+              {detailTitle(active)}
+            </PaneHeader>
+          ),
+          children: active ? (
+            <div className="p-3">
+              <RawDetail
+                node={active}
+                state={data.state}
+                scopes={data.scopes}
+              />
+            </div>
+          ) : null,
+        },
+      ]}
+    />
+  );
+};