@assistant-ui/react-devtools 1.2.6 → 1.2.7

package/src/views/mcp/parse.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import { parseMcpManager } from "./parse";
+
+describe("parseMcpManager", () => {
+  it("parses servers with connection state, error, and tools", () => {
+    const manager = parseMcpManager({
+      isHydrated: true,
+      servers: [
+        {
+          id: "s1",
+          kind: "connector",
+          name: "GitHub",
+          url: "https://mcp.example.com",
+          connectionState: "connected",
+          lastError: null,
+          authorizationUrl: null,
+          tools: [
+            { name: "list_repos", description: "list repositories" },
+            { name: "create_issue" },
+          ],
+        },
+        {
+          id: "s2",
+          kind: "custom",
+          name: "Broken",
+          connectionState: "error",
+          lastError: { message: "ECONNREFUSED" },
+          authorizationUrl: null,
+          tools: [],
+        },
+      ],
+    });
+
+    expect(manager).not.toBeNull();
+    if (!manager) return;
+    expect(manager.isHydrated).toBe(true);
+    expect(manager.servers).toHaveLength(2);
+    expect(manager.servers[0]).toMatchObject({
+      id: "s1",
+      name: "GitHub",
+      connectionState: "connected",
+    });
+    expect(manager.servers[0]?.tools).toHaveLength(2);
+    expect(manager.servers[1]?.lastError).toBe("ECONNREFUSED");
+  });
+
+  it("falls back to connectors + customServers when servers is absent", () => {
+    const manager = parseMcpManager({
+      connectors: [
+        { id: "c1", name: "A", connectionState: "disconnected", tools: [] },
+      ],
+      customServers: [
+        { id: "x1", name: "B", connectionState: "authRequired", tools: [] },
+      ],
+    });
+    if (!manager) return;
+    expect(manager.servers.map((s) => s.id)).toEqual(["c1", "x1"]);
+  });
+
+  it("returns null for non-records", () => {
+    expect(parseMcpManager(undefined)).toBeNull();
+  });
+});

package/src/views/mcp/parse.ts

@@ -0,0 +1,65 @@
+import { asString, isRecord } from "../../utils/common";
+import type {
+  McpManagerPreview,
+  McpServerPreview,
+  McpToolPreview,
+} from "./types";
+
+const parseTool = (value: unknown): McpToolPreview | null => {
+  if (!isRecord(value)) return null;
+  const name = asString(value.name);
+  if (!name) return null;
+  const description = asString(value.description);
+  return { name, ...(description ? { description } : {}) };
+};
+
+const parseServer = (value: unknown): McpServerPreview | null => {
+  if (!isRecord(value)) return null;
+  const id = asString(value.id);
+  if (!id) return null;
+
+  const lastError = isRecord(value.lastError)
+    ? asString(value.lastError.message)
+    : undefined;
+  const kind = asString(value.kind);
+  const url = asString(value.url);
+  const authorizationUrl = asString(value.authorizationUrl);
+  const tools = Array.isArray(value.tools)
+    ? value.tools
+        .map((tool) => parseTool(tool))
+        .filter((tool): tool is McpToolPreview => Boolean(tool))
+    : [];
+
+  return {
+    id,
+    name: asString(value.name) || id,
+    connectionState: asString(value.connectionState) || "unknown",
+    tools,
+    ...(kind ? { kind } : {}),
+    ...(url ? { url } : {}),
+    ...(lastError ? { lastError } : {}),
+    ...(authorizationUrl ? { authorizationUrl } : {}),
+  };
+};
+
+export const parseMcpManager = (value: unknown): McpManagerPreview | null => {
+  if (!isRecord(value)) return null;
+
+  const source = Array.isArray(value.servers)
+    ? value.servers
+    : [
+        ...(Array.isArray(value.connectors) ? value.connectors : []),
+        ...(Array.isArray(value.customServers) ? value.customServers : []),
+      ];
+
+  const servers = source
+    .map((server) => parseServer(server))
+    .filter((server): server is McpServerPreview => Boolean(server));
+
+  return {
+    servers,
+    ...(typeof value.isHydrated === "boolean"
+      ? { isHydrated: value.isHydrated }
+      : {}),
+  };
+};

package/src/views/mcp/render.test.tsx

@@ -0,0 +1,34 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { McpView } from "./McpView";
+
+describe("McpView rendering", () => {
+  it("renders server connection state and a discovered tool", () => {
+    const html = renderToStaticMarkup(
+      <McpView
+        value={{
+          isHydrated: true,
+          servers: [
+            {
+              id: "s1",
+              kind: "connector",
+              name: "GitHub",
+              connectionState: "connected",
+              lastError: null,
+              authorizationUrl: null,
+              tools: [{ name: "list_repos", description: "list repos" }],
+            },
+          ],
+        }}
+      />,
+    );
+    expect(html).toContain("GitHub");
+    expect(html).toContain("connected");
+    expect(html).toContain("list_repos");
+  });
+
+  it("falls back to raw JSON for non-manager values", () => {
+    const html = renderToStaticMarkup(<McpView value={42} />);
+    expect(html).toContain("42");
+  });
+});

package/src/views/mcp/types.ts

@@ -0,0 +1,20 @@
+export interface McpToolPreview {
+  readonly name: string;
+  readonly description?: string;
+}
+
+export interface McpServerPreview {
+  readonly id: string;
+  readonly name: string;
+  readonly kind?: string;
+  readonly url?: string;
+  readonly connectionState: string;
+  readonly lastError?: string;
+  readonly authorizationUrl?: string;
+  readonly tools: readonly McpToolPreview[];
+}
+
+export interface McpManagerPreview {
+  readonly isHydrated?: boolean;
+  readonly servers: readonly McpServerPreview[];
+}

package/src/views/message/ChainOfThought.tsx

@@ -0,0 +1,74 @@
+import { ToneBadge } from "../ui";
+import { partKey } from "./parse";
+import { PartView } from "./PartView";
+import { StatusBadge } from "./StatusBadge";
+import type { PartPreview, PartStatusPreview } from "./types";
+
+const rollupStatus = (
+  parts: readonly PartPreview[],
+): PartStatusPreview | undefined => {
+  const statuses = parts
+    .map((part) => part.status)
+    .filter((status): status is PartStatusPreview => Boolean(status));
+  if (statuses.length === 0) return undefined;
+
+  if (statuses.some((status) => status.type === "running")) {
+    return { type: "running" };
+  }
+  if (statuses.some((status) => status.type === "requires-action")) {
+    return { type: "requires-action" };
+  }
+  const incomplete = statuses.find((status) => status.type === "incomplete");
+  if (incomplete) return incomplete;
+  return { type: "complete" };
+};
+
+const hasAwaitingTool = (parts: readonly PartPreview[]) =>
+  parts.some(
+    (part) =>
+      part.type === "tool-call" &&
+      (part.status?.type === "requires-action" ||
+        (part.approval !== undefined && part.approval.approved === undefined) ||
+        part.interrupt !== undefined),
+  );
+
+export const ChainOfThought = ({
+  parts,
+}: {
+  parts: readonly PartPreview[];
+}) => {
+  const status = rollupStatus(parts);
+  const defaultOpen = hasAwaitingTool(parts);
+
+  return (
+    <details
+      open={defaultOpen}
+      className="group border-border overflow-hidden rounded-md border"
+    >
+      <summary className="hover:bg-accent/40 flex cursor-pointer list-none items-center gap-1.5 px-2 py-1.5 select-none">
+        <span className="text-muted-foreground inline-block shrink-0 transition-transform group-open:rotate-90">
+          ›
+        </span>
+        <ToneBadge tone="violet" size="sm">
+          cot
+        </ToneBadge>
+        <span className="text-muted-foreground text-[10px]">
+          {parts.length} step{parts.length === 1 ? "" : "s"}
+        </span>
+        {status ? (
+          <StatusBadge
+            type={status.type}
+            reason={status.reason}
+            compact
+            size="sm"
+          />
+        ) : null}
+      </summary>
+      <div className="border-border divide-border divide-y border-t">
+        {parts.map((part, index) => (
+          <PartView key={partKey(part, index)} part={part} compact />
+        ))}
+      </div>
+    </details>
+  );
+};

package/src/views/message/MessageDetailPane.tsx

@@ -0,0 +1,26 @@
+import { CopyButton, PaneHeader, RailTime } from "../ui";
+import { MessageItem } from "./MessageItem";
+import { messagePlainText } from "./messagePlainText";
+import type { MessagePreview } from "./types";
+
+export const messageDetailHeader = (message: MessagePreview) => (
+  <PaneHeader
+    trailing={
+      <>
+        <CopyButton
+          value={messagePlainText(message)}
+          label="Copy message"
+          iconOnly
+          size="sm"
+        />
+        <RailTime value={message.createdAt} />
+      </>
+    }
+  >
+    <span className="text-foreground capitalize">{message.role}</span>
+  </PaneHeader>
+);
+
+export const MessageDetailBody = ({ message }: { message: MessagePreview }) => (
+  <MessageItem message={message} showHeader={false} />
+);

package/src/views/message/MessageItem.tsx

@@ -0,0 +1,94 @@
+import clsx from "clsx";
+import { formatDateTime } from "../../utils/common";
+import { AttachmentList } from "../attachments";
+import { MessageMetrics } from "./MessageMetrics";
+import { MessageTimeline } from "./MessageTimeline";
+import { RoleLabel } from "./RoleLabel";
+import { StatusBadge } from "./StatusBadge";
+import { Chip, JSONTree, ToneBadge } from "../ui";
+import type { MessagePreview } from "./types";
+
+export const MessageItem = ({
+  message,
+  showHeader = true,
+}: {
+  message: MessagePreview;
+  /** When false, skips the summary header (role, badges, timestamp). */
+  showHeader?: boolean;
+}) => {
+  const hasBranches =
+    message.branchNumber !== undefined &&
+    message.branchCount !== undefined &&
+    message.branchCount > 1;
+  const errorValue =
+    message.status && message.status.type === "incomplete"
+      ? message.status.error
+      : undefined;
+
+  return (
+    <div
+      className={clsx(
+        "flex flex-col px-3",
+        showHeader ? "gap-3 py-3" : "gap-2 py-2",
+      )}
+    >
+      {showHeader ? (
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <RoleLabel role={message.role} />
+            {message.index !== undefined ? (
+              <span className="text-muted-foreground text-[11px]">
+                #{message.index}
+              </span>
+            ) : null}
+            {message.status ? (
+              <StatusBadge
+                type={message.status.type}
+                reason={message.status.reason}
+              />
+            ) : null}
+            {hasBranches ? (
+              <Chip>
+                branch {message.branchNumber}/{message.branchCount}
+              </Chip>
+            ) : null}
+            {message.isOptimistic ? (
+              <ToneBadge tone="amber">optimistic</ToneBadge>
+            ) : null}
+            {message.submittedFeedback ? (
+              <span className="text-muted-foreground text-[11px]">
+                feedback: {message.submittedFeedback}
+              </span>
+            ) : null}
+          </div>
+          <span className="text-muted-foreground text-[11px]">
+            {formatDateTime(message.createdAt) ?? "—"}
+          </span>
+        </div>
+      ) : null}
+
+      <MessageMetrics message={message} />
+
+      {errorValue !== undefined ? (
+        <div className="bg-muted/40 rounded-md border p-2 text-[11px]">
+          <ToneBadge tone="red">error</ToneBadge>
+          <div className="mt-1">
+            <JSONTree value={errorValue} />
+          </div>
+        </div>
+      ) : null}
+
+      {message.attachments.length ? (
+        <AttachmentList attachments={message.attachments} />
+      ) : null}
+
+      {message.parts.length ? (
+        <MessageTimeline parts={message.parts} />
+      ) : (
+        <div className="text-muted-foreground text-[11px]">
+          No content parts
+        </div>
+      )}
+    </div>
+  );
+};

package/src/views/message/MessageList.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { InfoCard } from "../ui";
+import { MessageItem } from "./MessageItem";
+import type { MessagePreview } from "./types";
+
+const DEFAULT_LIMIT = 20;
+
+export const MessageList = ({
+  messages,
+  title = "Messages",
+}: {
+  messages: readonly MessagePreview[];
+  title?: string;
+}) => {
+  const [showAll, setShowAll] = useState(false);
+
+  if (!messages.length) {
+    return (
+      <InfoCard title={title}>
+        <p className="text-muted-foreground text-[12px]">
+          No messages in this thread.
+        </p>
+      </InfoCard>
+    );
+  }
+
+  const hidden = showAll ? 0 : Math.max(0, messages.length - DEFAULT_LIMIT);
+  const visible = hidden > 0 ? messages.slice(-DEFAULT_LIMIT) : messages;
+
+  return (
+    <InfoCard title={title} count={messages.length}>
+      {hidden > 0 ? (
+        <button
+          type="button"
+          onClick={() => setShowAll(true)}
+          className="text-muted-foreground hover:text-foreground self-start text-[11px] font-medium transition-colors"
+        >
+          Show {hidden} older message{hidden === 1 ? "" : "s"}
+        </button>
+      ) : null}
+      <div className="divide-border divide-y">
+        {visible.map((message) => (
+          <MessageItem key={message.id} message={message} />
+        ))}
+      </div>
+    </InfoCard>
+  );
+};

package/src/views/message/MessageMetrics.tsx

@@ -0,0 +1,68 @@
+import { formatMs } from "../../utils/common";
+import type { MessagePreview } from "./types";
+import { TtftBar } from "./TtftBar";
+
+const canRenderBar = (timing: MessagePreview["timing"]) =>
+  Boolean(
+    timing &&
+    timing.streamStartTime !== undefined &&
+    timing.firstTokenTime !== undefined &&
+    timing.totalStreamTime !== undefined,
+  );
+
+const inlineStats = (message: MessagePreview): string[] => {
+  const { timing, usage } = message;
+  const stats: string[] = [];
+
+  if (timing && !canRenderBar(timing)) {
+    const ttft =
+      timing.firstTokenTime !== undefined &&
+      timing.streamStartTime !== undefined
+        ? Math.max(0, timing.firstTokenTime - timing.streamStartTime)
+        : undefined;
+    if (ttft !== undefined) stats.push(`TTFT ${formatMs(ttft)}`);
+    if (timing.totalStreamTime !== undefined) {
+      stats.push(`${formatMs(timing.totalStreamTime)} stream`);
+    }
+  }
+
+  if (timing?.tokensPerSecond !== undefined) {
+    stats.push(`${timing.tokensPerSecond.toFixed(1)} tok/s`);
+  }
+  if (timing?.tokenCount !== undefined) {
+    stats.push(`${timing.tokenCount} tok`);
+  }
+  if (timing?.totalChunks !== undefined) {
+    stats.push(`${timing.totalChunks} chunks`);
+  }
+  if (timing?.toolCallCount !== undefined) {
+    const count = timing.toolCallCount;
+    stats.push(`${count} tool${count === 1 ? "" : "s"}`);
+  }
+  if (usage) {
+    stats.push(`${usage.inputTokens}/${usage.outputTokens} in/out`);
+    const steps = usage.stepCount;
+    stats.push(`${steps} step${steps === 1 ? "" : "s"}`);
+  }
+
+  return stats;
+};
+
+export const MessageMetrics = ({ message }: { message: MessagePreview }) => {
+  const { timing } = message;
+  const stats = inlineStats(message);
+  const bar = timing && canRenderBar(timing);
+
+  if (!bar && stats.length === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-1">
+      {bar ? <TtftBar timing={timing} /> : null}
+      {stats.length ? (
+        <p className="text-muted-foreground text-[10px] leading-tight tabular-nums">
+          {stats.join(" · ")}
+        </p>
+      ) : null}
+    </div>
+  );
+};

package/src/views/message/MessageTimeline.test.tsx

@@ -0,0 +1,78 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import {
+  MessageTimeline,
+  messageStepCount,
+  messageToolCount,
+} from "./MessageTimeline";
+import type { PartPreview } from "./types";
+
+const part = (over: PartPreview): PartPreview => over;
+
+describe("MessageTimeline", () => {
+  it("renders interleaved tool/text parts in order", () => {
+    const parts: PartPreview[] = [
+      part({
+        type: "tool-call",
+        toolCallId: "c1",
+        toolName: "search",
+        args: { q: "a" },
+      }),
+      part({ type: "text", text: "First chunk." }),
+      part({
+        type: "tool-call",
+        toolCallId: "c2",
+        toolName: "lookup",
+        args: { id: "b" },
+      }),
+      part({ type: "text", text: "Final reply." }),
+    ];
+
+    const html = renderToStaticMarkup(<MessageTimeline parts={parts} />);
+    expect(html.indexOf("search")).toBeLessThan(html.indexOf("First chunk."));
+    expect(html.indexOf("First chunk.")).toBeLessThan(html.indexOf("lookup"));
+    expect(html.indexOf("lookup")).toBeLessThan(html.indexOf("Final reply."));
+    expect(html).not.toMatch(/>answer</);
+  });
+
+  it("groups reasoning+tool prefix as chain of thought before body", () => {
+    const parts: PartPreview[] = [
+      part({ type: "reasoning", text: "thinking…" }),
+      part({
+        type: "tool-call",
+        toolCallId: "c1",
+        toolName: "getWeather",
+        args: {},
+      }),
+      part({ type: "text", text: "It is sunny." }),
+    ];
+
+    const html = renderToStaticMarkup(<MessageTimeline parts={parts} />);
+    expect(html).toContain("cot");
+    expect(html).toContain("getWeather");
+    expect(html).toContain("It is sunny.");
+  });
+});
+
+describe("messageStepCount", () => {
+  it("counts tools and text parts", () => {
+    const parts: PartPreview[] = [
+      part({
+        type: "tool-call",
+        toolCallId: "c1",
+        toolName: "a",
+        args: {},
+      }),
+      part({ type: "text", text: "one" }),
+      part({
+        type: "tool-call",
+        toolCallId: "c2",
+        toolName: "b",
+        args: {},
+      }),
+      part({ type: "text", text: "two" }),
+    ];
+    expect(messageStepCount(parts)).toEqual({ tools: 2, texts: 2 });
+    expect(messageToolCount(parts)).toBe(2);
+  });
+});

package/src/views/message/MessageTimeline.tsx

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+import { ChainOfThought } from "./ChainOfThought";
+import { partKey } from "./parse";
+import { PartView } from "./PartView";
+import type { PartPreview } from "./types";
+
+const isThoughtPart = (part: PartPreview) =>
+  part.type === "reasoning" || part.type === "tool-call";
+
+export const MessageTimeline = ({
+  parts,
+}: {
+  parts: readonly PartPreview[];
+}) => {
+  const { prefix, body, useCotPrefix } = useMemo(() => {
+    const firstTextIdx = parts.findIndex((part) => part.type === "text");
+    const prefix = firstTextIdx > 0 ? parts.slice(0, firstTextIdx) : [];
+    const body = firstTextIdx >= 0 ? parts.slice(firstTextIdx) : parts;
+    const useCotPrefix =
+      prefix.length >= 2 &&
+      prefix.every(isThoughtPart) &&
+      prefix.some((part) => part.type === "reasoning");
+
+    return { prefix, body, useCotPrefix };
+  }, [parts]);
+
+  if (!parts.length) return null;
+
+  const items = useCotPrefix ? body : parts;
+
+  return (
+    <div className="flex flex-col gap-1">
+      {useCotPrefix ? <ChainOfThought parts={prefix} /> : null}
+      {items.map((part, index) => {
+        const globalIndex = useCotPrefix ? prefix.length + index : index;
+        return (
+          <PartView key={partKey(part, globalIndex)} part={part} compact />
+        );
+      })}
+    </div>
+  );
+};
+
+export const messageToolCount = (parts: readonly PartPreview[]) =>
+  parts.filter((part) => part.type === "tool-call").length;
+
+export const messageStepCount = (parts: readonly PartPreview[]) => {
+  const tools = messageToolCount(parts);
+  const texts = parts.filter((part) => part.type === "text").length;
+  return { tools, texts };
+};

package/src/views/message/PartDisclosure.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+/** Label-only row; put payload in children. */
+export const PartDisclosure = ({
+  label,
+  defaultOpen = false,
+  trailing,
+  children,
+}: {
+  label: string;
+  defaultOpen?: boolean;
+  trailing?: ReactNode;
+  children: ReactNode;
+}) => (
+  <details open={defaultOpen} className="group">
+    <summary className="text-muted-foreground hover:text-foreground flex cursor-pointer list-none items-center gap-1 py-0.5 text-[10px] font-medium select-none">
+      <span className="inline-block shrink-0 transition-transform group-open:rotate-90">
+        ›
+      </span>
+      <span className="min-w-0 flex-1">{label}</span>
+      {trailing ? (
+        <span
+          className="flex shrink-0 items-center gap-px"
+          onClick={(event) => event.stopPropagation()}
+        >
+          {trailing}
+        </span>
+      ) : null}
+    </summary>
+    <div className="min-w-0 ps-3 pb-0.5">{children}</div>
+  </details>
+);