fix: replace all buttons for design system buttons

web/src/components/ChatSidebar.tsx

@@ -23,8 +23,8 @@
  * terminal pane keeps working unimpaired.
  */
 
+import { Button } from "@nous-research/ui";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 
 import { ModelPickerDialog } from "@/components/ModelPickerDialog";
@@ -337,12 +337,11 @@ export function ChatSidebar({ channel, className }: ChatSidebarProps) {
 
             {error && (
               <Button
-                variant="ghost"
-                size="sm"
-                className="mt-1 h-6 px-1.5 text-xs"
+                outlined
+                className="mt-1"
                 onClick={reconnect}
+                prefix={<RefreshCw />}
               >
-                <RefreshCw className="mr-1 h-3 w-3" />
                 reconnect
               </Button>
             )}

web/src/components/ModelPickerDialog.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@nous-research/ui";
 import { Input } from "@/components/ui/input";
 import type { GatewayClient } from "@/lib/gatewayClient";
 import { Check, Loader2, Search, X } from "lucide-react";
@@ -222,10 +222,10 @@ export function ModelPickerDialog({ gw, sessionId, onClose, onSubmit }: Props) {
           </label>
 
           <div className="flex items-center gap-2 ml-auto">
-            <Button variant="ghost" size="sm" onClick={onClose}>
+            <Button outlined onClick={onClose}>
               Cancel
             </Button>
-            <Button size="sm" onClick={confirm} disabled={!canConfirm}>
+            <Button onClick={confirm} disabled={!canConfirm}>
               Switch
             </Button>
           </div>

web/src/components/OAuthLoginModal.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { ExternalLink, Copy, X, Check, Loader2 } from "lucide-react";
-import { H2 } from "@nous-research/ui";
+import { Button, H2 } from "@nous-research/ui";
 import { api, type OAuthProvider, type OAuthStartResponse } from "@/lib/api";
-import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useI18n } from "@/i18n";
 
@@ -254,7 +253,6 @@ export function OAuthLoginModal({
                   <Button
                     onClick={handleSubmitPkceCode}
                     disabled={!pkceCode.trim()}
-                    size="sm"
                   >
                     {t.oauth.submitCode}
                   </Button>
@@ -289,8 +287,7 @@ export function OAuthLoginModal({
                   }
                 </code>
                 <Button
-                  variant="outline"
-                  size="sm"
+                  outlined
                   onClick={() =>
                     handleCopyUserCode(
                       (
@@ -301,12 +298,12 @@ export function OAuthLoginModal({
                       ).user_code,
                     )
                   }
-                  className="text-xs"
+                  className="!p-2 aspect-square"
                 >
                   {codeCopied ? (
-                    <Check className="h-3 w-3" />
+                    <Check className="h-3.5 w-3.5" />
                   ) : (
-                    <Copy className="h-3 w-3" />
+                    <Copy className="h-3.5 w-3.5" />
                   )}
                 </Button>
               </div>
@@ -348,11 +345,10 @@ export function OAuthLoginModal({
                 {errorMsg || t.oauth.loginFailed}
               </div>
               <div className="flex justify-end gap-2">
-                <Button variant="outline" size="sm" onClick={handleClose}>
+                <Button outlined onClick={handleClose}>
                   {t.common.close}
                 </Button>
                 <Button
-                  size="sm"
                   onClick={() => {
                     if (start?.session_id) {
                       api.cancelOAuthSession(start.session_id).catch(() => {});

web/src/components/OAuthProvidersCard.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState, useCallback, useRef } from "react";
 import { ShieldCheck, ShieldOff, Copy, ExternalLink, RefreshCw, LogOut, Terminal, LogIn } from "lucide-react";
 import { api, type OAuthProvider } from "@/lib/api";
+import { Button } from "@nous-research/ui";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { OAuthLoginModal } from "@/components/OAuthLoginModal";
 import { useI18n } from "@/i18n";
@@ -94,13 +94,11 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
             <CardTitle className="text-base">{t.oauth.providerLogins}</CardTitle>
           </div>
           <Button
-            variant="ghost"
-            size="sm"
+            outlined
             onClick={refresh}
             disabled={loading}
-            className="text-xs"
+            prefix={<RefreshCw className={loading ? "animate-spin" : undefined} />}
           >
-            <RefreshCw className={`h-3 w-3 mr-1 ${loading ? "animate-spin" : ""}`} />
             {t.common.refresh}
           </Button>
         </div>
@@ -194,53 +192,42 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
                       className="inline-flex"
                       title={`Open ${p.name} docs`}
                     >
-                      <Button variant="ghost" size="sm" className="h-7 w-7 p-0">
+                      <Button outlined className="!p-1.5 aspect-square">
                         <ExternalLink className="h-3.5 w-3.5" />
                       </Button>
                     </a>
                   )}
                   {!p.status.logged_in && p.flow !== "external" && (
                     <Button
-                      variant="default"
-                      size="sm"
                       onClick={() => setLoginFor(p)}
-                      className="text-xs h-7"
+                      prefix={<LogIn />}
                     >
-                      <LogIn className="h-3 w-3 mr-1" />
                       {t.oauth.login}
                     </Button>
                   )}
                   {!p.status.logged_in && (
                     <Button
-                      variant="outline"
-                      size="sm"
+                      outlined
                       onClick={() => handleCopy(p)}
-                      className="text-xs h-7"
                       title={t.oauth.copyCliCommand}
+                      prefix={copiedId === p.id ? undefined : <Copy />}
                     >
-                      {copiedId === p.id ? (
-                        <>{t.oauth.copied}</>
-                      ) : (
-                        <>
-                          <Copy className="h-3 w-3 mr-1" />
-                          {t.oauth.cli}
-                        </>
-                      )}
+                      {copiedId === p.id ? t.oauth.copied : t.oauth.cli}
                     </Button>
                   )}
                   {p.status.logged_in && p.flow !== "external" && (
                     <Button
-                      variant="outline"
-                      size="sm"
+                      outlined
                       onClick={() => handleDisconnect(p)}
                       disabled={isBusy}
-                      className="text-xs h-7"
+                      prefix={
+                        isBusy ? (
+                          <RefreshCw className="animate-spin" />
+                        ) : (
+                          <LogOut />
+                        )
+                      }
                     >
-                      {isBusy ? (
-                        <RefreshCw className="h-3 w-3 mr-1 animate-spin" />
-                      ) : (
-                        <LogOut className="h-3 w-3 mr-1" />
-                      )}
                       {t.oauth.disconnect}
                     </Button>
                   )}

web/src/components/ui/button.tsx

@@ -1,38 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-
-export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-mondwest text-xs tracking-[0.1em] uppercase transition-colors cursor-pointer"
-  + " disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-foreground/90 text-background hover:bg-foreground",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-border bg-transparent hover:bg-foreground/10 hover:text-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-foreground/10 hover:text-foreground",
-        link: "text-foreground underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 px-3 text-[0.65rem]",
-        lg: "h-10 px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export function Button({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>) {
-  return <button className={cn(buttonVariants({ variant, size }), className)} {...props} />;
-}

web/src/components/ui/confirm-dialog.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { AlertTriangle } from "lucide-react";
+import { Button } from "@nous-research/ui";
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
 
 export function ConfirmDialog({
   cancelLabel = "Cancel",
@@ -101,8 +101,7 @@ export function ConfirmDialog({
         <div className="flex items-center justify-end gap-2 p-3">
           <Button
             type="button"
-            variant="ghost"
-            size="sm"
+            outlined
             onClick={onCancel}
             disabled={loading}
           >
@@ -111,10 +110,9 @@ export function ConfirmDialog({
           <Button
             data-confirm
             type="button"
-            variant={destructive ? "destructive" : "default"}
-            size="sm"
             onClick={onConfirm}
             disabled={loading}
+            className={destructive ? "!bg-destructive !text-destructive-foreground" : undefined}
           >
             {loading ? "…" : confirmLabel}
           </Button>