@tonyclaw/agent-inspector 2.0.0

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

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

@@ -0,0 +1,129 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+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-50 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,
+  DialogTitle,
+};

package/src/components/ui/json-expansion-button.tsx

@@ -0,0 +1,56 @@
+import { ChevronsDown, ChevronsUp } from "lucide-react";
+import type { JSX } from "react";
+import { Button } from "./button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+import type { JsonExpansionPolicy } from "./json-viewer-bulk";
+
+/**
+ * Toggle the JSON bulk-expansion state of a request body. Split into its own
+ * module (instead of living next to `JsonViewer`) so the bundler can put
+ * `JsonViewer` into a lazy chunk — the static import of the toolbar button
+ * used to drag the whole viewer into the main bundle.
+ */
+export function JsonExpansionButton({
+  policy,
+  isExpanded,
+  isPending,
+  onToggle,
+}: {
+  policy: JsonExpansionPolicy | null;
+  isExpanded: boolean;
+  isPending: boolean;
+  onToggle: () => void;
+}): JSX.Element | null {
+  if (policy === null) return null;
+
+  const label = isPending ? "Updating..." : isExpanded ? "Collapse all" : "Expand all";
+  const tooltip = isExpanded ? "Collapse all JSON nodes" : "Expand all JSON nodes";
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 text-xs"
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggle();
+            }}
+            disabled={isPending}
+            aria-pressed={isExpanded}
+          >
+            {isExpanded ? (
+              <ChevronsUp className="size-3.5 mr-1" />
+            ) : (
+              <ChevronsDown className="size-3.5 mr-1" />
+            )}
+            {label}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}