@tonyclaw/agent-inspector 4.0.1 → 4.0.3

package/src/components/ui/json-viewer-bulk.ts

@@ -1,132 +0,0 @@
-import { useCallback, useMemo, useState, useTransition } from "react";
-
-type JsonPrimitive = string | number | boolean | null;
-type JsonObject = Readonly<{ [key: string]: JsonValue }>;
-export type JsonValue = JsonPrimitive | ReadonlyArray<JsonValue> | JsonObject;
-
-export type JsonExpansionPolicy = {
-  depth: number;
-};
-
-const FULL_EXPAND_NODE_LIMIT = 400;
-const STRUCTURE_EXPAND_NODE_LIMIT = 2_000;
-
-function isJsonArray(value: JsonValue): value is ReadonlyArray<JsonValue> {
-  return Array.isArray(value);
-}
-
-function countJsonNodesUpTo(value: JsonValue, limit: number): number {
-  const stack: JsonValue[] = [value];
-  let count = 0;
-
-  while (stack.length > 0) {
-    const current = stack.pop();
-    if (current === undefined) continue;
-    count += 1;
-    if (count > limit) return count;
-
-    if (current === null || typeof current !== "object") continue;
-    if (isJsonArray(current)) {
-      for (const child of current) {
-        stack.push(child);
-      }
-      continue;
-    }
-
-    for (const key of Object.keys(current)) {
-      const child = current[key];
-      if (child !== undefined) stack.push(child);
-    }
-  }
-
-  return count;
-}
-
-export function getJsonExpansionPolicy(value: JsonValue): JsonExpansionPolicy {
-  const nodeCount = countJsonNodesUpTo(value, STRUCTURE_EXPAND_NODE_LIMIT + 1);
-  if (nodeCount <= FULL_EXPAND_NODE_LIMIT) return { depth: Number.POSITIVE_INFINITY };
-  if (nodeCount <= STRUCTURE_EXPAND_NODE_LIMIT) return { depth: 3 };
-  return { depth: 2 };
-}
-
-export type JsonBulkExpansion = {
-  parsedData: JsonValue | null;
-  policy: JsonExpansionPolicy | null;
-  isExpanded: boolean;
-  toggle: () => void;
-  isPending: boolean;
-  bulkDepth: number;
-  bulkRevision: number;
-};
-
-type ParsedJsonText =
-  | {
-      kind: "json";
-      data: JsonValue;
-    }
-  | {
-      kind: "text";
-    };
-
-export function parseJsonText(text: string): ParsedJsonText {
-  try {
-    const parsed: unknown = JSON.parse(text);
-    return { kind: "json", data: safeJsonValue(parsed) };
-  } catch {
-    return { kind: "text" };
-  }
-}
-
-export function useJsonBulkExpansion(text: string | null): JsonBulkExpansion {
-  const parsed = useMemo(() => (text === null ? null : parseJsonText(text)), [text]);
-  const parsedData = parsed?.kind === "json" ? parsed.data : null;
-  const policy = useMemo(
-    () => (parsedData === null ? null : getJsonExpansionPolicy(parsedData)),
-    [parsedData],
-  );
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [bulkDepth, setBulkDepth] = useState(0);
-  const [bulkRevision, setBulkRevision] = useState(0);
-  const [isPending, startTransition] = useTransition();
-
-  const toggle = useCallback(() => {
-    const nextExpanded = !isExpanded;
-    const targetDepth = nextExpanded && policy !== null ? policy.depth : 0;
-    startTransition(() => {
-      setIsExpanded(nextExpanded);
-      setBulkDepth(targetDepth);
-      setBulkRevision((current) => current + 1);
-    });
-  }, [isExpanded, policy]);
-
-  return { parsedData, policy, isExpanded, toggle, isPending, bulkDepth, bulkRevision };
-}
-
-export function safeJsonValue(value: unknown): JsonValue {
-  if (value === null || value === undefined) return null;
-  switch (typeof value) {
-    case "string":
-      return value;
-    case "number":
-      return value;
-    case "boolean":
-      return value;
-    case "object": {
-      if (Array.isArray(value)) {
-        return value.map((item: unknown) => safeJsonValue(item));
-      }
-      const result: Record<string, JsonValue> = {};
-      for (const key of Object.keys(value)) {
-        const descriptor = Object.getOwnPropertyDescriptor(value, key);
-        result[key] = safeJsonValue(descriptor?.value);
-      }
-      return result;
-    }
-    case "bigint":
-    case "symbol":
-    case "function":
-    case "undefined":
-      return String(value);
-  }
-  return null;
-}

package/src/components/ui/json-viewer.tsx

@@ -1,508 +0,0 @@
-import { Check, ChevronDown, ChevronRight, ChevronsDown, Copy } from "lucide-react";
-import { type JSX, memo, useEffect, useMemo, useState } from "react";
-import { copyTextToClipboard } from "../../lib/clipboard";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
-import type { JsonValue } from "./json-viewer-bulk";
-import { parseJsonText, safeJsonValue } from "./json-viewer-bulk";
-
-type DataType = "string" | "number" | "boolean" | "null" | "array" | "object";
-
-function classifyValue(value: JsonValue): DataType {
-  if (value === null) return "null";
-  if (Array.isArray(value)) return "array";
-  switch (typeof value) {
-    case "string":
-      return "string";
-    case "number":
-      return "number";
-    case "boolean":
-      return "boolean";
-    case "object":
-      return "object";
-    case "bigint":
-    case "symbol":
-    case "undefined":
-    case "function":
-      return "object";
-  }
-}
-
-function isExpandable(value: JsonValue): boolean {
-  return value !== null && (Array.isArray(value) || typeof value === "object");
-}
-
-function getEntries(value: JsonValue): ReadonlyArray<readonly [string, JsonValue]> {
-  if (Array.isArray(value)) {
-    return value.map((item, index): readonly [string, JsonValue] => [String(index), item]);
-  }
-  if (typeof value === "object" && value !== null) {
-    return Object.entries(value);
-  }
-  return [];
-}
-
-const STRING_TRUNCATE_LIMIT = 120;
-
-function JsonStringText({ text }: { text: string }): JSX.Element {
-  return <span className="whitespace-pre-wrap break-words">{text}</span>;
-}
-
-function StringValue({ text }: { text: string }): JSX.Element {
-  const [expanded, setExpanded] = useState(false);
-  const isLong = text.length > STRING_TRUNCATE_LIMIT;
-
-  if (!isLong) {
-    return (
-      <span className="text-emerald-400 break-all">
-        &quot;
-        <JsonStringText text={text} />
-        &quot;
-      </span>
-    );
-  }
-
-  return (
-    <span className="text-emerald-400 break-all">
-      &quot;
-      {expanded ? (
-        <span
-          className="cursor-pointer"
-          onClick={(e) => {
-            e.stopPropagation();
-            setExpanded(false);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.stopPropagation();
-              setExpanded(false);
-            }
-          }}
-          role="button"
-          tabIndex={0}
-        >
-          <JsonStringText text={text} />
-        </span>
-      ) : (
-        <Tooltip delayDuration={300}>
-          <TooltipTrigger
-            onClick={(e) => {
-              e.stopPropagation();
-              setExpanded(true);
-            }}
-            className="text-left cursor-pointer"
-          >
-            <span>{text.slice(0, STRING_TRUNCATE_LIMIT)}</span>
-            <span className="text-emerald-400/50">...</span>
-          </TooltipTrigger>
-          <TooltipContent
-            side="bottom"
-            className="max-w-md text-xs p-2 break-words whitespace-pre-wrap"
-          >
-            {text.slice(0, 500)}
-            {text.length > 500 ? "..." : ""}
-          </TooltipContent>
-        </Tooltip>
-      )}
-      &quot;
-    </span>
-  );
-}
-
-function PrimitiveValue({ value }: { value: JsonValue }): JSX.Element {
-  if (value === null) {
-    return <span className="text-rose-400 italic">null</span>;
-  }
-
-  switch (typeof value) {
-    case "string":
-      return <StringValue text={value} />;
-    case "number":
-      return <span className="text-amber-400">{value}</span>;
-    case "boolean":
-      return <span className="text-blue-400">{value ? "true" : "false"}</span>;
-    case "object":
-    case "bigint":
-    case "symbol":
-    case "undefined":
-    case "function":
-      return <span className="text-muted-foreground">{JSON.stringify(value)}</span>;
-  }
-}
-
-function CopyValueButton({ value }: { value: JsonValue }): JSX.Element {
-  const [copied, setCopied] = useState(false);
-
-  function handleCopy(e: React.MouseEvent): void {
-    e.stopPropagation();
-    void copyTextToClipboard(JSON.stringify(value, null, 2)).then((success) => {
-      if (!success) return;
-      setCopied(true);
-      setTimeout(() => {
-        setCopied(false);
-      }, 2000);
-    });
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={handleCopy}
-      className="inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors"
-      aria-label={copied ? "Copied JSON" : "Copy JSON"}
-      title="Copy JSON"
-    >
-      {copied ? <Check className="size-3 text-green-500" /> : <Copy className="size-3" />}
-    </button>
-  );
-}
-
-function CopyButton({ value }: { value: JsonValue }): JSX.Element {
-  const [copied, setCopied] = useState(false);
-
-  function handleCopy(e: React.MouseEvent): void {
-    e.stopPropagation();
-    void copyTextToClipboard(JSON.stringify(value, null, 2)).then((success) => {
-      if (!success) return;
-      setCopied(true);
-      setTimeout(() => {
-        setCopied(false);
-      }, 2000);
-    });
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={handleCopy}
-      className="opacity-0 group-hover/row:opacity-100 hover:bg-muted p-0.5 rounded transition-opacity shrink-0"
-      aria-label={copied ? "Copied JSON value" : "Copy JSON value"}
-      title="Copy to clipboard"
-    >
-      {copied ? (
-        <Check className="size-3 text-green-500" />
-      ) : (
-        <Copy className="size-3 text-muted-foreground" />
-      )}
-    </button>
-  );
-}
-
-type JsonNodeProps = {
-  name: string;
-  value: JsonValue;
-  level: number;
-  defaultExpandDepth: number;
-  isArrayItem: boolean;
-  /** Full JSON-pointer-style path to this node (e.g. "/messages/3"). */
-  path: string;
-  /** When set, ancestors of this path auto-expand for one render. */
-  expandTargetPath: string | null;
-  /** Set of paths that should expose `data-anatomy-path` on their row. */
-  anatomyPaths: Set<string> | null;
-};
-
-function ExpandCollapseButton({
-  onClick,
-}: {
-  onClick: (e: React.MouseEvent) => void;
-}): JSX.Element {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="opacity-0 group-hover/row:opacity-100 hover:bg-muted p-0.5 rounded transition-opacity shrink-0"
-      title="Expand all descendants"
-    >
-      <ChevronsDown className="size-3.5 text-muted-foreground" />
-    </button>
-  );
-}
-
-// eslint-disable-next-line @typescript-eslint/no-shadow -- named function gives React DevTools a readable displayName
-const JsonNode = memo(function JsonNode({
-  name,
-  value,
-  level,
-  defaultExpandDepth,
-  isArrayItem,
-  path,
-  expandTargetPath,
-  anatomyPaths,
-}: JsonNodeProps): JSX.Element {
-  // A node is an ancestor of the target if the target starts with this
-  // node's path followed by a path separator. The root path is "" and
-  // is an ancestor of every non-empty path.
-  const isAncestorOfTarget = useMemo(() => {
-    if (expandTargetPath === null) return false;
-    if (path === "") return expandTargetPath.length > 0;
-    return expandTargetPath === path || expandTargetPath.startsWith(`${path}/`);
-  }, [expandTargetPath, path]);
-
-  const initialExpanded = level < defaultExpandDepth || (isAncestorOfTarget && isExpandable(value));
-
-  const [expanded, setExpanded] = useState(initialExpanded);
-  // Re-evaluate on every render so a freshly-changed expandTargetPath
-  // immediately auto-expands a previously-collapsed ancestor.
-  useEffect(() => {
-    if (isAncestorOfTarget && isExpandable(value) && !expanded) {
-      setExpanded(true);
-    }
-    // We deliberately only react to expandTargetPath changes here.
-  }, [expandTargetPath]);
-
-  const [childResetKey, setChildResetKey] = useState(0);
-  const [childDepthOverride, setChildDepthOverride] = useState<number | null>(null);
-  const expandable = isExpandable(value);
-  const fullyExpanded = childDepthOverride === Number.POSITIVE_INFINITY;
-  const entries = useMemo(() => getEntries(value), [value]);
-  const hasExpandableChild = useMemo(
-    () => entries.some(([, child]) => isExpandable(child)),
-    [entries],
-  );
-
-  const dataType = classifyValue(value);
-  const openBracket = dataType === "array" ? "[" : "{";
-  const closeBracket = dataType === "array" ? "]" : "}";
-
-  const hasAnatomyPath = anatomyPaths !== null && anatomyPaths.has(path);
-
-  function expandAllDeep(): void {
-    setExpanded(true);
-    setChildDepthOverride(Number.POSITIVE_INFINITY);
-    setChildResetKey((k) => k + 1);
-  }
-
-  function collapseToDefault(): void {
-    setExpanded(false);
-    setChildDepthOverride(0);
-    setChildResetKey((k) => k + 1);
-  }
-
-  function handleRowToggle(): void {
-    if (fullyExpanded) {
-      collapseToDefault();
-    } else {
-      setExpanded(!expanded);
-    }
-  }
-
-  function handleExpandAll(e: React.MouseEvent): void {
-    e.stopPropagation();
-    expandAllDeep();
-  }
-
-  const effectiveChildDepth = childDepthOverride ?? defaultExpandDepth;
-
-  return (
-    <div className={cn(level > 0 && "border-l border-border/50 ml-2")}>
-      <div
-        className={cn(
-          "flex items-start gap-1 py-0.5 px-1 -ml-1 rounded-sm group/row",
-          expandable && "cursor-pointer hover:bg-muted/50",
-        )}
-        data-anatomy-path={hasAnatomyPath ? path : undefined}
-        onClick={expandable ? handleRowToggle : undefined}
-        onKeyDown={
-          expandable
-            ? (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  handleRowToggle();
-                }
-              }
-            : undefined
-        }
-        onDoubleClick={expandable && hasExpandableChild ? () => expandAllDeep() : undefined}
-        role={expandable ? "button" : undefined}
-        tabIndex={expandable ? 0 : undefined}
-      >
-        {expandable ? (
-          <span className="w-4 h-5 flex items-center justify-center shrink-0">
-            {expanded ? (
-              <ChevronDown className="size-3 text-muted-foreground" />
-            ) : (
-              <ChevronRight className="size-3 text-muted-foreground" />
-            )}
-          </span>
-        ) : (
-          <span className="w-4 shrink-0" />
-        )}
-
-        <span className={cn("shrink-0", isArrayItem ? "text-muted-foreground" : "text-cyan-400")}>
-          {isArrayItem ? name : `"${name}"`}
-        </span>
-
-        <span className="text-muted-foreground shrink-0">{expandable ? "" : ":"}</span>
-
-        {expandable ? (
-          <span className="text-muted-foreground">
-            {openBracket}
-            <span className="text-muted-foreground/60 text-xs">
-              {" "}
-              {entries.length} {entries.length === 1 ? "item" : "items"} {closeBracket}
-            </span>
-          </span>
-        ) : (
-          <span className="min-w-0">
-            <PrimitiveValue value={value} />
-          </span>
-        )}
-
-        {expandable && hasExpandableChild && !fullyExpanded && (
-          <ExpandCollapseButton onClick={handleExpandAll} />
-        )}
-        <CopyButton value={value} />
-      </div>
-
-      {expandable && expanded && (
-        <div className="pl-4" key={childResetKey}>
-          {entries.map(([key, childValue]) => (
-            <JsonNode
-              key={key}
-              name={key}
-              value={childValue}
-              level={level + 1}
-              defaultExpandDepth={effectiveChildDepth}
-              isArrayItem={dataType === "array"}
-              path={path === "" ? `/${key}` : `${path}/${key}`}
-              expandTargetPath={expandTargetPath}
-              anatomyPaths={anatomyPaths}
-            />
-          ))}
-          <div className="text-muted-foreground py-0.5 px-1">{closeBracket}</div>
-        </div>
-      )}
-    </div>
-  );
-});
-
-export type JsonViewerProps = {
-  data: JsonValue;
-  defaultExpandDepth?: number;
-  className?: string;
-  showCopy?: boolean;
-  bulkDepth?: number;
-  bulkRevision?: number;
-  /**
-   * Set of JSON-pointer-style paths whose row should expose a
-   * `data-anatomy-path` attribute. Used by the Context view to
-   * locate rows for click-to-jump. When `null` or `undefined`,
-   * no `data-anatomy-path` attribute is emitted (zero cost).
-   */
-  anatomyPaths?: Set<string> | null;
-  /**
-   * When set, every ancestor of this path in the tree auto-expands
-   * for one render so the target row becomes visible. The hook
-   * flips this back to `null` after the scroll lands.
-   */
-  expandToPath?: string | null;
-};
-
-export function JsonViewer({
-  data,
-  defaultExpandDepth = 0,
-  className,
-  showCopy = false,
-  bulkDepth: controlledBulkDepth,
-  bulkRevision: controlledBulkRevision,
-  anatomyPaths = null,
-  expandToPath = null,
-}: JsonViewerProps): JSX.Element {
-  const expandable = isExpandable(data);
-  const entries = useMemo(() => getEntries(data), [data]);
-
-  const bulkDepth = controlledBulkDepth ?? defaultExpandDepth;
-  const bulkRevision = controlledBulkRevision ?? 0;
-
-  if (!expandable) {
-    return (
-      <TooltipProvider>
-        <div className={cn("font-mono text-xs leading-relaxed", className)}>
-          <div className="flex items-center gap-1">
-            <PrimitiveValue value={data} />
-            {showCopy && <CopyValueButton value={data} />}
-          </div>
-        </div>
-      </TooltipProvider>
-    );
-  }
-
-  const dataType = classifyValue(data);
-  const isArray = dataType === "array";
-
-  return (
-    <TooltipProvider>
-      <div className={cn("font-mono text-xs leading-relaxed", className)}>
-        {showCopy && (
-          <div className="mb-2 flex items-center justify-end gap-2">
-            <CopyValueButton value={data} />
-          </div>
-        )}
-        {entries.length === 0 && (
-          <div className="rounded-md border border-white/10 bg-black/20 px-3 py-2 text-muted-foreground">
-            <span className="text-cyan-300">{isArray ? "[]" : "{}"}</span>
-            <span className="ml-2 text-[10px] uppercase">0 items</span>
-          </div>
-        )}
-        <div key={bulkRevision}>
-          {entries.map(([key, childValue]) => (
-            <JsonNode
-              key={key}
-              name={key}
-              value={childValue}
-              level={0}
-              defaultExpandDepth={bulkDepth}
-              isArrayItem={isArray}
-              path={`/${key}`}
-              expandTargetPath={expandToPath}
-              anatomyPaths={anatomyPaths}
-            />
-          ))}
-        </div>
-      </div>
-    </TooltipProvider>
-  );
-}
-
-export type JsonViewerFromStringProps = {
-  text: string;
-  defaultExpandDepth?: number;
-  className?: string;
-  /**
-   * Forwarded to the inner `JsonViewer` so that a parent bulk-expansion
-   * controller (e.g. the header's Expand-all button) can expand/collapse
-   * all nodes. `JsonViewer` falls back to `defaultExpandDepth` when both
-   * are unset.
-   */
-  bulkDepth?: number;
-  bulkRevision?: number;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-shadow -- named function gives React DevTools a readable displayName
-export const JsonViewerFromString = memo(function JsonViewerFromString({
-  text,
-  defaultExpandDepth = 0,
-  className,
-  bulkDepth,
-  bulkRevision,
-}: JsonViewerFromStringProps): JSX.Element {
-  const parsed = useMemo(() => parseJsonText(text), [text]);
-
-  if (parsed.kind === "json") {
-    return (
-      <JsonViewer
-        data={parsed.data}
-        defaultExpandDepth={defaultExpandDepth}
-        className={className}
-        bulkDepth={bulkDepth}
-        bulkRevision={bulkRevision}
-      />
-    );
-  }
-
-  return (
-    <pre className={cn("font-mono text-xs whitespace-pre-wrap break-words", className)}>{text}</pre>
-  );
-});

package/src/components/ui/scroll-area.tsx

@@ -1,54 +0,0 @@
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): React.JSX.Element {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative overflow-hidden", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full max-h-[inherit] rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  );
-}
-
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): React.JSX.Element {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
-        className,
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  );
-}
-
-export { ScrollArea, ScrollBar };