@tonyclaw/agent-inspector 4.0.1 → 4.0.3

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

@@ -1,467 +0,0 @@
-import type { JSX } from "react";
-import { cn } from "../../lib/utils";
-
-type CrabVariantProps = { className?: string; style?: React.CSSProperties };
-
-function SvgShell({
-  className,
-  style,
-  d,
-  eyeStalks,
-  eyes,
-  legs,
-  extras,
-}: CrabVariantProps & {
-  d: string;
-  eyeStalks: JSX.Element;
-  eyes: JSX.Element;
-  legs: JSX.Element;
-  extras?: JSX.Element;
-}): JSX.Element {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      style={style}
-      className={cn("inline-block size-5", className)}
-    >
-      <path d={d} />
-      {eyeStalks}
-      {eyes}
-      {legs}
-      {extras}
-    </svg>
-  );
-}
-
-// Shared legs
-const StdLegs = (
-  <>
-    <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" />
-  </>
-);
-
-const ShortLegs = (
-  <>
-    <line x1="7" y1="16" x2="5.5" y2="18.5" />
-    <line x1="9.5" y1="17" x2="8.5" y2="19.5" />
-    <line x1="14.5" y1="17" x2="15.5" y2="19.5" />
-    <line x1="17" y1="16" x2="18.5" y2="18.5" />
-  </>
-);
-
-// ── 1. Classic ──
-function Crab1({ className }: CrabVariantProps): JSX.Element {
-  return (
-    <SvgShell
-      className={className}
-      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"
-      eyeStalks={
-        <>
-          <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={StdLegs}
-      extras={
-        <>
-          <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
-          <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
-        </>
-      }
-    />
-  );
-}
-
-// ── 2. Round (chubby) ──
-function Crab2({ className }: CrabVariantProps): JSX.Element {
-  return (
-    <SvgShell
-      className={className}
-      d="M4 13 C4 7 7.5 5.5 12 5.5 C16.5 5.5 20 7 20 13 C20 17.5 16.5 19 12 19 C7.5 19 4 17.5 4 13 Z"
-      eyeStalks={
-        <>
-          <line x1="9.5" y1="6.5" x2="9.5" y2="4.5" />
-          <line x1="14.5" y1="6.5" x2="14.5" y2="4.5" />
-        </>
-      }
-      eyes={
-        <>
-          <circle cx="9.5" cy="4" r="1.1" fill="currentColor" stroke="none" />
-          <circle cx="14.5" cy="4" r="1.1" fill="currentColor" stroke="none" />
-        </>
-      }
-      legs={ShortLegs}
-      extras={
-        <>
-          <path d="M5 11 C4 9.5 2.5 10 3 12 C3.5 13.5 4.5 13 5 12" />
-          <path d="M19 11 C20 9.5 21.5 10 21 12 C20.5 13.5 19.5 13 19 12" />
-        </>
-      }
-    />
-  );
-}
-
-// ── 3. Wide (pancake) ──
-function Crab3({ className }: CrabVariantProps): JSX.Element {
-  return (
-    <SvgShell
-      className={className}
-      d="M3 13.5 C3 8 7 6 12 6 C17 6 21 8 21 13.5 C21 17 17 19 12 19 C7 19 3 17 3 13.5 Z"
-      eyeStalks={
-        <>
-          <line x1="7" y1="7" x2="6.5" y2="4.5" />
-          <line x1="17" y1="7" x2="17.5" y2="4.5" />
-        </>
-      }
-      eyes={
-        <>
-          <circle cx="6.5" cy="4" r="0.8" fill="currentColor" stroke="none" />
-          <circle cx="17.5" cy="4" r="0.8" fill="currentColor" stroke="none" />
-        </>
-      }
-      legs={StdLegs}
-      extras={
-        <>
-          <path d="M4 12 C2.5 10.5 1 11 1.5 13 C2 14.5 3.5 14 4.5 13" />
-          <path d="M20 12 C21.5 10.5 23 11 22.5 13 C22 14.5 20.5 14 19.5 13" />
-        </>
-      }
-    />
-  );
-}
-
-// ── 4. Tall (stretch) ──
-function Crab4({ className }: CrabVariantProps): JSX.Element {
-  return (
-    <SvgShell
-      className={className}
-      d="M6 14 C6 8 9 5.5 12 5.5 C15 5.5 18 8 18 14 C18 18 15 20 12 20 C9 20 6 18 6 14 Z"
-      eyeStalks={
-        <>
-          <line x1="10" y1="6.5" x2="10" y2="3.5" />
-          <line x1="14" y1="6.5" x2="14" y2="3.5" />
-        </>
-      }
-      eyes={
-        <>
-          <circle cx="10" cy="3" r="0.7" fill="currentColor" stroke="none" />
-          <circle cx="14" cy="3" r="0.7" fill="currentColor" stroke="none" />
-        </>
-      }
-      legs={
-        <>
-          <line x1="7" y1="17" x2="5" y2="20.5" />
-          <line x1="9.5" y1="18.5" x2="8.5" y2="21.5" />
-          <line x1="14.5" y1="18.5" x2="15.5" y2="21.5" />
-          <line x1="17" y1="17" x2="19" y2="20.5" />
-        </>
-      }
-      extras={
-        <>
-          <path d="M6.5 11 C5 8.5 3 9 3.5 11.5 C4 13.5 5 13 6 12" />
-          <path d="M17.5 11 C19 8.5 21 9 20.5 11.5 C20 13.5 19 13 18 12" />
-        </>
-      }
-    />
-  );
-}
-
-// ── 5. Spiky ──
-function Crab5({ className }: CrabVariantProps): JSX.Element {
-  return (
-    <SvgShell
-      className={className}
-      d="M5 13 C5 9 8 7 12 7 L13 4 L14 7 C16 7 19 9 19 13 C19 16 16 18 13 18 L12 21 L11 18 C8 18 5 16 5 13 Z"
-      eyeStalks={
-        <>
-          <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.8" fill="currentColor" stroke="none" />
-          <circle cx="14.5" cy="4.5" r="0.8" fill="currentColor" stroke="none" />
-        </>
-      }
-      legs={StdLegs}
-      extras={
-        <>
-          <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
-          <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
-        </>
-      }
-    />
-  );
-}
-
-// ── 6. Wink ──
-function Crab6({ className }: CrabVariantProps): JSX.Element {
-  return (
-    <SvgShell
-      className={className}
-      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"
-      eyeStalks={
-        <>
-          <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" />
-          <line x1="13.5" y1="4" x2="15.5" y2="5" />
-        </>
-      }
-      legs={StdLegs}
-      extras={
-        <>
-          <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
-          <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
-        </>
-      }
-    />
-  );
-}
-
-// ── 7. Sleepy ──
-function Crab7({ className }: CrabVariantProps): JSX.Element {
-  return (
-    <SvgShell
-      className={className}
-      d="M5.5 13.5 C5.5 10 8.5 8 12 8 C15.5 8 18.5 10 18.5 13.5 C18.5 16 15.5 17.5 12 17.5 C8.5 17.5 5.5 16 5.5 13.5 Z"
-      eyeStalks={
-        <>
-          <line x1="10" y1="8" x2="10" y2="6" />
-          <line x1="14" y1="8" x2="14" y2="6" />
-        </>
-      }
-      eyes={
-        <>
-          <line x1="9" y1="6" x2="11" y2="6.5" />
-          <line x1="13" y1="6" x2="15" y2="6.5" />
-        </>
-      }
-      legs={ShortLegs}
-      extras={
-        <>
-          <path d="M6 11.5 C4.5 10.5 3 11 3.5 12.5 C4 13.5 5 13 5.5 12.5" />
-          <path d="M18 11.5 C19.5 10.5 21 11 20.5 12.5 C20 13.5 19 13 18.5 12.5" />
-        </>
-      }
-    />
-  );
-}
-
-// ── 8. Grumpy (angry brows) ──
-function Crab8({ className }: CrabVariantProps): JSX.Element {
-  return (
-    <SvgShell
-      className={className}
-      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"
-      eyeStalks={
-        <>
-          <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.7" fill="currentColor" stroke="none" />
-          <circle cx="14.5" cy="4.5" r="0.7" fill="currentColor" stroke="none" />
-        </>
-      }
-      legs={StdLegs}
-      extras={
-        <>
-          <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
-          <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
-          {/* Angry brows */}
-          <line x1="8.5" y1="4" x2="10.5" y2="4.5" />
-          <line x1="15.5" y1="4" x2="13.5" y2="4.5" />
-          {/* Frown */}
-          <path d="M9 15.5 C10 14.5 14 14.5 15 15.5" />
-        </>
-      }
-    />
-  );
-}
-
-// ── 9. Surprised ──
-function Crab9({ className }: CrabVariantProps): JSX.Element {
-  return (
-    <SvgShell
-      className={className}
-      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"
-      eyeStalks={
-        <>
-          <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="1.2" fill="none" stroke="currentColor" />
-          <circle cx="14.5" cy="4.5" r="1.2" fill="none" stroke="currentColor" />
-        </>
-      }
-      legs={StdLegs}
-      extras={
-        <>
-          <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
-          <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
-          {/* Open mouth */}
-          <ellipse cx="12" cy="15" rx="2" ry="1.5" fill="currentColor" stroke="none" />
-        </>
-      }
-    />
-  );
-}
-
-// ── 10. Happy (big smile) ──
-function Crab10({ className }: CrabVariantProps): JSX.Element {
-  return (
-    <SvgShell
-      className={className}
-      d="M4.5 13 C4.5 8 7.5 6 12 6 C16.5 6 19.5 8 19.5 13 C19.5 17 16.5 18.5 12 18.5 C7.5 18.5 4.5 17 4.5 13 Z"
-      eyeStalks={
-        <>
-          <line x1="9.5" y1="7" x2="9" y2="5" />
-          <line x1="14.5" y1="7" x2="15" y2="5" />
-        </>
-      }
-      eyes={
-        <>
-          <circle cx="9" cy="4.5" r="1" fill="currentColor" stroke="none" />
-          <circle cx="15" cy="4.5" r="1" fill="currentColor" stroke="none" />
-        </>
-      }
-      legs={StdLegs}
-      extras={
-        <>
-          <path d="M5 11 C3.5 9 2 9.5 2.5 12 C3 14 4 13 5 12" />
-          <path d="M19 11 C20.5 9 22 9.5 21.5 12 C21 14 20 13 19 12" />
-          {/* Smile */}
-          <path d="M9 14.5 C10 16 14 16 15 14.5" />
-          {/* Rosy cheeks */}
-          <circle cx="7" cy="13" r="1" fill="currentColor" stroke="none" opacity="0.3" />
-          <circle cx="17" cy="13" r="1" fill="currentColor" stroke="none" opacity="0.3" />
-        </>
-      }
-    />
-  );
-}
-
-// ── 11. Cool (sunglasses) ──
-function Crab11({ className }: CrabVariantProps): JSX.Element {
-  return (
-    <SvgShell
-      className={className}
-      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"
-      eyeStalks={
-        <>
-          <line x1="10" y1="7" x2="9.5" y2="5.5" />
-          <line x1="14" y1="7" x2="14.5" y2="5.5" />
-        </>
-      }
-      eyes={
-        <>
-          {/* Sunglasses bar */}
-          <line x1="7.5" y1="5.5" x2="16.5" y2="5.5" />
-          <rect x="7" y="5" width="4" height="2" rx="0.5" fill="currentColor" stroke="none" />
-          <rect x="13" y="5" width="4" height="2" rx="0.5" fill="currentColor" stroke="none" />
-        </>
-      }
-      legs={StdLegs}
-      extras={
-        <>
-          <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
-          <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
-          {/* Cool smile */}
-          <path d="M9.5 15 C10.5 16 13.5 16 14.5 15" />
-        </>
-      }
-    />
-  );
-}
-
-// ── 12. Baby (tiny, cute) ──
-function Crab12({ className }: CrabVariantProps): JSX.Element {
-  return (
-    <SvgShell
-      className={className}
-      d="M7 13.5 C7 10.5 9.5 9 12 9 C14.5 9 17 10.5 17 13.5 C17 16 14.5 17.5 12 17.5 C9.5 17.5 7 16 7 13.5 Z"
-      eyeStalks={
-        <>
-          <line x1="10.5" y1="9.5" x2="10.5" y2="8" />
-          <line x1="13.5" y1="9.5" x2="13.5" y2="8" />
-        </>
-      }
-      eyes={
-        <>
-          <circle cx="10.5" cy="7.5" r="0.8" fill="currentColor" stroke="none" />
-          <circle cx="13.5" cy="7.5" r="0.8" fill="currentColor" stroke="none" />
-        </>
-      }
-      legs={
-        <>
-          <line x1="8" y1="16" x2="6.5" y2="18" />
-          <line x1="10" y1="17" x2="9.5" y2="19" />
-          <line x1="14" y1="17" x2="14.5" y2="19" />
-          <line x1="16" y1="16" x2="17.5" y2="18" />
-        </>
-      }
-      extras={
-        <>
-          <path d="M7.5 12 C6.5 11 5.5 11.5 6 13 C6.5 14 7 13.5 7.5 13" />
-          <path d="M16.5 12 C17.5 11 18.5 11.5 18 13 C17.5 14 17 13.5 16.5 13" />
-        </>
-      }
-    />
-  );
-}
-
-export const crabVariants: ((props: CrabVariantProps) => JSX.Element)[] = [
-  Crab1,
-  Crab2,
-  Crab3,
-  Crab4,
-  Crab5,
-  Crab6,
-  Crab7,
-  Crab8,
-  Crab9,
-  Crab10,
-  Crab11,
-  Crab12,
-];
-
-export function getCrabVariant(index: number): (props: CrabVariantProps) => JSX.Element {
-  return crabVariants[Math.abs(index) % crabVariants.length] ?? Crab1;
-}
-
-export function getInteriorCrabVariantIndex(seed: number): number {
-  const interiorCount = crabVariants.length - 2;
-  if (interiorCount <= 0) return 0;
-  const normalizedSeed = Number.isFinite(seed) ? Math.trunc(seed) : 0;
-  return 1 + (((normalizedSeed % interiorCount) + interiorCount) % interiorCount);
-}
-
-export function getInteriorCrabVariant(seed: number): (props: CrabVariantProps) => JSX.Element {
-  return getCrabVariant(getInteriorCrabVariantIndex(seed));
-}

package/src/components/ui/dialog.tsx

@@ -1,130 +0,0 @@
-"use client";
-
-import { Dialog as DialogPrimitive } from "radix-ui";
-import { X } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "fixed inset-0 z-40 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content>): React.JSX.Element {
-  return (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <X className="size-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg font-semibold leading-none tracking-tight", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogDescription,
-  DialogTitle,
-};

package/src/components/ui/icon-trigger.ts

@@ -1,2 +0,0 @@
-export const INSPECTOR_ICON_TRIGGER_CLASS =
-  "relative size-9 rounded-md border border-border/70 bg-muted/60 text-muted-foreground transition-colors hover:bg-muted hover:text-accent-foreground focus-visible:ring-ring/50 max-lg:size-11";