Merge branch 'main' into bb/gui

apps/dashboard/src/components/OAuthProvidersCard.tsx

@@ -20,6 +20,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Badge } from "@nous-research/ui/ui/components/badge";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { OAuthLoginModal } from "@/components/OAuthLoginModal";
 import { useI18n } from "@/i18n";
 
@@ -55,6 +56,8 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
   const [loading, setLoading] = useState(true);
   const [busyId, setBusyId] = useState<string | null>(null);
   const [loginFor, setLoginFor] = useState<OAuthProvider | null>(null);
+  const [disconnectTarget, setDisconnectTarget] =
+    useState<OAuthProvider | null>(null);
   const { t } = useI18n();
 
   const onErrorRef = useRef(onError);
@@ -74,10 +77,8 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
   }, [refresh]);
 
   const handleDisconnect = async (provider: OAuthProvider) => {
-    if (!confirm(`${t.oauth.disconnect} ${provider.name}?`)) {
-      return;
-    }
     setBusyId(provider.id);
+    setDisconnectTarget(null);
     try {
       await api.disconnectOAuthProvider(provider.id);
       onSuccess?.(`${provider.name} ${t.oauth.disconnect.toLowerCase()}ed`);
@@ -236,7 +237,7 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
                     <Button
                       size="sm"
                       outlined
-                      onClick={() => handleDisconnect(p)}
+                      onClick={() => setDisconnectTarget(p)}
                       disabled={isBusy}
                       prefix={isBusy ? <Spinner /> : <LogOut />}
                     >
@@ -266,6 +267,17 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
           onError={(msg) => onError?.(msg)}
         />
       )}
+      <ConfirmDialog
+        open={disconnectTarget !== null}
+        onCancel={() => setDisconnectTarget(null)}
+        onConfirm={() => {
+          if (disconnectTarget) void handleDisconnect(disconnectTarget);
+        }}
+        title={`${t.oauth.disconnect} ${disconnectTarget?.name ?? ""}?`}
+        description={`This will remove the stored OAuth tokens for ${disconnectTarget?.name ?? "this provider"}. You will need to re-authenticate to use it again.`}
+        destructive
+        confirmLabel={t.oauth.disconnect}
+      />
     </Card>
   );
 }

apps/dashboard/src/components/ui/checkbox.tsx

@@ -0,0 +1,61 @@
+import { cn } from "@/lib/utils";
+import { Check } from "lucide-react";
+
+interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: React.ReactNode;
+}
+
+export function Checkbox({
+  className,
+  label,
+  id,
+  checked,
+  defaultChecked,
+  ...props
+}: CheckboxProps) {
+  // Support both controlled (checked prop) and uncontrolled (defaultChecked) usage.
+  // For visual rendering, prefer `checked` if provided; otherwise fall back to defaultChecked.
+  const isChecked = checked ?? defaultChecked ?? false;
+
+  return (
+    <label
+      htmlFor={id}
+      className={cn(
+        "group flex items-center gap-2.5 cursor-pointer select-none",
+        props.disabled && "cursor-not-allowed opacity-50",
+      )}
+    >
+      <span
+        className={cn(
+          "flex h-4 w-4 shrink-0 items-center justify-center transition-all",
+          "border bg-background/40",
+          // Focus-visible ring for keyboard accessibility
+          "group-has-[:focus-visible]:ring-2 group-has-[:focus-visible]:ring-ring group-has-[:focus-visible]:ring-offset-1",
+          isChecked
+            ? "border-foreground bg-foreground/20"
+            : "border-border group-hover:border-foreground/40",
+          className,
+        )}
+      >
+        <Check
+          className={cn(
+            "h-3 w-3 transition-opacity",
+            isChecked
+              ? "text-foreground opacity-100"
+              : "text-foreground opacity-0",
+          )}
+        />
+      </span>
+      <input
+        type="checkbox"
+        id={id}
+        checked={checked}
+        defaultChecked={checked === undefined ? defaultChecked : undefined}
+        className="sr-only"
+        {...props}
+      />
+      {label && <span className="text-sm">{label}</span>}
+    </label>
+  );
+}