layout improvements

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-label": "^2.1.4",
     "@radix-ui/react-popover": "^1.1.11",
     "@radix-ui/react-select": "^2.2.2",
+    "@radix-ui/react-separator": "^1.1.5",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.9",
     "@radix-ui/react-tooltip": "^1.2.5",

src/components/play-tab.tsx

@@ -16,7 +16,14 @@ import {
 } from "@/components/ui/select";
 import { API_BASE } from "@/lib/constants";
 import { VirtualizedCombobox } from "./ui/virtualized-combobox";
-
+import { Info, Shuffle } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Separator } from "@/components/ui/separator";
 
 export default function PlayTab({
   startArticle,
@@ -30,12 +37,23 @@ export default function PlayTab({
   const [maxHops, setMaxHops] = useState<number>(20);
   const [isGameStarted, setIsGameStarted] = useState<boolean>(false);
   const [startPage, setStartPage] = useState<string>(startArticle || "Dogs");
-  const [targetPage, setTargetPage] = useState<string>(destinationArticle || "Canada");
+  const [targetPage, setTargetPage] = useState<string>(
+    destinationArticle || "Canada"
+  );
   const [maxTokens, setMaxTokens] = useState<number>(1024);
   const [maxLinks, setMaxLinks] = useState<number>(200);
   const [isServerConnected, setIsServerConnected] = useState<boolean>(false);
-  const [modelList, setModelList] = useState<{id: string, name: string, author: string, likes: number, trendingScore: number}[]>([]);
+  const [modelList, setModelList] = useState<
+    {
+      id: string;
+      name: string;
+      author: string;
+      likes: number;
+      trendingScore: number;
+    }[]
+  >([]);
   const [allArticles, setAllArticles] = useState<string[]>([]);
+
   // Server connection check
   useEffect(() => {
     fetchAvailableModels();
@@ -55,14 +73,14 @@ export default function PlayTab({
     return () => clearInterval(interval);
   }, []);
 
-    useEffect(() => {
-      const fetchAllArticles = async () => {
-        const response = await fetch(`${API_BASE}/get_all_articles`);
-        const data = await response.json();
-        setAllArticles(data);
-      };
-      fetchAllArticles();
-    }, []);
+  useEffect(() => {
+    const fetchAllArticles = async () => {
+      const response = await fetch(`${API_BASE}/get_all_articles`);
+      const data = await response.json();
+      setAllArticles(data);
+    };
+    fetchAllArticles();
+  }, []);
 
   const handleStartGame = () => {
     setIsGameStarted(true);
@@ -80,122 +98,222 @@ export default function PlayTab({
     const response = await fetch(
       "https://huggingface.co/api/models?inference_provider=all&pipeline_tag=text-generation"
     );
-    const models = await response.json()
-    const filteredModels = models.filter((m: any) => m.tags.includes('text-generation'))
-    const modelList = filteredModels.map((m: any) => ({
+    const models = await response.json();
+    const filteredModels = models.filter((m: { tags: string[] }) =>
+      m.tags.includes("text-generation")
+    );
+    const modelList = filteredModels.map(
+      (m: { id: string; likes: number; trendingScore: number }) => ({
         id: m.id,
         likes: m.likes,
         trendingScore: m.trendingScore,
-        author: m.id.split('/')[0],
-        name: m.id.split('/')[1],
-    }));
+        author: m.id.split("/")[0],
+        name: m.id.split("/")[1],
+      })
+    );
     console.log("got model list", modelList);
     setModelList(modelList);
-  }
+  };
+
+  const selectRandomArticle = (setter: (article: string) => void) => {
+    if (allArticles.length > 0) {
+      const randomIndex = Math.floor(Math.random() * allArticles.length);
+      setter(allArticles[randomIndex]);
+    }
+  };
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
       {!isGameStarted ? (
-        <Card className="p-6">
-          <div className="grid grid-cols-2 md:grid-cols-3 gap-6 mt-6">
-            <div>
-              <Label htmlFor="player-select" className="block mb-2">
-                Player
-              </Label>
-              <Tabs
-                defaultValue="me"
-                value={player}
-                onValueChange={handlePlayerChange}
-                className="w-full"
-              >
-                <TabsList className="grid w-full grid-cols-2">
-                  <TabsTrigger value="me">Me</TabsTrigger>
-                  <TabsTrigger value="model">Model</TabsTrigger>
-                </TabsList>
-              </Tabs>
-            </div>
-            <div>
-              <Label htmlFor="start-page" className="block mb-2">
-                Start Page
-              </Label>
-              <VirtualizedCombobox
-                options={allArticles}
-                value={startPage}
-                onValueChange={(value) => setStartPage(value)}
-                // searchPlaceholder="e.g. Dogs"
-              />
-            </div>
+        <div className="space-y-6">
+          <Card className="p-6">
+            <h3 className="text-lg font-medium mb-4">Game Setup</h3>
 
-            <div className="flex items-end gap-2">
-              <div className="flex-1">
-                <Label htmlFor="start-page" className="block mb-2">
-                  Target Page
-                </Label>
-                <VirtualizedCombobox
-                  options={allArticles}
-                  value={targetPage}
-                  onValueChange={(value) => setTargetPage(value)}
-                  // searchPlaceholder="e.g. Canada"
-                />
+            <div className="space-y-6">
+              <div>
+                <h4 className="text-sm font-medium mb-3">Player Mode</h4>
+                <Tabs
+                  defaultValue="me"
+                  value={player}
+                  onValueChange={handlePlayerChange}
+                  className="w-full"
+                >
+                  <TabsList className="grid w-full grid-cols-2">
+                    <TabsTrigger value="me">I'll Play</TabsTrigger>
+                    <TabsTrigger value="model">AI Will Play</TabsTrigger>
+                  </TabsList>
+                </Tabs>
               </div>
-              <Button onClick={handleStartGame} className="mb-0.5">
-                Start Game
-              </Button>
-            </div>
-          </div>
 
-          {player === "model" && (
-            <div className="md:col-span-3 animate-in fade-in slide-in-from-top-5 duration-300 grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
-              <div>
-                <Label htmlFor="model-select" className="block mb-2">
-                  Select Model
-                </Label>
-                <Select value={selectedModel} onValueChange={setSelectedModel}>
-                  <SelectTrigger className="w-full">
-                    <SelectValue
-                      placeholder={`Select a model (${modelList.length} models available)`}
+              <Separator className="my-4" />
+
+              <div className="grid grid-cols-1 md:grid-cols-1 gap-6">
+                <div>
+                  <h4 className="text-sm font-medium mb-3">Start Page</h4>
+                  <div className="flex items-center">
+                    <VirtualizedCombobox
+                      options={allArticles}
+                      value={startPage}
+                      onValueChange={(value) => setStartPage(value)}
                     />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {modelList.map((model) => (
-                      <SelectItem key={model.id} value={model.id}>
-                        {model.id}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div>
-                <Label htmlFor="max-tokens" className="block mb-2">
-                  Max Tokens
-                </Label>
-                <Input
-                  id="max-tokens"
-                  type="number"
-                  value={maxTokens}
-                  onChange={(e) =>
-                    setMaxTokens(Number.parseInt(e.target.value))
-                  }
-                  min={1}
-                  max={10000}
-                />
-              </div>
-              <div>
-                <Label htmlFor="max-links" className="block mb-2">
-                  Max Links
-                </Label>
-                <Input
-                  id="max-links"
-                  type="number"
-                  value={maxLinks}
-                  onChange={(e) => setMaxLinks(Number.parseInt(e.target.value))}
-                  min={1}
-                  max={1000}
-                />
+
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => selectRandomArticle(setStartPage)}
+                      className="h-9 ml-2 whitespace-nowrap"
+                    >
+                      <Shuffle className="h-3.5 w-3.5 mr-1" />
+                      Random
+                    </Button>
+                    {/* absorb rest of width */}
+                    <div className="flex-1" />
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="text-sm font-medium mb-3">Target Page</h4>
+                  <div className="flex items-center">
+                    <VirtualizedCombobox
+                      options={allArticles}
+                      value={targetPage}
+                      onValueChange={(value) => setTargetPage(value)}
+                    />
+
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => selectRandomArticle(setTargetPage)}
+                      className="h-9 ml-2 whitespace-nowrap"
+                    >
+                      <Shuffle className="h-3.5 w-3.5 mr-1" />
+                      Random
+                    </Button>
+                    {/* absorb rest of width */}
+                    <div className="flex-1" />
+                  </div>
+                </div>
               </div>
+
+              {player === "model" && (
+                <>
+                  <Separator className="my-4" />
+                  <div className="animate-in fade-in slide-in-from-top-5 duration-300">
+                    <h4 className="text-sm font-medium mb-3">Model Settings</h4>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <div>
+                        <Label
+                          htmlFor="model-select"
+                          className="flex items-center gap-1 text-sm mb-2"
+                        >
+                          Select Model
+                        </Label>
+                        <Select
+                          value={selectedModel}
+                          onValueChange={setSelectedModel}
+                        >
+                          <SelectTrigger className="w-full">
+                            <SelectValue
+                              placeholder={`Select a model (${modelList.length} available)`}
+                            />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {modelList.map((model) => (
+                              <SelectItem key={model.id} value={model.id}>
+                                {model.id}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+
+                      <div>
+                        <Label
+                          htmlFor="max-tokens"
+                          className="flex items-center gap-1 text-sm mb-2"
+                        >
+                          Max Tokens
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <Info className="h-3.5 w-3.5 text-muted-foreground" />
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p className="max-w-xs">
+                                  Maximum number of tokens the model can
+                                  generate per response.
+                                </p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                        </Label>
+                        <Input
+                          id="max-tokens"
+                          type="number"
+                          value={maxTokens}
+                          onChange={(e) =>
+                            setMaxTokens(Number.parseInt(e.target.value))
+                          }
+                          min={1}
+                          max={10000}
+                        />
+                      </div>
+
+                      <div>
+                        <Label
+                          htmlFor="max-links"
+                          className="flex items-center gap-1 text-sm mb-2"
+                        >
+                          Max Links
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <Info className="h-3.5 w-3.5 text-muted-foreground" />
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p className="max-w-xs">
+                                  Maximum number of links the model can consider
+                                  per page.
+                                </p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                        </Label>
+                        <Input
+                          id="max-links"
+                          type="number"
+                          value={maxLinks}
+                          onChange={(e) =>
+                            setMaxLinks(Number.parseInt(e.target.value))
+                          }
+                          min={1}
+                          max={1000}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          </Card>
+
+          <div className="flex justify-center">
+            <Button
+              onClick={handleStartGame}
+              size="lg"
+              className="px-8"
+              variant="default"
+            >
+              Start Game
+            </Button>
+          </div>
+
+          {!isServerConnected && (
+            <div className="text-center p-2 bg-yellow-100 text-yellow-800 rounded-md text-sm">
+              Server connection issue. Some features may be unavailable.
             </div>
           )}
-        </Card>
+        </div>
       ) : (
         <GameComponent
           player={player}

src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator } 

yarn.lock

@@ -791,6 +791,13 @@
     aria-hidden "^1.2.4"
     react-remove-scroll "^2.6.3"
 
+"@radix-ui/react-separator@^1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.1.5.tgz#e124eb11c5ce5b5be45e08b8d07dbc2049733581"
+  integrity sha512-wdsy1P9VLR3L7mrznIHsMX4DEpn5tgqRDY4fjzIlz/Dw1QsumepxFtEPeK6ML5VwCcSMC8xw3won9W5Y9XDmcA==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.1"
+
 "@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"