@tonyclaw/agent-inspector 4.0.1 → 4.0.2

package/src/components/proxy-viewer/useKeyboardNavigation.ts

@@ -1,232 +0,0 @@
-import { useCallback, useEffect } from "react";
-
-const NAV_ATTR = "data-nav-id";
-const NAV_ACTION_ATTR = "data-nav-action";
-
-export type NavAction = "toggle" | "expand" | "collapse";
-
-type KeyboardNavigationOptions = {
-  /** When true, Arrow/WASD navigation works even when focus is on the page body. */
-  pageWide?: boolean;
-};
-
-function findNavItems(container: HTMLElement): HTMLElement[] {
-  return Array.from(container.querySelectorAll<HTMLElement>(`[${NAV_ATTR}]`));
-}
-
-function isFocusTarget(node: EventTarget | null): node is HTMLElement {
-  return node instanceof HTMLElement;
-}
-
-function findClosestNavItem(target: HTMLElement, container: HTMLElement): HTMLElement | null {
-  let el: HTMLElement | null = target;
-  while (el !== null && el !== container) {
-    if (el.hasAttribute(NAV_ATTR)) return el;
-    el = el.parentElement;
-  }
-  if (target.hasAttribute(NAV_ATTR)) return target;
-  return null;
-}
-
-function getAction(el: HTMLElement): NavAction | null {
-  const val = el.getAttribute(NAV_ACTION_ATTR);
-  if (val === "toggle" || val === "expand" || val === "collapse") return val;
-  return null;
-}
-
-function focusAndScroll(el: HTMLElement): void {
-  el.focus({ preventScroll: true });
-  el.scrollIntoView({ block: "nearest", behavior: "smooth" });
-}
-
-function safeItemAt(items: HTMLElement[], index: number): HTMLElement | null {
-  const el = items[index];
-  return el ?? null;
-}
-
-function isEditableTarget(target: HTMLElement): boolean {
-  const tag = target.tagName;
-  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
-  if (target.isContentEditable) return true;
-  return false;
-}
-
-function isInteractiveTarget(target: HTMLElement): boolean {
-  const tag = target.tagName;
-  if (tag === "BUTTON" || tag === "A") return true;
-  if (isEditableTarget(target)) return true;
-  return target.closest("[role='button'],[role='menuitem'],[role='option']") !== null;
-}
-
-function isInOpenOverlay(target: HTMLElement): boolean {
-  if (target.closest("[role='dialog'],[role='menu'],[role='listbox']") !== null) return true;
-  return document.querySelector("[role='dialog'],[role='menu'],[role='listbox']") !== null;
-}
-
-function hasActiveTextSelection(): boolean {
-  const selection = window.getSelection();
-  if (selection === null) return false;
-  return selection.type === "Range" && selection.toString().length > 0;
-}
-
-function isLetterNavigationKey(event: KeyboardEvent, key: "W" | "A" | "S" | "D"): boolean {
-  return event.key === key && event.shiftKey;
-}
-
-/**
- * Enables keyboard navigation within a log-list container.
- *
- * Navigation keys:
- * - ArrowUp / Shift+W : previous thread/turn/log item
- * - ArrowDown / Shift+S : next thread/turn/log item
- * - ArrowLeft / Shift+A : collapse or move to previous item
- * - ArrowRight / Shift+D : expand or move to next item
- * - Space : toggle expand/collapse
- *
- * Attach `data-nav-id` to any focusable navigation item.
- * Attach `data-nav-action` ("toggle" | "expand" | "collapse") for items
- * that support expand/collapse.
- */
-export function useKeyboardNavigation(
-  /** Ref to the inner container that holds all nav items. */
-  containerRef: React.RefObject<HTMLElement | null>,
-  /** Ref to the outer focus-receiving wrapper (the one with tabIndex).
-   *  Defaults to `containerRef` when omitted. */
-  wrapperRef?: React.RefObject<HTMLElement | null>,
-  options: KeyboardNavigationOptions = {},
-): void {
-  const rootRef = wrapperRef ?? containerRef;
-  const pageWide = options.pageWide === true;
-
-  const handleFocusContainer = useCallback(
-    (e: FocusEvent) => {
-      const container = containerRef.current;
-      const root = rootRef.current;
-      if (!container) return;
-      if (!root) return;
-      const target = e.target;
-      if (!isFocusTarget(target)) return;
-      if (target !== root) return;
-      const items = findNavItems(container);
-      const first = safeItemAt(items, 0);
-      if (first !== null) focusAndScroll(first);
-    },
-    [containerRef, rootRef],
-  );
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.altKey || e.ctrlKey || e.metaKey) return;
-
-      const container = containerRef.current;
-      if (!container) return;
-
-      const target = e.target;
-      if (!isFocusTarget(target)) return;
-
-      if (isEditableTarget(target)) return;
-      if (hasActiveTextSelection()) return;
-
-      const isInsideContainer = container.contains(target);
-      if (isInsideContainer && isInteractiveTarget(target) && !target.hasAttribute(NAV_ATTR)) {
-        return;
-      }
-
-      if (!isInsideContainer) {
-        if (!pageWide) return;
-        if (isInteractiveTarget(target) || isInOpenOverlay(target)) return;
-      }
-
-      const items = findNavItems(container);
-      if (items.length === 0) return;
-
-      const current = findClosestNavItem(target, container);
-      const currentIdx = current !== null ? items.indexOf(current) : -1;
-
-      let handled = false;
-
-      switch (e.key) {
-        case "ArrowUp":
-        case "W": {
-          if (e.shiftKey && e.key === "ArrowUp") break;
-          if (e.key === "W" && !isLetterNavigationKey(e, "W")) break;
-          e.preventDefault();
-          const prevIdx =
-            currentIdx > 0 ? currentIdx - 1 : currentIdx === -1 ? items.length - 1 : -1;
-          if (prevIdx !== -1) {
-            const prev = safeItemAt(items, prevIdx);
-            if (prev !== null) focusAndScroll(prev);
-          }
-          handled = true;
-          break;
-        }
-        case "ArrowDown":
-        case "S": {
-          if (e.shiftKey && e.key === "ArrowDown") break;
-          if (e.key === "S" && !isLetterNavigationKey(e, "S")) break;
-          e.preventDefault();
-          const nextIdx =
-            currentIdx < items.length - 1 ? currentIdx + 1 : currentIdx === -1 ? 0 : -1;
-          if (nextIdx !== -1) {
-            const next = safeItemAt(items, nextIdx);
-            if (next !== null) focusAndScroll(next);
-          }
-          handled = true;
-          break;
-        }
-        case "ArrowLeft":
-        case "A": {
-          if (e.shiftKey && e.key === "ArrowLeft") break;
-          if (e.key === "A" && !isLetterNavigationKey(e, "A")) break;
-          if (current === null) break;
-          e.preventDefault();
-          const action = getAction(current);
-          if (action === "collapse") {
-            current.click();
-          } else if (currentIdx > 0) {
-            const prev = safeItemAt(items, currentIdx - 1);
-            if (prev !== null) focusAndScroll(prev);
-          }
-          handled = true;
-          break;
-        }
-        case "ArrowRight":
-        case "D": {
-          if (e.shiftKey && e.key === "ArrowRight") break;
-          if (e.key === "D" && !isLetterNavigationKey(e, "D")) break;
-          if (current === null) break;
-          e.preventDefault();
-          const action = getAction(current);
-          if (action === "expand") {
-            current.click();
-          } else if (currentIdx < items.length - 1) {
-            const next = safeItemAt(items, currentIdx + 1);
-            if (next !== null) focusAndScroll(next);
-          }
-          handled = true;
-          break;
-        }
-        case " ": {
-          if (current === null) break;
-          e.preventDefault();
-          const action = getAction(current);
-          if (action !== null) current.click();
-          handled = true;
-          break;
-        }
-      }
-
-      if (handled) {
-        e.stopPropagation();
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown, { capture: true });
-    return () => document.removeEventListener("keydown", handleKeyDown, { capture: true });
-  }, [containerRef, pageWide, rootRef]);
-
-  useEffect(() => {
-    document.addEventListener("focusin", handleFocusContainer);
-    return () => document.removeEventListener("focusin", handleFocusContainer);
-  }, [handleFocusContainer]);
-}

package/src/components/proxy-viewer/viewerState.ts

@@ -1,176 +0,0 @@
-import { extractStopReason, isTurnBoundary, type StopReason } from "../../lib/stopReason";
-import type { CapturedLog } from "../../contracts";
-import {
-  extractToolTraceEvents as extractSharedToolTraceEvents,
-  type ToolTraceEvent,
-} from "../../lib/toolTrace";
-import { resolveLogFormat } from "./log-formats";
-
-export type { ToolTraceEvent };
-
-export type TurnEntry = {
-  log: CapturedLog;
-  stopReason: StopReason;
-  sessionLogNumber: number;
-};
-
-export type TurnGroupData = {
-  entries: TurnEntry[];
-  turnIndex: number;
-};
-
-type ConversationLike = {
-  logs: CapturedLog[];
-};
-
-export type TraceSummary = {
-  llmCallCount: number;
-  toolCallCount: number;
-  failedCallCount: number;
-  pendingCallCount: number;
-  slowCallCount: number;
-  totalInputTokens: number;
-  totalOutputTokens: number;
-  totalCacheCreationInputTokens: number;
-  totalCacheReadInputTokens: number;
-  totalElapsedMs: number;
-  maxElapsedMs: number | null;
-  startedAt: string | null;
-  endedAt: string | null;
-  knowledgeCandidateCount: number;
-};
-
-type ToolTraceCacheEntry = {
-  apiFormat: CapturedLog["apiFormat"];
-  responseText: string | null;
-  toolTraceEvents: CapturedLog["toolTraceEvents"];
-  events: ToolTraceEvent[];
-};
-
-const toolTraceCache = new WeakMap<CapturedLog, ToolTraceCacheEntry>();
-
-export function isTurnCollapsible(entryCount: number): boolean {
-  return entryCount > 1;
-}
-
-export function buildTurnGroups(logs: CapturedLog[]): TurnGroupData[] {
-  const groups: TurnGroupData[] = [];
-  let entries: TurnEntry[] = [];
-  let turnIndex = 0;
-
-  for (let index = 0; index < logs.length; index += 1) {
-    const log = logs[index];
-    if (log === undefined) continue;
-    entries.push({ log, stopReason: extractStopReason(log), sessionLogNumber: index + 1 });
-    const current = entries[entries.length - 1];
-    if (current !== undefined && isTurnBoundary(current.stopReason)) {
-      groups.push({ entries, turnIndex });
-      entries = [];
-      turnIndex += 1;
-    }
-  }
-
-  if (entries.length > 0) groups.push({ entries, turnIndex });
-  return groups;
-}
-
-export function buildValidPredecessors(groups: ConversationLike[]): Map<number, CapturedLog> {
-  const predecessors = new Map<number, CapturedLog>();
-
-  for (const group of groups) {
-    for (let index = 1; index < group.logs.length; index += 1) {
-      const current = group.logs[index];
-      const previous = group.logs[index - 1];
-      if (current === undefined || previous === undefined) continue;
-      const currentFormat = resolveLogFormat(current);
-      const previousFormat = resolveLogFormat(previous);
-      if (currentFormat === "unknown" || currentFormat !== previousFormat) continue;
-      predecessors.set(current.id, previous);
-    }
-  }
-
-  return predecessors;
-}
-
-export function extractToolTraceEvents(log: CapturedLog): ToolTraceEvent[] {
-  const cached = toolTraceCache.get(log);
-  if (
-    cached !== undefined &&
-    cached.apiFormat === log.apiFormat &&
-    cached.responseText === log.responseText &&
-    cached.toolTraceEvents === log.toolTraceEvents
-  ) {
-    return cached.events;
-  }
-
-  const events = extractSharedToolTraceEvents(log);
-  toolTraceCache.set(log, {
-    apiFormat: log.apiFormat,
-    responseText: log.responseText,
-    toolTraceEvents: log.toolTraceEvents,
-    events,
-  });
-  return events;
-}
-
-export function buildTraceSummary(
-  logs: CapturedLog[],
-  slowResponseThresholdSeconds: number,
-  knowledgeCandidateCount = 0,
-): TraceSummary {
-  let failedCallCount = 0;
-  let pendingCallCount = 0;
-  let slowCallCount = 0;
-  let totalInputTokens = 0;
-  let totalOutputTokens = 0;
-  let totalCacheCreationInputTokens = 0;
-  let totalCacheReadInputTokens = 0;
-  let totalElapsedMs = 0;
-  let maxElapsedMs: number | null = null;
-  let toolCallCount = 0;
-
-  for (const log of logs) {
-    if (log.responseStatus === null) {
-      pendingCallCount += 1;
-    } else if (log.responseStatus >= 400) {
-      failedCallCount += 1;
-    }
-    if (
-      log.elapsedMs !== null &&
-      slowResponseThresholdSeconds > 0 &&
-      log.elapsedMs > slowResponseThresholdSeconds * 1000
-    ) {
-      slowCallCount += 1;
-    }
-    if (log.inputTokens !== null) totalInputTokens += log.inputTokens;
-    if (log.outputTokens !== null) totalOutputTokens += log.outputTokens;
-    if (log.cacheCreationInputTokens !== null) {
-      totalCacheCreationInputTokens += log.cacheCreationInputTokens;
-    }
-    if (log.cacheReadInputTokens !== null) {
-      totalCacheReadInputTokens += log.cacheReadInputTokens;
-    }
-    if (log.elapsedMs !== null) {
-      totalElapsedMs += log.elapsedMs;
-      maxElapsedMs = maxElapsedMs === null ? log.elapsedMs : Math.max(maxElapsedMs, log.elapsedMs);
-    }
-    toolCallCount += extractToolTraceEvents(log).length;
-  }
-
-  return {
-    llmCallCount: logs.length,
-    toolCallCount,
-    failedCallCount,
-    pendingCallCount,
-    slowCallCount,
-    totalInputTokens,
-    totalOutputTokens,
-    totalCacheCreationInputTokens,
-    totalCacheReadInputTokens,
-    totalElapsedMs,
-    maxElapsedMs,
-    startedAt: logs[0]?.timestamp ?? null,
-    endedAt: logs[logs.length - 1]?.timestamp ?? null,
-    knowledgeCandidateCount,
-  };
-}

package/src/components/ui/badge.tsx

@@ -1,47 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 [a&]:hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-function Badge({
-  className,
-  variant = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }): React.JSX.Element {
-  const Comp = asChild ? Slot.Root : "span";
-
-  return (
-    <Comp
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -1,47 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants>): React.JSX.Element {
-  return (
-    <button
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };

package/src/components/ui/collapsible.tsx

@@ -1,21 +0,0 @@
-import { Collapsible as CollapsiblePrimitive } from "radix-ui";
-
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>): React.JSX.Element {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
-}
-
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): React.JSX.Element {
-  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
-}
-
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): React.JSX.Element {
-  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/components/ui/confirm-dialog.tsx

@@ -1,51 +0,0 @@
-import { type JSX } from "react";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
-import { Button } from "../ui/button";
-
-export type ConfirmDialogVariant = "default" | "destructive";
-
-export type ConfirmDialogProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: string;
-  description: string;
-  confirmLabel?: string;
-  variant?: ConfirmDialogVariant;
-  onConfirm: () => void;
-};
-
-export function ConfirmDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  confirmLabel = "Confirm",
-  variant = "default",
-  onConfirm,
-}: ConfirmDialogProps): JSX.Element {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-        </DialogHeader>
-        <p className="text-sm text-muted-foreground">{description}</p>
-        <div className="flex justify-end gap-2 pt-2">
-          <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button
-            variant={variant}
-            size="sm"
-            onClick={() => {
-              onConfirm();
-              onOpenChange(false);
-            }}
-          >
-            {confirmLabel}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ui/crab-logo.tsx

@@ -1,45 +0,0 @@
-import type { JSX } from "react";
-import { cn } from "../../lib/utils";
-
-/**
- * Small inline-SVG crab mark used in the inspector header. Stroke-based so
- * the colour follows `currentColor` — pair with a Tailwind text colour class
- * (e.g. `text-amber-500`) to recolour without editing the SVG. Sized to
- * match the title text by default; pass `className` to override.
- *
- * Plays on the project owner's `TonyClaw` handle and keeps the title bar
- * visually distinct in the same way Claude Code's CLI uses a small
- * block-cursor mark next to its name.
- */
-export function CrabLogo({ className }: { className?: string }): JSX.Element {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      className={cn("inline-block size-5", className)}
-    >
-      {/* Body */}
-      <path d="M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z" />
-      {/* Left claw */}
-      <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
-      {/* Right claw */}
-      <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
-      {/* Eye stalks */}
-      <line x1="10" y1="7" x2="9.5" y2="5" />
-      <line x1="14" y1="7" x2="14.5" y2="5" />
-      {/* Eyes */}
-      <circle cx="9.5" cy="4.5" r="0.9" fill="currentColor" stroke="none" />
-      <circle cx="14.5" cy="4.5" r="0.9" fill="currentColor" stroke="none" />
-      {/* Legs */}
-      <line x1="6.5" y1="16" x2="4.5" y2="19.5" />
-      <line x1="9" y1="17.5" x2="8" y2="20.5" />
-      <line x1="15" y1="17.5" x2="16" y2="20.5" />
-      <line x1="17.5" y1="16" x2="19.5" y2="19.5" />
-    </svg>
-  );
-}