feat: add spinner, lowercase version

web/src/components/ModelInfoCard.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { Brain, Eye, Gauge, Lightbulb, Wrench, Loader2 } from "lucide-react";
+import { Brain, Eye, Gauge, Lightbulb, Wrench } from "lucide-react";
+import { Spinner } from "@nous-research/ui";
 import { api } from "@/lib/api";
 import type { ModelInfoResponse } from "@/lib/api";
 import { formatTokenCount } from "@/lib/format";
@@ -36,7 +37,7 @@ export function ModelInfoCard({
   if (loading) {
     return (
       <div className="flex items-center gap-2 py-2 text-xs text-muted-foreground">
-        <Loader2 className="h-3 w-3 animate-spin" />
+        <Spinner className="text-xs" />
         Loading model info…
       </div>
     );

web/src/components/ModelPickerDialog.tsx

@@ -1,7 +1,7 @@
-import { Button, ListItem } from "@nous-research/ui";
+import { Button, ListItem, Spinner } from "@nous-research/ui";
 import { Input } from "@/components/ui/input";
 import type { GatewayClient } from "@/lib/gatewayClient";
-import { Check, Loader2, Search, X } from "lucide-react";
+import { Check, Search, X } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 /**
@@ -261,7 +261,7 @@ function ProviderColumn({
     <div className="border-r border-border overflow-y-auto">
       {loading && (
         <div className="flex items-center gap-2 p-4 text-xs text-muted-foreground">
-          <Loader2 className="h-3 w-3 animate-spin" /> loading…
+          <Spinner className="text-xs" /> loading…
         </div>
       )}
 

web/src/components/OAuthLoginModal.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { ExternalLink, X, Check, Loader2 } from "lucide-react";
-import { Button, CopyButton, H2 } from "@nous-research/ui";
+import { ExternalLink, X, Check } from "lucide-react";
+import { Button, CopyButton, H2, Spinner } from "@nous-research/ui";
 import { api, type OAuthProvider, type OAuthStartResponse } from "@/lib/api";
 import { Input } from "@/components/ui/input";
 import { useI18n } from "@/i18n";
@@ -200,7 +200,7 @@ export function OAuthLoginModal({ provider, onClose, onSuccess }: Props) {
 
           {phase === "starting" && (
             <div className="flex items-center gap-3 py-6 text-sm text-muted-foreground">
-              <Loader2 className="h-4 w-4 animate-spin" />
+              <Spinner />
               {t.oauth.initiatingLogin}
             </div>
           )}
@@ -246,7 +246,7 @@ export function OAuthLoginModal({ provider, onClose, onSuccess }: Props) {
 
           {phase === "submitting" && (
             <div className="flex items-center gap-3 py-6 text-sm text-muted-foreground">
-              <Loader2 className="h-4 w-4 animate-spin" />
+              <Spinner />
               {t.oauth.exchangingCode}
             </div>
           )}
@@ -295,7 +295,7 @@ export function OAuthLoginModal({ provider, onClose, onSuccess }: Props) {
                 {t.oauth.reOpenVerification}
               </a>
               <div className="flex items-center gap-2 text-xs text-muted-foreground border-t border-border pt-3">
-                <Loader2 className="h-3 w-3 animate-spin" />
+                <Spinner className="text-xs" />
                 {t.oauth.waitingAuth}
               </div>
             </>

web/src/components/OAuthProvidersCard.tsx

@@ -9,7 +9,7 @@ import {
   LogIn,
 } from "lucide-react";
 import { api, type OAuthProvider } from "@/lib/api";
-import { Button, CopyButton } from "@nous-research/ui";
+import { Button, CopyButton, Spinner } from "@nous-research/ui";
 import {
   Card,
   CardContent,
@@ -106,9 +106,7 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
             outlined
             onClick={refresh}
             disabled={loading}
-            prefix={
-              <RefreshCw className={loading ? "animate-spin" : undefined} />
-            }
+            prefix={loading ? <Spinner /> : <RefreshCw />}
           >
             {t.common.refresh}
           </Button>
@@ -122,7 +120,7 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
       <CardContent>
         {loading && providers === null && (
           <div className="flex items-center justify-center py-8">
-            <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            <Spinner className="text-xl text-primary" />
           </div>
         )}
         {providers && providers.length === 0 && (
@@ -238,13 +236,7 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
                       outlined
                       onClick={() => handleDisconnect(p)}
                       disabled={isBusy}
-                      prefix={
-                        isBusy ? (
-                          <RefreshCw className="animate-spin" />
-                        ) : (
-                          <LogOut />
-                        )
-                      }
+                      prefix={isBusy ? <Spinner /> : <LogOut />}
                     >
                       {t.oauth.disconnect}
                     </Button>

web/src/components/SidebarFooter.tsx

@@ -17,7 +17,7 @@ export function SidebarFooter() {
     >
       <Typography
         mondwest
-        className="font-mono-ui text-[0.7rem] tabular-nums tracking-[0.1em] text-muted-foreground/70"
+        className="font-mono-ui text-[0.7rem] tabular-nums tracking-[0.1em] text-muted-foreground/70 lowercase"
       >
         {status?.version != null ? `v${status.version}` : "—"}
       </Typography>