feat(desktop): add Anthropic OAuth re-auth flow in model picker

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/ChatInterface/components/ModelPicker/ModelPicker.tsx

@@ -2,12 +2,9 @@ import {
 	ModelSelector,
 	ModelSelectorContent,
 	ModelSelectorEmpty,
-	ModelSelectorGroup,
 	ModelSelectorInput,
-	ModelSelectorItem,
 	ModelSelectorList,
 	ModelSelectorLogo,
-	ModelSelectorName,
 	ModelSelectorTrigger,
 } from "@superset/ui/ai-elements/model-selector";
 import { PromptInputButton } from "@superset/ui/ai-elements/prompt-input";
@@ -16,18 +13,21 @@ import { ChevronDownIcon } from "lucide-react";
 import { useMemo } from "react";
 import { PILL_BUTTON_CLASS } from "../../styles";
 import type { ModelOption } from "../../types";
+import { AnthropicOAuthDialog } from "./components/AnthropicOAuthDialog";
+import { ModelProviderGroup } from "./components/ModelProviderGroup";
+import { useAnthropicOAuth } from "./hooks/useAnthropicOAuth";
+import { groupModelsByProvider } from "./utils/groupModelsByProvider";
+import {
+	ANTHROPIC_LOGO_PROVIDER,
+	providerToLogo,
+} from "./utils/providerToLogo";
 
-/** Derive a logo provider slug from the provider name */
-function providerToLogo(provider: string): string {
-	const lower = provider.toLowerCase();
-	if (lower.includes("anthropic") || lower.includes("claude"))
-		return "anthropic";
-	if (lower.includes("openai") || lower.includes("gpt")) return "openai";
-	if (lower.includes("google") || lower.includes("gemini")) return "google";
-	if (lower.includes("mistral")) return "mistral";
-	if (lower.includes("deepseek")) return "deepseek";
-	if (lower.includes("xai") || lower.includes("grok")) return "xai";
-	return lower;
+interface ModelPickerProps {
+	models: ModelOption[];
+	selectedModel: ModelOption | null;
+	onSelectModel: (model: ModelOption) => void;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
 }
 
 export function ModelPicker({
@@ -36,77 +36,63 @@ export function ModelPicker({
 	onSelectModel,
 	open,
 	onOpenChange,
-}: {
-	models: ModelOption[];
-	selectedModel: ModelOption | null;
-	onSelectModel: (model: ModelOption) => void;
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-}) {
-	const groupedModels = useMemo(() => {
-		const groups: Record<string, ModelOption[]> = {};
-		for (const model of models) {
-			const group = model.provider;
-			if (!groups[group]) groups[group] = [];
-			groups[group].push(model);
-		}
-		return groups;
-	}, [models]);
-
+}: ModelPickerProps) {
+	const groupedModels = useMemo(() => groupModelsByProvider(models), [models]);
 	const selectedLogo = selectedModel
 		? providerToLogo(selectedModel.provider)
 		: null;
 
+	const {
+		isAnthropicAuthenticated,
+		isStartingOAuth,
+		startAnthropicOAuth,
+		oauthDialog,
+	} = useAnthropicOAuth({
+		isModelSelectorOpen: open,
+		onModelSelectorOpenChange: onOpenChange,
+	});
+
 	return (
-		<ModelSelector open={open} onOpenChange={onOpenChange}>
-			<ModelSelectorTrigger asChild>
-				<PromptInputButton
-					className={`${PILL_BUTTON_CLASS} px-2 gap-1.5 text-xs text-foreground`}
-				>
-					{selectedLogo === "anthropic" ? (
-						<img alt="Claude" className="size-3" src={claudeIcon} />
-					) : selectedLogo ? (
-						<ModelSelectorLogo provider={selectedLogo} />
-					) : null}
-					<span>{selectedModel?.name ?? "Model"}</span>
-					<ChevronDownIcon className="size-2.5 opacity-50" />
-				</PromptInputButton>
-			</ModelSelectorTrigger>
-			<ModelSelectorContent title="Select Model">
-				<ModelSelectorInput placeholder="Search models..." />
-				<ModelSelectorList>
-					<ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
-					{Object.entries(groupedModels).map(([provider, providerModels]) => (
-						<ModelSelectorGroup key={provider} heading={provider}>
-							{providerModels.map((model) => {
-								const logo = providerToLogo(model.provider);
-								return (
-									<ModelSelectorItem
-										key={model.id}
-										value={model.id}
-										onSelect={() => {
-											onSelectModel(model);
-											onOpenChange(false);
-										}}
-									>
-										{logo === "anthropic" ? (
-											<img alt="Claude" className="size-3" src={claudeIcon} />
-										) : (
-											<ModelSelectorLogo provider={logo} />
-										)}
-										<div className="flex flex-1 flex-col gap-0.5">
-											<ModelSelectorName>{model.name}</ModelSelectorName>
-											<span className="text-muted-foreground text-xs">
-												{model.provider}
-											</span>
-										</div>
-									</ModelSelectorItem>
-								);
-							})}
-						</ModelSelectorGroup>
-					))}
-				</ModelSelectorList>
-			</ModelSelectorContent>
-		</ModelSelector>
+		<>
+			<ModelSelector open={open} onOpenChange={onOpenChange}>
+				<ModelSelectorTrigger asChild>
+					<PromptInputButton
+						className={`${PILL_BUTTON_CLASS} px-2 gap-1.5 text-xs text-foreground`}
+					>
+						{selectedLogo === ANTHROPIC_LOGO_PROVIDER ? (
+							<img alt="Claude" className="size-3" src={claudeIcon} />
+						) : selectedLogo ? (
+							<ModelSelectorLogo provider={selectedLogo} />
+						) : null}
+						<span>{selectedModel?.name ?? "Model"}</span>
+						<ChevronDownIcon className="size-2.5 opacity-50" />
+					</PromptInputButton>
+				</ModelSelectorTrigger>
+				<ModelSelectorContent title="Select Model">
+					<ModelSelectorInput placeholder="Search models..." />
+					<ModelSelectorList>
+						<ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
+						{groupedModels.map(([provider, providerModels]) => (
+							<ModelProviderGroup
+								key={provider}
+								provider={provider}
+								models={providerModels}
+								isAnthropicAuthenticated={isAnthropicAuthenticated}
+								isAnthropicOAuthPending={isStartingOAuth}
+								onStartAnthropicOAuth={() => {
+									void startAnthropicOAuth();
+								}}
+								onSelectModel={onSelectModel}
+								onCloseModelSelector={() => {
+									onOpenChange(false);
+								}}
+							/>
+						))}
+					</ModelSelectorList>
+				</ModelSelectorContent>
+			</ModelSelector>
+
+			<AnthropicOAuthDialog {...oauthDialog} />
+		</>
 	);
 }

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/ChatInterface/components/ModelPicker/components/AnthropicOAuthDialog/AnthropicOAuthDialog.tsx

@@ -0,0 +1,140 @@
+import { Button } from "@superset/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@superset/ui/dialog";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupInput,
+} from "@superset/ui/input-group";
+import { Label } from "@superset/ui/label";
+import { LuCopy, LuExternalLink } from "react-icons/lu";
+
+interface AnthropicOAuthDialogProps {
+	open: boolean;
+	authUrl: string | null;
+	code: string;
+	errorMessage: string | null;
+	isPending: boolean;
+	onOpenChange: (open: boolean) => void;
+	onCodeChange: (value: string) => void;
+	onOpenAuthUrl: () => void;
+	onCopyAuthUrl: () => void;
+	onPasteCode: () => void;
+	onSubmit: () => void;
+}
+
+export function AnthropicOAuthDialog({
+	open,
+	authUrl,
+	code,
+	errorMessage,
+	isPending,
+	onOpenChange,
+	onCodeChange,
+	onOpenAuthUrl,
+	onCopyAuthUrl,
+	onPasteCode,
+	onSubmit,
+}: AnthropicOAuthDialogProps) {
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="max-w-[calc(100vw-2rem)] overflow-hidden sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Connect Anthropic</DialogTitle>
+					<DialogDescription>
+						Open Anthropic OAuth in your browser, approve access, then paste the
+						code here.
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="min-w-0 space-y-4">
+					<InputGroup className="max-w-full overflow-hidden border-border/70 bg-muted/30">
+						<InputGroupInput
+							readOnly
+							value={authUrl ?? "OAuth URL not ready"}
+							className="text-muted-foreground h-9 text-xs"
+						/>
+						<InputGroupAddon align="inline-end" className="gap-1 pr-1">
+							<InputGroupButton
+								size="icon-xs"
+								variant="ghost"
+								aria-label="Copy OAuth URL"
+								title="Copy OAuth URL"
+								onClick={onCopyAuthUrl}
+								disabled={!authUrl}
+							>
+								<LuCopy className="size-3.5" />
+							</InputGroupButton>
+							<InputGroupButton
+								size="icon-xs"
+								variant="ghost"
+								aria-label="Open OAuth URL"
+								title="Open OAuth URL"
+								onClick={onOpenAuthUrl}
+								disabled={!authUrl}
+							>
+								<LuExternalLink className="size-3.5" />
+							</InputGroupButton>
+						</InputGroupAddon>
+					</InputGroup>
+
+					<div className="min-w-0 space-y-2">
+						<Label htmlFor="anthropic-oauth-code">Authorization code</Label>
+						<InputGroup>
+							<InputGroupInput
+								id="anthropic-oauth-code"
+								placeholder="Paste code#state or callback URL"
+								value={code}
+								onChange={(event) => onCodeChange(event.target.value)}
+								disabled={isPending}
+								className="h-11 font-mono"
+							/>
+							<InputGroupAddon align="inline-end" className="pr-1">
+								<InputGroupButton
+									size="xs"
+									variant="outline"
+									onClick={onPasteCode}
+									disabled={isPending}
+								>
+									Paste
+								</InputGroupButton>
+							</InputGroupAddon>
+						</InputGroup>
+						<p className="text-muted-foreground text-xs">
+							Paste `code#state` from Anthropic (or full callback URL).
+						</p>
+					</div>
+
+					{errorMessage ? (
+						<p className="text-destructive text-sm">{errorMessage}</p>
+					) : null}
+				</div>
+
+				<DialogFooter>
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => onOpenChange(false)}
+						disabled={isPending}
+					>
+						Back
+					</Button>
+					<Button
+						type="button"
+						onClick={onSubmit}
+						disabled={isPending || !code}
+					>
+						{isPending ? "Connecting..." : "Connect"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/ChatInterface/components/ModelPicker/components/AnthropicOAuthDialog/index.ts

@@ -0,0 +1 @@
+export { AnthropicOAuthDialog } from "./AnthropicOAuthDialog";