fix: badges

web/src/components/ChatSidebar.tsx

@@ -24,7 +24,7 @@
  */
 
 import { Button } from "@nous-research/ui";
-import { Badge } from "@/components/ui/badge";
+import { Badge } from "@nous-research/ui";
 import { Card } from "@/components/ui/card";
 
 import { ModelPickerDialog } from "@/components/ModelPickerDialog";
@@ -57,12 +57,15 @@ const STATE_LABEL: Record<ConnectionState, string> = {
   error: "error",
 };
 
-const STATE_TONE: Record<ConnectionState, string> = {
-  idle: "bg-muted text-muted-foreground",
-  connecting: "bg-primary/10 text-primary",
-  open: "bg-emerald-500/10 text-emerald-500 dark:text-emerald-400",
-  closed: "bg-muted text-muted-foreground",
-  error: "bg-destructive/10 text-destructive",
+const STATE_TONE: Record<
+  ConnectionState,
+  "secondary" | "warning" | "success" | "destructive"
+> = {
+  idle: "secondary",
+  connecting: "warning",
+  open: "success",
+  closed: "secondary",
+  error: "destructive",
 };
 
 interface ChatSidebarProps {
@@ -325,7 +328,7 @@ export function ChatSidebar({ channel, className }: ChatSidebarProps) {
           </button>
         </div>
 
-        <Badge className={STATE_TONE[state]}>{STATE_LABEL[state]}</Badge>
+        <Badge tone={STATE_TONE[state]}>{STATE_LABEL[state]}</Badge>
       </Card>
 
       {banner && (

web/src/components/OAuthProvidersCard.tsx

@@ -3,7 +3,7 @@ import { ShieldCheck, ShieldOff, ExternalLink, RefreshCw, LogOut, Terminal, LogI
 import { api, type OAuthProvider } from "@/lib/api";
 import { Button, CopyButton } from "@nous-research/ui";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+import { Badge } from "@nous-research/ui";
 import { OAuthLoginModal } from "@/components/OAuthLoginModal";
 import { useI18n } from "@/i18n";
 
@@ -124,21 +124,21 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
                   <div className="flex flex-col min-w-0 gap-0.5">
                     <div className="flex items-center gap-2 flex-wrap">
                       <span className="font-medium text-sm">{p.name}</span>
-                      <Badge variant="outline" className="text-[11px] uppercase tracking-wide">
+                      <Badge tone="outline" className="text-[11px] uppercase tracking-wide">
                         {t.oauth.flowLabels[p.flow]}
                       </Badge>
                       {p.status.logged_in && (
-                        <Badge variant="success" className="text-[11px]">
+                        <Badge tone="success" className="text-[11px]">
                           {t.oauth.connected}
                         </Badge>
                       )}
                       {expiresLabel === "expired" && (
-                        <Badge variant="destructive" className="text-[11px]">
+                        <Badge tone="destructive" className="text-[11px]">
                           {t.oauth.expired}
                         </Badge>
                       )}
                       {expiresLabel && expiresLabel !== "expired" && (
-                        <Badge variant="outline" className="text-[11px]">
+                        <Badge tone="outline" className="text-[11px]">
                           {expiresLabel}
                         </Badge>
                       )}

web/src/components/PlatformsCard.tsx

@@ -1,7 +1,7 @@
 import { AlertTriangle, Radio, Wifi, WifiOff } from "lucide-react";
 import type { PlatformStatus } from "@/lib/api";
 import { isoTimeAgo } from "@/lib/utils";
-import { Badge } from "@/components/ui/badge";
+import { Badge } from "@nous-research/ui";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useI18n } from "@/i18n";
 
@@ -9,11 +9,11 @@ export function PlatformsCard({ platforms }: PlatformsCardProps) {
   const { t } = useI18n();
   const platformStateBadge: Record<
     string,
-    { variant: "success" | "warning" | "destructive"; label: string }
+    { tone: "success" | "warning" | "destructive"; label: string }
   > = {
-    connected: { variant: "success", label: t.status.connected },
-    disconnected: { variant: "warning", label: t.status.disconnected },
-    fatal: { variant: "destructive", label: t.status.error },
+    connected: { tone: "success", label: t.status.connected },
+    disconnected: { tone: "warning", label: t.status.disconnected },
+    fatal: { tone: "destructive", label: t.status.error },
   };
 
   return (
@@ -30,7 +30,7 @@ export function PlatformsCard({ platforms }: PlatformsCardProps) {
       <CardContent className="grid gap-3">
         {platforms.map(([name, info]) => {
           const display = platformStateBadge[info.state] ?? {
-            variant: "outline" as const,
+            tone: "outline" as const,
             label: info.state,
           };
           const IconComponent =
@@ -76,10 +76,10 @@ export function PlatformsCard({ platforms }: PlatformsCardProps) {
               </div>
 
               <Badge
-                variant={display.variant}
+                tone={display.tone}
                 className="shrink-0 self-start sm:self-center"
               >
-                {display.variant === "success" && (
+                {display.tone === "success" && (
                   <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
                 )}
                 {display.label}

web/src/components/ui/badge.tsx

@@ -1,29 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center border px-2 py-0.5 font-compressed text-[0.65rem] tracking-[0.15em] uppercase transition-colors",
-  {
-    variants: {
-      variant: {
-        default: "border-foreground/20 bg-foreground/10 text-foreground",
-        secondary: "border-border bg-secondary text-secondary-foreground",
-        destructive: "border-destructive/30 bg-destructive/15 text-destructive",
-        outline: "border-border text-muted-foreground",
-        success: "grain border-emerald-600/30 bg-emerald-950/70 text-emerald-400",
-        warning: "border-warning/30 bg-warning/15 text-warning",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export function Badge({
-  className,
-  variant,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}