@assistant-ui/react-devtools 1.2.6 → 1.2.7

package/src/views/attachments/AttachmentList.tsx

@@ -0,0 +1,122 @@
+import clsx from "clsx";
+import { CopyButton, STATUS_TONE, ToneBadge } from "../ui";
+import { formatBytes } from "./formatBytes";
+import type { AttachmentPreview, AttachmentStatusPreview } from "./types";
+
+const statusLabel = (status: AttachmentStatusPreview) => {
+  if (status.type === "running" && typeof status.progress === "number") {
+    const pct = status.progress <= 1 ? status.progress * 100 : status.progress;
+    return `${status.reason ?? "uploading"} ${Math.round(pct)}%`;
+  }
+  return status.reason ? `${status.type} · ${status.reason}` : status.type;
+};
+
+const kindIcon = (attachment: AttachmentPreview) => {
+  const kind = attachment.kind ?? attachment.contentType ?? "";
+  if (kind.includes("image") || attachment.previewUrl) return "img";
+  if (kind.includes("audio")) return "aud";
+  if (kind.includes("pdf") || kind === "document") return "doc";
+  return "file";
+};
+
+const AttachmentRow = ({ attachment }: { attachment: AttachmentPreview }) => {
+  const size = formatBytes(attachment.sizeBytes);
+  const meta = [attachment.kind, attachment.contentType, size]
+    .filter(Boolean)
+    .join(" · ");
+
+  return (
+    <details className="group border-border/60 border-b last:border-b-0">
+      <summary className="hover:bg-accent/40 flex cursor-pointer list-none items-center gap-1.5 px-2 py-1 text-[11px] select-none">
+        <span className="text-muted-foreground inline-block shrink-0 transition-transform group-open:rotate-90">
+          ›
+        </span>
+        <ToneBadge tone="zinc" size="sm">
+          {kindIcon(attachment)}
+        </ToneBadge>
+        <span className="text-foreground min-w-0 flex-1 truncate font-medium">
+          {attachment.name}
+        </span>
+        {meta ? (
+          <span className="text-muted-foreground hidden max-w-[45%] truncate text-[10px] sm:inline">
+            {meta}
+          </span>
+        ) : null}
+        {attachment.status ? (
+          <ToneBadge
+            tone={STATUS_TONE[attachment.status.type] ?? "zinc"}
+            size="sm"
+          >
+            {statusLabel(attachment.status)}
+          </ToneBadge>
+        ) : null}
+      </summary>
+      <div className="flex flex-col gap-1 px-2 ps-6 pb-1.5">
+        {attachment.previewUrl ? (
+          <img
+            src={attachment.previewUrl}
+            alt={attachment.name}
+            className="border-border max-h-24 max-w-full rounded border object-contain"
+          />
+        ) : null}
+        <div className="text-muted-foreground flex flex-wrap gap-x-2 gap-y-0.5 text-[10px]">
+          {attachment.id ? (
+            <span className="font-mono">id: {attachment.id}</span>
+          ) : null}
+          {attachment.kind ? <span>kind: {attachment.kind}</span> : null}
+          {attachment.contentType ? (
+            <span>type: {attachment.contentType}</span>
+          ) : null}
+          {size ? <span>{size}</span> : null}
+        </div>
+        {attachment.previewUrl ? (
+          <div className="flex justify-end">
+            <CopyButton
+              value={attachment.previewUrl}
+              label="Copy URL"
+              iconOnly
+              size="sm"
+            />
+          </div>
+        ) : null}
+      </div>
+    </details>
+  );
+};
+
+export const AttachmentList = ({
+  attachments,
+  label = "Attachments",
+  bordered = true,
+}: {
+  attachments: readonly AttachmentPreview[];
+  label?: string;
+  bordered?: boolean;
+}) => {
+  if (!attachments.length) return null;
+
+  return (
+    <div
+      className={clsx(
+        bordered && "border-border overflow-hidden rounded-md border",
+      )}
+    >
+      <div
+        className={clsx(
+          "text-muted-foreground px-2 py-1 text-[10px] font-medium",
+          bordered && "border-border border-b",
+        )}
+      >
+        {label} ({attachments.length})
+      </div>
+      <div>
+        {attachments.map((attachment, index) => (
+          <AttachmentRow
+            key={attachment.id ?? `${attachment.name}-${index}`}
+            attachment={attachment}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/views/attachments/MediaPartView.tsx

@@ -0,0 +1,77 @@
+import { ToneBadge } from "../ui";
+import type {
+  AudioPartPreview,
+  FilePartPreview,
+  ImagePartPreview,
+} from "../message/types";
+import { formatBytes } from "./formatBytes";
+
+export const ImagePartView = ({
+  part,
+  compact = false,
+}: {
+  part: ImagePartPreview;
+  compact?: boolean;
+}) => (
+  <div className={compact ? "px-2 py-1.5" : "flex flex-col gap-1"}>
+    {!compact ? <ToneBadge tone="zinc">image</ToneBadge> : null}
+    <div className="text-foreground text-[11px]">
+      {part.filename ?? "image"}
+      {part.sizeBytes ? (
+        <span className="text-muted-foreground ml-1">
+          {formatBytes(part.sizeBytes)}
+        </span>
+      ) : null}
+    </div>
+    {part.previewUrl ? (
+      <img
+        src={part.previewUrl}
+        alt={part.filename ?? "image"}
+        className="border-border mt-1 max-h-24 max-w-full rounded border object-contain"
+      />
+    ) : null}
+  </div>
+);
+
+export const FilePartView = ({
+  part,
+  compact = false,
+}: {
+  part: FilePartPreview;
+  compact?: boolean;
+}) => (
+  <div className={compact ? "px-2 py-1.5" : "flex flex-col gap-1"}>
+    {!compact ? <ToneBadge tone="zinc">file</ToneBadge> : null}
+    <div className="text-foreground text-[11px]">
+      {part.filename ?? "file"}
+      {part.mimeType ? (
+        <span className="text-muted-foreground ml-1">{part.mimeType}</span>
+      ) : null}
+      {part.sizeBytes ? (
+        <span className="text-muted-foreground ml-1">
+          · {formatBytes(part.sizeBytes)}
+        </span>
+      ) : null}
+    </div>
+  </div>
+);
+
+export const AudioPartView = ({
+  part,
+  compact = false,
+}: {
+  part: AudioPartPreview;
+  compact?: boolean;
+}) => (
+  <div className={compact ? "px-2 py-1.5" : "flex flex-col gap-1"}>
+    {!compact ? <ToneBadge tone="zinc">audio</ToneBadge> : null}
+    <div className="text-foreground text-[11px]">
+      {part.format ?? "audio"}
+      {part.sizeBytes ? (
+        <span className="text-muted-foreground ml-1">
+          · {formatBytes(part.sizeBytes)}
+        </span>
+      ) : null}
+    </div>
+  </div>
+);

package/src/views/attachments/formatBytes.ts

@@ -0,0 +1,15 @@
+export const formatBytes = (bytes: number | undefined): string | undefined => {
+  if (bytes === undefined || bytes <= 0) return undefined;
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+/** Rough size from base64 payload (no decoding). */
+export const estimateBase64Bytes = (data: string): number =>
+  Math.max(0, Math.floor((data.length * 3) / 4));
+
+export const isSafeImagePreviewUrl = (url: string): boolean =>
+  url.startsWith("data:image/") ||
+  url.startsWith("https://") ||
+  url.startsWith("http://");

package/src/views/attachments/index.ts

@@ -0,0 +1,4 @@
+export { AttachmentList } from "./AttachmentList";
+export { formatBytes } from "./formatBytes";
+export { parseAttachment, parseAttachments } from "./parseAttachment";
+export type { AttachmentPreview, AttachmentStatusPreview } from "./types";

package/src/views/attachments/parseAttachment.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { parseAttachment } from "./parseAttachment";
+
+describe("parseAttachment", () => {
+  it("parses name, kind, contentType, and status", () => {
+    expect(
+      parseAttachment({
+        id: "a1",
+        name: "photo.png",
+        type: "image",
+        contentType: "image/png",
+        status: { type: "complete" },
+      }),
+    ).toMatchObject({
+      id: "a1",
+      name: "photo.png",
+      kind: "image",
+      contentType: "image/png",
+      status: { type: "complete" },
+    });
+  });
+
+  it("extracts image preview and size from content parts", () => {
+    const result = parseAttachment({
+      name: "shot.png",
+      type: "image",
+      content: [
+        {
+          type: "image",
+          image: "data:image/png;base64,abcd",
+        },
+      ],
+    });
+    expect(result?.previewUrl).toBe("data:image/png;base64,abcd");
+    expect(result?.sizeBytes).toBeGreaterThan(0);
+  });
+});

package/src/views/attachments/parseAttachment.ts

@@ -0,0 +1,85 @@
+import { isRecord } from "../../utils/common";
+import { estimateBase64Bytes, isSafeImagePreviewUrl } from "./formatBytes";
+import type { AttachmentPreview, AttachmentStatusPreview } from "./types";
+
+const asString = (value: unknown): string | undefined =>
+  typeof value === "string" && value.length > 0 ? value : undefined;
+
+const parseAttachmentStatus = (
+  value: unknown,
+): AttachmentStatusPreview | undefined => {
+  if (!isRecord(value) || typeof value.type !== "string") return undefined;
+  return {
+    type: value.type,
+    ...(typeof value.reason === "string" ? { reason: value.reason } : {}),
+    ...(typeof value.progress === "number" ? { progress: value.progress } : {}),
+  };
+};
+
+const mediaFromContent = (
+  content: unknown,
+): { previewUrl?: string; sizeBytes?: number } => {
+  if (!Array.isArray(content)) return {};
+  for (const part of content) {
+    if (!isRecord(part)) continue;
+    const type = asString(part.type);
+    if (type === "image") {
+      const image = asString(part.image);
+      if (image && isSafeImagePreviewUrl(image)) {
+        const sizeBytes = image.startsWith("data:")
+          ? estimateBase64Bytes(image.split(",", 2)[1] ?? image)
+          : undefined;
+        return {
+          previewUrl: image,
+          ...(sizeBytes !== undefined ? { sizeBytes } : {}),
+        };
+      }
+    }
+    if (type === "file") {
+      const data = asString(part.data);
+      if (data) return { sizeBytes: estimateBase64Bytes(data) };
+    }
+  }
+  return {};
+};
+
+export const parseAttachment = (value: unknown): AttachmentPreview | null => {
+  if (!isRecord(value)) return null;
+
+  const name =
+    asString(value.name) ??
+    asString(value.filename) ??
+    asString(value.id) ??
+    "(attachment)";
+
+  const status = parseAttachmentStatus(value.status);
+  const fromContent = mediaFromContent(value.content);
+
+  const image = asString(value.image);
+  const previewUrl =
+    fromContent.previewUrl ??
+    (image && isSafeImagePreviewUrl(image) ? image : undefined);
+
+  const data = asString(value.data);
+  const sizeBytes =
+    fromContent.sizeBytes ?? (data ? estimateBase64Bytes(data) : undefined);
+
+  return {
+    name,
+    ...(asString(value.id) ? { id: asString(value.id)! } : {}),
+    ...(asString(value.type) ? { kind: asString(value.type)! } : {}),
+    ...(asString(value.contentType)
+      ? { contentType: asString(value.contentType)! }
+      : {}),
+    ...(status ? { status } : {}),
+    ...(previewUrl ? { previewUrl } : {}),
+    ...(sizeBytes !== undefined ? { sizeBytes } : {}),
+  };
+};
+
+export const parseAttachments = (value: unknown): AttachmentPreview[] =>
+  Array.isArray(value)
+    ? value
+        .map((item) => parseAttachment(item))
+        .filter((item): item is AttachmentPreview => Boolean(item))
+    : [];

package/src/views/attachments/types.ts

@@ -0,0 +1,15 @@
+export interface AttachmentStatusPreview {
+  type: string;
+  reason?: string;
+  progress?: number;
+}
+
+export interface AttachmentPreview {
+  id?: string;
+  name: string;
+  kind?: string;
+  contentType?: string;
+  status?: AttachmentStatusPreview;
+  previewUrl?: string;
+  sizeBytes?: number;
+}

package/src/views/context/ContextDetail.tsx

@@ -0,0 +1,37 @@
+import type { ApiInfo } from "../../data/types";
+import { McpView } from "../mcp";
+import {
+  CallSettingsPane,
+  ConfigPane,
+  SystemPromptPane,
+  ToolDetailPane,
+} from "../model-context/ModelContextView";
+import { ToolUIsView } from "./ToolUIsView";
+import type { ContextNode } from "./contextNodes";
+
+export const ContextDetail = ({
+  node,
+  data,
+}: {
+  node: ContextNode;
+  data: ApiInfo;
+}) => {
+  const model = data.modelContext;
+
+  switch (node.kind) {
+    case "system":
+      return <SystemPromptPane system={node.preview} />;
+    case "tool":
+      return <ToolDetailPane tool={node.tool} />;
+    case "callSettings":
+      return <CallSettingsPane value={model?.callSettings ?? {}} />;
+    case "config":
+      return <ConfigPane value={model?.config ?? {}} />;
+    case "mcp":
+      return <McpView value={data.state.mcp} compact />;
+    case "toolUIs":
+      return <ToolUIsView value={data.state.tools} />;
+    default:
+      return null;
+  }
+};

package/src/views/context/ToolUIsView.tsx

@@ -0,0 +1,44 @@
+import { isRecord, truncate } from "../../utils/common";
+import { Chip, JSONTree } from "../ui";
+
+export const ToolUIsView = ({ value }: { value: unknown }) => {
+  if (!isRecord(value)) {
+    return <JSONTree value={value} compact />;
+  }
+
+  const entries = Object.entries(value);
+  if (entries.length === 0) {
+    return (
+      <div className="text-muted-foreground text-[12px]">
+        No tool UI mappings registered.
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {entries.map(([toolName, components]) => {
+        const list = Array.isArray(components) ? components : [];
+        const firstEntry = typeof list[0] === "string" ? list[0] : undefined;
+
+        return (
+          <div key={toolName} className="flex min-w-0 flex-col gap-0.5 py-1">
+            <div className="flex min-w-0 items-center justify-between gap-2">
+              <span className="text-foreground truncate text-[12px] font-medium">
+                {toolName}
+              </span>
+              <Chip>
+                {list.length} component{list.length === 1 ? "" : "s"}
+              </Chip>
+            </div>
+            {firstEntry ? (
+              <span className="text-muted-foreground truncate font-mono text-[10px]">
+                {truncate(firstEntry, 96)}
+              </span>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/views/context/contextNodes.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { buildContextNav } from "./contextNodes";
+import { flattenNav } from "../nav";
+
+describe("buildContextNav", () => {
+  it("groups model and runtime slices", () => {
+    const groups = buildContextNav({
+      id: 1,
+      state: {
+        mcp: { servers: [] },
+        tools: { search: ["SearchUI"] },
+      },
+      logs: [],
+      modelContext: {
+        system: "You are helpful.",
+        tools: [{ name: "search", type: "function" }],
+        config: { modelName: "gpt" },
+      },
+    });
+
+    expect(groups.map((group) => group.label)).toEqual(["Model", "Runtime"]);
+    const ids = flattenNav(groups).map((node) => node.id);
+    expect(ids).toEqual([
+      "ctx:system",
+      "ctx:tool:search",
+      "ctx:config",
+      "ctx:mcp",
+      "ctx:toolUIs",
+    ]);
+  });
+});

package/src/views/context/contextNodes.ts

@@ -0,0 +1,66 @@
+import type { ApiInfo } from "../../data/types";
+import type { NormalizedTool } from "../../utils/toolNormalization";
+import { isRecord } from "../../utils/common";
+import type { NavGroup } from "../nav";
+
+export type ContextNode =
+  | { id: "ctx:system"; kind: "system"; preview: string }
+  | { id: `ctx:tool:${string}`; kind: "tool"; tool: NormalizedTool }
+  | { id: "ctx:callSettings"; kind: "callSettings" }
+  | { id: "ctx:config"; kind: "config" }
+  | { id: "ctx:mcp"; kind: "mcp" }
+  | { id: "ctx:toolUIs"; kind: "toolUIs" };
+
+export type ContextNavGroup = NavGroup<ContextNode>;
+
+const hasKeys = (value: Record<string, unknown> | undefined) =>
+  Boolean(value && Object.keys(value).length > 0);
+
+export const buildContextNav = (data: ApiInfo): ContextNavGroup[] => {
+  const model = data.modelContext;
+  const modelNodes: ContextNode[] = [];
+
+  if (model?.system) {
+    modelNodes.push({
+      id: "ctx:system",
+      kind: "system",
+      preview: model.system,
+    });
+  }
+
+  for (const tool of model?.tools ?? []) {
+    modelNodes.push({
+      id: `ctx:tool:${tool.name}`,
+      kind: "tool",
+      tool,
+    });
+  }
+
+  if (hasKeys(model?.callSettings)) {
+    modelNodes.push({ id: "ctx:callSettings", kind: "callSettings" });
+  }
+
+  if (hasKeys(model?.config)) {
+    modelNodes.push({ id: "ctx:config", kind: "config" });
+  }
+
+  const runtimeNodes: ContextNode[] = [];
+
+  if (data.state.mcp !== undefined) {
+    runtimeNodes.push({ id: "ctx:mcp", kind: "mcp" });
+  }
+
+  if (data.state.tools !== undefined) {
+    runtimeNodes.push({ id: "ctx:toolUIs", kind: "toolUIs" });
+  }
+
+  return [
+    ...(modelNodes.length ? [{ label: "Model", nodes: modelNodes }] : []),
+    ...(runtimeNodes.length ? [{ label: "Runtime", nodes: runtimeNodes }] : []),
+  ];
+};
+
+export const toolUiCount = (value: unknown) => {
+  if (!isRecord(value)) return 0;
+  return Object.keys(value).length;
+};

package/src/views/context/index.ts

@@ -0,0 +1,4 @@
+export { ContextDetail } from "./ContextDetail";
+export { buildContextNav, toolUiCount } from "./contextNodes";
+export type { ContextNavGroup, ContextNode } from "./contextNodes";
+export { ToolUIsView } from "./ToolUIsView";

package/src/views/mcp/McpView.tsx

@@ -0,0 +1,125 @@
+import clsx from "clsx";
+import {
+  CONNECTION_TONE,
+  JSONTree,
+  SummaryItem,
+  SummaryList,
+  ToneBadge,
+} from "../ui";
+import { PartDisclosure } from "../message/PartDisclosure";
+import { parseMcpManager } from "./parse";
+import type { McpServerPreview } from "./types";
+
+const ServerRow = ({
+  server,
+  compact,
+}: {
+  server: McpServerPreview;
+  compact?: boolean;
+}) => (
+  <details className="group">
+    <summary
+      className={clsx(
+        "hover:bg-accent/40 flex cursor-pointer list-none items-center gap-1.5 text-[11px] select-none",
+        compact ? "px-0 py-1" : "px-2 py-1.5",
+      )}
+    >
+      <span className="text-muted-foreground inline-block shrink-0 transition-transform group-open:rotate-90">
+        ›
+      </span>
+      <span className="text-foreground min-w-0 flex-1 truncate font-medium">
+        {server.name}
+      </span>
+      <ToneBadge tone={CONNECTION_TONE[server.connectionState]} size="sm">
+        {server.connectionState}
+      </ToneBadge>
+      {server.kind ? (
+        <span className="text-muted-foreground shrink-0 text-[10px]">
+          {server.kind}
+        </span>
+      ) : null}
+    </summary>
+
+    <div
+      className={clsx(
+        "flex flex-col gap-1.5 pb-1",
+        compact ? "ps-3.5" : "border-border border-t px-2 py-1.5",
+      )}
+    >
+      {server.url ? (
+        <div className="text-muted-foreground font-mono text-[10px] break-all">
+          {server.url}
+        </div>
+      ) : null}
+
+      {server.lastError ? (
+        <div className="text-[11px] text-red-600 dark:text-red-400">
+          {server.lastError}
+        </div>
+      ) : null}
+
+      {server.authorizationUrl ? (
+        <div className="text-[11px] break-all text-amber-600 dark:text-amber-400">
+          Authorization required: {server.authorizationUrl}
+        </div>
+      ) : null}
+
+      {server.tools.length ? (
+        <PartDisclosure label={`Tools (${server.tools.length})`}>
+          <div className="flex flex-col gap-1">
+            {server.tools.map((tool) => (
+              <div key={tool.name} className="flex min-w-0 flex-col gap-0.5">
+                <span className="text-foreground text-[11px] font-medium">
+                  {tool.name}
+                </span>
+                {tool.description ? (
+                  <span className="text-muted-foreground text-[10px] leading-snug">
+                    {tool.description}
+                  </span>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </PartDisclosure>
+      ) : (
+        <div className="text-muted-foreground text-[11px]">
+          No tools discovered.
+        </div>
+      )}
+    </div>
+  </details>
+);
+
+export const McpView = ({
+  value,
+  compact = false,
+}: {
+  value: unknown;
+  compact?: boolean;
+}) => {
+  const manager = parseMcpManager(value);
+  if (!manager) return <JSONTree value={value} compact />;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <SummaryList>
+        <SummaryItem label="Servers" value={String(manager.servers.length)} />
+        {typeof manager.isHydrated === "boolean" ? (
+          <SummaryItem label="Hydrated" value={String(manager.isHydrated)} />
+        ) : null}
+      </SummaryList>
+
+      {manager.servers.length ? (
+        <div className="flex flex-col">
+          {manager.servers.map((server) => (
+            <ServerRow key={server.id} server={server} compact={compact} />
+          ))}
+        </div>
+      ) : (
+        <div className="text-muted-foreground text-[12px]">
+          No MCP servers registered.
+        </div>
+      )}
+    </div>
+  );
+};

package/src/views/mcp/index.ts

@@ -0,0 +1 @@
+export { McpView } from "./McpView";