@tonyclaw/agent-inspector 2.0.0

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

@@ -0,0 +1,190 @@
+import { useCallback, useEffect } from "react";
+
+const NAV_ATTR = "data-nav-id";
+const NAV_ACTION_ATTR = "data-nav-action";
+
+export type NavAction = "toggle" | "expand" | "collapse";
+
+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") return true;
+  if (target.isContentEditable) return true;
+  return false;
+}
+
+/**
+ * Enables keyboard navigation within a log-list container.
+ *
+ * Navigation keys:
+ * - ArrowUp / Shift+W : previous item
+ * - ArrowDown / Shift+S : next item
+ * - ArrowLeft / Shift+A : collapse or move to prev 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>,
+): void {
+  const rootRef = wrapperRef ?? containerRef;
+
+  const handleFocusContainer = useCallback(
+    (e: FocusEvent) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const target = e.target;
+      if (!isFocusTarget(target)) return;
+      if (target !== rootRef.current) return;
+      if (!container.contains(target)) return;
+      const items = findNavItems(container);
+      const first = safeItemAt(items, 0);
+      if (first !== null) focusAndScroll(first);
+    },
+    [containerRef, rootRef],
+  );
+
+  useEffect(() => {
+    const root = rootRef.current;
+    const container = containerRef.current;
+    if (!root || !container) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const target = e.target;
+      if (!isFocusTarget(target)) return;
+
+      if (!container.contains(target)) return;
+
+      if (isEditableTarget(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.key === "W" && !e.shiftKey) 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.key === "S" && !e.shiftKey) 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.key === "A" && !e.shiftKey) 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.key === "D" && !e.shiftKey) 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, rootRef]);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    root.addEventListener("focus", handleFocusContainer);
+    return () => root.removeEventListener("focus", handleFocusContainer);
+  }, [handleFocusContainer, rootRef]);
+}

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

@@ -0,0 +1,66 @@
+import { extractStopReason, isTurnBoundary, type StopReason } from "../../lib/stopReason";
+import type { CapturedLog } from "../../proxy/schemas";
+import { resolveLogFormat } from "./log-formats";
+
+export type TurnEntry = {
+  log: CapturedLog;
+  stopReason: StopReason;
+};
+
+export type TurnGroupData = {
+  entries: TurnEntry[];
+  turnIndex: number;
+};
+
+type ConversationLike = {
+  logs: CapturedLog[];
+};
+
+export function shouldRenderConversationContent(standalone: boolean, expanded: boolean): boolean {
+  return standalone || expanded;
+}
+
+export function isTurnCollapsible(
+  entryCount: number,
+  isComplete: boolean,
+  isPending: boolean,
+): boolean {
+  return entryCount > 1 && isComplete && !isPending;
+}
+
+export function buildTurnGroups(logs: CapturedLog[]): TurnGroupData[] {
+  const groups: TurnGroupData[] = [];
+  let entries: TurnEntry[] = [];
+  let turnIndex = 0;
+
+  for (const log of logs) {
+    entries.push({ log, stopReason: extractStopReason(log) });
+    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;
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,95 @@
+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" />
+      {/* Duanwu zongzi charms */}
+      <g>
+        <path
+          d="M5.6 17.7 L8.4 15.4 L10.8 18 C9.1 18.9 7.2 18.8 5.6 17.7 Z"
+          fill="#2f6b3f"
+          stroke="none"
+          opacity="0.95"
+        />
+        <path
+          d="M6.9 17.5 L8.4 16 L9.8 17.7 C8.9 18.1 7.8 18.1 6.9 17.5 Z"
+          fill="#6fb36f"
+          stroke="none"
+          opacity="0.95"
+        />
+        <path d="M8.4 16 L8.4 18.4" stroke="#d6b45f" strokeWidth="0.34" />
+        <circle cx="10.6" cy="17.75" r="0.36" fill="#c2412d" stroke="none" />
+      </g>
+      <g>
+        <path
+          d="M8 16.5 L11.9 13.6 L15.8 16.8 C13.3 18.4 10.4 18.3 8 16.5 Z"
+          fill="#2f6b3f"
+          stroke="none"
+          opacity="0.97"
+        />
+        <path
+          d="M9.8 16.3 L11.9 14.4 L14.3 16.5 C12.8 17.4 11.3 17.4 9.8 16.3 Z"
+          fill="#6fb36f"
+          stroke="none"
+          opacity="0.95"
+        />
+        <path d="M11.9 14.3 L11.9 17.8" stroke="#d6b45f" strokeWidth="0.42" />
+        <path d="M9.8 16.3 C11.2 15.8 12.9 15.9 14.3 16.5" stroke="#9fca78" strokeWidth="0.36" />
+        <circle cx="15.6" cy="16.75" r="0.43" fill="#c2412d" stroke="none" />
+      </g>
+      <g>
+        <path
+          d="M13.6 18.1 L16.2 15.7 L18.5 18.2 C17.1 19.1 15.2 19 13.6 18.1 Z"
+          fill="#2f6b3f"
+          stroke="none"
+          opacity="0.95"
+        />
+        <path
+          d="M14.8 17.9 L16.2 16.3 L17.5 18 C16.6 18.4 15.7 18.4 14.8 17.9 Z"
+          fill="#6fb36f"
+          stroke="none"
+          opacity="0.95"
+        />
+        <path d="M16.2 16.3 L16.2 18.6" stroke="#d6b45f" strokeWidth="0.34" />
+        <circle cx="18.35" cy="18.15" r="0.36" fill="#c2412d" stroke="none" />
+      </g>
+    </svg>
+  );
+}