fix: migrate select to design system

web/src/App.tsx

@@ -42,7 +42,7 @@ import {
   X,
   Zap,
 } from "lucide-react";
-import { SelectionSwitcher, Typography } from "@nous-research/ui";
+import { Button, SelectionSwitcher, Typography } from "@nous-research/ui";
 import { cn } from "@/lib/utils";
 import { Backdrop } from "@/components/Backdrop";
 import { SidebarFooter } from "@/components/SidebarFooter";
@@ -370,20 +370,17 @@ export default function App() {
           clipPath: "var(--component-header-clip-path)",
         }}
       >
-        <button
-          type="button"
+        <Button
+          ghost
+          size="icon"
           onClick={() => setMobileOpen(true)}
           aria-label={t.app.openNavigation}
           aria-expanded={mobileOpen}
           aria-controls="app-sidebar"
-          className={cn(
-            "inline-flex h-8 w-8 items-center justify-center",
-            "text-midground/70 hover:text-midground transition-colors cursor-pointer",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground",
-          )}
+          className="text-midground/70 hover:text-midground"
         >
-          <Menu className="h-4 w-4" />
-        </button>
+          <Menu />
+        </Button>
 
         <Typography
           className="font-bold text-[0.95rem] leading-[0.95] tracking-[0.05em] text-midground"
@@ -445,18 +442,15 @@ export default function App() {
                 </Typography>
               </div>
 
-              <button
-                type="button"
+              <Button
+                ghost
+                size="icon"
                 onClick={closeMobile}
                 aria-label={t.app.closeNavigation}
-                className={cn(
-                  "lg:hidden inline-flex h-7 w-7 items-center justify-center",
-                  "text-midground/70 hover:text-midground transition-colors cursor-pointer",
-                  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground",
-                )}
+                className="lg:hidden text-midground/70 hover:text-midground"
               >
-                <X className="h-4 w-4" />
-              </button>
+                <X />
+              </Button>
             </div>
 
             <nav

web/src/components/AutoField.tsx

@@ -1,6 +1,6 @@
+import { Select, SelectOption } from "@nous-research/ui";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Select, SelectOption } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 
 function FieldHint({ schema, schemaKey }: { schema: Record<string, unknown>; schemaKey: string }) {

web/src/components/ModelPickerDialog.tsx

@@ -145,14 +145,15 @@ export function ModelPickerDialog({ gw, sessionId, onClose, onSubmit }: Props) {
       aria-labelledby="model-picker-title"
     >
       <div className="relative w-full max-w-3xl max-h-[80vh] border border-border bg-card shadow-2xl flex flex-col">
-        <button
-          type="button"
+        <Button
+          ghost
+          size="icon"
           onClick={onClose}
-          className="absolute right-3 top-3 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+          className="absolute right-2 top-2 text-muted-foreground hover:text-foreground"
           aria-label="Close"
         >
-          <X className="h-5 w-5" />
-        </button>
+          <X />
+        </Button>
 
         <header className="p-5 pb-3 border-b border-border">
           <h2

web/src/components/OAuthLoginModal.tsx

@@ -171,14 +171,15 @@ export function OAuthLoginModal({
       aria-labelledby="oauth-modal-title"
     >
       <div className="relative w-full max-w-md border border-border bg-card shadow-2xl">
-        <button
-          type="button"
+        <Button
+          ghost
+          size="icon"
           onClick={handleClose}
-          className="absolute right-3 top-3 text-muted-foreground hover:text-foreground transition-colors"
+          className="absolute right-2 top-2 text-muted-foreground hover:text-foreground"
           aria-label={t.common.close}
         >
-          <X className="h-5 w-5" />
-        </button>
+          <X />
+        </Button>
         <div className="p-6 flex flex-col gap-4">
           <div>
             <H2

web/src/components/ui/select.tsx

@@ -1,194 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from "react";
-import { ChevronDown, Check } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-export function Select({
-  value,
-  onValueChange,
-  children,
-  className,
-  id,
-  disabled,
-}: SelectProps) {
-  const [open, setOpen] = useState(false);
-  const [highlightedIndex, setHighlightedIndex] = useState(-1);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-
-  const options: SelectOptionData[] = [];
-  flattenChildren(children, options);
-
-  const selectedOption = options.find((o) => o.value === value);
-  const displayLabel = selectedOption?.label ?? value ?? "";
-
-  const close = useCallback(() => {
-    setOpen(false);
-    setHighlightedIndex(-1);
-  }, []);
-
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        close();
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open, close]);
-
-  useEffect(() => {
-    if (open && listRef.current && highlightedIndex >= 0) {
-      const el = listRef.current.children[highlightedIndex] as HTMLElement | undefined;
-      el?.scrollIntoView({ block: "nearest" });
-    }
-  }, [open, highlightedIndex]);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (disabled) return;
-    switch (e.key) {
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        if (!open) {
-          setOpen(true);
-          setHighlightedIndex(options.findIndex((o) => o.value === value));
-        } else if (highlightedIndex >= 0 && options[highlightedIndex]) {
-          onValueChange?.(options[highlightedIndex].value);
-          close();
-        }
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        if (!open) {
-          setOpen(true);
-          setHighlightedIndex(options.findIndex((o) => o.value === value));
-        } else {
-          setHighlightedIndex((i) => Math.min(i + 1, options.length - 1));
-        }
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        if (open) {
-          setHighlightedIndex((i) => Math.max(i - 1, 0));
-        }
-        break;
-      case "Escape":
-        e.preventDefault();
-        close();
-        break;
-    }
-  };
-
-  return (
-    <div ref={containerRef} className={cn("relative", className)} id={id}>
-      <button
-        type="button"
-        role="combobox"
-        aria-expanded={open}
-        aria-haspopup="listbox"
-        disabled={disabled}
-        onClick={() => !disabled && setOpen((o) => !o)}
-        onKeyDown={handleKeyDown}
-        className={cn(
-          "flex h-9 w-full items-center justify-between border border-border bg-background/40 px-3 py-1 font-courier text-sm text-left transition-colors",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/30 focus-visible:border-foreground/25",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "cursor-pointer",
-        )}
-      >
-        <span className={cn("truncate", !selectedOption && "text-muted-foreground")}>
-          {displayLabel}
-        </span>
-        <ChevronDown
-          className={cn(
-            "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform",
-            open && "rotate-180",
-          )}
-        />
-      </button>
-
-      {open && (
-        <div
-          ref={listRef}
-          role="listbox"
-          className={cn(
-            "absolute z-50 mt-1 w-full border border-border bg-popover text-popover-foreground shadow-lg",
-            "max-h-60 overflow-auto",
-            "animate-[fade-in_100ms_ease-out]",
-          )}
-        >
-          {options.map((opt, i) => {
-            const isSelected = opt.value === value;
-            const isHighlighted = i === highlightedIndex;
-            return (
-              <div
-                key={opt.value}
-                role="option"
-                aria-selected={isSelected}
-                onMouseEnter={() => setHighlightedIndex(i)}
-                onClick={() => {
-                  onValueChange?.(opt.value);
-                  close();
-                }}
-                className={cn(
-                  "flex items-center gap-2 px-3 py-2 text-sm font-courier cursor-pointer transition-colors",
-                  isHighlighted && "bg-foreground/10",
-                  isSelected && "text-foreground",
-                  !isSelected && "text-muted-foreground",
-                )}
-              >
-                <Check
-                  className={cn(
-                    "h-3.5 w-3.5 shrink-0",
-                    isSelected ? "opacity-100" : "opacity-0",
-                  )}
-                />
-                <span className="truncate">{opt.label}</span>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function SelectOption(_props: SelectOptionProps) {
-  return null;
-}
-
-function flattenChildren(children: React.ReactNode, out: SelectOptionData[]) {
-  const arr = Array.isArray(children) ? children : [children];
-  for (const child of arr) {
-    if (!child || typeof child !== "object" || !("props" in child)) continue;
-    const props = child.props as Record<string, unknown>;
-    if (props.value !== undefined) {
-      out.push({
-        value: String(props.value),
-        label: typeof props.children === "string" ? props.children : String(props.value),
-      });
-    } else if (props.children) {
-      flattenChildren(props.children as React.ReactNode, out);
-    }
-  }
-}
-
-interface SelectProps {
-  value?: string;
-  onValueChange?: (value: string) => void;
-  children?: React.ReactNode;
-  className?: string;
-  id?: string;
-  disabled?: boolean;
-}
-
-interface SelectOptionProps {
-  value: string;
-  children: React.ReactNode;
-}
-
-interface SelectOptionData {
-  value: string;
-  label: string;
-}

web/src/pages/ChatPage.tsx

@@ -22,7 +22,7 @@ import { WebLinksAddon } from "@xterm/addon-web-links";
 import { WebglAddon } from "@xterm/addon-webgl";
 import { Terminal } from "@xterm/xterm";
 import "@xterm/xterm/css/xterm.css";
-import { Typography } from "@nous-research/ui";
+import { Button, Typography } from "@nous-research/ui";
 import { cn } from "@/lib/utils";
 import { Copy, PanelRight, X } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -732,18 +732,15 @@ export default function ChatPage({ isActive = true }: { isActive?: boolean }) {
               {t.app.modelToolsSheetSubtitle}
             </Typography>
 
-            <button
-              type="button"
+            <Button
+              ghost
+              size="icon"
               onClick={closeMobilePanel}
               aria-label={t.app.closeModelTools}
-              className={cn(
-                "inline-flex h-7 w-7 items-center justify-center",
-                "text-midground/70 hover:text-midground transition-colors cursor-pointer",
-                "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground",
-              )}
+              className="text-midground/70 hover:text-midground"
             >
-              <X className="h-4 w-4" />
-            </button>
+              <X />
+            </Button>
           </div>
 
           <div

web/src/pages/CronPage.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { Clock, Pause, Play, Plus, Trash2, Zap } from "lucide-react";
-import { Button, H2 } from "@nous-research/ui";
+import { Badge, Button, H2, Select, SelectOption } from "@nous-research/ui";
 import { api } from "@/lib/api";
 import type { CronJob } from "@/lib/api";
 import { DeleteConfirmDialog } from "@/components/DeleteConfirmDialog";
@@ -8,10 +8,8 @@ import { useToast } from "@/hooks/useToast";
 import { useConfirmDelete } from "@/hooks/useConfirmDelete";
 import { Toast } from "@/components/Toast";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@nous-research/ui";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Select, SelectOption } from "@/components/ui/select";
 import { useI18n } from "@/i18n";
 import { PluginSlot } from "@/plugins";
 

web/src/pages/SessionsPage.tsx

@@ -693,14 +693,15 @@ export default function SessionsPage() {
               </Badge>
             </div>
 
-            <button
-              type="button"
+            <Button
+              ghost
+              size="icon"
               onClick={dismissLog}
-              className="shrink-0 opacity-60 hover:opacity-100 cursor-pointer"
+              className="shrink-0 opacity-60 hover:opacity-100"
               aria-label={t.common.close}
             >
-              <X className="h-3.5 w-3.5" />
-            </button>
+              <X />
+            </Button>
           </div>
 
           <pre

web/src/plugins/registry.ts

@@ -19,12 +19,10 @@ import React, {
 } from "react";
 import { api, fetchJSON } from "@/lib/api";
 import { cn, timeAgo, isoTimeAgo } from "@/lib/utils";
-import { Button } from "@nous-research/ui";
+import { Badge, Button, Select, SelectOption } from "@nous-research/ui";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-import { Badge } from "@nous-research/ui";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Select, SelectOption } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useI18n } from "@/i18n";