feat: enhance chat header with image generation configuration support and sidebar integration

surfsense_web/components/new-chat/chat-header.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { useCallback, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
 import type {
+	GlobalImageGenConfig,
 	GlobalNewLLMConfig,
+	ImageGenerationConfig,
 	NewLLMConfigPublic,
 } from "@/contracts/types/new-llm-config.types";
+import { ImageConfigSidebar } from "./image-config-sidebar";
 import { ImageModelSelector } from "./image-model-selector";
 import { ModelConfigSidebar } from "./model-config-sidebar";
 import { ModelSelector } from "./model-selector";
@@ -15,7 +17,7 @@ interface ChatHeaderProps {
 }
 
 export function ChatHeader({ searchSpaceId }: ChatHeaderProps) {
-	const router = useRouter();
+	// LLM config sidebar state
 	const [sidebarOpen, setSidebarOpen] = useState(false);
 	const [selectedConfig, setSelectedConfig] = useState<
 		NewLLMConfigPublic | GlobalNewLLMConfig | null
@@ -23,6 +25,15 @@ export function ChatHeader({ searchSpaceId }: ChatHeaderProps) {
 	const [isGlobal, setIsGlobal] = useState(false);
 	const [sidebarMode, setSidebarMode] = useState<"create" | "edit" | "view">("view");
 
+	// Image config sidebar state
+	const [imageSidebarOpen, setImageSidebarOpen] = useState(false);
+	const [selectedImageConfig, setSelectedImageConfig] = useState<
+		ImageGenerationConfig | GlobalImageGenConfig | null
+	>(null);
+	const [isImageGlobal, setIsImageGlobal] = useState(false);
+	const [imageSidebarMode, setImageSidebarMode] = useState<"create" | "edit" | "view">("view");
+
+	// LLM handlers
 	const handleEditConfig = useCallback(
 		(config: NewLLMConfigPublic | GlobalNewLLMConfig, global: boolean) => {
 			setSelectedConfig(config);
@@ -42,20 +53,36 @@ export function ChatHeader({ searchSpaceId }: ChatHeaderProps) {
 
 	const handleSidebarClose = useCallback((open: boolean) => {
 		setSidebarOpen(open);
-		if (!open) {
-			setSelectedConfig(null);
-		}
+		if (!open) setSelectedConfig(null);
 	}, []);
 
+	// Image model handlers
 	const handleAddImageModel = useCallback(() => {
-		// Navigate to settings image-models tab
-		router.push(`/dashboard/${searchSpaceId}/settings?tab=image-models`);
-	}, [router, searchSpaceId]);
+		setSelectedImageConfig(null);
+		setIsImageGlobal(false);
+		setImageSidebarMode("create");
+		setImageSidebarOpen(true);
+	}, []);
+
+	const handleEditImageConfig = useCallback(
+		(config: ImageGenerationConfig | GlobalImageGenConfig, global: boolean) => {
+			setSelectedImageConfig(config);
+			setIsImageGlobal(global);
+			setImageSidebarMode(global ? "view" : "edit");
+			setImageSidebarOpen(true);
+		},
+		[]
+	);
+
+	const handleImageSidebarClose = useCallback((open: boolean) => {
+		setImageSidebarOpen(open);
+		if (!open) setSelectedImageConfig(null);
+	}, []);
 
 	return (
 		<div className="flex items-center gap-2">
 			<ModelSelector onEdit={handleEditConfig} onAddNew={handleAddNew} />
-			<ImageModelSelector onAddNew={handleAddImageModel} />
+			<ImageModelSelector onEdit={handleEditImageConfig} onAddNew={handleAddImageModel} />
 			<ModelConfigSidebar
 				open={sidebarOpen}
 				onOpenChange={handleSidebarClose}
@@ -64,6 +91,14 @@ export function ChatHeader({ searchSpaceId }: ChatHeaderProps) {
 				searchSpaceId={searchSpaceId}
 				mode={sidebarMode}
 			/>
+			<ImageConfigSidebar
+				open={imageSidebarOpen}
+				onOpenChange={handleImageSidebarClose}
+				config={selectedImageConfig}
+				isGlobal={isImageGlobal}
+				searchSpaceId={searchSpaceId}
+				mode={imageSidebarMode}
+			/>
 		</div>
 	);
 }

surfsense_web/components/new-chat/image-config-sidebar.tsx

@@ -0,0 +1,522 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import {
+	AlertCircle,
+	Check,
+	ChevronsUpDown,
+	Globe,
+	ImageIcon,
+	Key,
+	Shuffle,
+	X,
+	Zap,
+} from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { toast } from "sonner";
+import {
+	createImageGenConfigMutationAtom,
+	updateImageGenConfigMutationAtom,
+} from "@/atoms/image-gen-config/image-gen-config-mutation.atoms";
+import { updateLLMPreferencesMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Spinner } from "@/components/ui/spinner";
+import { IMAGE_GEN_MODELS, IMAGE_GEN_PROVIDERS } from "@/contracts/enums/image-gen-providers";
+import type {
+	GlobalImageGenConfig,
+	ImageGenerationConfig,
+} from "@/contracts/types/new-llm-config.types";
+import { cn } from "@/lib/utils";
+
+interface ImageConfigSidebarProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	config: ImageGenerationConfig | GlobalImageGenConfig | null;
+	isGlobal: boolean;
+	searchSpaceId: number;
+	mode: "create" | "edit" | "view";
+}
+
+const INITIAL_FORM = {
+	name: "",
+	description: "",
+	provider: "",
+	model_name: "",
+	api_key: "",
+	api_base: "",
+	api_version: "",
+};
+
+export function ImageConfigSidebar({
+	open,
+	onOpenChange,
+	config,
+	isGlobal,
+	searchSpaceId,
+	mode,
+}: ImageConfigSidebarProps) {
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [mounted, setMounted] = useState(false);
+	const [formData, setFormData] = useState(INITIAL_FORM);
+	const [modelComboboxOpen, setModelComboboxOpen] = useState(false);
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	// Reset form when opening
+	useEffect(() => {
+		if (open) {
+			if (mode === "edit" && config && !isGlobal) {
+				setFormData({
+					name: config.name || "",
+					description: config.description || "",
+					provider: config.provider || "",
+					model_name: config.model_name || "",
+					api_key: (config as ImageGenerationConfig).api_key || "",
+					api_base: config.api_base || "",
+					api_version: config.api_version || "",
+				});
+			} else if (mode === "create") {
+				setFormData(INITIAL_FORM);
+			}
+		}
+	}, [open, mode, config, isGlobal]);
+
+	// Mutations
+	const { mutateAsync: createConfig } = useAtomValue(createImageGenConfigMutationAtom);
+	const { mutateAsync: updateConfig } = useAtomValue(updateImageGenConfigMutationAtom);
+	const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
+
+	// Escape key
+	useEffect(() => {
+		const handleEscape = (e: KeyboardEvent) => {
+			if (e.key === "Escape" && open) onOpenChange(false);
+		};
+		window.addEventListener("keydown", handleEscape);
+		return () => window.removeEventListener("keydown", handleEscape);
+	}, [open, onOpenChange]);
+
+	const isAutoMode = config && "is_auto_mode" in config && config.is_auto_mode;
+
+	const suggestedModels = useMemo(() => {
+		if (!formData.provider) return [];
+		return IMAGE_GEN_MODELS.filter((m) => m.provider === formData.provider);
+	}, [formData.provider]);
+
+	const getTitle = () => {
+		if (mode === "create") return "Add Image Model";
+		if (isAutoMode) return "Auto Mode (Load Balanced)";
+		if (isGlobal) return "View Global Image Model";
+		return "Edit Image Model";
+	};
+
+	const handleSubmit = useCallback(async () => {
+		setIsSubmitting(true);
+		try {
+			if (mode === "create") {
+				const result = await createConfig({
+					name: formData.name,
+					provider: formData.provider,
+					model_name: formData.model_name,
+					api_key: formData.api_key,
+					api_base: formData.api_base || undefined,
+					api_version: formData.api_version || undefined,
+					description: formData.description || undefined,
+					search_space_id: searchSpaceId,
+				});
+				// Set as active image model
+				if (result?.id) {
+					await updatePreferences({
+						search_space_id: searchSpaceId,
+						data: { image_generation_config_id: result.id },
+					});
+				}
+				toast.success("Image model created and assigned!");
+				onOpenChange(false);
+			} else if (!isGlobal && config) {
+				await updateConfig({
+					id: config.id,
+					data: {
+						name: formData.name,
+						description: formData.description || undefined,
+						provider: formData.provider,
+						model_name: formData.model_name,
+						api_key: formData.api_key,
+						api_base: formData.api_base || undefined,
+						api_version: formData.api_version || undefined,
+					},
+				});
+				toast.success("Image model updated!");
+				onOpenChange(false);
+			}
+		} catch (error) {
+			console.error("Failed to save image config:", error);
+			toast.error("Failed to save image model");
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [mode, isGlobal, config, formData, searchSpaceId, createConfig, updateConfig, updatePreferences, onOpenChange]);
+
+	const handleUseGlobalConfig = useCallback(async () => {
+		if (!config || !isGlobal) return;
+		setIsSubmitting(true);
+		try {
+			await updatePreferences({
+				search_space_id: searchSpaceId,
+				data: { image_generation_config_id: config.id },
+			});
+			toast.success(`Now using ${config.name}`);
+			onOpenChange(false);
+		} catch (error) {
+			console.error("Failed to set image model:", error);
+			toast.error("Failed to set image model");
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [config, isGlobal, searchSpaceId, updatePreferences, onOpenChange]);
+
+	const isFormValid = formData.name && formData.provider && formData.model_name && formData.api_key;
+	const selectedProvider = IMAGE_GEN_PROVIDERS.find((p) => p.value === formData.provider);
+
+	if (!mounted) return null;
+
+	const sidebarContent = (
+		<AnimatePresence>
+			{open && (
+				<>
+					{/* Backdrop */}
+					<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.2 }}
+						className="fixed inset-0 z-50 bg-black/20 backdrop-blur-sm"
+						onClick={() => onOpenChange(false)}
+					/>
+
+					{/* Sidebar */}
+					<motion.div
+						initial={{ x: "100%", opacity: 0 }}
+						animate={{ x: 0, opacity: 1 }}
+						exit={{ x: "100%", opacity: 0 }}
+						transition={{ type: "spring", damping: 30, stiffness: 300 }}
+						className={cn(
+							"fixed right-0 top-0 z-50 h-full w-full sm:w-[480px] lg:w-[540px]",
+							"bg-background border-l border-border/50 shadow-2xl",
+							"flex flex-col"
+						)}
+					>
+						{/* Header */}
+						<div
+							className={cn(
+								"flex items-center justify-between px-6 py-4 border-b border-border/50",
+								isAutoMode
+									? "bg-gradient-to-r from-violet-500/10 to-purple-500/10"
+									: "bg-gradient-to-r from-teal-500/10 to-cyan-500/10"
+							)}
+						>
+							<div className="flex items-center gap-3">
+								<div
+									className={cn(
+										"flex items-center justify-center size-10 rounded-xl",
+										isAutoMode
+											? "bg-gradient-to-br from-violet-500 to-purple-600"
+											: "bg-gradient-to-br from-teal-500 to-cyan-600"
+									)}
+								>
+									{isAutoMode ? (
+										<Shuffle className="size-5 text-white" />
+									) : (
+										<ImageIcon className="size-5 text-white" />
+									)}
+								</div>
+								<div>
+									<h2 className="text-base sm:text-lg font-semibold">{getTitle()}</h2>
+									<div className="flex items-center gap-2 mt-0.5">
+										{isAutoMode ? (
+											<Badge
+												variant="secondary"
+												className="gap-1 text-xs bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300"
+											>
+												<Zap className="size-3" />
+												Recommended
+											</Badge>
+										) : isGlobal ? (
+											<Badge variant="secondary" className="gap-1 text-xs">
+												<Globe className="size-3" />
+												Global
+											</Badge>
+										) : null}
+										{config && !isAutoMode && (
+											<span className="text-xs text-muted-foreground">{config.model_name}</span>
+										)}
+									</div>
+								</div>
+							</div>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={() => onOpenChange(false)}
+								className="h-8 w-8 rounded-full"
+							>
+								<X className="h-4 w-4" />
+								<span className="sr-only">Close</span>
+							</Button>
+						</div>
+
+						{/* Content */}
+						<div className="flex-1 overflow-y-auto">
+							<div className="p-6">
+								{/* Auto mode */}
+								{isAutoMode && (
+									<>
+										<Alert className="mb-6 border-violet-500/30 bg-violet-500/5">
+											<Shuffle className="size-4 text-violet-500" />
+											<AlertDescription className="text-sm text-violet-700 dark:text-violet-400">
+												Auto mode distributes image generation requests across all configured providers for optimal performance and rate limit protection.
+											</AlertDescription>
+										</Alert>
+										<div className="flex gap-3 pt-4 border-t border-border/50">
+											<Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>
+												Close
+											</Button>
+											<Button
+												className="flex-1 gap-2 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
+												onClick={handleUseGlobalConfig}
+												disabled={isSubmitting}
+											>
+												{isSubmitting ? "Loading..." : "Use Auto Mode"}
+											</Button>
+										</div>
+									</>
+								)}
+
+								{/* Global config (read-only) */}
+								{isGlobal && !isAutoMode && config && (
+									<>
+										<Alert className="mb-6 border-amber-500/30 bg-amber-500/5">
+											<AlertCircle className="size-4 text-amber-500" />
+											<AlertDescription className="text-sm text-amber-700 dark:text-amber-400">
+												Global configurations are read-only. To customize, create a new model.
+											</AlertDescription>
+										</Alert>
+										<div className="space-y-4">
+											<div className="grid gap-4 sm:grid-cols-2">
+												<div className="space-y-1.5">
+													<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Name</div>
+													<p className="text-sm font-medium">{config.name}</p>
+												</div>
+												{config.description && (
+													<div className="space-y-1.5">
+														<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Description</div>
+														<p className="text-sm text-muted-foreground">{config.description}</p>
+													</div>
+												)}
+											</div>
+											<Separator />
+											<div className="grid gap-4 sm:grid-cols-2">
+												<div className="space-y-1.5">
+													<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Provider</div>
+													<p className="text-sm font-medium">{config.provider}</p>
+												</div>
+												<div className="space-y-1.5">
+													<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Model</div>
+													<p className="text-sm font-medium font-mono">{config.model_name}</p>
+												</div>
+											</div>
+										</div>
+										<div className="flex gap-3 pt-6 border-t border-border/50 mt-6">
+											<Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>
+												Close
+											</Button>
+											<Button className="flex-1 gap-2" onClick={handleUseGlobalConfig} disabled={isSubmitting}>
+												{isSubmitting ? "Loading..." : "Use This Model"}
+											</Button>
+										</div>
+									</>
+								)}
+
+								{/* Create / Edit form */}
+								{(mode === "create" || (mode === "edit" && !isGlobal)) && (
+									<div className="space-y-4">
+										{/* Name */}
+										<div className="space-y-2">
+											<Label className="text-sm font-medium">Name *</Label>
+											<Input
+												placeholder="e.g., My DALL-E 3"
+												value={formData.name}
+												onChange={(e) => setFormData((p) => ({ ...p, name: e.target.value }))}
+											/>
+										</div>
+
+										{/* Description */}
+										<div className="space-y-2">
+											<Label className="text-sm font-medium">Description</Label>
+											<Input
+												placeholder="Optional description"
+												value={formData.description}
+												onChange={(e) => setFormData((p) => ({ ...p, description: e.target.value }))}
+											/>
+										</div>
+
+										<Separator />
+
+										{/* Provider */}
+										<div className="space-y-2">
+											<Label className="text-sm font-medium">Provider *</Label>
+											<Select
+												value={formData.provider}
+												onValueChange={(val) => setFormData((p) => ({ ...p, provider: val, model_name: "" }))}
+											>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a provider" />
+												</SelectTrigger>
+												<SelectContent>
+													{IMAGE_GEN_PROVIDERS.map((p) => (
+														<SelectItem key={p.value} value={p.value}>
+															<div className="flex flex-col">
+																<span className="font-medium">{p.label}</span>
+																<span className="text-xs text-muted-foreground">{p.example}</span>
+															</div>
+														</SelectItem>
+													))}
+												</SelectContent>
+											</Select>
+										</div>
+
+										{/* Model Name */}
+										<div className="space-y-2">
+											<Label className="text-sm font-medium">Model Name *</Label>
+											{suggestedModels.length > 0 ? (
+												<Popover open={modelComboboxOpen} onOpenChange={setModelComboboxOpen}>
+													<PopoverTrigger asChild>
+														<Button variant="outline" role="combobox" className="w-full justify-between font-normal">
+															{formData.model_name || "Select or type a model..."}
+															<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+														</Button>
+													</PopoverTrigger>
+													<PopoverContent className="w-full p-0" align="start">
+														<Command>
+															<CommandInput
+																placeholder="Search or type model..."
+																value={formData.model_name}
+																onValueChange={(val) => setFormData((p) => ({ ...p, model_name: val }))}
+															/>
+															<CommandList>
+																<CommandEmpty>
+																	<span className="text-xs text-muted-foreground">Type a custom model name</span>
+																</CommandEmpty>
+																<CommandGroup>
+																	{suggestedModels.map((m) => (
+																		<CommandItem
+																			key={m.value}
+																			value={m.value}
+																			onSelect={() => {
+																				setFormData((p) => ({ ...p, model_name: m.value }));
+																				setModelComboboxOpen(false);
+																			}}
+																		>
+																			<Check className={cn("mr-2 h-4 w-4", formData.model_name === m.value ? "opacity-100" : "opacity-0")} />
+																			<span className="font-mono text-sm">{m.value}</span>
+																			<span className="ml-2 text-xs text-muted-foreground">{m.label}</span>
+																		</CommandItem>
+																	))}
+																</CommandGroup>
+															</CommandList>
+														</Command>
+													</PopoverContent>
+												</Popover>
+											) : (
+												<Input
+													placeholder="e.g., dall-e-3"
+													value={formData.model_name}
+													onChange={(e) => setFormData((p) => ({ ...p, model_name: e.target.value }))}
+												/>
+											)}
+										</div>
+
+										{/* API Key */}
+										<div className="space-y-2">
+											<Label className="text-sm font-medium flex items-center gap-1.5">
+												<Key className="h-3.5 w-3.5" /> API Key *
+											</Label>
+											<Input
+												type="password"
+												placeholder="sk-..."
+												value={formData.api_key}
+												onChange={(e) => setFormData((p) => ({ ...p, api_key: e.target.value }))}
+											/>
+										</div>
+
+										{/* API Base */}
+										<div className="space-y-2">
+											<Label className="text-sm font-medium">API Base URL</Label>
+											<Input
+												placeholder={selectedProvider?.apiBase || "Optional"}
+												value={formData.api_base}
+												onChange={(e) => setFormData((p) => ({ ...p, api_base: e.target.value }))}
+											/>
+										</div>
+
+										{/* Azure API Version */}
+										{formData.provider === "AZURE_OPENAI" && (
+											<div className="space-y-2">
+												<Label className="text-sm font-medium">API Version (Azure)</Label>
+												<Input
+													placeholder="2024-02-15-preview"
+													value={formData.api_version}
+													onChange={(e) => setFormData((p) => ({ ...p, api_version: e.target.value }))}
+												/>
+											</div>
+										)}
+
+										{/* Actions */}
+										<div className="flex gap-3 pt-4 border-t">
+											<Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>
+												Cancel
+											</Button>
+											<Button
+												className="flex-1 gap-2 bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700"
+												onClick={handleSubmit}
+												disabled={isSubmitting || !isFormValid}
+											>
+												{isSubmitting ? <Spinner size="sm" className="mr-2" /> : null}
+												{mode === "edit" ? "Save Changes" : "Create & Use"}
+											</Button>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</motion.div>
+				</>
+			)}
+		</AnimatePresence>
+	);
+
+	return typeof document !== "undefined" ? createPortal(sidebarContent, document.body) : null;
+}

surfsense_web/components/new-chat/image-model-selector.tsx

@@ -38,14 +38,19 @@ import {
 } from "@/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Spinner } from "@/components/ui/spinner";
+import type {
+	GlobalImageGenConfig,
+	ImageGenerationConfig,
+} from "@/contracts/types/new-llm-config.types";
 import { cn } from "@/lib/utils";
 
 interface ImageModelSelectorProps {
 	className?: string;
 	onAddNew?: () => void;
+	onEdit?: (config: ImageGenerationConfig | GlobalImageGenConfig, isGlobal: boolean) => void;
 }
 
-export function ImageModelSelector({ className, onAddNew }: ImageModelSelectorProps) {
+export function ImageModelSelector({ className, onAddNew, onEdit }: ImageModelSelectorProps) {
 	const [open, setOpen] = useState(false);
 	const [searchQuery, setSearchQuery] = useState("");
 
@@ -220,49 +225,59 @@ export function ImageModelSelector({ className, onAddNew }: ImageModelSelectorPr
 									<Globe className="size-3.5" />
 									Global Image Models
 								</div>
-								{filteredGlobal.map((config) => {
-									const isSelected = currentConfig?.id === config.id;
-									const isAuto = "is_auto_mode" in config && config.is_auto_mode;
-									return (
-										<CommandItem
-											key={`g-${config.id}`}
-											value={`g-${config.id}`}
-											onSelect={() => handleSelect(config.id)}
-											className={cn(
-												"mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50",
-												isSelected && "bg-accent/80",
-												isAuto && "border border-violet-200 dark:border-violet-800/50"
-											)}
-										>
-											<div className="flex items-center gap-3 min-w-0 flex-1">
-												<div className="shrink-0">
-													{isAuto ? (
-														<Shuffle className="size-4 text-violet-500" />
-													) : (
-														<ImageIcon className="size-4 text-teal-500" />
-													)}
-												</div>
-												<div className="min-w-0 flex-1">
-													<div className="flex items-center gap-2">
-														<span className="font-medium truncate">{config.name}</span>
-														{isAuto && (
-															<Badge
-																variant="secondary"
-																className="text-[9px] px-1 py-0 h-3.5 bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300 border-0"
-															>
-																Recommended
-															</Badge>
-														)}
-														{isSelected && <Check className="size-3.5 text-primary shrink-0" />}
-													</div>
-													<span className="text-xs text-muted-foreground truncate block">
-														{isAuto ? "Auto load balancing" : config.model_name}
-													</span>
-												</div>
+							{filteredGlobal.map((config) => {
+								const isSelected = currentConfig?.id === config.id;
+								const isAuto = "is_auto_mode" in config && config.is_auto_mode;
+								return (
+									<CommandItem
+										key={`g-${config.id}`}
+										value={`g-${config.id}`}
+										onSelect={() => handleSelect(config.id)}
+										className={cn(
+											"mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50",
+											isSelected && "bg-accent/80",
+											isAuto && "border border-violet-200 dark:border-violet-800/50"
+										)}
+									>
+										<div className="flex items-center gap-3 min-w-0 flex-1">
+											<div className="shrink-0">
+												{isAuto ? (
+													<Shuffle className="size-4 text-violet-500" />
+												) : (
+													<ImageIcon className="size-4 text-teal-500" />
+												)}
 											</div>
-										</CommandItem>
-									);
-								})}
+											<div className="min-w-0 flex-1">
+												<div className="flex items-center gap-2">
+													<span className="font-medium truncate">{config.name}</span>
+													{isAuto && (
+														<Badge
+															variant="secondary"
+															className="text-[9px] px-1 py-0 h-3.5 bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300 border-0"
+														>
+															Recommended
+														</Badge>
+													)}
+													{isSelected && <Check className="size-3.5 text-primary shrink-0" />}
+												</div>
+												<span className="text-xs text-muted-foreground truncate block">
+													{isAuto ? "Auto load balancing" : config.model_name}
+												</span>
+											</div>
+											{onEdit && (
+												<ChevronRight
+													className="size-3.5 text-muted-foreground shrink-0 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+													onClick={(e) => {
+														e.stopPropagation();
+														setOpen(false);
+														onEdit(config, true);
+													}}
+												/>
+											)}
+										</div>
+									</CommandItem>
+								);
+							})}
 							</CommandGroup>
 						)}
 
@@ -275,37 +290,51 @@ export function ImageModelSelector({ className, onAddNew }: ImageModelSelectorPr
 										<User className="size-3.5" />
 										Your Image Models
 									</div>
-									{filteredUser.map((config) => {
-										const isSelected = currentConfig?.id === config.id;
-										return (
-											<CommandItem
-												key={`u-${config.id}`}
-												value={`u-${config.id}`}
-												onSelect={() => handleSelect(config.id)}
-												className={cn(
-													"mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50",
-													isSelected && "bg-accent/80"
-												)}
-											>
-												<div className="flex items-center gap-3 min-w-0 flex-1">
-													<div className="shrink-0">
-														<ImageIcon className="size-4 text-teal-500" />
-													</div>
-													<div className="min-w-0 flex-1">
-														<div className="flex items-center gap-2">
-															<span className="font-medium truncate">{config.name}</span>
-															{isSelected && (
-																<Check className="size-3.5 text-primary shrink-0" />
-															)}
-														</div>
-														<span className="text-xs text-muted-foreground truncate block">
-															{config.model_name}
-														</span>
-													</div>
+								{filteredUser.map((config) => {
+									const isSelected = currentConfig?.id === config.id;
+									return (
+										<CommandItem
+											key={`u-${config.id}`}
+											value={`u-${config.id}`}
+											onSelect={() => handleSelect(config.id)}
+											className={cn(
+												"mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50",
+												isSelected && "bg-accent/80"
+											)}
+										>
+											<div className="flex items-center gap-3 min-w-0 flex-1">
+												<div className="shrink-0">
+													<ImageIcon className="size-4 text-teal-500" />
 												</div>
-											</CommandItem>
-										);
-									})}
+												<div className="min-w-0 flex-1">
+													<div className="flex items-center gap-2">
+														<span className="font-medium truncate">{config.name}</span>
+														{isSelected && (
+															<Check className="size-3.5 text-primary shrink-0" />
+														)}
+													</div>
+													<span className="text-xs text-muted-foreground truncate block">
+														{config.model_name}
+													</span>
+												</div>
+												{onEdit && (
+													<Button
+														variant="ghost"
+														size="icon"
+														className="h-7 w-7 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+														onClick={(e) => {
+															e.stopPropagation();
+															setOpen(false);
+															onEdit(config, false);
+														}}
+													>
+														<Edit3 className="size-3.5 text-muted-foreground" />
+													</Button>
+												)}
+											</div>
+										</CommandItem>
+									);
+								})}
 								</CommandGroup>
 							</>
 						)}