Merge branch 'main' into bb/gui

apps/dashboard/src/components/ModelPickerDialog.tsx

@@ -1,6 +1,8 @@
 import { Button } from "@nous-research/ui/ui/components/button";
+import { Checkbox } from "@nous-research/ui/ui/components/checkbox";
 import { ListItem } from "@nous-research/ui/ui/components/list-item";
 import { Spinner } from "@nous-research/ui/ui/components/spinner";
+import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import type { GatewayClient } from "@/lib/gatewayClient";
 import { Check, Search, X } from "lucide-react";
@@ -283,15 +285,22 @@ export function ModelPickerDialog(props: Props) {
               Saves to config.yaml — applies to new sessions.
             </span>
           ) : (
-            <label className="flex items-center gap-2 text-xs text-muted-foreground cursor-pointer select-none">
-              <input
-                type="checkbox"
+            <div className="flex items-center gap-2">
+              <Checkbox
                 checked={persistGlobal}
-                onChange={(e) => setPersistGlobal(e.target.checked)}
-                className="cursor-pointer"
+                id="model-picker-persist-global"
+                onCheckedChange={(checked) =>
+                  setPersistGlobal(checked === true)
+                }
               />
-              Persist globally (otherwise this session only)
-            </label>
+
+              <Label
+                className="font-sans normal-case tracking-normal text-xs text-muted-foreground cursor-pointer"
+                htmlFor="model-picker-persist-global"
+              >
+                Persist globally (otherwise this session only)
+              </Label>
+            </div>
           )}
 
           <div className="flex items-center gap-2 ml-auto">

apps/dashboard/src/components/ui/checkbox.tsx

@@ -1,61 +0,0 @@
-import { cn } from "@/lib/utils";
-import { Check } from "lucide-react";
-
-interface CheckboxProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
-  label?: React.ReactNode;
-}
-
-export function Checkbox({
-  className,
-  label,
-  id,
-  checked,
-  defaultChecked,
-  ...props
-}: CheckboxProps) {
-  // Support both controlled (checked prop) and uncontrolled (defaultChecked) usage.
-  // For visual rendering, prefer `checked` if provided; otherwise fall back to defaultChecked.
-  const isChecked = checked ?? defaultChecked ?? false;
-
-  return (
-    <label
-      htmlFor={id}
-      className={cn(
-        "group flex items-center gap-2.5 cursor-pointer select-none",
-        props.disabled && "cursor-not-allowed opacity-50",
-      )}
-    >
-      <span
-        className={cn(
-          "flex h-4 w-4 shrink-0 items-center justify-center transition-all",
-          "border bg-background/40",
-          // Focus-visible ring for keyboard accessibility
-          "group-has-[:focus-visible]:ring-2 group-has-[:focus-visible]:ring-ring group-has-[:focus-visible]:ring-offset-1",
-          isChecked
-            ? "border-foreground bg-foreground/20"
-            : "border-border group-hover:border-foreground/40",
-          className,
-        )}
-      >
-        <Check
-          className={cn(
-            "h-3 w-3 transition-opacity",
-            isChecked
-              ? "text-foreground opacity-100"
-              : "text-foreground opacity-0",
-          )}
-        />
-      </span>
-      <input
-        type="checkbox"
-        id={id}
-        checked={checked}
-        defaultChecked={checked === undefined ? defaultChecked : undefined}
-        className="sr-only"
-        {...props}
-      />
-      {label && <span className="text-sm">{label}</span>}
-    </label>
-  );
-}