@assistant-ui/react-devtools 1.2.6 → 1.2.7

package/src/views/ui/CenteredMessage.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+export const CenteredMessage = ({ children }: { children: ReactNode }) => (
+  <div className="text-muted-foreground flex h-full items-center justify-center text-[13px]">
+    {children}
+  </div>
+);

package/src/views/ui/Chip.tsx

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { BADGE_BASE } from "./badgeTone";
+
+export const Chip = ({
+  className,
+  children,
+}: {
+  className?: string | undefined;
+  children: ReactNode;
+}) => (
+  <span
+    className={clsx(BADGE_BASE, "bg-muted text-muted-foreground", className)}
+  >
+    {children}
+  </span>
+);

package/src/views/ui/ControlButton.tsx

@@ -0,0 +1,15 @@
+import clsx from "clsx";
+import type { ButtonHTMLAttributes } from "react";
+
+export const ControlButton = ({
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) => (
+  <button
+    className={clsx(
+      "text-muted-foreground hover:bg-accent hover:text-foreground border-border inline-flex h-8 items-center rounded-md border px-3 text-[13px] font-medium transition-colors",
+      className,
+    )}
+    {...props}
+  />
+);

package/src/views/ui/CopyButton.tsx

@@ -0,0 +1,73 @@
+import clsx from "clsx";
+import { useCopyToClipboard } from "./useCopyToClipboard";
+
+const ClipboardIcon = ({ size = 12 }: { size?: number }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+  >
+    <rect
+      x="9"
+      y="9"
+      width="11"
+      height="11"
+      rx="1.5"
+      stroke="currentColor"
+      strokeWidth="1.75"
+    />
+    <path
+      d="M7 15H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v1"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export const CopyButton = ({
+  value,
+  label = "Copy",
+  copiedLabel = "Copied",
+  className,
+  iconOnly = false,
+  size = "default",
+}: {
+  value: string;
+  label?: string;
+  copiedLabel?: string;
+  className?: string | undefined;
+  iconOnly?: boolean;
+  size?: "default" | "sm";
+}) => {
+  const { isCopied, copy } = useCopyToClipboard();
+  const empty = !value.trim();
+  const iconPx = size === "sm" ? 10 : 12;
+
+  return (
+    <button
+      type="button"
+      disabled={empty}
+      aria-label={isCopied ? copiedLabel : label}
+      title={isCopied ? copiedLabel : label}
+      onClick={(event) => {
+        event.stopPropagation();
+        copy(value);
+      }}
+      className={clsx(
+        "text-muted-foreground hover:text-foreground inline-flex shrink-0 items-center justify-center rounded transition-colors disabled:pointer-events-none disabled:opacity-40",
+        iconOnly
+          ? size === "sm"
+            ? "hover:bg-accent/60 size-4"
+            : "hover:bg-accent/60 size-6"
+          : "hover:bg-accent/60 h-6 gap-1 px-1.5 text-[10px] font-medium",
+        className,
+      )}
+    >
+      <ClipboardIcon size={iconPx} />
+      {!iconOnly ? <span>{isCopied ? copiedLabel : label}</span> : null}
+    </button>
+  );
+};

package/src/views/ui/EmptyState.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+export const EmptyState = ({ children }: { children: ReactNode }) => (
+  <div className="text-muted-foreground border-border flex items-center justify-center rounded-lg border border-dashed p-6 text-center text-[13px]">
+    {children}
+  </div>
+);

package/src/views/ui/InfoCard.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+
+/**
+ * A flat content section: a header row (title + optional count/action) over its
+ * content. No box, no nesting; sections are separated by whitespace on the
+ * panel surface.
+ */
+export const InfoCard = ({
+  title,
+  count,
+  action,
+  children,
+}: {
+  title?: ReactNode;
+  count?: ReactNode;
+  action?: ReactNode;
+  children: ReactNode;
+}) => (
+  <section className="flex flex-col gap-2">
+    {title != null || action != null ? (
+      <div className="flex h-5 items-center justify-between gap-2">
+        <h3 className="text-foreground flex items-center gap-1.5 text-[13px] font-medium">
+          {title}
+          {count != null ? (
+            <span className="text-muted-foreground text-[11px] font-normal tabular-nums">
+              {count}
+            </span>
+          ) : null}
+        </h3>
+        {action}
+      </div>
+    ) : null}
+    {children}
+  </section>
+);

package/src/views/ui/JSONTree.test.tsx

@@ -0,0 +1,29 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { JSONTree } from "./JSONTree";
+
+describe("JSONTree", () => {
+  it("renders object keys with container summaries", () => {
+    const html = renderToStaticMarkup(
+      <JSONTree value={{ status: 200, items: [1, 2, 3] }} />,
+    );
+    expect(html).toContain("status");
+    expect(html).toContain("200");
+    expect(html).toContain("items");
+    expect(html).toContain("[3]");
+  });
+
+  it("inlines small payloads in compact mode", () => {
+    const html = renderToStaticMarkup(
+      <JSONTree value={{ query: "Singapore" }} compact openDepth={0} />,
+    );
+    expect(html).toContain("query");
+    expect(html).toContain("Singapore");
+    expect(html).not.toContain("{1}");
+  });
+
+  it("falls back to a plain preview for primitive values", () => {
+    const html = renderToStaticMarkup(<JSONTree value={42} />);
+    expect(html).toContain("42");
+  });
+});

package/src/views/ui/JSONTree.tsx

@@ -0,0 +1,240 @@
+import { useMemo, useState } from "react";
+import clsx from "clsx";
+import { CopyButton } from "./CopyButton";
+
+const ENTRY_LIMIT = 100;
+const INLINE_MAX = 88;
+
+const isContainer = (value: unknown): value is object =>
+  value !== null && typeof value === "object";
+
+type Entry = { key: string; value: unknown };
+
+const entriesOf = (value: unknown): Entry[] => {
+  if (Array.isArray(value)) {
+    return value.map((item, index) => ({ key: String(index), value: item }));
+  }
+  return Object.entries(value as Record<string, unknown>).map(
+    ([key, value]) => ({ key, value }),
+  );
+};
+
+const summaryOf = (value: unknown): string => {
+  if (Array.isArray(value)) return `[${value.length}]`;
+  return `{${Object.keys(value as object).length}}`;
+};
+
+const serialize = (value: unknown, compact: boolean) =>
+  JSON.stringify(value, null, compact ? 0 : 2);
+
+const isInline = (value: unknown, compact: boolean) => {
+  if (!compact) return false;
+  if (!isContainer(value)) return true;
+  return serialize(value, true).length <= INLINE_MAX;
+};
+
+const Leaf = ({ value }: { value: unknown }) => {
+  if (typeof value === "string") {
+    return (
+      <span className="text-foreground break-all">&quot;{value}&quot;</span>
+    );
+  }
+  if (value === null || value === undefined) {
+    return (
+      <span className="text-muted-foreground italic">{String(value)}</span>
+    );
+  }
+  return (
+    <span className="text-muted-foreground break-all">{String(value)}</span>
+  );
+};
+
+const TreeNode = ({
+  name,
+  value,
+  depth,
+  openDepth,
+  compact,
+}: {
+  name?: string;
+  value: unknown;
+  depth: number;
+  openDepth: number;
+  compact: boolean;
+}) => {
+  const [open, setOpen] = useState(depth < openDepth);
+  const [showAll, setShowAll] = useState(false);
+
+  if (!isContainer(value)) {
+    return (
+      <div
+        className={clsx("flex min-w-0", compact ? "gap-1 py-px" : "gap-1.5")}
+      >
+        {name !== undefined ? (
+          <span className="text-muted-foreground shrink-0">{name}:</span>
+        ) : null}
+        <Leaf value={value} />
+      </div>
+    );
+  }
+
+  const entries = entriesOf(value);
+  const shown = showAll ? entries : entries.slice(0, ENTRY_LIMIT);
+  const hidden = entries.length - shown.length;
+
+  return (
+    <div className="min-w-0">
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className={clsx(
+          "text-muted-foreground hover:text-foreground flex items-center",
+          compact ? "gap-0.5 py-px" : "gap-1",
+        )}
+      >
+        <span
+          className={clsx(
+            "inline-block transition-transform",
+            open && "rotate-90",
+          )}
+        >
+          ›
+        </span>
+        {name !== undefined ? <span>{name}</span> : null}
+        <span className="opacity-60">{summaryOf(value)}</span>
+      </button>
+      {open ? (
+        <div
+          className={clsx(
+            "border-border/60 border-s",
+            compact ? "ms-1 ps-2" : "ms-[5px] ps-3",
+          )}
+        >
+          {shown.map((entry) => (
+            <TreeNode
+              key={entry.key}
+              name={entry.key}
+              value={entry.value}
+              depth={depth + 1}
+              openDepth={openDepth}
+              compact={compact}
+            />
+          ))}
+          {hidden > 0 ? (
+            <button
+              type="button"
+              onClick={() => setShowAll(true)}
+              className="text-muted-foreground hover:text-foreground text-[10px]"
+            >
+              +{hidden} more
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+const InlineJson = ({
+  serialized,
+  copyText,
+  compact,
+}: {
+  serialized: string;
+  copyText: string;
+  compact: boolean;
+}) => (
+  <div className="flex min-w-0 items-start gap-0.5">
+    <code
+      className={clsx(
+        "text-foreground min-w-0 flex-1 font-mono leading-snug break-all",
+        compact ? "text-[10px]" : "text-[11px]",
+      )}
+      title={serialized}
+    >
+      {serialized}
+    </code>
+    <CopyButton
+      value={copyText}
+      label="Copy JSON"
+      iconOnly
+      size={compact ? "sm" : "default"}
+    />
+  </div>
+);
+
+const TreeWithCopy = ({
+  value,
+  openDepth,
+  copyText,
+  compact,
+}: {
+  value: unknown;
+  openDepth: number;
+  copyText: string;
+  compact: boolean;
+}) => (
+  <div className="flex min-w-0 items-start gap-0.5">
+    <div
+      className={clsx(
+        "min-w-0 flex-1 overflow-auto font-mono [font-variant-numeric:tabular-nums] [font-variant-ligatures:none]",
+        compact
+          ? "max-h-32 text-[10px] leading-snug"
+          : "border-border bg-muted/40 max-h-[360px] rounded-md border p-3 text-[11px] leading-relaxed",
+      )}
+    >
+      <TreeNode
+        value={value}
+        depth={0}
+        openDepth={openDepth}
+        compact={compact}
+      />
+    </div>
+    <CopyButton
+      value={copyText}
+      label="Copy JSON"
+      iconOnly
+      size={compact ? "sm" : "default"}
+      className="pt-px"
+    />
+  </div>
+);
+
+/**
+ * Recursive JSON view. `compact` fits tool rows; copy always provides formatted JSON.
+ */
+export const JSONTree = ({
+  value,
+  openDepth = 1,
+  compact = false,
+}: {
+  value: unknown;
+  openDepth?: number;
+  compact?: boolean;
+}) => {
+  const isLeaf = isInline(value, compact) || !isContainer(value);
+  const serialized = useMemo(
+    () => (isLeaf ? serialize(value, compact) : ""),
+    [value, compact, isLeaf],
+  );
+  const copyText = useMemo(() => JSON.stringify(value, null, 2), [value]);
+
+  if (isLeaf) {
+    return (
+      <InlineJson
+        serialized={serialized}
+        copyText={copyText}
+        compact={compact}
+      />
+    );
+  }
+
+  return (
+    <TreeWithCopy
+      value={value}
+      openDepth={openDepth}
+      copyText={copyText}
+      compact={compact}
+    />
+  );
+};

package/src/views/ui/PaneHeader.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+
+/**
+ * Fixed-height rail header. Every column in a split layout should use this so
+ * titles line up across columns.
+ */
+export const PaneHeader = ({
+  children,
+  trailing,
+  borderless = false,
+}: {
+  children: ReactNode;
+  trailing?: ReactNode | undefined;
+  borderless?: boolean;
+}) => (
+  <div
+    className={
+      borderless
+        ? "bg-background flex h-8 max-h-8 min-h-8 shrink-0 items-center justify-between gap-2 overflow-hidden px-3"
+        : "border-border bg-background flex h-8 max-h-8 min-h-8 shrink-0 items-center justify-between gap-2 overflow-hidden border-b px-3"
+    }
+  >
+    <div className="text-muted-foreground flex min-w-0 flex-1 items-center truncate text-[11px] leading-none tabular-nums">
+      {children}
+    </div>
+    {trailing ? (
+      <div className="text-muted-foreground flex shrink-0 items-center gap-1.5 text-[10px] leading-none">
+        {trailing}
+      </div>
+    ) : null}
+  </div>
+);
+
+/** Header that grows below a {@link PaneHeader}-height title row. */
+export const PaneHeaderStack = ({
+  header,
+  children,
+}: {
+  header: ReactNode;
+  children?: ReactNode | undefined;
+}) => (
+  <div className="border-border bg-background shrink-0 border-b">
+    {header}
+    {children ? <div className="border-border border-t">{children}</div> : null}
+  </div>
+);

package/src/views/ui/RailTime.tsx

@@ -0,0 +1,27 @@
+import clsx from "clsx";
+import { formatWhen, formatWhenLabel } from "../../utils/common";
+
+/** Compact timestamp for narrow rails; full value goes in the tooltip. */
+export const RailTime = ({
+  value,
+  className,
+}: {
+  value: string | undefined;
+  className?: string | undefined;
+}) => {
+  const when = formatWhen(value);
+  if (!when) return null;
+
+  return (
+    <time
+      dateTime={value}
+      title={formatWhenLabel(value)}
+      className={clsx(
+        "text-muted-foreground font-mono text-[10px] leading-none whitespace-nowrap tabular-nums",
+        className,
+      )}
+    >
+      {when}
+    </time>
+  );
+};

package/src/views/ui/SectionLabel.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+export const SectionLabel = ({ children }: { children: ReactNode }) => (
+  <div className="text-muted-foreground text-[11px] font-medium">
+    {children}
+  </div>
+);

package/src/views/ui/SelectableRow.tsx

@@ -0,0 +1,41 @@
+import clsx from "clsx";
+import { forwardRef, type ReactNode } from "react";
+
+/**
+ * A row in a master rail. The leading border + accent fill mark the current
+ * selection; the whole row is the hit target. Content is free-form so a row can
+ * be a single line or a small block (a transcript turn).
+ */
+export const SelectableRow = forwardRef<
+  HTMLButtonElement,
+  {
+    selected?: boolean;
+    onSelect?: (() => void) | undefined;
+    className?: string | undefined;
+    /** Fixed-height row for uniform rails. */
+    dense?: boolean;
+    children: ReactNode;
+  }
+>(function SelectableRow(
+  { selected = false, onSelect, className, dense = false, children },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      onClick={onSelect}
+      aria-current={selected || undefined}
+      className={clsx(
+        "block w-full overflow-hidden border-s-2 px-3 text-left text-[12px] transition-colors",
+        dense ? "py-0" : "py-1.5",
+        selected
+          ? "border-foreground bg-accent text-foreground"
+          : "text-muted-foreground hover:bg-accent/40 border-transparent",
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+});

package/src/views/ui/Sparkline.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx";
+
+/**
+ * A monochrome trend line drawn as an SVG polyline. No axes, legend, or
+ * gridlines: it answers "is this metric rising, falling, or spiking" at a
+ * glance and nothing more. Renders nothing below 2 points; color comes from the
+ * surrounding text color (`currentColor`).
+ */
+export const Sparkline = ({
+  values,
+  className,
+}: {
+  values: readonly number[];
+  className?: string;
+}) => {
+  if (values.length < 2) return null;
+
+  const width = 100;
+  const height = 24;
+  const max = Math.max(...values);
+  const min = Math.min(...values);
+  const range = max - min || 1;
+  const step = width / (values.length - 1);
+
+  const point = (value: number, index: number) =>
+    `${(index * step).toFixed(1)},${(height - ((value - min) / range) * height).toFixed(1)}`;
+  const points = values.map(point).join(" ");
+  const lastValue = values[values.length - 1]!;
+  const [lastX, lastY] = point(lastValue, values.length - 1).split(",");
+
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      className={clsx("text-muted-foreground", className)}
+      preserveAspectRatio="none"
+      aria-hidden="true"
+    >
+      <polyline
+        points={points}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+        vectorEffect="non-scaling-stroke"
+      />
+      <circle cx={lastX} cy={lastY} r="2" fill="currentColor" />
+    </svg>
+  );
+};

package/src/views/ui/SummaryItem.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+/**
+ * A key/value row: label left, value right on one baseline. Flat (no box). Group
+ * a sequence in `SummaryList` for hairline dividers.
+ */
+export const SummaryItem = ({
+  label,
+  value,
+}: {
+  label: string;
+  value: ReactNode;
+}) => (
+  <div className="flex min-h-7 items-baseline justify-between gap-2 py-1 text-[11px]">
+    <span className="text-muted-foreground shrink-0">{label}</span>
+    <span className="text-foreground min-w-0 truncate text-right font-medium tabular-nums">
+      {value}
+    </span>
+  </div>
+);
+
+/** Divided list of `SummaryItem` rows. Unboxed: dividers do the grouping. */
+export const SummaryList = ({ children }: { children: ReactNode }) => (
+  <div className="divide-border divide-y">{children}</div>
+);

package/src/views/ui/ToneBadge.tsx

@@ -0,0 +1,26 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { BADGE_BASE, BADGE_SM, BADGE_TONE } from "./badgeTone";
+import type { BadgeTone } from "./badgeTone";
+
+export const ToneBadge = ({
+  tone,
+  size = "default",
+  className,
+  children,
+}: {
+  tone?: BadgeTone | undefined;
+  size?: "default" | "sm";
+  className?: string | undefined;
+  children: ReactNode;
+}) => (
+  <span
+    className={clsx(
+      size === "sm" ? BADGE_SM : BADGE_BASE,
+      BADGE_TONE[tone ?? "zinc"],
+      className,
+    )}
+  >
+    {children}
+  </span>
+);