playable I think

Dockerfile

@@ -42,6 +42,8 @@ RUN curl -L https://huggingface.co/HuggingFaceTB/simplewiki-pruned-text-350k/res
 
 ENV WIKISPEEDIA_DB_PATH=/home/user/app/wikihop.db
 
+ENV VITE_API_BASE=""
+
 CMD ["uvicorn", "api:app", "--host", "0.0.0.0", "--port", "7860"]
 
 

api.py

@@ -56,6 +56,10 @@ class SQLiteDB:
         links = json.loads(article["links_json"])
         return article["title"], links
 
+    def get_all_articles(self):
+        self.cursor.execute("SELECT title FROM core_articles")
+        return [row[0] for row in self.cursor.fetchall()]
+
 # Initialize database connection
 db = SQLiteDB(
     os.getenv("WIKISPEEDIA_DB_PATH", "/Users/jts/daily/wikihop/db/data/wikihop.db")
@@ -69,6 +73,11 @@ async def health_check():
         article_count=db._article_count
     )
 
+@app.get("/get_all_articles", response_model=List[str])
+async def get_all_articles():
+    """Get all articles"""
+    return db.get_all_articles()
+
 @app.get("/get_article_with_links/{article_title}", response_model=ArticleResponse)
 async def get_article(article_title: str):
     """Get article and its links by title"""

package.json

@@ -13,13 +13,17 @@
   "dependencies": {
     "@huggingface/hub": "^1.1.2",
     "@huggingface/inference": "^3.10.0",
+    "@radix-ui/react-dialog": "^1.1.11",
     "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-popover": "^1.1.11",
     "@radix-ui/react-select": "^2.2.2",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.9",
     "@tailwindcss/vite": "^4.1.5",
+    "@tanstack/react-virtual": "^3.13.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "d3": "^7.9.0",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.503.0",

src/components/game-component.tsx

@@ -7,35 +7,8 @@ import { Flag, Clock, Hash, BarChart, ArrowRight, Bot } from "lucide-react";
 import inference from "@/lib/inference";
 import ReasoningTrace, { Run, Step } from "./reasoning-trace";
 import ForceDirectedGraph from "./force-directed-graph";
+import { API_BASE } from "@/lib/constants";
 
-const mockRun: Run = {
-  steps: [
-    {
-      type: "start",
-      article: "Dogs",
-      metadata: {
-        message: "Starting Node",
-      },
-    },
-    {
-      type: "step",
-      article: "Dogs",
-      links: ["Dogs", "Cats", "Birds"],
-      metadata: {
-        conversation: [
-          {
-            role: "user",
-            content: "I want to go to the moon",
-          },
-          {
-            role: "assistant",
-            content: "I want to go to the moon",
-          },
-        ],
-      },
-    },
-  ],
-};
 const buildPrompt = (
   current: string,
   target: string,
@@ -65,8 +38,6 @@ First, analyze each link briefly and how it connects to your goal, then select t
 Remember to format your final answer by explicitly writing out the xml number tags like this: <answer>NUMBER</answer>`;
 };
 
-const API_BASE = "";
-
 interface GameComponentProps {
   player: "me" | "model";
   model?: string;
@@ -97,6 +68,7 @@ export default function GameComponent({
   const [gameStatus, setGameStatus] = useState<"playing" | "won" | "lost">(
     "playing"
   );
+
   const [reasoningTrace, setReasoningTrace] = useState<Run | null>({
     start_article: startPage,
     destination_article: targetPage,
@@ -151,8 +123,17 @@ export default function GameComponent({
 
   const addStepToReasoningTrace = (step: Step) => {
     setReasoningTrace((prev) => {
-      if (!prev) return { steps: [step], start_article: startPage, destination_article: targetPage };
-      return { steps: [...prev.steps, step], start_article: startPage, destination_article: targetPage };
+      if (!prev)
+        return {
+          steps: [step],
+          start_article: startPage,
+          destination_article: targetPage,
+        };
+      return {
+        steps: [...prev.steps, step],
+        start_article: startPage,
+        destination_article: targetPage,
+      };
     });
   };
 
@@ -316,23 +297,6 @@ export default function GameComponent({
           )}
         </div>
 
-        {/* Wikipedia iframe (mocked) */}
-        {/* <div className="bg-muted/30 rounded-md flex-1 mb-4 overflow-hidden">
-          <div className="bg-white p-4 border-b">
-            <h2 className="text-xl font-bold">{currentPage}</h2>
-            <p className="text-sm text-muted-foreground">
-              https://en.wikipedia.org/wiki/{currentPage.replace(/\s+/g, "_")}
-            </p>
-          </div>
-          <div className="p-4">
-            <p className="text-sm">
-              This is a mock Wikipedia page for {currentPage}. In the actual
-              implementation, this would be an iframe showing the real Wikipedia
-              page.
-            </p>
-          </div>
-        </div> */}
-
         {/* Available links */}
         {gameStatus === "playing" && (
           <>
@@ -403,22 +367,33 @@ export default function GameComponent({
           </div>
         )}
       </Card>
-
+      {/* 
       <Card className="p-4 flex flex-col max-h-[500px] overflow-y-auto">
         <ReasoningTrace run={reasoningTrace} />
+      </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>
 
       {/* Right pane - Game stats and graph */}
-      <Card className="p-4 flex flex-col">
+      {/* <Card className="p-4 flex flex-col overflow-y-auto">
         <div className="flex-1 bg-muted/30 rounded-md p-4">
           <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground mb-2">
             <BarChart className="h-4 w-4" /> Path Visualization
           </div>
 
-          <ForceDirectedGraph runs={runs} runId={null} />
+          <div className="h-[500px]">
+            <ForceDirectedGraph runs={runs} runId={0} />
+          </div>
         </div>
-      </Card>
+      </Card> */}
     </div>
   );
 }
-

src/components/play-tab.tsx

@@ -6,8 +6,6 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
-import { Sun } from "lucide-react";
-import { Wifi, WifiOff } from "lucide-react";
 import GameComponent from "@/components/game-component";
 import {
   Select,
@@ -18,8 +16,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { API_BASE } from "@/lib/constants";
+import { VirtualizedCombobox } from "./ui/virtualized-combobox";
 
-const API_BASE = "";
 
 export default function PlayTab() {
   const [player, setPlayer] = useState<"me" | "model">("me");
@@ -33,7 +32,7 @@ export default function PlayTab() {
   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 [allArticles, setAllArticles] = useState<string[]>([]);
   // Server connection check
   useEffect(() => {
     fetchAvailableModels();
@@ -53,6 +52,15 @@ 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();
+    }, []);
+
   const handleStartGame = () => {
     setIsGameStarted(true);
   };
@@ -86,8 +94,6 @@ export default function PlayTab() {
     <div className="space-y-4">
       {!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">
@@ -109,27 +115,24 @@ export default function PlayTab() {
               <Label htmlFor="start-page" className="block mb-2">
                 Start Page
               </Label>
-              <Input
-                id="start-page"
+              <VirtualizedCombobox
+                options={allArticles}
                 value={startPage}
-                onChange={(e) => setStartPage(e.target.value)}
-                placeholder="e.g. Dogs"
+                onValueChange={(value) => setStartPage(value)}
+                searchPlaceholder="e.g. Dogs"
               />
             </div>
 
             <div className="flex items-end gap-2">
               <div className="flex-1">
-                <Label
-                  htmlFor="target-page"
-                  className="flex items-center gap-1 mb-2"
-                >
+                <Label htmlFor="start-page" className="block mb-2">
                   Target Page
                 </Label>
-                <Input
-                  id="target-page"
+                <VirtualizedCombobox
+                  options={allArticles}
                   value={targetPage}
-                  onChange={(e) => setTargetPage(e.target.value)}
-                  placeholder="e.g. Canada"
+                  onValueChange={(value) => setTargetPage(value)}
+                  searchPlaceholder="e.g. Canada"
                 />
               </div>
               <Button onClick={handleStartGame} className="mb-0.5">

src/components/sign-in-with-hf-button.tsx

@@ -8,7 +8,7 @@ const REDIRECT_URI = "https://huggingfacetb-wikispeedia.hf.space";
 const SCOPE = "openid%20profile%20email%20inference-api";
 const STATE = "1234567890";
 const SSO_URL = `https://huggingface.co/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=${SCOPE}&prompt=consent&state=${STATE}`;
-const API_BASE = "https://huggingface.co/oauth/token";
+const OAUTH_API_BASE = "https://huggingface.co/oauth/token";
 const CLIENT_SECRET = import.meta.env.VITE_HUGGINGFACE_CLIENT_SECRET; // THIS IS UNSAFE, must fix before real deploy
 
 export const SignInWithHuggingFaceButton = () => {
@@ -37,7 +37,7 @@ export const SignInWithHuggingFaceButton = () => {
         // remove the code from the url
         window.history.replaceState({}, "", window.location.pathname);
         setIsLoading(true);
-        const response = await fetch(`${API_BASE}`, {
+        const response = await fetch(`${OAUTH_API_BASE}`, {
           method: "POST",
           headers: {
             "Content-Type": "application/x-www-form-urlencoded",

src/components/ui/command.tsx

@@ -0,0 +1,175 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

src/components/ui/dialog.tsx

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

src/components/ui/popover.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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-[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-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

src/components/ui/virtualized-combobox.tsx

@@ -0,0 +1,240 @@
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+
+type Option = {
+  value: string;
+  label: string;
+};
+
+interface VirtualizedCommandProps {
+  height: string;
+  options: Option[];
+  placeholder: string;
+  selectedOption: string;
+  onSelectOption?: (option: string) => void;
+}
+
+const VirtualizedCommand = ({
+  height,
+  options,
+  placeholder,
+  selectedOption,
+  onSelectOption,
+}: VirtualizedCommandProps) => {
+  const [filteredOptions, setFilteredOptions] =
+    React.useState<Option[]>(options);
+  const [focusedIndex, setFocusedIndex] = React.useState(0);
+  const [isKeyboardNavActive, setIsKeyboardNavActive] = React.useState(false);
+
+  const parentRef = React.useRef(null);
+
+  const virtualizer = useVirtualizer({
+    count: filteredOptions.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 35,
+  });
+
+  const virtualOptions = virtualizer.getVirtualItems();
+
+  const scrollToIndex = (index: number) => {
+    virtualizer.scrollToIndex(index, {
+      align: "center",
+    });
+  };
+
+  const handleSearch = (search: string) => {
+    setIsKeyboardNavActive(false);
+    setFilteredOptions(
+      options.filter((option) =>
+        option.value.toLowerCase().includes(search.toLowerCase() ?? [])
+      )
+    );
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        setIsKeyboardNavActive(true);
+        setFocusedIndex((prev) => {
+          const newIndex =
+            prev === -1 ? 0 : Math.min(prev + 1, filteredOptions.length - 1);
+          scrollToIndex(newIndex);
+          return newIndex;
+        });
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        setIsKeyboardNavActive(true);
+        setFocusedIndex((prev) => {
+          const newIndex =
+            prev === -1 ? filteredOptions.length - 1 : Math.max(prev - 1, 0);
+          scrollToIndex(newIndex);
+          return newIndex;
+        });
+        break;
+      }
+      case "Enter": {
+        event.preventDefault();
+        if (filteredOptions[focusedIndex]) {
+          onSelectOption?.(filteredOptions[focusedIndex].value);
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
+  React.useEffect(() => {
+    if (selectedOption) {
+      const option = filteredOptions.find(
+        (option) => option.value === selectedOption
+      );
+      if (option) {
+        const index = filteredOptions.indexOf(option);
+        setFocusedIndex(index);
+        virtualizer.scrollToIndex(index, {
+          align: "center",
+        });
+      }
+    }
+  }, [selectedOption, filteredOptions, virtualizer]);
+
+  return (
+    <Command shouldFilter={false} onKeyDown={handleKeyDown}>
+      <CommandInput onValueChange={handleSearch} placeholder={placeholder} />
+      <CommandList
+        ref={parentRef}
+        style={{
+          height: height,
+          width: "100%",
+          overflow: "auto",
+        }}
+        onMouseDown={() => setIsKeyboardNavActive(false)}
+        onMouseMove={() => setIsKeyboardNavActive(false)}
+      >
+        <CommandEmpty>No item found.</CommandEmpty>
+        <CommandGroup>
+          <div
+            style={{
+              height: `${virtualizer.getTotalSize()}px`,
+              width: "100%",
+              position: "relative",
+            }}
+          >
+            {virtualOptions.map((virtualOption) => (
+              <CommandItem
+                key={filteredOptions[virtualOption.index].value}
+                disabled={isKeyboardNavActive}
+                className={cn(
+                  "absolute left-0 top-0 w-full bg-transparent",
+                  focusedIndex === virtualOption.index &&
+                    "bg-accent text-accent-foreground",
+                  isKeyboardNavActive &&
+                    focusedIndex !== virtualOption.index &&
+                    "aria-selected:bg-transparent aria-selected:text-primary"
+                )}
+                style={{
+                  height: `${virtualOption.size}px`,
+                  transform: `translateY(${virtualOption.start}px)`,
+                }}
+                value={filteredOptions[virtualOption.index].value}
+                onMouseEnter={() =>
+                  !isKeyboardNavActive && setFocusedIndex(virtualOption.index)
+                }
+                onMouseLeave={() => !isKeyboardNavActive && setFocusedIndex(-1)}
+                onSelect={onSelectOption}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    selectedOption ===
+                      filteredOptions[virtualOption.index].value
+                      ? "opacity-100"
+                      : "opacity-0"
+                  )}
+                />
+                {filteredOptions[virtualOption.index].label}
+              </CommandItem>
+            ))}
+          </div>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+};
+
+interface VirtualizedComboboxProps {
+  options: string[];
+  searchPlaceholder?: string;
+  width?: string;
+  height?: string;
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+export function VirtualizedCombobox({
+  options,
+  searchPlaceholder = "Search items...",
+  value,
+  onValueChange,
+  width = "400px",
+  height = "400px",
+}: VirtualizedComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const [selectedOption, setSelectedOption] = React.useState("");
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="justify-between"
+          style={{
+            width: width,
+          }}
+        >
+          {selectedOption
+            ? options.find((option) => option === selectedOption)
+            : searchPlaceholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: width }}>
+        <VirtualizedCommand
+          height={height}
+          options={options.map((option) => ({ value: option, label: option }))}
+          placeholder={searchPlaceholder}
+          selectedOption={value}
+          onSelectOption={(currentValue) => {
+            setSelectedOption(
+              currentValue === selectedOption ? "" : currentValue
+            );
+            onValueChange(currentValue);
+            setOpen(false);
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

src/lib/constants.ts

@@ -0,0 +1,3 @@
+export const API_BASE = import.meta.env.VITE_API_BASE || "http://localhost:8000";
+
+console.log("API_BASE", API_BASE);