styling

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-select": "^2.2.2",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.9",
+    "@radix-ui/react-tooltip": "^1.2.5",
     "@tailwindcss/vite": "^4.1.5",
     "@tanstack/react-virtual": "^3.13.6",
     "class-variance-authority": "^0.7.1",

src/components/game-component.tsx

@@ -3,11 +3,50 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Flag, Clock, Hash, ArrowRight, Bot, User, ChevronDown, ChevronUp } from "lucide-react";
+import { Flag, Clock, Hash, ArrowRight, Bot, User, ChevronDown, ChevronUp, Info } from "lucide-react";
 import { useInference } from "@/lib/inference";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 import { API_BASE } from "@/lib/constants";
 
+// Simple Switch component since it's not available in the UI components
+const Switch = ({ checked, onCheckedChange, disabled, id }: { 
+  checked: boolean; 
+  onCheckedChange: (checked: boolean) => void;
+  disabled?: boolean;
+  id?: string;
+}) => {
+  return (
+    <button
+      id={id}
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      data-state={checked ? "checked" : "unchecked"}
+      disabled={disabled}
+      onClick={() => onCheckedChange(!checked)}
+      className={cn(
+        "focus-visible:ring-ring/50 peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "bg-primary" : "bg-input"
+      )}
+    >
+      <span
+        data-state={checked ? "checked" : "unchecked"}
+        className={cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
+          checked ? "translate-x-4" : "translate-x-0"
+        )}
+      />
+    </button>
+  );
+};
 
 type Message = {
   role: "user" | "assistant";
@@ -73,6 +112,7 @@ export default function GameComponent({
   const [gameStatus, setGameStatus] = useState<"playing" | "won" | "lost">(
     "playing"
   );
+  const [continuousPlay, setContinuousPlay] = useState<boolean>(false);
 
   const [convo, setConvo] = useState<Message[]>([]);
   const [expandedMessages, setExpandedMessages] = useState<Record<number, boolean>>({});
@@ -215,206 +255,285 @@ export default function GameComponent({
     }));
   };
 
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 h-[calc(100vh-200px)]">
-      <Card className="p-4 flex col-span-2">
-        <h2 className="text-xl font-bold">Game Status</h2>
-        <div className="grid grid-cols-4 gap-4 mb-4">
-          <div className="bg-muted/30 p-3 rounded-md">
-            <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground mb-1">
-              <ArrowRight className="h-4 w-4" /> Current
-            </div>
-            <div className="font-medium">{currentPage}</div>
-          </div>
-          <div className="bg-muted/30 p-3 rounded-md">
-            <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground mb-1">
-              <Flag className="h-4 w-4" /> Target
-            </div>
-            <div className="font-medium">{targetPage}</div>
-          </div>
+  // Effect for continuous play mode
+  useEffect(() => {
+    if (continuousPlay && player === "model" && gameStatus === "playing" && modelStatus !== "thinking" && !linksLoading) {
+      const timer = setTimeout(() => {
+        makeModelMove();
+      }, 1000);
+      
+      return () => clearTimeout(timer);
+    }
+  }, [continuousPlay, player, gameStatus, modelStatus, linksLoading, currentPage]);
 
-          <div className="bg-muted/30 p-3 rounded-md">
-            <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground mb-1">
-              <Hash className="h-4 w-4" /> Hops
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-12 gap-2 h-[calc(100vh-200px)] grid-rows-[auto_1fr]">
+      {/* Condensed Game Status Card */}
+      <Card className="p-2 col-span-12 h-12 row-start-1">
+        <div className="flex items-center justify-between h-full">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-1">
+              <ArrowRight className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">{currentPage}</span>
             </div>
-            <div className="font-medium">
-              {hops} / {maxHops}
+            <div className="flex items-center gap-1">
+              <Flag className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">{targetPage}</span>
             </div>
-          </div>
-
-          <div className="bg-muted/30 p-3 rounded-md">
-            <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground mb-1">
-              <Clock className="h-4 w-4" /> Time
+            <div
+              className="flex items-center gap-1 cursor-help relative group"
+              title="Path history"
+            >
+              <Hash className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">
+                {hops} / {maxHops}
+              </span>
+              <div className="invisible absolute bottom-full left-0 mb-2 p-2 bg-popover border rounded-md shadow-md text-xs max-w-[300px] z-50 group-hover:visible whitespace-pre-wrap">
+                Path: {visitedNodes.join(" → ")}
+              </div>
             </div>
-            <div className="font-medium">{formatTime(timeElapsed)}</div>
-          </div>
-        </div>
-
-        {player === "model" && (
-          <div className="mb-4 bg-blue-50 border border-blue-200 rounded-md p-3">
-            <div className="flex items-center gap-2">
-              <Bot className="h-4 w-4 text-blue-500" />
-              <span className="font-medium text-blue-700">
-                {model} {modelStatus === "thinking" ? "is thinking..." : "is playing"}
+            <div className="flex items-center gap-1">
+              <Clock className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">
+                {formatTime(timeElapsed)}
               </span>
             </div>
           </div>
-        )}
-      </Card>
-      {/* Left pane - Current page and available links */}
-      <Card className="p-4 flex flex-col h-full overflow-hidden">
-        <h2 className="text-xl font-bold">Available Links</h2>
-        <div className="flex justify-between items-center mb-4">
-          {gameStatus !== "playing" && (
-            <Button onClick={onReset} variant="outline">
-              New Game
-            </Button>
-          )}
-        </div>
 
-        {/* Available links */}
-        {gameStatus === "playing" && (
-          <>
-            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-4 overflow-y-auto max-h-[200px]">
-              {currentPageLinks
-                .sort((a, b) => a.localeCompare(b))
-                .map((link) => (
+          <div className="flex items-center gap-2">
+            {gameStatus === "playing" && (
+              <>
+                {player === "model" && (
+                  <>
+                    <Button
+                      onClick={makeModelMove}
+                      disabled={modelStatus === "thinking" || linksLoading}
+                      size="sm"
+                      className="h-8"
+                    >
+                      Make Move
+                    </Button>
+
+                    <div className="flex items-center gap-1 ml-1">
+                      <Switch
+                        id="continuous-play"
+                        checked={continuousPlay}
+                        onCheckedChange={setContinuousPlay}
+                        disabled={modelStatus === "thinking" || linksLoading}
+                      />
+                      <Label htmlFor="continuous-play" className="text-xs">
+                        Auto
+                      </Label>
+                    </div>
+                  </>
+                )}
+
+                {player === "me" && (
                   <Button
-                    key={link}
-                    variant="outline"
+                    onClick={handleGiveUp}
+                    variant="destructive"
                     size="sm"
-                    className="justify-start overflow-hidden text-ellipsis whitespace-nowrap"
-                    onClick={() => handleLinkClick(link)}
-                    disabled={player === "model" || modelStatus === "thinking"}
+                    className="h-8"
                   >
-                    {link}
+                    Give Up
                   </Button>
-                ))}
-            </div>
+                )}
+              </>
+            )}
 
-            {player === "model" && (
+            {gameStatus !== "playing" && (
               <Button
-                onClick={makeModelMove}
-                disabled={modelStatus === "thinking" || linksLoading}
+                onClick={onReset}
+                variant="outline"
+                size="sm"
+                className="h-8"
               >
-                Make Move
+                New Game
               </Button>
             )}
-          </>
-        )}
-
-        {gameStatus === "playing" && player === "me" && (
-          <Button
-            onClick={handleGiveUp}
-            variant="destructive"
-            className="mt-auto"
-          >
-            Give Up
-          </Button>
-        )}
-
-        {gameStatus === "won" && (
-          <div className="bg-green-100 text-green-800 p-4 rounded-md mt-auto">
-            <h3 className="font-bold">
-              {player === "model" ? `${model} won!` : "You won!"}
-            </h3>
-            <p>
-              {player === "model" ? "It" : "You"} reached {targetPage} in {hops}{" "}
-              hops.
-            </p>
           </div>
-        )}
+        </div>
+      </Card>
 
-        {gameStatus === "lost" && (
-          <div className="bg-red-100 text-red-800 p-4 rounded-md mt-auto">
-            <h3 className="font-bold">Game Over</h3>
-            <p>
-              {player === "model" ? `${model} didn't` : "You didn't"} reach{" "}
-              {targetPage} within {maxHops} hops.
-            </p>
+      {/* Links panel - larger now */}
+      <Card className="p-3 md:col-span-6 h-full overflow-hidden row-start-2">
+        <h2 className="text-lg font-bold mb-2">
+          Available Links
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="ml-2 text-xs text-muted-foreground cursor-help inline-flex items-center">
+                  <Info className="h-3 w-3 mr-1" />
+                  Why are some links missing?
+                </span>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-[300px] p-3">
+                <p>
+                  We're playing on a pruned version of Simple Wikipedia so that
+                  every path between articles is possible. See dataset details{" "}
+                  <a
+                    href="https://huggingface.co/datasets/HuggingFaceTB/simplewiki-pruned-350k"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 underline hover:text-blue-800"
+                  >
+                    here
+                  </a>
+                  .
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </h2>
+
+        {gameStatus === "playing" ? (
+          <div className="grid grid-cols-3 gap-x-1 gap-y-0 overflow-y-auto h-[calc(100%-2.5rem)]">
+            {currentPageLinks
+              .sort((a, b) => a.localeCompare(b))
+              .map((link) => (
+                <Button
+                  key={link}
+                  variant="outline"
+                  size="sm"
+                  className="justify-start overflow-hidden text-ellipsis whitespace-nowrap"
+                  onClick={() => handleLinkClick(link)}
+                  disabled={player === "model" || modelStatus === "thinking"}
+                >
+                  {link}
+                </Button>
+              ))}
+          </div>
+        ) : (
+          <div className="flex items-center justify-center h-[calc(100%-2.5rem)]">
+            {gameStatus === "won" ? (
+              <div className="bg-green-100 text-green-800 p-4 rounded-md w-full">
+                <h3 className="font-bold">
+                  {player === "model" ? `${model} won!` : "You won!"}
+                </h3>
+                <p>
+                  {player === "model" ? "It" : "You"} reached {targetPage} in{" "}
+                  {hops} hops.
+                </p>
+                <Button
+                  onClick={onReset}
+                  variant="outline"
+                  size="sm"
+                  className="mt-2"
+                >
+                  New Game
+                </Button>
+              </div>
+            ) : (
+              <div className="bg-red-100 text-red-800 p-4 rounded-md w-full">
+                <h3 className="font-bold">Game Over</h3>
+                <p>
+                  {player === "model" ? `${model} didn't` : "You didn't"} reach{" "}
+                  {targetPage} within {maxHops} hops.
+                </p>
+                <Button
+                  onClick={onReset}
+                  variant="outline"
+                  size="sm"
+                  className="mt-2"
+                >
+                  New Game
+                </Button>
+              </div>
+            )}
           </div>
         )}
       </Card>
 
-      <Card className="p-4 flex flex-col h-full overflow-hidden">
-        <h2 className="text-xl font-bold mb-4">LLM Reasoning</h2>
-        <div className="flex-1 overflow-y-auto space-y-4 pr-2">
-          {convo.map((message, index) => {
-            const isExpanded = expandedMessages[index] || false;
-            const isLongUserMessage = message.role === "user" && message.content.length > 300;
-            const shouldTruncate = isLongUserMessage && !isExpanded;
-            
-            return (
-              <div 
-                key={index} 
-                className={`p-3 rounded-lg ${
-                  message.role === "assistant" 
-                    ? "bg-blue-50 border border-blue-100" 
-                    : "bg-gray-50 border border-gray-100"
-                }`}
-              >
-                <div className="flex items-center gap-2 mb-1 text-sm font-medium text-muted-foreground">
-                  {message.role === "assistant" ? (
-                    <>
-                      <Bot className="h-4 w-4" />
-                      <span>Assistant</span>
-                    </>
-                  ) : (
-                    <>
-                      <User className="h-4 w-4" />
-                      <span>User</span>
-                    </>
-                  )}
+      {/* Reasoning panel - larger now */}
+      {player === "model" && (
+        <Card className="p-3 md:col-span-6 h-full overflow-hidden row-start-2">
+          <h2 className="text-lg font-bold mb-2">LLM Reasoning</h2>
+          <div className="overflow-y-auto h-[calc(100%-2.5rem)] space-y-2 pr-2">
+            {convo.map((message, index) => {
+              const isExpanded = expandedMessages[index] || false;
+              const isLongUserMessage =
+                message.role === "user" && message.content.length > 300;
+              const shouldTruncate = isLongUserMessage && !isExpanded;
+
+              return (
+                <div
+                  key={index}
+                  className={`p-2 rounded-lg text-xs ${
+                    message.role === "assistant"
+                      ? "bg-blue-50 border border-blue-100"
+                      : "bg-gray-50 border border-gray-100"
+                  }`}
+                >
+                  <div className="flex items-center gap-1 mb-1 text-xs font-medium text-muted-foreground">
+                    {message.role === "assistant" ? (
+                      <>
+                        <Bot className="h-3 w-3" />
+                        <span>Assistant</span>
+                      </>
+                    ) : (
+                      <>
+                        <User className="h-3 w-3" />
+                        <span>User</span>
+                      </>
+                    )}
+                  </div>
+
+                  <div>
+                    <p className="whitespace-pre-wrap text-xs">
+                      {shouldTruncate
+                        ? message.content.substring(0, 300) + "..."
+                        : message.content}
+                    </p>
+
+                    {isLongUserMessage && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="mt-1 h-5 text-xs flex items-center gap-1 text-muted-foreground hover:text-foreground"
+                        onClick={() => toggleMessageExpand(index)}
+                      >
+                        {isExpanded ? (
+                          <>
+                            <ChevronUp className="h-3 w-3" /> Show less
+                          </>
+                        ) : (
+                          <>
+                            <ChevronDown className="h-3 w-3" /> Show more
+                          </>
+                        )}
+                      </Button>
+                    )}
+                  </div>
                 </div>
-                
-                <div>
-                  <p className="whitespace-pre-wrap text-sm">
-                    {shouldTruncate 
-                      ? message.content.substring(0, 300) + "..." 
-                      : message.content
-                    }
-                  </p>
-                  
-                  {isLongUserMessage && (
-                    <Button 
-                      variant="ghost" 
-                      size="sm" 
-                      className="mt-1 h-6 text-xs flex items-center gap-1 text-muted-foreground hover:text-foreground"
-                      onClick={() => toggleMessageExpand(index)}
-                    >
-                      {isExpanded 
-                        ? <><ChevronUp className="h-3 w-3" /> Show less</> 
-                        : <><ChevronDown className="h-3 w-3" /> Show more</>
-                      }
-                    </Button>
-                  )}
+              );
+            })}
+
+            {modelStatus === "thinking" && (
+              <div className="p-2 rounded-lg bg-blue-50 border border-blue-100 text-xs">
+                <div className="flex items-center gap-1 mb-1 text-xs font-medium text-muted-foreground">
+                  <Bot className="h-3 w-3" />
+                  <span className="animate-pulse">Thinking...</span>
                 </div>
+                <p className="whitespace-pre-wrap text-xs">{partialText}</p>
               </div>
-            );
-          })}
-
-          {modelStatus === "thinking" && (
-            <div className="p-3 rounded-lg bg-blue-50 border border-blue-100">
-              <div className="flex items-center gap-2 mb-1 text-sm font-medium text-muted-foreground">
-                <Bot className="h-4 w-4" />
-                <span className="animate-pulse">Thinking...</span>
-              </div>
-              <p className="whitespace-pre-wrap text-sm">{partialText}</p>
-            </div>
-          )}
-          <div ref={messagesEndRef} />
-        </div>
-      </Card>
-
-      {/* <Card className="p-4 flex flex-col max-h-[500px] overflow-y-auto">
-        <iframe
-          src={`https://simple.wikipedia.org/wiki/${currentPage.replace(
-            /\s+/g,
-            "_"
-          )}`}
-          className="w-full h-full"
-        />
-      </Card> */}
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+        </Card>
+      )}
+
+      {player === "me" && (
+        <Card className="p-3 md:col-span-6 h-full overflow-hidden row-start-2">
+          <h2 className="text-lg font-bold mb-2">Wikipedia View</h2>
+          <iframe
+            src={`https://simple.wikipedia.org/wiki/${currentPage.replace(
+              " ",
+              "_"
+            )}`}
+            className="w-full h-full"
+          />
+        </Card>
+      )}
     </div>
   );
 }

src/components/ui/tooltip.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

yarn.lock

@@ -556,6 +556,13 @@
   dependencies:
     "@radix-ui/react-primitive" "2.1.0"
 
+"@radix-ui/[email protected]":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.5.tgz#3d8974c45f7bd18914132d52f786c2891bddcd4a"
+  integrity sha512-GRdeRWdAH6gTTJQRGjyD5aHnhaxY6nsoAOlP8gozThGOMIloorbS70fc7jbBlFBtyA1uLAkdiy/3JF5eVzJVXw==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.1"
+
 "@radix-ui/[email protected]":
   version "1.1.4"
   resolved "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.4.tgz"
@@ -612,6 +619,17 @@
     "@radix-ui/react-use-callback-ref" "1.1.1"
     "@radix-ui/react-use-escape-keydown" "1.1.1"
 
+"@radix-ui/[email protected]":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.8.tgz#cf46f40aa90d2eb14e3c07d1993f5c9616734d94"
+  integrity sha512-md5dYvyWDY6884yKjXZA8c+iezVMW5rkdxGwwZJ/TieN5al6UBI5YQGZzkuHbA45S3WqrfG6YwDBMxk4BqmbuA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.1"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-escape-keydown" "1.1.1"
+
 "@radix-ui/[email protected]":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz"
@@ -677,6 +695,22 @@
     "@radix-ui/react-use-size" "1.1.1"
     "@radix-ui/rect" "1.1.1"
 
+"@radix-ui/[email protected]":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.5.tgz#7c670749d4fa943b3462f008c4618df494751dfb"
+  integrity sha512-in8+gtEL5YCEm6pflDr8JBsy8+7DPYPNAYaMj/sorPT/BhzOQRWYXWrzJi1wxahPYTc1EzYuhz0oP/QQU2XHwQ==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.1.5"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.1"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+    "@radix-ui/react-use-rect" "1.1.1"
+    "@radix-ui/react-use-size" "1.1.1"
+    "@radix-ui/rect" "1.1.1"
+
 "@radix-ui/[email protected]":
   version "1.1.6"
   resolved "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.6.tgz"
@@ -685,6 +719,14 @@
     "@radix-ui/react-primitive" "2.1.0"
     "@radix-ui/react-use-layout-effect" "1.1.1"
 
+"@radix-ui/[email protected]":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.7.tgz#0d2636ff90d53a2eadd2f16a031e06eb9741a044"
+  integrity sha512-r2Cpk0yzycgplKYq+X9mo+2o3g12RpTeTZslQocXrAsSY9cz8HJ/QAVb6kxFOhd9U6eq9zTACw1X3JZeLQHj2A==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.1"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/[email protected]":
   version "1.1.4"
   resolved "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz"
@@ -700,6 +742,13 @@
   dependencies:
     "@radix-ui/react-slot" "1.2.0"
 
+"@radix-ui/[email protected]":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.1.1.tgz#0c8f175b3fed173e42a3a4efa81e3abebe1172e4"
+  integrity sha512-+YilAeO2cNOSdE7hh0lp5AJCRI8bwl2sNVWRdl9aQN3JUXZ1/TNZomOAHFvXamLXj1/KPSyjA2p+/Evl6rRrqA==
+  dependencies:
+    "@radix-ui/react-slot" "1.2.1"
+
 "@radix-ui/[email protected]":
   version "1.1.7"
   resolved "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.7.tgz"
@@ -742,17 +791,17 @@
     aria-hidden "^1.2.4"
     react-remove-scroll "^2.6.3"
 
-"@radix-ui/[email protected]":
+"@radix-ui/[email protected]", "@radix-ui/react-slot@^1.2.0":
   version "1.2.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz"
   integrity sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.2"
 
-"@radix-ui/react-slot@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.2.0.tgz#57727fc186ddb40724ccfbe294e1a351d92462ba"
-  integrity sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==
+"@radix-ui/react-slot@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.2.1.tgz#fe4da1b681623c0cfed48fff339652b1482a0d21"
+  integrity sha512-RJMUK12Fr2fUEK18xtbY9akYytRqhPzbeTTlWZoCNfXjxCGDnprfBzpobZBS2oWHNtVZnrfTQ2iC8sdUFG3SvQ==
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.2"
 
@@ -770,6 +819,24 @@
     "@radix-ui/react-roving-focus" "1.1.7"
     "@radix-ui/react-use-controllable-state" "1.2.2"
 
+"@radix-ui/react-tooltip@^1.2.5":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.2.5.tgz#65701091e7f4eb8694137241a42a903efb57e485"
+  integrity sha512-DytUixNBREorQPBbd11UCx3sf/eVwWYgfCsDf1Oa3T6c5TtvcoX+SmyEAOMC1qK+B21GAOl+sepb9/l9wTMb7w==
+  dependencies:
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-dismissable-layer" "1.1.8"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-popper" "1.2.5"
+    "@radix-ui/react-portal" "1.1.7"
+    "@radix-ui/react-presence" "1.1.4"
+    "@radix-ui/react-primitive" "2.1.1"
+    "@radix-ui/react-slot" "1.2.1"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    "@radix-ui/react-visually-hidden" "1.2.1"
+
 "@radix-ui/[email protected]":
   version "1.1.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz"
@@ -828,6 +895,13 @@
   dependencies:
     "@radix-ui/react-primitive" "2.1.0"
 
+"@radix-ui/[email protected]":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.1.tgz#172b632aba219c2522a31aa9b878e195a0c0192d"
+  integrity sha512-hXUlAF2piqSSf6WrCb19zDJQpF3FZcN/OX/WErY8J9t5opf3aBp3KNU84tdTAnpDdkOCmzt6fJvzQBICLXYL3w==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.1"
+
 "@radix-ui/[email protected]":
   version "1.1.1"
   resolved "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz"