fix(ui): replace browser defaults with themed controls

src/components/account/access-panels.tsx

@@ -1,3 +1,5 @@
+import { SearchInput } from "@/components/ui/search-input";
+import { Hint } from "@/components/ui/tooltip";
 import { useState, type ReactNode } from "react";
 import { cn } from "cn";
 import { BadgeCheck, Fingerprint, Plus, Search, Trash2 } from "lucide-react";
@@ -73,20 +75,20 @@ export function GroupsPanel({ groups }: { groups: AccountDetails["groups"] }) {
       {groups.length ? (
         <ul className="flex flex-wrap gap-2 px-5 py-4">
           {groups.map((group) => (
-            <li
-              key={group.key}
-              title={group.description ?? undefined}
-              className={cn(
-                "inline-flex items-center gap-1.5 rounded-full py-1.5 text-sm font-medium",
-                group.automatic
-                  ? "bg-primary pr-3 pl-2 text-primary-foreground"
-                  : "border bg-muted/40 px-3",
-              )}
-            >
-              {group.automatic && <BadgeCheck className="size-4" aria-hidden="true" />}
-              {group.name}
-              {group.automatic && <span className="sr-only">(automatic)</span>}
-            </li>
+            <Hint content={group.description ?? undefined} key={group.key}>
+              <li
+                className={cn(
+                  "inline-flex items-center gap-1.5 rounded-full py-1.5 text-sm font-medium",
+                  group.automatic
+                    ? "bg-primary pr-3 pl-2 text-primary-foreground"
+                    : "border bg-muted/40 px-3",
+                )}
+              >
+                {group.automatic && <BadgeCheck className="size-4" aria-hidden="true" />}
+                {group.name}
+                {group.automatic && <span className="sr-only">(automatic)</span>}
+              </li>
+            </Hint>
           ))}
         </ul>
       ) : (
@@ -146,18 +148,14 @@ export function PermissionsPanel({ permissions }: { permissions: Permission[] })
             className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground"
             aria-hidden="true"
           />
-          <input
-            type="search"
+          <SearchInput
             value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Escape") setSearch("");
-            }}
+            onValueChange={setSearch}
             aria-label="Search permissions"
             placeholder="Search"
             autoComplete="off"
             spellCheck={false}
-            className="h-9 w-full rounded-md border bg-background pr-2.5 pl-8 text-base outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 sm:text-sm dark:bg-input/30"
+            className="h-9 w-full rounded-md border bg-background pl-8 text-base outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 sm:text-sm dark:bg-input/30"
           />
         </div>
         {matching.length ? (

src/components/account/account-cards.tsx

@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import { useRouter } from "@tanstack/react-router";
 import { useState, type ReactNode } from "react";
 import { cn } from "cn";
@@ -67,17 +68,19 @@ function UnlinkAction({
   onClick: () => void;
 }) {
   return (
-    <span title={reason} className="block">
-      <Button
-        variant="destructive-soft"
-        className={cardButton}
-        disabled={disabled}
-        onClick={onClick}
-      >
-        {busy ? <Spinner /> : <Unlink />}
-        Unlink
-      </Button>
-    </span>
+    <Hint content={reason}>
+      <span className="block">
+        <Button
+          variant="destructive-soft"
+          className={cardButton}
+          disabled={disabled}
+          onClick={onClick}
+        >
+          {busy ? <Spinner /> : <Unlink />}
+          Unlink
+        </Button>
+      </span>
+    </Hint>
   );
 }
 
@@ -295,6 +298,7 @@ function StudentVerification({ onDone }: { onDone: () => void }) {
 
   return (
     <form
+      noValidate
       className="grid gap-2"
       onSubmit={(event) => {
         event.preventDefault();

src/components/account/mcp-panel.tsx

@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import { useState } from "react";
 import { Bot, Unplug } from "lucide-react";
 import type { AccountDetails } from "@/auth/account.functions";
@@ -54,17 +55,19 @@ export function McpPanel({ mcp, actions }: { mcp: Mcp; actions: AccountActions }
                   Active <TimeAgo value={agent.lastUsedAt} />
                 </p>
               </div>
-              <Button
-                variant="destructive-soft"
-                size="icon-sm"
-                className="border-0"
-                aria-label={`Disconnect ${name}`}
-                title="Disconnect"
-                disabled={locked}
-                onClick={() => setPending({ clientId: agent.clientId, name })}
-              >
-                {actions.busy === agent.clientId ? <Spinner /> : <Unplug />}
-              </Button>
+              <Hint content="Disconnect">
+                <Button
+                  variant="destructive-soft"
+                  size="icon-sm"
+                  className="border-0"
+                  aria-label={`Disconnect ${name}`}
+
+                  disabled={locked}
+                  onClick={() => setPending({ clientId: agent.clientId, name })}
+                >
+                  {actions.busy === agent.clientId ? <Spinner /> : <Unplug />}
+                </Button>
+              </Hint>
             </li>
           );
         })}

src/components/account/secret-text.tsx

@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import { useEffect, useState } from "react";
 import { cn } from "cn";
 import { CopyButton } from "@/components/copy-button";
@@ -57,26 +58,28 @@ export function SecretText({
 
   return (
     <span className="inline-flex max-w-full min-w-0 items-center gap-1">
-      <button
-        type="button"
-        aria-label={shown ? `Hide ${label}` : `Show ${label}`}
-        title={shown ? "Click to hide" : "Click to reveal"}
-        onClick={() => setShown((value) => !value)}
-        className="min-w-0 cursor-pointer rounded-sm text-left font-mono text-xs break-all select-none outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <span
-          aria-hidden={!revealed}
-          className={cn(
-            "transition-[filter,color] motion-reduce:transition-none",
-            // The value leaves faster than it arrives.
-            blurred
-              ? "text-muted-foreground blur-[4px] duration-100 ease-in"
-              : "text-foreground blur-0 duration-200 ease-out",
-          )}
+      <Hint content={shown ? "Click to hide" : "Click to reveal"}>
+        <button
+          type="button"
+          aria-label={shown ? `Hide ${label}` : `Show ${label}`}
+
+          onClick={() => setShown((value) => !value)}
+          className="min-w-0 cursor-pointer rounded-sm text-left font-mono text-xs break-all select-none outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
-          {truncate(revealed ? value : scramble(value), maxChars)}
-        </span>
-      </button>
+          <span
+            aria-hidden={!revealed}
+            className={cn(
+              "transition-[filter,color] motion-reduce:transition-none",
+              // The value leaves faster than it arrives.
+              blurred
+                ? "text-muted-foreground blur-[4px] duration-100 ease-in"
+                : "text-foreground blur-0 duration-200 ease-out",
+            )}
+          >
+            {truncate(revealed ? value : scramble(value), maxChars)}
+          </span>
+        </button>
+      </Hint>
       <CopyButton value={value} label={`Copy ${label}`} className="shrink-0" />
     </span>
   );

src/components/account/sessions-panel.tsx

@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import { useState } from "react";
 import { LogOut, Monitor, Smartphone } from "lucide-react";
 import type { AccountDetails } from "@/auth/account.functions";
@@ -105,17 +106,19 @@ export function SessionsPanel({
                 </p>
               </div>
               {!entry.current && (
-                <Button
-                  variant="destructive-soft"
-                  size="icon-sm"
-                  className="border-0"
-                  aria-label={`Sign out of ${agent.label}`}
-                  title="Sign out"
-                  disabled={locked}
-                  onClick={() => setPending({ kind: "one", id: entry.id, label: agent.label })}
-                >
-                  {actions.busy === entry.id ? <Spinner /> : <LogOut />}
-                </Button>
+                <Hint content="Sign out">
+                  <Button
+                    variant="destructive-soft"
+                    size="icon-sm"
+                    className="border-0"
+                    aria-label={`Sign out of ${agent.label}`}
+
+                    disabled={locked}
+                    onClick={() => setPending({ kind: "one", id: entry.id, label: agent.label })}
+                  >
+                    {actions.busy === entry.id ? <Spinner /> : <LogOut />}
+                  </Button>
+                </Hint>
               )}
             </li>
           );

src/components/copy-button.tsx

@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import { useEffect, useState } from "react";
 import { Check, Copy } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -20,24 +21,30 @@ export function CopyButton({
     return () => clearTimeout(timer);
   }, [copied]);
   return (
-    <Button
-      type="button"
-      variant="ghost"
-      size={size}
-      className={className}
-      aria-label={copied ? "Copied" : label}
-      title={copied ? "Copied" : label}
-      onClick={async () => {
-        try {
-          await navigator.clipboard.writeText(value);
-          setCopied(true);
-        } catch {
-          /* Clipboard unavailable: the value stays visible for manual copy. */
-        }
-      }}
-    >
-      {copied ? <Check className="text-primary" aria-hidden="true" /> : <Copy aria-hidden="true" />}
-      {size === "sm" && (copied ? "Copied" : "Copy")}
-    </Button>
+    <Hint content={copied ? "Copied" : label}>
+      <Button
+        type="button"
+        variant="ghost"
+        size={size}
+        className={className}
+        aria-label={copied ? "Copied" : label}
+
+        onClick={async () => {
+          try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+          } catch {
+            /* Clipboard unavailable: the value stays visible for manual copy. */
+          }
+        }}
+      >
+        {copied ? (
+          <Check className="text-primary" aria-hidden="true" />
+        ) : (
+          <Copy aria-hidden="true" />
+        )}
+        {size === "sm" && (copied ? "Copied" : "Copy")}
+      </Button>
+    </Hint>
   );
 }