diff --git a/.agents/skills/react-doctor/SKILL.md b/.agents/skills/react-doctor/SKILL.md
new file mode 100644
index 0000000000..22e73a50a5
--- /dev/null
+++ b/.agents/skills/react-doctor/SKILL.md
@@ -0,0 +1,32 @@
+---
+name: react-doctor
+description: Use when finishing a feature, fixing a bug, before committing React code, or when the user wants to improve code quality or clean up a codebase. Checks for score regression. Covers lint, dead code, accessibility, bundle size, architecture diagnostics.
+version: '1.0.0'
+---
+
+# React Doctor
+
+Scans React codebases for security, performance, correctness, and architecture issues. Outputs a 0–100 health score.
+
+## After making React code changes:
+
+Run `npx -y react-doctor@latest . --verbose --diff` and check the score did not regress.
+
+If the score dropped, fix the regressions before committing.
+
+## For general cleanup or code improvement:
+
+Run `npx -y react-doctor@latest . --verbose` (without `--diff`) to scan the full codebase. Fix issues by severity — errors first, then warnings.
+
+## Command
+
+```bash
+npx -y react-doctor@latest . --verbose --diff
+```
+
+| Flag        | Purpose                                       |
+| ----------- | --------------------------------------------- |
+| `.`         | Scan current directory                        |
+| `--verbose` | Show affected files and line numbers per rule |
+| `--diff`    | Only scan changed files vs base branch        |
+| `--score`   | Output only the numeric score                 |
diff --git a/apps/web/src/app/(app)/claw/components/ChannelPairingStep.tsx b/apps/web/src/app/(app)/claw/components/ChannelPairingStep.tsx
index a78aea4033..c07e0bb34f 100644
--- a/apps/web/src/app/(app)/claw/components/ChannelPairingStep.tsx
+++ b/apps/web/src/app/(app)/claw/components/ChannelPairingStep.tsx
@@ -46,16 +46,27 @@ export function ChannelPairingStep({
 
   useEffect(() => {
     let cancelled = false;
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+    function waitForNextPoll() {
+      return new Promise<void>(resolve => {
+        timeoutId = setTimeout(resolve, 1_000);
+      });
+    }
+
     async function poll() {
       while (!cancelled) {
         await refreshRef.current().catch(() => {});
         if (cancelled) break;
-        await new Promise(r => setTimeout(r, 1_000));
+        await waitForNextPoll();
       }
     }
     void poll();
     return () => {
       cancelled = true;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
     };
   }, []);
 
@@ -143,7 +154,7 @@ export function ChannelPairingStepView({
       >
         <div className="border-border bg-muted/30 flex flex-col rounded-lg border">
           <div className="flex items-center gap-2 px-5 pt-5 pb-4">
-            <Send className="text-muted-foreground h-4 w-4" />
+            <Send className="text-muted-foreground size-4" />
             <span className="text-muted-foreground text-xs font-semibold uppercase tracking-wider">
               Pairing request received
             </span>
@@ -175,9 +186,9 @@ export function ChannelPairingStepView({
           disabled={isApproving}
         >
           {isApproving ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
+            <Loader2 className="size-4 animate-spin" />
           ) : (
-            <CheckCircle2 className="h-4 w-4" />
+            <CheckCircle2 className="size-4" />
           )}
           Authorize this request
         </Button>
@@ -187,7 +198,7 @@ export function ChannelPairingStepView({
           className="text-muted-foreground/50 hover:text-muted-foreground mx-auto flex cursor-pointer items-center gap-1.5 text-sm transition-colors"
           onClick={onSkip}
         >
-          <XCircle className="h-3.5 w-3.5" />
+          <XCircle className="size-3.5" />
           Decline
         </button>
       </OnboardingStepView>
@@ -203,7 +214,7 @@ export function ChannelPairingStepView({
       contentClassName="gap-8"
     >
       <div className="flex flex-col items-center gap-8">
-        <div className="pairing-spinner relative h-24 w-24 my-6">
+        <div className="pairing-spinner relative size-24 my-6">
           <svg className="h-full w-full" viewBox="0 0 96 96">
             <circle
               cx="48"
@@ -238,7 +249,7 @@ export function ChannelPairingStepView({
 
         <div className="flex flex-col items-center gap-2 text-center">
           <h2 className="text-foreground text-lg font-semibold">
-            Waiting for you to message the bot...
+            Waiting for you to message the bot…
           </h2>
           <p className="text-muted-foreground text-sm">This page will update automatically.</p>
         </div>
@@ -247,7 +258,7 @@ export function ChannelPairingStepView({
           className="text-muted-foreground/50 cursor-pointer hover:text-muted-foreground text-sm transition-colors my-6"
           onClick={onSkip}
         >
-          Skip — I&apos;ll pair later from Settings
+          Skip. I&apos;ll pair later from Settings
         </button>
       </div>
     </OnboardingStepView>
diff --git a/apps/web/src/app/(app)/claw/components/KiloClawScheduledActionBanner.tsx b/apps/web/src/app/(app)/claw/components/KiloClawScheduledActionBanner.tsx
index cfd5c77b9e..f36c9b5306 100644
--- a/apps/web/src/app/(app)/claw/components/KiloClawScheduledActionBanner.tsx
+++ b/apps/web/src/app/(app)/claw/components/KiloClawScheduledActionBanner.tsx
@@ -17,6 +17,8 @@ import { CalendarClock } from 'lucide-react';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import type { KiloClawScheduledActionStatusBlock } from '@/lib/kiloclaw/types';
 
+const timezoneNameFormatter = new Intl.DateTimeFormat(undefined, { timeZoneName: 'short' });
+
 type Props = {
   scheduledAction: KiloClawScheduledActionStatusBlock | null;
   /**
@@ -47,7 +49,7 @@ function formatScheduledAt(iso: string): string {
     const d = new Date(iso);
     if (Number.isNaN(d.getTime())) return iso;
     const dateStr = d.toLocaleString();
-    const tzPart = new Intl.DateTimeFormat(undefined, { timeZoneName: 'short' })
+    const tzPart = timezoneNameFormatter
       .formatToParts(d)
       .find(p => p.type === 'timeZoneName')?.value;
     return tzPart ? `${dateStr} ${tzPart}` : dateStr;
@@ -80,7 +82,7 @@ export function KiloClawScheduledActionBanner({ scheduledAction, instanceName }:
 
   return (
     <Alert className="border-yellow-500/30 bg-yellow-500/5">
-      <CalendarClock className="h-4 w-4 text-yellow-400" />
+      <CalendarClock className="size-4 text-yellow-400" />
       <AlertDescription>
         {isVersionChange ? (
           <>
diff --git a/apps/web/src/app/(app)/install/page.tsx b/apps/web/src/app/(app)/install/page.tsx
index 881e6dbffb..967b10aba9 100644
--- a/apps/web/src/app/(app)/install/page.tsx
+++ b/apps/web/src/app/(app)/install/page.tsx
@@ -44,10 +44,10 @@ export default function InstallPage() {
     <PageLayout title="Install">
       <div className="grid gap-6 md:grid-cols-2">
         <Card className="group border-brand-primary/20 hover:border-brand-primary/40 hover:shadow-brand-primary/5 relative flex flex-col justify-between overflow-hidden transition-all hover:shadow-lg">
-          <div className="bg-brand-primary/10 group-hover:bg-brand-primary/20 absolute top-0 right-0 h-32 w-32 translate-x-8 -translate-y-8 rounded-full blur-2xl transition-all" />
+          <div className="bg-brand-primary/10 group-hover:bg-brand-primary/20 absolute top-0 right-0 size-32 translate-x-8 -translate-y-8 rounded-full blur-2xl transition-all" />
           <CardHeader className="relative flex-1">
-            <div className="bg-brand-primary/10 text-brand-primary mb-4 flex h-12 w-12 items-center justify-center rounded-lg">
-              <CodeIcon className="h-6 w-6" />
+            <div className="bg-brand-primary/10 text-brand-primary mb-4 flex size-12 items-center justify-center rounded-lg">
+              <CodeIcon className="size-6" />
             </div>
             <CardTitle className="text-xl">IDE Extension</CardTitle>
             <CardDescription className="text-muted-foreground mt-2">
@@ -57,7 +57,7 @@ export default function InstallPage() {
           </CardHeader>
           <CardFooter>
             <Button
-              className="bg-brand-primary hover:text-brand-primary hover:ring-brand-primary w-full text-black hover:bg-black hover:ring-2"
+              className="bg-brand-primary hover:text-brand-primary hover:ring-brand-primary w-full text-primary-foreground hover:bg-background hover:ring-2"
               asChild
             >
               <Link href="https://kilo.ai/install" target="_blank" rel="noopener noreferrer">
@@ -68,10 +68,10 @@ export default function InstallPage() {
         </Card>
 
         <Card className="group border-brand-primary/20 hover:border-brand-primary/40 hover:shadow-brand-primary/5 relative flex flex-col justify-between overflow-hidden transition-all hover:shadow-lg">
-          <div className="bg-brand-primary/10 group-hover:bg-brand-primary/20 absolute top-0 right-0 h-32 w-32 translate-x-8 -translate-y-8 rounded-full blur-2xl transition-all" />
+          <div className="bg-brand-primary/10 group-hover:bg-brand-primary/20 absolute top-0 right-0 size-32 translate-x-8 -translate-y-8 rounded-full blur-2xl transition-all" />
           <CardHeader className="relative flex-1">
-            <div className="bg-brand-primary/10 text-brand-primary mb-4 flex h-12 w-12 items-center justify-center rounded-lg">
-              <TerminalIcon className="h-6 w-6" />
+            <div className="bg-brand-primary/10 text-brand-primary mb-4 flex size-12 items-center justify-center rounded-lg">
+              <TerminalIcon className="size-6" />
             </div>
             <CardTitle className="text-xl">Command Line Tool</CardTitle>
             <CardDescription className="text-muted-foreground mt-2">
@@ -80,7 +80,7 @@ export default function InstallPage() {
           </CardHeader>
           <CardFooter>
             <Button
-              className="bg-brand-primary hover:text-brand-primary hover:ring-brand-primary w-full text-black hover:bg-black hover:ring-2"
+              className="bg-brand-primary hover:text-brand-primary hover:ring-brand-primary w-full text-primary-foreground hover:bg-background hover:ring-2"
               asChild
             >
               <Link href="https://kilo.ai/install#cli" target="_blank" rel="noopener noreferrer">
diff --git a/apps/web/src/app/(app)/learn/page.tsx b/apps/web/src/app/(app)/learn/page.tsx
index 6bfb9b4064..bfc803aaf4 100644
--- a/apps/web/src/app/(app)/learn/page.tsx
+++ b/apps/web/src/app/(app)/learn/page.tsx
@@ -43,10 +43,10 @@ export default function LearnPage() {
     <PageLayout title="Learn">
       <div className="grid gap-6 md:grid-cols-2">
         <Card className="group border-brand-primary/20 hover:border-brand-primary/40 hover:shadow-brand-primary/5 relative flex flex-col justify-between overflow-hidden transition-all hover:shadow-lg">
-          <div className="bg-brand-primary/10 group-hover:bg-brand-primary/20 absolute top-0 right-0 h-32 w-32 translate-x-8 -translate-y-8 rounded-full blur-2xl transition-all" />
+          <div className="bg-brand-primary/10 group-hover:bg-brand-primary/20 absolute top-0 right-0 size-32 translate-x-8 -translate-y-8 rounded-full blur-2xl transition-all" />
           <CardHeader className="relative flex-1">
-            <div className="bg-brand-primary/10 text-brand-primary mb-4 flex h-12 w-12 items-center justify-center rounded-lg">
-              <BookIcon className="h-6 w-6" />
+            <div className="bg-brand-primary/10 text-brand-primary mb-4 flex size-12 items-center justify-center rounded-lg">
+              <BookIcon className="size-6" />
             </div>
             <CardTitle className="text-xl">Documentation</CardTitle>
             <CardDescription className="text-muted-foreground mt-2">
@@ -55,7 +55,7 @@ export default function LearnPage() {
           </CardHeader>
           <CardFooter>
             <Button
-              className="bg-brand-primary hover:text-brand-primary hover:ring-brand-primary w-full text-black hover:bg-black hover:ring-2"
+              className="bg-brand-primary hover:text-brand-primary hover:ring-brand-primary w-full text-primary-foreground hover:bg-background hover:ring-2"
               asChild
             >
               <Link href="https://kilo.ai/docs" target="_blank" rel="noopener noreferrer">
@@ -66,10 +66,10 @@ export default function LearnPage() {
         </Card>
 
         <Card className="group border-brand-primary/20 hover:border-brand-primary/40 hover:shadow-brand-primary/5 relative flex flex-col justify-between overflow-hidden transition-all hover:shadow-lg">
-          <div className="bg-brand-primary/10 group-hover:bg-brand-primary/20 absolute top-0 right-0 h-32 w-32 translate-x-8 -translate-y-8 rounded-full blur-2xl transition-all" />
+          <div className="bg-brand-primary/10 group-hover:bg-brand-primary/20 absolute top-0 right-0 size-32 translate-x-8 -translate-y-8 rounded-full blur-2xl transition-all" />
           <CardHeader className="relative flex-1">
-            <div className="bg-brand-primary/10 text-brand-primary mb-4 flex h-12 w-12 items-center justify-center rounded-lg">
-              <VideoIcon className="h-6 w-6" />
+            <div className="bg-brand-primary/10 text-brand-primary mb-4 flex size-12 items-center justify-center rounded-lg">
+              <VideoIcon className="size-6" />
             </div>
             <CardTitle className="text-xl">Live Q&A Sessions</CardTitle>
             <CardDescription className="text-muted-foreground mt-2">
@@ -79,7 +79,7 @@ export default function LearnPage() {
           </CardHeader>
           <CardFooter>
             <Button
-              className="bg-brand-primary hover:text-brand-primary hover:ring-brand-primary w-full text-black hover:bg-black hover:ring-2"
+              className="bg-brand-primary hover:text-brand-primary hover:ring-brand-primary w-full text-primary-foreground hover:bg-background hover:ring-2"
               asChild
             >
               <Link
diff --git a/apps/web/src/app/admin/components/BlacklistedDomains.tsx b/apps/web/src/app/admin/components/BlacklistedDomains.tsx
index ccbffebd18..af0b8cb17a 100644
--- a/apps/web/src/app/admin/components/BlacklistedDomains.tsx
+++ b/apps/web/src/app/admin/components/BlacklistedDomains.tsx
@@ -53,16 +53,16 @@ function EditTab() {
   );
 
   function handleSave() {
-    const domains = inputValue
-      .split(/[\n|]/)
-      .map(part => part.trim().toLowerCase())
-      .filter(Boolean);
+    const domains = inputValue.split(/[\n|]/).flatMap(part => {
+      const domain = part.trim().toLowerCase();
+      return domain ? [domain] : [];
+    });
 
     mutation.mutate({ domains });
   }
 
   if (isLoading) {
-    return <div className="text-muted-foreground py-8 text-sm">Loading...</div>;
+    return <div className="text-muted-foreground py-8 text-sm">Loading…</div>;
   }
 
   const domainCount = data?.domains.length ?? 0;
@@ -73,7 +73,7 @@ function EditTab() {
         <div className="flex items-center justify-between">
           <div>
             <CardTitle className="flex items-center gap-2">
-              <Shield className="h-5 w-5" />
+              <Shield className="size-5" />
               Blacklisted Domains
             </CardTitle>
             <CardDescription>
@@ -101,7 +101,7 @@ function EditTab() {
 
         <div className="flex items-center gap-3">
           <Button onClick={handleSave} disabled={mutation.isPending || !hasChanges} size="sm">
-            {mutation.isPending ? 'Saving...' : 'Save'}
+            {mutation.isPending ? 'Saving…' : 'Save'}
           </Button>
           {data?.updated_by_email && (
             <span className="text-muted-foreground text-sm">
@@ -143,7 +143,7 @@ function StatsTab() {
                 {stats.totalDomains} {stats.totalDomains === 1 ? 'domain' : 'domains'}
               </Badge>
               <Badge variant="destructive" className="px-3 py-1">
-                <Users className="mr-1 h-3 w-3" />
+                <Users className="mr-1 size-3" />
                 {stats.totalBlockedUsers.toLocaleString()} blocked users
               </Badge>
             </div>
@@ -152,7 +152,7 @@ function StatsTab() {
       </CardHeader>
       <CardContent>
         {isLoading ? (
-          <div className="text-muted-foreground py-8 text-center text-sm">Loading stats...</div>
+          <div className="text-muted-foreground py-8 text-center text-sm">Loading stats…</div>
         ) : !stats || stats.domains.length === 0 ? (
           <div className="text-muted-foreground py-8 text-center">
             No blacklisted domains configured
@@ -219,7 +219,7 @@ function SuspiciousTab() {
                 {domains.length} {domains.length === 1 ? 'domain' : 'domains'}
               </Badge>
               <Badge variant="outline" className="px-3 py-1">
-                <Shield className="mr-1 h-3 w-3" />
+                <Shield className="mr-1 size-3" />
                 {blacklistedCount} already blacklisted
               </Badge>
             </div>
@@ -254,12 +254,12 @@ function SuspiciousTab() {
                     <TableCell>
                       {domain.isBlacklisted ? (
                         <Badge variant="secondary" className="gap-1">
-                          <CheckCircle2 className="h-3 w-3" />
+                          <CheckCircle2 className="size-3" />
                           Blacklisted
                         </Badge>
                       ) : (
                         <Badge variant="destructive" className="gap-1">
-                          <AlertTriangle className="h-3 w-3" />
+                          <AlertTriangle className="size-3" />
                           Not blacklisted
                         </Badge>
                       )}
diff --git a/apps/web/src/app/admin/components/KiloclawInstances/KiloclawOrphansTab.tsx b/apps/web/src/app/admin/components/KiloclawInstances/KiloclawOrphansTab.tsx
index b7de2f41bf..b86a9a87dd 100644
--- a/apps/web/src/app/admin/components/KiloclawInstances/KiloclawOrphansTab.tsx
+++ b/apps/web/src/app/admin/components/KiloclawInstances/KiloclawOrphansTab.tsx
@@ -84,14 +84,14 @@ function TroubleshootingEventsDialog({
         <div className="overflow-y-auto">
           {isLoading && (
             <div className="flex items-center gap-2 py-4">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              <span className="text-muted-foreground text-sm">Loading events...</span>
+              <Loader2 className="size-4 animate-spin" />
+              <span className="text-muted-foreground text-sm">Loading events…</span>
             </div>
           )}
 
           {error && (
             <Alert>
-              <AlertTriangle className="h-4 w-4" />
+              <AlertTriangle className="size-4" />
               <AlertDescription>
                 {error instanceof Error ? error.message : 'Failed to load Analytics Engine events'}
               </AlertDescription>
@@ -148,10 +148,12 @@ export function KiloclawOrphansTab() {
   const trpc = useTRPC();
   const queryClient = useQueryClient();
 
-  const [createdAfterInput, setCreatedAfterInput] = useState(
+  const [createdAfterInput, setCreatedAfterInput] = useState(() =>
     toDatetimeLocalInput(subDays(new Date(), 1))
   );
-  const [createdBeforeInput, setCreatedBeforeInput] = useState(toDatetimeLocalInput(new Date()));
+  const [createdBeforeInput, setCreatedBeforeInput] = useState(() =>
+    toDatetimeLocalInput(new Date())
+  );
   const [scanResult, setScanResult] = useState<{
     orphans: OrphanRow[];
     scanned: number;
@@ -187,11 +189,15 @@ export function KiloclawOrphansTab() {
         void queryClient.invalidateQueries({
           queryKey: trpc.admin.kiloclawInstances.stats.queryKey(),
         });
-        if (scanResult && destroyTarget) {
-          setScanResult({
-            ...scanResult,
-            orphans: scanResult.orphans.filter(orphan => orphan.id !== destroyTarget.id),
-          });
+        if (destroyTarget) {
+          setScanResult(prevScanResult =>
+            prevScanResult
+              ? {
+                  ...prevScanResult,
+                  orphans: prevScanResult.orphans.filter(orphan => orphan.id !== destroyTarget.id),
+                }
+              : prevScanResult
+          );
         }
       },
       onError: err => {
@@ -237,16 +243,22 @@ export function KiloclawOrphansTab() {
         <CardContent className="flex flex-col gap-4">
           <div className="flex flex-wrap items-end gap-4">
             <div className="flex min-w-[220px] flex-col gap-2">
-              <label className="text-sm font-medium">Created After</label>
+              <label htmlFor="created-after" className="text-sm font-medium">
+                Created After
+              </label>
               <Input
+                id="created-after"
                 type="datetime-local"
                 value={createdAfterInput}
                 onChange={e => setCreatedAfterInput(e.target.value)}
               />
             </div>
             <div className="flex min-w-[220px] flex-col gap-2">
-              <label className="text-sm font-medium">Created Before</label>
+              <label htmlFor="created-before" className="text-sm font-medium">
+                Created Before
+              </label>
               <Input
+                id="created-before"
                 type="datetime-local"
                 value={createdBeforeInput}
                 onChange={e => setCreatedBeforeInput(e.target.value)}
@@ -255,12 +267,12 @@ export function KiloclawOrphansTab() {
             <Button onClick={handleScan} disabled={detectOrphans.isPending}>
               {detectOrphans.isPending ? (
                 <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Scanning...
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                  Scanning…
                 </>
               ) : (
                 <>
-                  <Search className="mr-2 h-4 w-4" />
+                  <Search className="mr-2 size-4" />
                   Scan
                 </>
               )}
@@ -298,7 +310,7 @@ export function KiloclawOrphansTab() {
 
           {scanResult?.capped && (
             <Alert>
-              <AlertTriangle className="h-4 w-4" />
+              <AlertTriangle className="size-4" />
               <AlertDescription>
                 Results capped at 1000 rows. Narrow the date range to scan all matching instances.
               </AlertDescription>
@@ -368,7 +380,7 @@ export function KiloclawOrphansTab() {
                             {orphan.subscription_status}
                           </Badge>
                         ) : (
-                          <span className="text-muted-foreground text-sm">—</span>
+                          <span className="text-muted-foreground text-sm">None</span>
                         )}
                       </TableCell>
                       <TableCell title={new Date(orphan.created_at).toLocaleString()}>
@@ -397,7 +409,7 @@ export function KiloclawOrphansTab() {
                             size="sm"
                             onClick={() => setDestroyTarget(orphan)}
                           >
-                            <Trash2 className="mr-2 h-4 w-4" />
+                            <Trash2 className="mr-2 size-4" />
                             Destroy
                           </Button>
                         </div>
@@ -440,8 +452,8 @@ export function KiloclawOrphansTab() {
             >
               {destroyOrphan.isPending ? (
                 <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Destroying...
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                  Destroying…
                 </>
               ) : (
                 'Destroy orphan'
diff --git a/apps/web/src/app/auth/verify-magic-link/page.tsx b/apps/web/src/app/auth/verify-magic-link/page.tsx
index aec7bd17cf..e902d673e6 100644
--- a/apps/web/src/app/auth/verify-magic-link/page.tsx
+++ b/apps/web/src/app/auth/verify-magic-link/page.tsx
@@ -30,7 +30,7 @@ function VerifyMagicLinkContent() {
 
   if (error) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-black">
+      <div className="flex min-h-screen items-center justify-center bg-background">
         <div className="text-center">
           <div className="mb-4 rounded-md bg-red-950 p-4 text-red-300">{error}</div>
           <Link href="/users/sign_in" className="text-muted-foreground text-sm hover:underline">
@@ -42,10 +42,10 @@ function VerifyMagicLinkContent() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-black">
+    <div className="flex min-h-screen items-center justify-center bg-background">
       <div className="text-center">
-        <div className="mx-auto mb-6 h-12 w-12 animate-spin rounded-full border-4 border-gray-800 border-t-white"></div>
-        <p className="text-muted-foreground">Signing you in...</p>
+        <div className="mx-auto mb-6 size-12 animate-spin rounded-full border-4 border-muted border-t-foreground"></div>
+        <p className="text-muted-foreground">Signing you in…</p>
       </div>
     </div>
   );
@@ -55,10 +55,10 @@ export default function VerifyMagicLinkPage() {
   return (
     <Suspense
       fallback={
-        <div className="flex min-h-screen items-center justify-center bg-black">
+        <div className="flex min-h-screen items-center justify-center bg-background">
           <div className="text-center">
-            <div className="mx-auto mb-6 h-12 w-12 animate-spin rounded-full border-4 border-gray-800 border-t-white"></div>
-            <p className="text-muted-foreground">Loading...</p>
+            <div className="mx-auto mb-6 size-12 animate-spin rounded-full border-4 border-muted border-t-foreground"></div>
+            <p className="text-muted-foreground">Loading…</p>
           </div>
         </div>
       }
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 5ab1625faa..a8e28c3617 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -214,6 +214,41 @@
     animation: pulse-glow 0.6s ease-out;
   }
 
+  @keyframes typing-dot-pulse {
+    0%,
+    80%,
+    100% {
+      opacity: 0.35;
+      transform: translateY(0);
+    }
+    40% {
+      opacity: 1;
+      transform: translateY(-2px);
+    }
+  }
+
+  @keyframes typing-dot-opacity {
+    0%,
+    80%,
+    100% {
+      opacity: 0.35;
+    }
+    40% {
+      opacity: 1;
+    }
+  }
+
+  .animate-typing-dot {
+    animation: typing-dot-pulse 1.2s var(--ease-out-strong) infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .animate-typing-dot {
+      animation-name: typing-dot-opacity;
+      transform: none;
+    }
+  }
+
   @keyframes pulse-opacity {
     0%,
     100% {
diff --git a/apps/web/src/app/vscode-marketplace/page.tsx b/apps/web/src/app/vscode-marketplace/page.tsx
index 3b32258fc7..9d795febde 100644
--- a/apps/web/src/app/vscode-marketplace/page.tsx
+++ b/apps/web/src/app/vscode-marketplace/page.tsx
@@ -14,17 +14,22 @@ export default function VSCodeMarketplaceRedirectPage() {
     };
 
     // Posthog Bug workaround: posthog.capture() is not working without a timeout
-    setTimeout(() => {
+    const captureTimeout = setTimeout(() => {
       posthog?.capture('vscode_marketplace_redirect', {
         source: 'vscode-marketplace-page',
       });
     }, 0); // Capture event immediately
 
-    setTimeout(() => {
+    const redirectTimeout = setTimeout(() => {
       performRedirect();
     }, 500);
+
+    return () => {
+      clearTimeout(captureTimeout);
+      clearTimeout(redirectTimeout);
+    };
   }, [posthog]);
 
   // Optionally, render a fallback/loading state
-  return <div style={{ textAlign: 'center', marginTop: '2rem' }}>Redirecting...</div>;
+  return <div style={{ textAlign: 'center', marginTop: '2rem' }}>Redirecting…</div>;
 }
diff --git a/apps/web/src/components/AnimatedLogo.tsx b/apps/web/src/components/AnimatedLogo.tsx
index 74b66259bb..50266f2ad3 100644
--- a/apps/web/src/components/AnimatedLogo.tsx
+++ b/apps/web/src/components/AnimatedLogo.tsx
@@ -1,25 +1,23 @@
 'use client';
 
-import { useState, useRef, useEffect, useMemo } from 'react';
+import { useRef, useMemo } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useSession } from 'next-auth/react';
 
 export function AnimatedLogo() {
-  const [isHovered, setIsHovered] = useState(false);
   const videoRef = useRef<HTMLVideoElement>(null);
   const { status } = useSession();
 
-  useEffect(() => {
-    if (videoRef.current) {
-      if (isHovered) {
-        void videoRef.current.play();
-      } else {
-        videoRef.current.pause();
-        videoRef.current.currentTime = 0; // Reset to first frame
-      }
-    }
-  }, [isHovered]);
+  const playLogoAnimation = () => {
+    void videoRef.current?.play();
+  };
+
+  const resetLogoAnimation = () => {
+    if (!videoRef.current) return;
+    videoRef.current.pause();
+    videoRef.current.currentTime = 0;
+  };
 
   const href = useMemo(() => {
     if (status === 'authenticated') {
@@ -32,8 +30,8 @@ export function AnimatedLogo() {
     <Link
       href={href}
       className="flex cursor-pointer items-center transition-opacity hover:opacity-80"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      onMouseEnter={playLogoAnimation}
+      onMouseLeave={resetLogoAnimation}
     >
       <video
         ref={videoRef}
diff --git a/apps/web/src/components/cloud-agent-next/EnvVarsDialog.tsx b/apps/web/src/components/cloud-agent-next/EnvVarsDialog.tsx
index 5674a209af..95ce1fb55d 100644
--- a/apps/web/src/components/cloud-agent-next/EnvVarsDialog.tsx
+++ b/apps/web/src/components/cloud-agent-next/EnvVarsDialog.tsx
@@ -33,7 +33,7 @@ const EXAMPLE_JSON = `{
 
 export function EnvVarsDialog({ value, onChange }: EnvVarsDialogProps) {
   const [open, setOpen] = useState(false);
-  const [jsonText, setJsonText] = useState(JSON.stringify(value, null, 2));
+  const [jsonText, setJsonText] = useState(() => JSON.stringify(value, null, 2));
   const [error, setError] = useState<string | null>(null);
 
   const handleOpen = (isOpen: boolean) => {
@@ -106,7 +106,7 @@ export function EnvVarsDialog({ value, onChange }: EnvVarsDialogProps) {
     <Dialog open={open} onOpenChange={handleOpen}>
       <DialogTrigger asChild>
         <Button variant="outline" size="sm">
-          <FileCode className="mr-2 h-4 w-4" />
+          <FileCode className="mr-2 size-4" />
           Environment Variables
           {varsCount > 0 && (
             <span className="bg-primary/10 ml-2 rounded-full px-2 py-0.5 text-xs">{varsCount}</span>
@@ -146,7 +146,7 @@ export function EnvVarsDialog({ value, onChange }: EnvVarsDialogProps) {
 
           {error && (
             <div className="text-destructive flex items-start gap-2 text-sm">
-              <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
+              <AlertCircle className="mt-0.5 size-4 shrink-0" />
               <span>{error}</span>
             </div>
           )}
diff --git a/apps/web/src/components/cloud-agent-next/GlobToolCard.tsx b/apps/web/src/components/cloud-agent-next/GlobToolCard.tsx
index 99b59c5395..a276bdfb9d 100644
--- a/apps/web/src/components/cloud-agent-next/GlobToolCard.tsx
+++ b/apps/web/src/components/cloud-agent-next/GlobToolCard.tsx
@@ -13,10 +13,10 @@ type GlobInput = {
 
 function parseGlobOutput(output: string | undefined): string[] {
   if (!output) return [];
-  return output
-    .split('\n')
-    .map(line => line.trim())
-    .filter(Boolean);
+  return output.split('\n').flatMap(line => {
+    const trimmedLine = line.trim();
+    return trimmedLine ? [trimmedLine] : [];
+  });
 }
 
 export function GlobToolCard({ toolPart }: GlobToolCardProps) {
@@ -50,8 +50,8 @@ export function GlobToolCard({ toolPart }: GlobToolCardProps) {
         <div>
           <div className="text-muted-foreground mb-1 text-xs">Matches:</div>
           <div className="bg-background max-h-60 overflow-auto rounded-md p-2">
-            {files.map((file, idx) => (
-              <div key={idx} className="truncate font-mono text-xs">
+            {files.map(file => (
+              <div key={file} className="truncate font-mono text-xs">
                 {file}
               </div>
             ))}
@@ -73,11 +73,11 @@ export function GlobToolCard({ toolPart }: GlobToolCardProps) {
       )}
       {/* Running state */}
       {state.status === 'running' && (
-        <div className="text-muted-foreground text-xs italic">Searching files...</div>
+        <div className="text-muted-foreground text-xs italic">Searching files…</div>
       )}
       {/* Pending state */}
       {state.status === 'pending' && (
-        <div className="text-muted-foreground text-xs italic">Waiting to search...</div>
+        <div className="text-muted-foreground text-xs italic">Waiting to search…</div>
       )}
     </ToolCardShell>
   );
diff --git a/apps/web/src/components/cloud-agent-next/ListToolCard.tsx b/apps/web/src/components/cloud-agent-next/ListToolCard.tsx
index d1c3fe3060..7352e196b4 100644
--- a/apps/web/src/components/cloud-agent-next/ListToolCard.tsx
+++ b/apps/web/src/components/cloud-agent-next/ListToolCard.tsx
@@ -14,10 +14,10 @@ type ListInput = {
 
 function parseListOutput(output: string | undefined): string[] {
   if (!output) return [];
-  return output
-    .split('\n')
-    .map(line => line.trim())
-    .filter(Boolean);
+  return output.split('\n').flatMap(line => {
+    const trimmedLine = line.trim();
+    return trimmedLine ? [trimmedLine] : [];
+  });
 }
 
 export function ListToolCard({ toolPart }: ListToolCardProps) {
@@ -57,8 +57,8 @@ export function ListToolCard({ toolPart }: ListToolCardProps) {
       {/* Directory listing */}
       {entries.length > 0 && (
         <div className="bg-background max-h-60 overflow-auto rounded-md p-2">
-          {entries.map((entry, idx) => (
-            <div key={idx} className="truncate font-mono text-xs">
+          {entries.map(entry => (
+            <div key={entry} className="truncate font-mono text-xs">
               {entry}
             </div>
           ))}
@@ -82,12 +82,12 @@ export function ListToolCard({ toolPart }: ListToolCardProps) {
 
       {/* Running state */}
       {state.status === 'running' && (
-        <div className="text-muted-foreground text-xs italic">Listing directory...</div>
+        <div className="text-muted-foreground text-xs italic">Listing directory…</div>
       )}
 
       {/* Pending state */}
       {state.status === 'pending' && (
-        <div className="text-muted-foreground text-xs italic">Waiting to list...</div>
+        <div className="text-muted-foreground text-xs italic">Waiting to list…</div>
       )}
     </ToolCardShell>
   );
diff --git a/apps/web/src/components/cloud-agent-next/NewSessionPanel.tsx b/apps/web/src/components/cloud-agent-next/NewSessionPanel.tsx
index b70a5339e3..df4484a2df 100644
--- a/apps/web/src/components/cloud-agent-next/NewSessionPanel.tsx
+++ b/apps/web/src/components/cloud-agent-next/NewSessionPanel.tsx
@@ -747,7 +747,7 @@ export function NewSessionPanel({ organizationId }: NewSessionPanelProps) {
         <MobileSidebarToggle />
         <div className="w-full max-w-2xl rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-6">
           <div className="mb-3 flex items-center gap-2">
-            <AlertCircle className="h-5 w-5 text-amber-400" />
+            <AlertCircle className="size-5 text-amber-400" />
             <h2 className="text-lg font-semibold">Connect GitHub or GitLab to start a session</h2>
           </div>
           <p className="text-muted-foreground mb-4 text-sm">{integrationMessage}</p>
@@ -807,7 +807,7 @@ export function NewSessionPanel({ organizationId }: NewSessionPanelProps) {
                   isImageLimitReached ? 'text-amber-400' : 'text-primary'
                 )}
               >
-                <Upload className="h-4 w-4" />
+                <Upload className="size-4" />
                 {isImageLimitReached
                   ? `Maximum ${CLOUD_AGENT_IMAGE_MAX_COUNT} images attached`
                   : 'Drop images here'}
@@ -923,7 +923,7 @@ export function NewSessionPanel({ organizationId }: NewSessionPanelProps) {
                     <Tooltip>
                       <TooltipTrigger asChild>
                         <div className="text-muted-foreground flex h-9 min-w-0 items-center gap-1.5 rounded-md border border-dashed px-2 text-xs">
-                          <Brain className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                          <Brain className="size-3.5 shrink-0 opacity-70" />
                           <span className="truncate">{thinkingEffortLabel(displayVariant)}</span>
                         </div>
                       </TooltipTrigger>
@@ -945,17 +945,17 @@ export function NewSessionPanel({ organizationId }: NewSessionPanelProps) {
 
             <div className="flex-1" />
 
-            {isPreparing && <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />}
+            {isPreparing && <Loader2 className="text-muted-foreground size-4 animate-spin" />}
             <UIButton
               type="button"
               variant="ghost"
               size="icon"
               onClick={() => fileInputRef.current?.click()}
               disabled={isPreparing}
-              className="h-8 w-8 rounded-lg"
+              className="size-8 rounded-lg"
               title="Attach images"
             >
-              <Paperclip className="h-4 w-4" />
+              <Paperclip className="size-4" />
             </UIButton>
             <UIButton
               type="button"
@@ -963,9 +963,9 @@ export function NewSessionPanel({ organizationId }: NewSessionPanelProps) {
               size="icon"
               onClick={() => void handleStartSession()}
               disabled={!isFormValid || isPreparing || imageUpload.hasUploadingImages}
-              className="h-8 w-8 rounded-lg"
+              className="size-8 rounded-lg"
             >
-              <Send className="h-4 w-4" />
+              <Send className="size-4" />
             </UIButton>
           </div>
         </div>
@@ -983,14 +983,14 @@ export function NewSessionPanel({ organizationId }: NewSessionPanelProps) {
                 )}
                 disabled={isPreparing}
               >
-                <FolderGit2 className="h-3.5 w-3.5" />
+                <FolderGit2 className="size-3.5" />
                 <span className="max-w-[16rem] truncate">{selectedRepo || 'Repository'}</span>
               </button>
             </PopoverTrigger>
             <PopoverContent className="w-[min(20rem,calc(100vw-2rem))] p-0" align="start">
               {isLoadingRepos ? (
                 <div className="text-muted-foreground p-4 text-center text-sm">
-                  Loading repositories...
+                  Loading repositories…
                 </div>
               ) : repoError ? (
                 <div className="p-4 text-center text-sm text-red-400">
@@ -1002,7 +1002,7 @@ export function NewSessionPanel({ organizationId }: NewSessionPanelProps) {
                 </div>
               ) : (
                 <Command>
-                  <div className="flex items-center border-b pr-2 [&_[cmdk-input-wrapper]]:flex-1 [&_[cmdk-input-wrapper]]:border-b-0">
+                  <div className="flex items-center border-b pr-2 [&_[data-cmdk-input-wrapper]]:flex-1 [&_[data-cmdk-input-wrapper]]:border-b-0">
                     <CommandInput placeholder="Search repositories..." />
                     <button
                       type="button"
@@ -1011,9 +1011,7 @@ export function NewSessionPanel({ organizationId }: NewSessionPanelProps) {
                       className="text-muted-foreground hover:text-foreground shrink-0 rounded-sm p-1 disabled:opacity-50"
                       title="Refresh repositories"
                     >
-                      <RefreshCw
-                        className={cn('h-3.5 w-3.5', isRefreshingRepos && 'animate-spin')}
-                      />
+                      <RefreshCw className={cn('size-3.5', isRefreshingRepos && 'animate-spin')} />
                     </button>
                   </div>
                   <CommandEmpty>No repositories match your search</CommandEmpty>
@@ -1119,10 +1117,10 @@ function RepoCommandItem({
       {repo.private ? (
         <Lock className="size-3.5 text-yellow-500" />
       ) : (
-        <Unlock className="size-3.5 text-gray-500" />
+        <Unlock className="text-muted-foreground size-3.5" />
       )}
       <span className="truncate">{repo.fullName}</span>
-      <Check className={cn('ml-auto h-4 w-4', isSelected ? 'opacity-100' : 'opacity-0')} />
+      <Check className={cn('ml-auto size-4', isSelected ? 'opacity-100' : 'opacity-0')} />
     </CommandItem>
   );
 }
diff --git a/apps/web/src/components/cloud-agent-next/SetupCommandsDialog.tsx b/apps/web/src/components/cloud-agent-next/SetupCommandsDialog.tsx
index d98fd3a0d4..9703cb9965 100644
--- a/apps/web/src/components/cloud-agent-next/SetupCommandsDialog.tsx
+++ b/apps/web/src/components/cloud-agent-next/SetupCommandsDialog.tsx
@@ -33,7 +33,7 @@ const EXAMPLE_JSON = `[
 
 export function SetupCommandsDialog({ value, onChange }: SetupCommandsDialogProps) {
   const [open, setOpen] = useState(false);
-  const [jsonText, setJsonText] = useState(JSON.stringify(value, null, 2));
+  const [jsonText, setJsonText] = useState(() => JSON.stringify(value, null, 2));
   const [error, setError] = useState<string | null>(null);
 
   const handleOpen = (isOpen: boolean) => {
@@ -102,7 +102,7 @@ export function SetupCommandsDialog({ value, onChange }: SetupCommandsDialogProp
     <Dialog open={open} onOpenChange={handleOpen}>
       <DialogTrigger asChild>
         <Button variant="outline" size="sm">
-          <Terminal className="mr-2 h-4 w-4" />
+          <Terminal className="mr-2 size-4" />
           Setup Commands
           {commandsCount > 0 && (
             <span className="bg-primary/10 ml-2 rounded-full px-2 py-0.5 text-xs">
@@ -139,7 +139,7 @@ export function SetupCommandsDialog({ value, onChange }: SetupCommandsDialogProp
 
           {error && (
             <div className="text-destructive flex items-start gap-2 text-sm">
-              <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
+              <AlertCircle className="mt-0.5 size-4 shrink-0" />
               <span>{error}</span>
             </div>
           )}
diff --git a/apps/web/src/components/cloud-agent-next/TypingIndicator.tsx b/apps/web/src/components/cloud-agent-next/TypingIndicator.tsx
index 16386bddc8..8c6a472012 100644
--- a/apps/web/src/components/cloud-agent-next/TypingIndicator.tsx
+++ b/apps/web/src/components/cloud-agent-next/TypingIndicator.tsx
@@ -5,13 +5,13 @@ import { Bot } from 'lucide-react';
 export function TypingIndicator() {
   return (
     <div className="flex items-start gap-3 py-4">
-      <div className="bg-muted flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
-        <Bot className="h-4 w-4" />
+      <div className="bg-muted flex size-8 shrink-0 items-center justify-center rounded-full">
+        <Bot className="size-4" />
       </div>
       <div className="mt-2 flex gap-1">
-        <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" />
-        <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" />
-        <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400" />
+        <div className="bg-muted-foreground size-2 animate-typing-dot rounded-full [animation-delay:-0.3s]" />
+        <div className="bg-muted-foreground size-2 animate-typing-dot rounded-full [animation-delay:-0.15s]" />
+        <div className="bg-muted-foreground size-2 animate-typing-dot rounded-full" />
       </div>
     </div>
   );
diff --git a/apps/web/src/components/cloud-agent/EnvVarsDialog.tsx b/apps/web/src/components/cloud-agent/EnvVarsDialog.tsx
index 5674a209af..95ce1fb55d 100644
--- a/apps/web/src/components/cloud-agent/EnvVarsDialog.tsx
+++ b/apps/web/src/components/cloud-agent/EnvVarsDialog.tsx
@@ -33,7 +33,7 @@ const EXAMPLE_JSON = `{
 
 export function EnvVarsDialog({ value, onChange }: EnvVarsDialogProps) {
   const [open, setOpen] = useState(false);
-  const [jsonText, setJsonText] = useState(JSON.stringify(value, null, 2));
+  const [jsonText, setJsonText] = useState(() => JSON.stringify(value, null, 2));
   const [error, setError] = useState<string | null>(null);
 
   const handleOpen = (isOpen: boolean) => {
@@ -106,7 +106,7 @@ export function EnvVarsDialog({ value, onChange }: EnvVarsDialogProps) {
     <Dialog open={open} onOpenChange={handleOpen}>
       <DialogTrigger asChild>
         <Button variant="outline" size="sm">
-          <FileCode className="mr-2 h-4 w-4" />
+          <FileCode className="mr-2 size-4" />
           Environment Variables
           {varsCount > 0 && (
             <span className="bg-primary/10 ml-2 rounded-full px-2 py-0.5 text-xs">{varsCount}</span>
@@ -146,7 +146,7 @@ export function EnvVarsDialog({ value, onChange }: EnvVarsDialogProps) {
 
           {error && (
             <div className="text-destructive flex items-start gap-2 text-sm">
-              <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
+              <AlertCircle className="mt-0.5 size-4 shrink-0" />
               <span>{error}</span>
             </div>
           )}
diff --git a/apps/web/src/components/cloud-agent/SetupCommandsDialog.tsx b/apps/web/src/components/cloud-agent/SetupCommandsDialog.tsx
index d98fd3a0d4..9703cb9965 100644
--- a/apps/web/src/components/cloud-agent/SetupCommandsDialog.tsx
+++ b/apps/web/src/components/cloud-agent/SetupCommandsDialog.tsx
@@ -33,7 +33,7 @@ const EXAMPLE_JSON = `[
 
 export function SetupCommandsDialog({ value, onChange }: SetupCommandsDialogProps) {
   const [open, setOpen] = useState(false);
-  const [jsonText, setJsonText] = useState(JSON.stringify(value, null, 2));
+  const [jsonText, setJsonText] = useState(() => JSON.stringify(value, null, 2));
   const [error, setError] = useState<string | null>(null);
 
   const handleOpen = (isOpen: boolean) => {
@@ -102,7 +102,7 @@ export function SetupCommandsDialog({ value, onChange }: SetupCommandsDialogProp
     <Dialog open={open} onOpenChange={handleOpen}>
       <DialogTrigger asChild>
         <Button variant="outline" size="sm">
-          <Terminal className="mr-2 h-4 w-4" />
+          <Terminal className="mr-2 size-4" />
           Setup Commands
           {commandsCount > 0 && (
             <span className="bg-primary/10 ml-2 rounded-full px-2 py-0.5 text-xs">
@@ -139,7 +139,7 @@ export function SetupCommandsDialog({ value, onChange }: SetupCommandsDialogProp
 
           {error && (
             <div className="text-destructive flex items-start gap-2 text-sm">
-              <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
+              <AlertCircle className="mt-0.5 size-4 shrink-0" />
               <span>{error}</span>
             </div>
           )}
diff --git a/apps/web/src/components/cloud-agent/TypingIndicator.tsx b/apps/web/src/components/cloud-agent/TypingIndicator.tsx
index 16386bddc8..8c6a472012 100644
--- a/apps/web/src/components/cloud-agent/TypingIndicator.tsx
+++ b/apps/web/src/components/cloud-agent/TypingIndicator.tsx
@@ -5,13 +5,13 @@ import { Bot } from 'lucide-react';
 export function TypingIndicator() {
   return (
     <div className="flex items-start gap-3 py-4">
-      <div className="bg-muted flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
-        <Bot className="h-4 w-4" />
+      <div className="bg-muted flex size-8 shrink-0 items-center justify-center rounded-full">
+        <Bot className="size-4" />
       </div>
       <div className="mt-2 flex gap-1">
-        <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" />
-        <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" />
-        <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400" />
+        <div className="bg-muted-foreground size-2 animate-typing-dot rounded-full [animation-delay:-0.3s]" />
+        <div className="bg-muted-foreground size-2 animate-typing-dot rounded-full [animation-delay:-0.15s]" />
+        <div className="bg-muted-foreground size-2 animate-typing-dot rounded-full" />
       </div>
     </div>
   );
diff --git a/apps/web/src/components/models/CondensedProviderAndModelsList.tsx b/apps/web/src/components/models/CondensedProviderAndModelsList.tsx
index 2bb1aa9cf3..f629fa7ca6 100644
--- a/apps/web/src/components/models/CondensedProviderAndModelsList.tsx
+++ b/apps/web/src/components/models/CondensedProviderAndModelsList.tsx
@@ -38,12 +38,17 @@ export function CondensedProviderAndModelsList({
     if (!selections) return [];
 
     return selections
-      .filter(selection => selection.models.length > 0)
-      .map(selection => ({
-        slug: selection.slug,
-        displayName: providerDisplayNames.get(selection.slug) || selection.slug,
-        modelCount: selection.models.length,
-      }))
+      .flatMap(selection =>
+        selection.models.length > 0
+          ? [
+              {
+                slug: selection.slug,
+                displayName: providerDisplayNames.get(selection.slug) || selection.slug,
+                modelCount: selection.models.length,
+              },
+            ]
+          : []
+      )
       .sort((a, b) => a.displayName.localeCompare(b.displayName));
   }, [selections, providerDisplayNames]);
 
@@ -54,7 +59,7 @@ export function CondensedProviderAndModelsList({
   const hasMore = providersWithSelections.length > maxVisible;
 
   if (isLoading) {
-    return <div className="text-muted-foreground text-sm">Loading providers...</div>;
+    return <div className="text-muted-foreground text-sm">Loading providers…</div>;
   }
 
   if (!selections || providersWithSelections.length === 0) {
@@ -66,22 +71,23 @@ export function CondensedProviderAndModelsList({
       {/* Default model row */}
       {defaultModel ? (
         readonly ? (
-          <div className="bg-muted/25 mb-6 flex items-center justify-between rounded-md border border-gray-500 px-3 py-2">
+          <div className="bg-muted/25 border-border mb-6 flex items-center justify-between rounded-md border px-3 py-2">
             <span className="mr-3 flex-1 truncate text-sm font-bold">{defaultModel}</span>
             <Badge variant="secondary" className="flex-shrink-0 text-xs">
               Default model
             </Badge>
           </div>
         ) : (
-          <div
+          <button
+            type="button"
             onClick={onDefaultModelClick}
-            className="bg-muted/25 hover:bg-muted/30 mb-6 flex cursor-pointer items-center justify-between rounded-md border px-3 py-2 transition-all hover:border-yellow-300"
+            className="bg-muted/25 hover:bg-muted/30 mb-6 flex w-full cursor-pointer items-center justify-between rounded-md border px-3 py-2 text-left transition-all hover:border-yellow-300"
           >
             <span className="mr-3 flex-1 truncate text-sm font-bold">{defaultModel}</span>
             <Badge variant="secondary" className="flex-shrink-0 text-xs">
               Default model
             </Badge>
-          </div>
+          </button>
         )
       ) : readonly ? (
         <TooltipProvider>
@@ -91,7 +97,7 @@ export function CondensedProviderAndModelsList({
                 <span className="text-muted-foreground mr-3 flex-1 truncate text-sm font-medium">
                   Set default model
                 </span>
-                <Lock className="text-muted-foreground h-4 w-4" />
+                <Lock className="text-muted-foreground size-4" />
               </div>
             </TooltipTrigger>
             <TooltipContent className="max-w-xs">
@@ -103,15 +109,16 @@ export function CondensedProviderAndModelsList({
           </Tooltip>
         </TooltipProvider>
       ) : (
-        <div
+        <button
+          type="button"
           onClick={onDefaultModelClick}
-          className="group bg-muted/10 border-muted-foreground/30 hover:border-muted-foreground/50 hover:bg-muted/20 mb-6 flex cursor-pointer items-center justify-between rounded-md border-2 border-dashed px-3 py-2 transition-all duration-200"
+          className="group bg-muted/10 border-muted-foreground/30 hover:border-muted-foreground/50 hover:bg-muted/20 mb-6 flex w-full cursor-pointer items-center justify-between rounded-md border-2 border-dashed px-3 py-2 text-left transition-all duration-200"
         >
           <span className="text-muted-foreground group-hover:text-foreground mr-3 flex-1 truncate text-sm font-medium transition-colors">
             Set default model
           </span>
-          <Settings className="text-muted-foreground group-hover:text-foreground h-4 w-4 transition-colors" />
-        </div>
+          <Settings className="text-muted-foreground group-hover:text-foreground size-4 transition-colors" />
+        </button>
       )}
 
       {visibleProviders.map(provider => (
@@ -132,12 +139,12 @@ export function CondensedProviderAndModelsList({
         >
           {showAll ? (
             <>
-              <ChevronUp className="mr-1 h-3 w-3" />
+              <ChevronUp className="mr-1 size-3" />
               Show less
             </>
           ) : (
             <>
-              <ChevronDown className="mr-1 h-3 w-3" />
+              <ChevronDown className="mr-1 size-3" />
               Show {providersWithSelections.length - maxVisible} more
             </>
           )}
diff --git a/apps/web/src/components/models/ModelCard.tsx b/apps/web/src/components/models/ModelCard.tsx
index 26ea74d663..bcd1ce22fc 100644
--- a/apps/web/src/components/models/ModelCard.tsx
+++ b/apps/web/src/components/models/ModelCard.tsx
@@ -49,7 +49,7 @@ export function ModelCard({ model, isSelected, onToggle, readonly = false }: Mod
       <CardContent className="p-4">
         <div className="mb-2 flex items-start justify-between">
           <div className="flex min-w-0 flex-1 items-start gap-3">
-            <div data-model-checkbox onClick={e => e.stopPropagation()} className="mt-0.5">
+            <div data-model-checkbox className="mt-0.5">
               <Checkbox
                 checked={isSelected}
                 onCheckedChange={readonly ? undefined : onToggle}
@@ -63,9 +63,9 @@ export function ModelCard({ model, isSelected, onToggle, readonly = false }: Mod
                 className="hover:text-primary flex items-center gap-1 text-left transition-colors"
               >
                 {showDescription ? (
-                  <ChevronDown className="h-3 w-3 flex-shrink-0" />
+                  <ChevronDown className="size-3 flex-shrink-0" />
                 ) : (
-                  <ChevronRight className="h-3 w-3 flex-shrink-0" />
+                  <ChevronRight className="size-3 flex-shrink-0" />
                 )}
                 <h3 className="truncate text-sm font-semibold">{model.name}</h3>
               </button>
diff --git a/apps/web/src/components/models/ProviderCard.tsx b/apps/web/src/components/models/ProviderCard.tsx
index d30503317a..5f77feebe2 100644
--- a/apps/web/src/components/models/ProviderCard.tsx
+++ b/apps/web/src/components/models/ProviderCard.tsx
@@ -45,16 +45,30 @@ export function ProviderCard({
     onToggleExpansion();
   };
 
+  const handleProviderKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if ((e.target as HTMLElement).closest('[data-provider-checkbox]')) {
+      return;
+    }
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onToggleExpansion();
+    }
+  };
+
   return (
     <Card className="overflow-hidden">
       <CardContent className="p-0">
         {/* Provider Header */}
         <div
+          role="button"
+          tabIndex={0}
           className="hover:bg-muted/50 flex cursor-pointer items-center justify-between p-4"
           onClick={handleProviderClick}
+          onKeyDown={handleProviderKeyDown}
         >
           <div className="flex items-center gap-3">
-            <div data-provider-checkbox className="leading-0" onClick={e => e.stopPropagation()}>
+            <div data-provider-checkbox className="leading-0">
               <Checkbox
                 checked={isFullySelected}
                 ref={el => {
@@ -75,7 +89,7 @@ export function ProviderCard({
                       : `https://openrouter.ai${provider.icon.url}`
                   }
                   alt={provider.displayName}
-                  className={cn('h-5 w-5', provider.icon.className)}
+                  className={cn('size-5', provider.icon.className)}
                 />
               )}
               <div className="flex-1">
@@ -144,7 +158,7 @@ export function ProviderCard({
               animate={{ rotate: isExpanded ? 90 : 0 }}
               transition={{ duration: 0.2, ease: 'easeInOut' }}
             >
-              <ChevronRight className="h-4 w-4" />
+              <ChevronRight className="size-4" />
             </motion.div>
           </div>
         </div>
diff --git a/apps/web/src/components/organizations/OrganizationInvoicesCard.tsx b/apps/web/src/components/organizations/OrganizationInvoicesCard.tsx
index ee878e6259..99f85bb80e 100644
--- a/apps/web/src/components/organizations/OrganizationInvoicesCard.tsx
+++ b/apps/web/src/components/organizations/OrganizationInvoicesCard.tsx
@@ -12,11 +12,23 @@ type Props = {
   timePeriod?: string;
 };
 
-function formatCurrency(amount: number, currency: string): string {
-  return new Intl.NumberFormat('en-US', {
+const invoiceCurrencyFormatters = new Map<string, Intl.NumberFormat>();
+
+function getInvoiceCurrencyFormatter(currency: string): Intl.NumberFormat {
+  const normalizedCurrency = currency.toUpperCase();
+  const existing = invoiceCurrencyFormatters.get(normalizedCurrency);
+  if (existing) return existing;
+
+  const formatter = new Intl.NumberFormat('en-US', {
     style: 'currency',
-    currency: currency.toUpperCase(),
-  }).format(amount / 100); // Stripe amounts are in cents
+    currency: normalizedCurrency,
+  });
+  invoiceCurrencyFormatters.set(normalizedCurrency, formatter);
+  return formatter;
+}
+
+function formatCurrency(amount: number, currency: string): string {
+  return getInvoiceCurrencyFormatter(currency).format(amount / 100); // Stripe amounts are in cents
 }
 
 function formatDate(timestamp: number): string {
@@ -31,7 +43,7 @@ function InvoiceRow({ invoice }: { invoice: UnifiedInvoice }) {
   return (
     <div className="border-border flex items-center justify-between border-b py-3 last:border-b-0">
       <div className="flex items-center gap-3">
-        <FileText className="text-muted-foreground h-4 w-4" />
+        <FileText className="text-muted-foreground size-4" />
         <div className="min-w-30">
           <div className="text-sm font-medium">
             {invoice.number || `Invoice ${invoice.id.slice(-8)}`}
@@ -64,7 +76,7 @@ function InvoiceRow({ invoice }: { invoice: UnifiedInvoice }) {
             className="inline-flex items-center gap-1 text-sm text-blue-600 transition-colors hover:text-blue-300"
           >
             View
-            <ExternalLink className="h-3 w-3" />
+            <ExternalLink className="size-3" />
           </a>
         )}
         {invoice.invoice_pdf && (
@@ -74,7 +86,7 @@ function InvoiceRow({ invoice }: { invoice: UnifiedInvoice }) {
             className="inline-flex items-center gap-1 text-sm text-blue-600 transition-colors hover:text-blue-300"
           >
             PDF
-            <ExternalLink className="h-3 w-3" />
+            <ExternalLink className="size-3" />
           </a>
         )}
       </div>
@@ -105,7 +117,7 @@ export function OrganizationInvoicesCard({ organizationId, timePeriod = 'month'
     <Card>
       <CardHeader>
         <CardTitle>
-          <DollarSign className="mr-2 inline h-5 w-5" />
+          <DollarSign className="mr-2 inline size-5" />
           Invoices
         </CardTitle>
       </CardHeader>
@@ -118,7 +130,7 @@ export function OrganizationInvoicesCard({ organizationId, timePeriod = 'month'
                 className="border-border flex items-center justify-between border-b py-3 last:border-b-0"
               >
                 <div className="flex items-center gap-3">
-                  <Skeleton className="h-4 w-4" />
+                  <Skeleton className="size-4" />
                   <div>
                     <Skeleton className="mb-1 h-4 w-32" />
                     <Skeleton className="h-3 w-24" />
diff --git a/apps/web/src/components/organizations/audit-logs/AuditLogsFilters.tsx b/apps/web/src/components/organizations/audit-logs/AuditLogsFilters.tsx
index e5bccfffda..1eda6efee9 100644
--- a/apps/web/src/components/organizations/audit-logs/AuditLogsFilters.tsx
+++ b/apps/web/src/components/organizations/audit-logs/AuditLogsFilters.tsx
@@ -40,19 +40,19 @@ export function AuditLogsFilters({
 
   return (
     <>
-      <style jsx>{`
-        input[type='date']::-webkit-calendar-picker-indicator,
-        input[type='time']::-webkit-calendar-picker-indicator {
+      <style>{`
+        .audit-logs-filters input[type='date']::-webkit-calendar-picker-indicator,
+        .audit-logs-filters input[type='time']::-webkit-calendar-picker-indicator {
           filter: invert(0.5);
           opacity: 0.7;
         }
       `}</style>
-      <div className="space-y-4">
+      <div className="audit-logs-filters space-y-4">
         {/* Header with search and filter toggle */}
         <div className="flex items-center justify-between">
           {/* Always visible search */}
           <div className="relative w-64">
-            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+            <Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
             <Input
               placeholder="Search logs..."
               value={filters?.fuzzySearch || ''}
@@ -69,16 +69,16 @@ export function AuditLogsFilters({
               onClick={() => setFiltersExpanded(!filtersExpanded)}
               className="flex items-center gap-2"
             >
-              <Filter className="h-4 w-4" />
+              <Filter className="size-4" />
               Filters
               <ChevronDown
-                className={`h-4 w-4 transition-transform ${filtersExpanded ? 'rotate-180' : ''}`}
+                className={`size-4 transition-transform ${filtersExpanded ? 'rotate-180' : ''}`}
               />
-              {hasActiveFilters && <div className="bg-primary ml-1 h-2 w-2 rounded-full" />}
+              {hasActiveFilters && <div className="bg-primary ml-1 size-2 rounded-full" />}
             </Button>
             {hasActiveFilters && (
               <Button variant="outline" size="sm" onClick={onClearFilters}>
-                <X className="mr-2 h-4 w-4" />
+                <X className="mr-2 size-4" />
                 Clear filters
               </Button>
             )}
@@ -105,7 +105,7 @@ export function AuditLogsFilters({
                             )
                             .join(', ')
                         : 'All actions'}
-                      <ChevronDown className="h-4 w-4 opacity-50" />
+                      <ChevronDown className="size-4 opacity-50" />
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent className="w-56" align="start">
diff --git a/apps/web/src/components/organizations/custom-modes/ModeForm.tsx b/apps/web/src/components/organizations/custom-modes/ModeForm.tsx
index 619445c9db..b32fe1ffcf 100644
--- a/apps/web/src/components/organizations/custom-modes/ModeForm.tsx
+++ b/apps/web/src/components/organizations/custom-modes/ModeForm.tsx
@@ -168,7 +168,7 @@ export function ModeForm({
     formData.description !== initialFormData.description ||
     formData.whenToUse !== initialFormData.whenToUse ||
     formData.customInstructions !== initialFormData.customInstructions ||
-    JSON.stringify(selectedGroups.sort()) !== JSON.stringify(initialGroups.sort()) ||
+    JSON.stringify(selectedGroups.toSorted()) !== JSON.stringify(initialGroups.toSorted()) ||
     editGroupConfig.fileRegex !== initialEditConfig.fileRegex ||
     editGroupConfig.description !== initialEditConfig.description;
 
@@ -273,7 +273,7 @@ export function ModeForm({
         </Button>
       )}
       <Button type="submit" variant="primary" disabled={isSubmitting || !isDirty}>
-        <Save className="mr-2 h-4 w-4" />
+        <Save className="mr-2 size-4" />
         {isSubmitting ? 'Saving...' : mode ? 'Update Mode' : 'Create Mode'}
       </Button>
     </>
@@ -307,7 +307,7 @@ export function ModeForm({
                 {templates?.map(template => (
                   <SelectItem key={template.id} value={template.id}>
                     <div className="flex items-center gap-2">
-                      <FileText className="h-4 w-4" />
+                      <FileText className="size-4" />
                       <span>{template.name}</span>
                     </div>
                   </SelectItem>
@@ -429,7 +429,7 @@ export function ModeForm({
             <div className="space-y-4">
               {availableGroups.map(group => (
                 <div key={group.value} className="space-y-3">
-                  <div className="flex items-center space-x-2">
+                  <div className="flex items-center gap-x-2">
                     <Checkbox
                       id={group.value}
                       checked={selectedGroups.includes(group.value)}
diff --git a/apps/web/src/components/organizations/subscription/SeatChangeModal.tsx b/apps/web/src/components/organizations/subscription/SeatChangeModal.tsx
index 1b3021e79f..f0f7c56dea 100644
--- a/apps/web/src/components/organizations/subscription/SeatChangeModal.tsx
+++ b/apps/web/src/components/organizations/subscription/SeatChangeModal.tsx
@@ -45,7 +45,7 @@ export function SeatChangeModal({
   price: number;
 }) {
   const [newSeatCount, setNewSeatCount] = useState(currentSeatCount);
-  const [inputValue, setInputValue] = useState(currentSeatCount.toString());
+  const [inputValue, setInputValue] = useState(() => currentSeatCount.toString());
   const [validationError, setValidationError] = useState<string | null>(null);
   const [paymentError, setPaymentError] = useState<string | null>(null);
   const [isAuthenticating, setIsAuthenticating] = useState(false);
@@ -245,7 +245,7 @@ export function SeatChangeModal({
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
-              <Edit className="h-5 w-5" />
+              <Edit className="size-5" />
               Change Seat Count
             </DialogTitle>
             <DialogDescription>
@@ -255,13 +255,13 @@ export function SeatChangeModal({
 
           <div className="space-y-4">
             <div>
-              <label className="text-sm font-medium">Current Seats</label>
+              <div className="text-sm font-medium">Current Seats</div>
               <p className="text-muted-foreground text-sm">{currentSeatCount} seats</p>
             </div>
 
             {seatUsageQuery.data && (
               <div>
-                <label className="text-sm font-medium">Active Usage</label>
+                <div className="text-sm font-medium">Active Usage</div>
                 <p className="text-muted-foreground text-sm">
                   {seatUsageQuery.data.usedSeats} of {seatUsageQuery.data.totalSeats} seats in use
                 </p>
@@ -269,7 +269,9 @@ export function SeatChangeModal({
             )}
 
             <div>
-              <label className="text-sm font-medium">New Seat Count</label>
+              <label htmlFor="new-seat-count" className="text-sm font-medium">
+                New Seat Count
+              </label>
               <div className="mt-1">
                 <div className="flex items-center gap-2">
                   <Button
@@ -278,11 +280,12 @@ export function SeatChangeModal({
                     size="sm"
                     onClick={handleDecrement}
                     disabled={isLoading || parseInt(inputValue, 10) <= Math.max(1, activeSeatCount)}
-                    className="h-10 w-10 p-0"
+                    className="size-10 p-0"
                   >
-                    <Minus className="h-4 w-4" />
+                    <Minus className="size-4" />
                   </Button>
                   <Input
+                    id="new-seat-count"
                     type="text"
                     value={inputValue}
                     onChange={e => handleSeatCountChange(e.target.value)}
@@ -298,14 +301,14 @@ export function SeatChangeModal({
                     size="sm"
                     onClick={handleIncrement}
                     disabled={isLoading}
-                    className="h-10 w-10 p-0"
+                    className="size-10 p-0"
                   >
-                    <Plus className="h-4 w-4" />
+                    <Plus className="size-4" />
                   </Button>
                 </div>
                 {validationError && (
                   <div className="mt-1 flex items-center gap-1 text-sm text-red-600">
-                    <AlertCircle className="h-4 w-4" />
+                    <AlertCircle className="size-4" />
                     <span>{validationError}</span>
                   </div>
                 )}
@@ -360,7 +363,7 @@ export function SeatChangeModal({
 
             {paymentError && (
               <Alert variant="destructive">
-                <AlertCircle className="h-4 w-4" />
+                <AlertCircle className="size-4" />
                 <AlertDescription>
                   <p className="font-medium">{paymentError}</p>
                   <p className="mt-1 text-sm">
diff --git a/apps/web/src/components/organizations/subscription/SubscriptionQuickActions.tsx b/apps/web/src/components/organizations/subscription/SubscriptionQuickActions.tsx
index d7f7f4c034..d7e19ae162 100644
--- a/apps/web/src/components/organizations/subscription/SubscriptionQuickActions.tsx
+++ b/apps/web/src/components/organizations/subscription/SubscriptionQuickActions.tsx
@@ -102,8 +102,8 @@ export function SubscriptionQuickActions({
         <CardHeader>
           <CardTitle className="m-2">Quick Actions</CardTitle>
         </CardHeader>
-        <CardContent className="flex flex-col items-center space-y-3">
-          {canChangeSeatCount && (
+        <CardContent className="flex flex-col items-center gap-y-3">
+          {canChangeSeatCount ? (
             <Button
               variant="outline"
               className="w-64 justify-center border-green-800 text-green-400 hover:bg-green-950 hover:text-green-300"
@@ -111,10 +111,10 @@ export function SubscriptionQuickActions({
               disabled={isReadOnly}
               title={isReadOnly ? 'Upgrade to enable' : undefined}
             >
-              <Edit className="mr-2 h-4 w-4" />
+              <Edit className="mr-2 size-4" />
               Change Seats
             </Button>
-          )}
+          ) : null}
 
           {canChangeBillingCycle && (
             <Button
@@ -122,7 +122,7 @@ export function SubscriptionQuickActions({
               className="w-64 justify-center"
               onClick={() => setShowCycleChangeDialog(true)}
             >
-              <Repeat className="mr-2 h-4 w-4" />
+              <Repeat className="mr-2 size-4" />
               Switch to {isMonthly ? 'Annual' : 'Monthly'}
             </Button>
           )}
@@ -134,9 +134,9 @@ export function SubscriptionQuickActions({
             disabled={getCustomerPortalUrl.isPending || isNavigatingToPortal}
           >
             {getCustomerPortalUrl.isPending || isNavigatingToPortal ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              <Loader2 className="mr-2 size-4 animate-spin" />
             ) : (
-              <CreditCard className="mr-2 h-4 w-4" />
+              <CreditCard className="mr-2 size-4" />
             )}
             Update Payment Method
           </Button>
@@ -147,7 +147,7 @@ export function SubscriptionQuickActions({
             asChild
           >
             <Link href={`/organizations/${organizationId}/payment-details`}>
-              <Download className="mr-2 h-4 w-4" />
+              <Download className="mr-2 size-4" />
               View Payment History
             </Link>
           </Button>
@@ -158,7 +158,7 @@ export function SubscriptionQuickActions({
               className="text-destructive w-64 justify-center border-red-800 hover:bg-red-950 hover:text-red-400"
               onClick={() => setShowCancelModal(true)}
             >
-              <AlertTriangle className="mr-2 h-4 w-4" />
+              <AlertTriangle className="mr-2 size-4" />
               Cancel Subscription
             </Button>
           )}
diff --git a/apps/web/src/components/organizations/subscription/utils.ts b/apps/web/src/components/organizations/subscription/utils.ts
index 5485237e6c..6661fab94a 100644
--- a/apps/web/src/components/organizations/subscription/utils.ts
+++ b/apps/web/src/components/organizations/subscription/utils.ts
@@ -1,6 +1,11 @@
 import type Stripe from 'stripe';
 import type { OrganizationRole } from '@/lib/organizations/organization-types';
 
+const subscriptionCurrencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+});
+
 // Module-level formatting functions
 export const formatDate = (timestamp: number) => {
   return new Date(timestamp * 1000).toLocaleDateString('en-US', {
@@ -11,10 +16,7 @@ export const formatDate = (timestamp: number) => {
 };
 
 export const formatCurrency = (amount: number) => {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(amount / 100); // Stripe amounts are in cents
+  return subscriptionCurrencyFormatter.format(amount / 100); // Stripe amounts are in cents
 };
 
 /** True for roles that may manage billing (owner or billing_manager). */
diff --git a/apps/web/src/components/payment/CreditPurchaseOptions.tsx b/apps/web/src/components/payment/CreditPurchaseOptions.tsx
index 0a5f354fea..928d85445b 100644
--- a/apps/web/src/components/payment/CreditPurchaseOptions.tsx
+++ b/apps/web/src/components/payment/CreditPurchaseOptions.tsx
@@ -40,8 +40,8 @@ type CreditPurchaseOptionsProps = {
 
 const OrgPurchasWarning = () => {
   return (
-    <div className="bg-background flex items-start gap-2 rounded-md border border-gray-700 p-3">
-      <AlertTriangle className="text-muted-foreground mt-0.5 h-4 w-4 shrink-0" />
+    <div className="bg-background border-border flex items-start gap-2 rounded-md border p-3">
+      <AlertTriangle className="text-muted-foreground mt-0.5 size-4 shrink-0" />
       <div className="text-muted-foreground text-xs">
         Personal credits are for your account only. Need organization credits?{' '}
         <Link className="text-blue-400 hover:underline" href="/organizations">
@@ -164,7 +164,7 @@ export default function CreditPurchaseOptions({
       <Card className="w-full rounded-xl shadow-sm">
         <CardHeader className="pb-2">
           <CardTitle className="flex items-center gap-2">
-            <Coins className="h-5 w-5" />
+            <Coins className="size-5" />
             {cardTitle}
           </CardTitle>
         </CardHeader>
@@ -185,7 +185,7 @@ export default function CreditPurchaseOptions({
             </div>
           )}
 
-          <div className="flex flex-col space-y-4">
+          <div className="flex flex-col gap-4">
             <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
               {purchaseAmounts.map(amount => {
                 const totalAmount = showFirstPurchasePromo
@@ -327,7 +327,7 @@ export default function CreditPurchaseOptions({
           </div>
         </CardContent>
       </Card>
-      <style jsx>{
+      <style>{
         /* css */ `
           @keyframes liquidRipple {
             0% {
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index eb9dd657cd..7efe03e46f 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -27,7 +27,7 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="**:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12">
+        <Command className="**:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12">
           {children}
         </Command>
       </DialogContent>
@@ -39,8 +39,8 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  <div className="flex items-center border-b px-3" data-cmdk-input-wrapper="">
+    <Search className="mr-2 size-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
diff --git a/apps/web/src/hooks/useImageUpload.ts b/apps/web/src/hooks/useImageUpload.ts
index 31f7a030c4..a8283c44d4 100644
--- a/apps/web/src/hooks/useImageUpload.ts
+++ b/apps/web/src/hooks/useImageUpload.ts
@@ -305,7 +305,7 @@ export function useImageUpload(options: UseImageUploadOptions): UseImageUploadRe
     });
 
     return () => {
-      timeouts.forEach(clearTimeout);
+      timeouts.forEach(timeoutId => clearTimeout(timeoutId));
     };
   }, [images]);
 
diff --git a/apps/web/src/lib/admin-utils.ts b/apps/web/src/lib/admin-utils.ts
index f489c24cdd..dd285e6bb6 100644
--- a/apps/web/src/lib/admin-utils.ts
+++ b/apps/web/src/lib/admin-utils.ts
@@ -1,17 +1,35 @@
 import { formatDistanceToNow } from 'date-fns';
 import type { PaymentMethodStatus } from '@/types/admin';
 
+const microdollarsFormatters = new Map<number, Intl.NumberFormat>();
+const adminDateFormatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit',
+});
+
+function getMicrodollarsFormatter(fractionDigits: number): Intl.NumberFormat {
+  const existing = microdollarsFormatters.get(fractionDigits);
+  if (existing) return existing;
+
+  const formatter = new Intl.NumberFormat(undefined, {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  });
+  microdollarsFormatters.set(fractionDigits, formatter);
+  return formatter;
+}
+
 /**
  * Converts microdollars to formatted currency string with exactly 2 decimal places
  */
 export function formatMicrodollars(microdollars: number, fractionDigits: number = 2): string {
   const dollars = microdollars / 1_000_000;
-  return new Intl.NumberFormat(undefined, {
-    style: 'currency',
-    currency: 'USD',
-    minimumFractionDigits: fractionDigits,
-    maximumFractionDigits: fractionDigits,
-  }).format(dollars);
+  return getMicrodollarsFormatter(fractionDigits).format(dollars);
 }
 
 /**
@@ -27,13 +45,7 @@ export function formatRelativeTime(date: Date | string): string {
  */
 export function formatDate(date: Date | string): string {
   const dateObj = typeof date === 'string' ? new Date(date) : date;
-  return new Intl.DateTimeFormat('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  }).format(dateObj);
+  return adminDateFormatter.format(dateObj);
 }
 
 export function getPaymentMethodBadgeVariant(
diff --git a/apps/web/src/lib/blacklist-domains-config.ts b/apps/web/src/lib/blacklist-domains-config.ts
index a05758193f..029a07e789 100644
--- a/apps/web/src/lib/blacklist-domains-config.ts
+++ b/apps/web/src/lib/blacklist-domains-config.ts
@@ -28,10 +28,10 @@ export const BlacklistDomainsInputSchema = z.object({
 function getEnvFallbackDomains(): string[] {
   const envVal = getEnvVariable('BLACKLIST_DOMAINS');
   return envVal
-    ? envVal
-        .split('|')
-        .map((d: string) => d.trim())
-        .filter(Boolean)
+    ? envVal.split('|').flatMap((d: string) => {
+        const domain = d.trim();
+        return domain ? [domain] : [];
+      })
     : [];
 }
 
diff --git a/apps/web/src/lib/organizations/organization-types.ts b/apps/web/src/lib/organizations/organization-types.ts
index 5b8bb644d3..a0c21760bd 100644
--- a/apps/web/src/lib/organizations/organization-types.ts
+++ b/apps/web/src/lib/organizations/organization-types.ts
@@ -18,7 +18,7 @@ export {
 } from './organization-base-types';
 
 import type { OrganizationRole, OrganizationPlan } from './organization-base-types';
-import { OrganizationPlanSchema, OrganizationSettingsSchema } from './organization-base-types';
+import { OrganizationSettingsSchema } from './organization-base-types';
 import { OpenClawModelSettingsSchema, OpenCodeSettingsSchema } from '@kilocode/db/schema-types';
 
 // API-facing billing cycle values: 'monthly' | 'annual'
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index 863d983216..9afb5f4fcb 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -22,6 +22,27 @@ export function stripRequiredPrefix(str: string, prefix: string): string | null
 }
 
 const parseFloatOrNull = (value: string | null) => (value === null ? null : parseFloat(value));
+const currencyFormatters = new Map<string, Intl.NumberFormat>();
+const dollarsFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+function getCurrencyFormatter(currency: string): Intl.NumberFormat {
+  const normalizedCurrency = currency.toUpperCase();
+  const existing = currencyFormatters.get(normalizedCurrency);
+  if (existing) return existing;
+
+  const formatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: normalizedCurrency,
+  });
+  currencyFormatters.set(normalizedCurrency, formatter);
+  return formatter;
+}
+
 export const EmptyFraudDetectionHeaders = getFraudDetectionHeaders(new Headers());
 export type FraudDetectionHeaders = ReturnType<typeof getFraudDetectionHeaders>;
 export function getFraudDetectionHeaders(headers: Headers) {
@@ -63,19 +84,11 @@ export function getInitialsFromName(name: string): string {
 }
 
 export function formatCents(amount: number, currency: string = 'USD') {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: currency.toUpperCase(),
-  }).format(amount / 100);
+  return getCurrencyFormatter(currency).format(amount / 100);
 }
 
 export function formatDollars(amount: number): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  }).format(amount);
+  return dollarsFormatter.format(amount);
 }
 
 export function formatDate(timestamp: number) {
diff --git a/apps/web/src/routers/admin/blacklist-domains-router.ts b/apps/web/src/routers/admin/blacklist-domains-router.ts
index da56efc8ff..2f8dfc073c 100644
--- a/apps/web/src/routers/admin/blacklist-domains-router.ts
+++ b/apps/web/src/routers/admin/blacklist-domains-router.ts
@@ -31,7 +31,12 @@ export const adminBlacklistDomainsRouter = createTRPCRouter({
   set: adminProcedure.input(BlacklistDomainsInputSchema).mutation(async ({ input, ctx }) => {
     // Deduplicate and normalize domains
     const normalizedDomains = [
-      ...new Set(input.domains.map(d => d.toLowerCase().trim()).filter(Boolean)),
+      ...new Set(
+        input.domains.flatMap(d => {
+          const domain = d.toLowerCase().trim();
+          return domain ? [domain] : [];
+        })
+      ),
     ];
 
     const config: BlacklistDomainsConfig = {