refactor(ux): Update dashboard links and enhance settings page layout

- Changed document links to point to the researcher page in the dashboard.
- Removed unused team and settings links from the dashboard layout.
- Redesigned settings page with a sidebar for navigation and improved layout for better user experience.
- Added delete confirmation dialog for model configurations in the settings manager.
- Updated card components for better visual consistency and responsiveness.

surfsense_web/app/dashboard/[search_space_id]/layout.tsx

@@ -52,18 +52,6 @@ export default function DashboardLayout({
 				},
 			],
 		},
-		{
-			title: "Team",
-			url: `/dashboard/${search_space_id}/team`,
-			icon: "Users",
-			items: [],
-		},
-		{
-			title: "Settings",
-			url: `/dashboard/${search_space_id}/settings`,
-			icon: "Settings2",
-			items: [],
-		},
 		{
 			title: "Logs",
 			url: `/dashboard/${search_space_id}/logs`,

surfsense_web/app/dashboard/[search_space_id]/settings/layout.tsx

@@ -0,0 +1,9 @@
+import type React from "react";
+
+/**
+ * Settings layout - renders children directly without the parent sidebar
+ * This creates a full-screen settings experience
+ */
+export default function SettingsLayout({ children }: { children: React.ReactNode }) {
+	return <div className="fixed inset-0 z-50 bg-background">{children}</div>;
+}

surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx

@@ -1,83 +1,302 @@
 "use client";
 
-import { ArrowLeft, Bot, Brain, MessageSquare, Settings } from "lucide-react";
+import {
+	ArrowLeft,
+	Bot,
+	Brain,
+	ChevronRight,
+	type LucideIcon,
+	Menu,
+	MessageSquare,
+	Settings,
+	X,
+} from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
 import { useParams, useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
 import { LLMRoleManager } from "@/components/settings/llm-role-manager";
 import { ModelConfigManager } from "@/components/settings/model-config-manager";
 import { PromptConfigManager } from "@/components/settings/prompt-config-manager";
-import { Separator } from "@/components/ui/separator";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface SettingsNavItem {
+	id: string;
+	label: string;
+	description: string;
+	icon: LucideIcon;
+}
+
+const settingsNavItems: SettingsNavItem[] = [
+	{
+		id: "models",
+		label: "Model Configs",
+		description: "Configure AI models and providers",
+		icon: Bot,
+	},
+	{
+		id: "roles",
+		label: "LLM Roles",
+		description: "Manage language model roles",
+		icon: Brain,
+	},
+	{
+		id: "prompts",
+		label: "System Instructions",
+		description: "Customize system prompts",
+		icon: MessageSquare,
+	},
+];
+
+function SettingsSidebar({
+	activeSection,
+	onSectionChange,
+	onBackToApp,
+	isOpen,
+	onClose,
+}: {
+	activeSection: string;
+	onSectionChange: (section: string) => void;
+	onBackToApp: () => void;
+	isOpen: boolean;
+	onClose: () => void;
+}) {
+	const handleNavClick = (sectionId: string) => {
+		onSectionChange(sectionId);
+		onClose(); // Close sidebar on mobile after selection
+	};
+
+	return (
+		<>
+			{/* Mobile overlay */}
+			<AnimatePresence>
+				{isOpen && (
+					<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.2 }}
+						className="fixed inset-0 bg-background/80 backdrop-blur-sm z-40 md:hidden"
+						onClick={onClose}
+					/>
+				)}
+			</AnimatePresence>
+
+			{/* Sidebar */}
+			<aside
+				className={cn(
+					"fixed md:relative left-0 top-0 z-50 md:z-auto",
+					"w-72 shrink-0 border-r border-border bg-background md:bg-muted/20 h-full flex flex-col",
+					"transition-transform duration-300 ease-out",
+					"md:translate-x-0",
+					isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
+				)}
+			>
+				{/* Header with back button */}
+				<div className="p-4 border-b border-border flex items-center justify-between">
+					<Button
+						variant="ghost"
+						onClick={onBackToApp}
+						className="flex-1 justify-start gap-3 h-11 px-3 hover:bg-muted group"
+					>
+						<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 group-hover:bg-primary/20 transition-colors">
+							<ArrowLeft className="h-4 w-4 text-primary" />
+						</div>
+						<span className="font-medium">Back to app</span>
+					</Button>
+					{/* Mobile close button */}
+					<Button variant="ghost" size="icon" onClick={onClose} className="md:hidden h-9 w-9">
+						<X className="h-5 w-5" />
+					</Button>
+				</div>
+
+				{/* Navigation Items */}
+				<nav className="flex-1 px-3 py-2 space-y-1 overflow-y-auto">
+					{settingsNavItems.map((item, index) => {
+						const isActive = activeSection === item.id;
+						const Icon = item.icon;
+
+						return (
+							<motion.button
+								key={item.id}
+								initial={{ opacity: 0, x: -10 }}
+								animate={{ opacity: 1, x: 0 }}
+								transition={{ delay: 0.1 + index * 0.05, duration: 0.3 }}
+								onClick={() => handleNavClick(item.id)}
+								whileHover={{ scale: 1.01 }}
+								whileTap={{ scale: 0.99 }}
+								className={cn(
+									"relative w-full flex items-center gap-3 px-3 py-3 rounded-xl text-left transition-all duration-200",
+									isActive ? "bg-muted shadow-sm border border-border" : "hover:bg-muted/60"
+								)}
+							>
+								{isActive && (
+									<motion.div
+										layoutId="settingsActiveIndicator"
+										className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-r-full"
+										initial={false}
+										transition={{
+											type: "spring",
+											stiffness: 500,
+											damping: 35,
+										}}
+									/>
+								)}
+								<div
+									className={cn(
+										"flex items-center justify-center w-9 h-9 rounded-lg transition-colors",
+										isActive ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+									)}
+								>
+									<Icon className="h-4 w-4" />
+								</div>
+								<div className="flex-1 min-w-0">
+									<p
+										className={cn(
+											"text-sm font-medium truncate transition-colors",
+											isActive ? "text-foreground" : "text-muted-foreground"
+										)}
+									>
+										{item.label}
+									</p>
+									<p className="text-xs text-muted-foreground/70 truncate">{item.description}</p>
+								</div>
+								<ChevronRight
+									className={cn(
+										"h-4 w-4 shrink-0 transition-all",
+										isActive
+											? "text-primary opacity-100 translate-x-0"
+											: "text-muted-foreground/40 opacity-0 -translate-x-1"
+									)}
+								/>
+							</motion.button>
+						);
+					})}
+				</nav>
+
+				{/* Footer */}
+				<div className="p-4 border-t border-border">
+					<p className="text-xs text-muted-foreground text-center">SurfSense Settings</p>
+				</div>
+			</aside>
+		</>
+	);
+}
+
+function SettingsContent({
+	activeSection,
+	searchSpaceId,
+	onMenuClick,
+}: {
+	activeSection: string;
+	searchSpaceId: number;
+	onMenuClick: () => void;
+}) {
+	const activeItem = settingsNavItems.find((item) => item.id === activeSection);
+	const Icon = activeItem?.icon || Settings;
+
+	return (
+		<motion.div
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1 }}
+			transition={{ delay: 0.2, duration: 0.4 }}
+			className="flex-1 min-w-0 h-full overflow-hidden bg-background"
+		>
+			<div className="h-full overflow-y-auto">
+				<div className="max-w-4xl mx-auto p-4 md:p-6 lg:p-10">
+					{/* Section Header */}
+					<AnimatePresence mode="wait">
+						<motion.div
+							key={activeSection + "-header"}
+							initial={{ opacity: 0, y: 10 }}
+							animate={{ opacity: 1, y: 0 }}
+							exit={{ opacity: 0, y: -10 }}
+							transition={{ duration: 0.3 }}
+							className="mb-6 md:mb-8"
+						>
+							<div className="flex items-center gap-3 md:gap-4">
+								{/* Mobile menu button */}
+								<Button
+									variant="outline"
+									size="icon"
+									onClick={onMenuClick}
+									className="md:hidden h-10 w-10 shrink-0"
+								>
+									<Menu className="h-5 w-5" />
+								</Button>
+								<motion.div
+									initial={{ scale: 0.8, opacity: 0 }}
+									animate={{ scale: 1, opacity: 1 }}
+									transition={{ delay: 0.1, duration: 0.3 }}
+									className="flex items-center justify-center w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 border border-primary/10 shadow-sm shrink-0"
+								>
+									<Icon className="h-6 w-6 md:h-7 md:w-7 text-primary" />
+								</motion.div>
+								<div className="min-w-0">
+									<h1 className="text-xl md:text-2xl font-bold tracking-tight truncate">
+										{activeItem?.label}
+									</h1>
+									<p className="text-sm text-muted-foreground mt-0.5 truncate">
+										{activeItem?.description}
+									</p>
+								</div>
+							</div>
+						</motion.div>
+					</AnimatePresence>
+
+					{/* Section Content */}
+					<AnimatePresence mode="wait">
+						<motion.div
+							key={activeSection}
+							initial={{ opacity: 0, y: 20 }}
+							animate={{ opacity: 1, y: 0 }}
+							exit={{ opacity: 0, y: -20 }}
+							transition={{
+								duration: 0.35,
+								ease: [0.4, 0, 0.2, 1],
+							}}
+						>
+							{activeSection === "models" && <ModelConfigManager searchSpaceId={searchSpaceId} />}
+							{activeSection === "roles" && <LLMRoleManager searchSpaceId={searchSpaceId} />}
+							{activeSection === "prompts" && <PromptConfigManager searchSpaceId={searchSpaceId} />}
+						</motion.div>
+					</AnimatePresence>
+				</div>
+			</div>
+		</motion.div>
+	);
+}
 
 export default function SettingsPage() {
 	const router = useRouter();
 	const params = useParams();
 	const searchSpaceId = Number(params.search_space_id);
+	const [activeSection, setActiveSection] = useState("models");
+	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+	const handleBackToApp = useCallback(() => {
+		router.push(`/dashboard/${searchSpaceId}/researcher`);
+	}, [router, searchSpaceId]);
 
 	return (
-		<div className="min-h-screen bg-background">
-			<div className="container max-w-7xl mx-auto p-6 lg:p-8">
-				<div className="space-y-8">
-					{/* Header Section */}
-					<div className="space-y-4">
-						<div className="flex items-center space-x-4">
-							{/* Back Button */}
-							<button
-								onClick={() => router.push(`/dashboard/${searchSpaceId}`)}
-								className="flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 hover:bg-primary/20 transition-colors"
-								aria-label="Back to Dashboard"
-								type="button"
-							>
-								<ArrowLeft className="h-5 w-5 text-primary" />
-							</button>
-							<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-								<Settings className="h-6 w-6 text-primary" />
-							</div>
-							<div className="space-y-1">
-								<h1 className="text-3xl font-bold tracking-tight">Settings</h1>
-								<p className="text-lg text-muted-foreground">
-									Manage your settings for this search space.
-								</p>
-							</div>
-						</div>
-						<Separator className="my-6" />
-					</div>
-
-					{/* Settings Content */}
-					<Tabs defaultValue="models" className="space-y-8">
-						<div className="overflow-x-auto">
-							<TabsList className="grid w-full min-w-fit grid-cols-3 lg:w-auto lg:inline-grid">
-								<TabsTrigger value="models" className="flex items-center gap-2 text-sm">
-									<Bot className="h-4 w-4" />
-									<span className="hidden sm:inline">Model Configs</span>
-									<span className="sm:hidden">Models</span>
-								</TabsTrigger>
-								<TabsTrigger value="roles" className="flex items-center gap-2 text-sm">
-									<Brain className="h-4 w-4" />
-									<span className="hidden sm:inline">LLM Roles</span>
-									<span className="sm:hidden">Roles</span>
-								</TabsTrigger>
-								<TabsTrigger value="prompts" className="flex items-center gap-2 text-sm">
-									<MessageSquare className="h-4 w-4" />
-									<span className="hidden sm:inline">System Instructions</span>
-									<span className="sm:hidden">System Instructions</span>
-								</TabsTrigger>
-							</TabsList>
-						</div>
-
-						<TabsContent value="models" className="space-y-6">
-							<ModelConfigManager searchSpaceId={searchSpaceId} />
-						</TabsContent>
-
-						<TabsContent value="roles" className="space-y-6">
-							<LLMRoleManager searchSpaceId={searchSpaceId} />
-						</TabsContent>
-
-						<TabsContent value="prompts" className="space-y-6">
-							<PromptConfigManager searchSpaceId={searchSpaceId} />
-						</TabsContent>
-					</Tabs>
-				</div>
-			</div>
-		</div>
+		<motion.div
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1 }}
+			transition={{ duration: 0.3 }}
+			className="h-full flex bg-background"
+		>
+			<SettingsSidebar
+				activeSection={activeSection}
+				onSectionChange={setActiveSection}
+				onBackToApp={handleBackToApp}
+				isOpen={isSidebarOpen}
+				onClose={() => setIsSidebarOpen(false)}
+			/>
+			<SettingsContent
+				activeSection={activeSection}
+				searchSpaceId={searchSpaceId}
+				onMenuClick={() => setIsSidebarOpen(true)}
+			/>
+		</motion.div>
 	);
 }

surfsense_web/app/dashboard/page.tsx

@@ -255,7 +255,7 @@ const DashboardPage = () => {
 										/>
 										<div className="flex flex-col h-full justify-between overflow-hidden rounded-xl border bg-muted/30 backdrop-blur-sm transition-all hover:border-primary/50">
 											<div className="relative h-32 w-full overflow-hidden">
-												<Link href={`/dashboard/${space.id}/documents`} key={space.id}>
+												<Link href={`/dashboard/${space.id}/researcher`} key={space.id}>
 													<Image
 														src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
 														alt={space.name}
@@ -300,7 +300,7 @@ const DashboardPage = () => {
 											</div>
 											<Link
 												className="flex flex-1 flex-col p-4 cursor-pointer"
-												href={`/dashboard/${space.id}/documents`}
+												href={`/dashboard/${space.id}/researcher`}
 												key={space.id}
 											>
 												<div className="flex flex-1 flex-col justify-between p-1">

surfsense_web/components/markdown-viewer.tsx

@@ -28,7 +28,12 @@ export function MarkdownViewer({ content, className }: MarkdownViewerProps) {
 				</p>
 			),
 			a: ({ node, children, ...props }: any) => (
-				<a className="text-primary hover:underline" target="_blank" rel="noopener noreferrer" {...props}>
+				<a
+					className="text-primary hover:underline"
+					target="_blank"
+					rel="noopener noreferrer"
+					{...props}
+				>
 					{children}
 				</a>
 			),

surfsense_web/components/settings/llm-role-manager.tsx

@@ -255,93 +255,89 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 
 			{/* Stats Overview */}
 			{!isLoading && !hasError && (
-				<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-					<Card className="border-l-4 border-l-blue-500">
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
-									<p className="text-3xl font-bold tracking-tight">{availableConfigs.length}</p>
-									<p className="text-sm font-medium text-muted-foreground">Available Models</p>
-									<div className="flex gap-2 text-xs text-muted-foreground">
-										<span>🌐 {globalConfigs.length} Global</span>
-										<span>• {llmConfigs.length} Custom</span>
+				<div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
+					<Card className="overflow-hidden">
+						<div className="h-1 bg-blue-500" />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
+									<p className="text-2xl font-bold tracking-tight">{availableConfigs.length}</p>
+									<p className="text-xs font-medium text-muted-foreground">Available Models</p>
+									<div className="flex flex-wrap gap-x-2 gap-y-0.5 text-[10px] text-muted-foreground">
+										<span>{globalConfigs.length} Global</span>
+										<span>{llmConfigs.length} Custom</span>
 									</div>
 								</div>
-								<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10">
-									<Bot className="h-6 w-6 text-blue-600" />
+								<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/10">
+									<Bot className="h-4 w-4 text-blue-600" />
 								</div>
 							</div>
 						</CardContent>
 					</Card>
 
-					<Card className="border-l-4 border-l-purple-500">
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
-									<p className="text-3xl font-bold tracking-tight">{assignedConfigIds.length}</p>
-									<p className="text-sm font-medium text-muted-foreground">Assigned Roles</p>
+					<Card className="overflow-hidden">
+						<div className="h-1 bg-purple-500" />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
+									<p className="text-2xl font-bold tracking-tight">{assignedConfigIds.length}</p>
+									<p className="text-xs font-medium text-muted-foreground">Assigned Roles</p>
 								</div>
-								<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-purple-500/10">
-									<CheckCircle className="h-6 w-6 text-purple-600" />
+								<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-purple-500/10">
+									<CheckCircle className="h-4 w-4 text-purple-600" />
 								</div>
 							</div>
 						</CardContent>
 					</Card>
 
-					<Card
-						className={`border-l-4 ${
-							isAssignmentComplete ? "border-l-green-500" : "border-l-yellow-500"
-						}`}
-					>
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
-									<p className="text-3xl font-bold tracking-tight">
+					<Card className="overflow-hidden">
+						<div className={`h-1 ${isAssignmentComplete ? "bg-green-500" : "bg-yellow-500"}`} />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
+									<p className="text-2xl font-bold tracking-tight">
 										{Math.round((assignedConfigIds.length / 3) * 100)}%
 									</p>
-									<p className="text-sm font-medium text-muted-foreground">Completion</p>
+									<p className="text-xs font-medium text-muted-foreground">Completion</p>
 								</div>
 								<div
-									className={`flex h-12 w-12 items-center justify-center rounded-lg ${
+									className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
 										isAssignmentComplete ? "bg-green-500/10" : "bg-yellow-500/10"
 									}`}
 								>
 									{isAssignmentComplete ? (
-										<CheckCircle className="h-6 w-6 text-green-600" />
+										<CheckCircle className="h-4 w-4 text-green-600" />
 									) : (
-										<AlertCircle className="h-6 w-6 text-yellow-600" />
+										<AlertCircle className="h-4 w-4 text-yellow-600" />
 									)}
 								</div>
 							</div>
 						</CardContent>
 					</Card>
 
-					<Card
-						className={`border-l-4 ${
-							isAssignmentComplete ? "border-l-emerald-500" : "border-l-orange-500"
-						}`}
-					>
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
+					<Card className="overflow-hidden">
+						<div className={`h-1 ${isAssignmentComplete ? "bg-emerald-500" : "bg-orange-500"}`} />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
 									<p
-										className={`text-3xl font-bold tracking-tight ${
+										className={`text-2xl font-bold tracking-tight ${
 											isAssignmentComplete ? "text-emerald-600" : "text-orange-600"
 										}`}
 									>
 										{isAssignmentComplete ? "Ready" : "Setup"}
 									</p>
-									<p className="text-sm font-medium text-muted-foreground">Status</p>
+									<p className="text-xs font-medium text-muted-foreground">Status</p>
 								</div>
 								<div
-									className={`flex h-12 w-12 items-center justify-center rounded-lg ${
+									className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
 										isAssignmentComplete ? "bg-emerald-500/10" : "bg-orange-500/10"
 									}`}
 								>
 									{isAssignmentComplete ? (
-										<CheckCircle className="h-6 w-6 text-emerald-600" />
+										<CheckCircle className="h-4 w-4 text-emerald-600" />
 									) : (
-										<RefreshCw className="h-6 w-6 text-orange-600" />
+										<RefreshCw className="h-4 w-4 text-orange-600" />
 									)}
 								</div>
 							</div>

surfsense_web/components/settings/model-config-manager.tsx

@@ -8,8 +8,6 @@ import {
 	ChevronsUpDown,
 	Clock,
 	Edit3,
-	Eye,
-	EyeOff,
 	Loader2,
 	Plus,
 	RefreshCw,
@@ -20,6 +18,16 @@ import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
@@ -77,7 +85,6 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 	const { globalConfigs } = useGlobalLLMConfigs();
 	const [isAddingNew, setIsAddingNew] = useState(false);
 	const [editingConfig, setEditingConfig] = useState<LLMConfig | null>(null);
-	const [showApiKey, setShowApiKey] = useState<Record<number, boolean>>({});
 	const [formData, setFormData] = useState<CreateLLMConfig>({
 		name: "",
 		provider: "",
@@ -91,6 +98,8 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 	});
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [modelComboboxOpen, setModelComboboxOpen] = useState(false);
+	const [configToDelete, setConfigToDelete] = useState<LLMConfig | null>(null);
+	const [isDeleting, setIsDeleting] = useState(false);
 
 	// Populate form when editing
 	useEffect(() => {
@@ -162,19 +171,22 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 		}
 	};
 
-	const handleDelete = async (id: number) => {
-		if (
-			confirm("Are you sure you want to delete this configuration? This action cannot be undone.")
-		) {
-			await deleteLLMConfig(id);
-		}
+	const handleDeleteClick = (config: LLMConfig) => {
+		setConfigToDelete(config);
 	};
 
-	const toggleApiKeyVisibility = (configId: number) => {
-		setShowApiKey((prev) => ({
-			...prev,
-			[configId]: !prev[configId],
-		}));
+	const handleConfirmDelete = async () => {
+		if (!configToDelete) return;
+		setIsDeleting(true);
+		try {
+			await deleteLLMConfig(configToDelete.id);
+			toast.success("Configuration deleted successfully");
+		} catch (error) {
+			toast.error("Failed to delete configuration");
+		} finally {
+			setIsDeleting(false);
+			setConfigToDelete(null);
+		}
 	};
 
 	const selectedProvider = LLM_PROVIDERS.find((p) => p.value === formData.provider);
@@ -184,13 +196,6 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 		return LLM_PROVIDERS.find((p) => p.value === providerValue);
 	};
 
-	const maskApiKey = (apiKey: string) => {
-		if (apiKey.length <= 8) return "*".repeat(apiKey.length);
-		return (
-			apiKey.substring(0, 4) + "*".repeat(apiKey.length - 8) + apiKey.substring(apiKey.length - 4)
-		);
-	};
-
 	return (
 		<div className="space-y-6">
 			{/* Header */}
@@ -258,46 +263,49 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 
 			{/* Stats Overview */}
 			{!loading && !error && (
-				<div className="grid gap-4 md:grid-cols-3">
-					<Card className="border-l-4 border-l-blue-500">
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
-									<p className="text-3xl font-bold tracking-tight">{llmConfigs.length}</p>
-									<p className="text-sm font-medium text-muted-foreground">Total Configurations</p>
+				<div className="grid gap-3 grid-cols-3">
+					<Card className="overflow-hidden">
+						<div className="h-1 bg-blue-500" />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
+									<p className="text-2xl font-bold tracking-tight">{llmConfigs.length}</p>
+									<p className="text-xs font-medium text-muted-foreground">Total Configs</p>
 								</div>
-								<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10">
-									<Bot className="h-6 w-6 text-blue-600" />
+								<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/10">
+									<Bot className="h-4 w-4 text-blue-600" />
 								</div>
 							</div>
 						</CardContent>
 					</Card>
 
-					<Card className="border-l-4 border-l-green-500">
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
-									<p className="text-3xl font-bold tracking-tight">
+					<Card className="overflow-hidden">
+						<div className="h-1 bg-green-500" />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
+									<p className="text-2xl font-bold tracking-tight">
 										{new Set(llmConfigs.map((c) => c.provider)).size}
 									</p>
-									<p className="text-sm font-medium text-muted-foreground">Unique Providers</p>
+									<p className="text-xs font-medium text-muted-foreground">Providers</p>
 								</div>
-								<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/10">
-									<CheckCircle className="h-6 w-6 text-green-600" />
+								<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-green-500/10">
+									<CheckCircle className="h-4 w-4 text-green-600" />
 								</div>
 							</div>
 						</CardContent>
 					</Card>
 
-					<Card className="border-l-4 border-l-emerald-500">
-						<CardContent className="p-6">
-							<div className="flex items-center justify-between space-x-4">
-								<div className="space-y-1">
-									<p className="text-3xl font-bold tracking-tight text-emerald-600">Active</p>
-									<p className="text-sm font-medium text-muted-foreground">System Status</p>
+					<Card className="overflow-hidden">
+						<div className="h-1 bg-emerald-500" />
+						<CardContent className="p-4">
+							<div className="flex items-start justify-between gap-2">
+								<div className="space-y-1 min-w-0">
+									<p className="text-2xl font-bold tracking-tight text-emerald-600">Active</p>
+									<p className="text-xs font-medium text-muted-foreground">Status</p>
 								</div>
-								<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-500/10">
-									<CheckCircle className="h-6 w-6 text-emerald-600" />
+								<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-emerald-500/10">
+									<CheckCircle className="h-4 w-4 text-emerald-600" />
 								</div>
 							</div>
 						</CardContent>
@@ -352,119 +360,91 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 											exit={{ opacity: 0, y: -10 }}
 											transition={{ duration: 0.2 }}
 										>
-											<Card className="group border-l-4 border-l-primary/50 hover:border-l-primary hover:shadow-md transition-all duration-200">
-												<CardContent className="p-6">
-													<div className="flex items-start justify-between">
-														<div className="flex-1 space-y-4">
-															{/* Header */}
-															<div className="flex items-start gap-4">
-																<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 group-hover:bg-primary/20 transition-colors">
-																	<Bot className="h-6 w-6 text-primary" />
-																</div>
-																<div className="flex-1 space-y-2">
-																	<div className="flex items-center gap-3">
-																		<h4 className="text-lg font-semibold tracking-tight">
-																			{config.name}
-																		</h4>
-																		<Badge variant="secondary" className="text-xs font-medium">
-																			{config.provider}
-																		</Badge>
+											<Card className="group overflow-hidden hover:shadow-md transition-all duration-200">
+												<CardContent className="p-0">
+													<div className="flex">
+														{/* Left accent bar */}
+														<div className="w-1 bg-primary/50 group-hover:bg-primary transition-colors" />
+
+														<div className="flex-1 p-5">
+															<div className="flex items-start justify-between gap-4">
+																{/* Main content */}
+																<div className="flex items-start gap-4 flex-1 min-w-0">
+																	<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 group-hover:bg-primary/15 transition-colors">
+																		<Bot className="h-5 w-5 text-primary" />
 																	</div>
-																	<p className="text-sm text-muted-foreground font-mono">
-																		{config.model_name}
-																	</p>
-																	{config.language && (
-																		<div className="flex items-center gap-2">
-																			<Badge variant="outline" className="text-xs">
-																				{config.language}
-																			</Badge>
+																	<div className="flex-1 min-w-0 space-y-3">
+																		{/* Title row */}
+																		<div className="flex items-center gap-2 flex-wrap">
+																			<h4 className="text-base font-semibold tracking-tight truncate">
+																				{config.name}
+																			</h4>
+																			<div className="flex items-center gap-1.5">
+																				<Badge
+																					variant="secondary"
+																					className="text-[10px] font-medium px-1.5 py-0"
+																				>
+																					{config.provider}
+																				</Badge>
+																				{config.language && (
+																					<Badge
+																						variant="outline"
+																						className="text-[10px] px-1.5 py-0 text-muted-foreground"
+																					>
+																						{config.language}
+																					</Badge>
+																				)}
+																			</div>
 																		</div>
-																	)}
-																</div>
-															</div>
 
-															{/* Provider Description */}
-															{providerInfo && (
-																<p className="text-sm text-muted-foreground">
-																	{providerInfo.description}
-																</p>
-															)}
+																		{/* Model name */}
+																		<div className="flex items-center gap-2">
+																			<code className="text-xs font-mono text-muted-foreground bg-muted/50 px-2 py-0.5 rounded">
+																				{config.model_name}
+																			</code>
+																		</div>
 
-															{/* Configuration Details */}
-															<div className="grid gap-4 sm:grid-cols-2">
-																<div className="space-y-2">
-																	<Label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-																		API Key
-																	</Label>
-																	<div className="flex items-center space-x-2">
-																		<code className="flex-1 rounded-md bg-muted px-3 py-2 text-xs font-mono">
-																			{showApiKey[config.id]
-																				? config.api_key
-																				: maskApiKey(config.api_key)}
-																		</code>
-																		<Button
-																			variant="ghost"
-																			size="sm"
-																			onClick={() => toggleApiKeyVisibility(config.id)}
-																			className="h-8 w-8 p-0"
-																		>
-																			{showApiKey[config.id] ? (
-																				<EyeOff className="h-3 w-3" />
-																			) : (
-																				<Eye className="h-3 w-3" />
+																		{/* Footer row */}
+																		<div className="flex items-center gap-3 pt-2">
+																			{config.created_at && (
+																				<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+																					<Clock className="h-3 w-3" />
+																					<span>
+																						{new Date(config.created_at).toLocaleDateString()}
+																					</span>
+																				</div>
 																			)}
-																		</Button>
+																			<div className="flex items-center gap-1.5 text-xs">
+																				<div className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+																				<span className="text-emerald-600 dark:text-emerald-400 font-medium">
+																					Active
+																				</span>
+																			</div>
+																		</div>
 																	</div>
 																</div>
 
-																{config.api_base && (
-																	<div className="space-y-2">
-																		<Label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-																			API Base URL
-																		</Label>
-																		<code className="block rounded-md bg-muted px-3 py-2 text-xs font-mono break-all">
-																			{config.api_base}
-																		</code>
-																	</div>
-																)}
-															</div>
-
-															{/* Metadata */}
-															<div className="flex flex-wrap items-center gap-4 pt-4 border-t border-border/50">
-																{config.created_at && (
-																	<div className="flex items-center gap-2 text-xs text-muted-foreground">
-																		<Clock className="h-3 w-3" />
-																		<span>
-																			Created {new Date(config.created_at).toLocaleDateString()}
-																		</span>
-																	</div>
-																)}
-																<div className="flex items-center gap-2 text-xs">
-																	<div className="h-2 w-2 rounded-full bg-green-500"></div>
-																	<span className="text-green-600 font-medium">Active</span>
+																{/* Actions */}
+																<div className="flex items-center gap-1 shrink-0">
+																	<Button
+																		variant="ghost"
+																		size="sm"
+																		onClick={() => setEditingConfig(config)}
+																		className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+																	>
+																		<Edit3 className="h-4 w-4" />
+																	</Button>
+																	<Button
+																		variant="ghost"
+																		size="sm"
+																		onClick={() => handleDeleteClick(config)}
+																		className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+																	>
+																		<Trash2 className="h-4 w-4" />
+																	</Button>
 																</div>
 															</div>
 														</div>
-
-														{/* Actions */}
-														<div className="flex flex-col gap-2 ml-6">
-															<Button
-																variant="outline"
-																size="sm"
-																onClick={() => setEditingConfig(config)}
-																className="h-8 w-8 p-0"
-															>
-																<Edit3 className="h-4 w-4" />
-															</Button>
-															<Button
-																variant="outline"
-																size="sm"
-																onClick={() => handleDelete(config.id)}
-																className="h-8 w-8 p-0 border-destructive/20 text-destructive hover:bg-destructive hover:text-destructive-foreground"
-															>
-																<Trash2 className="h-4 w-4" />
-															</Button>
-														</div>
 													</div>
 												</CardContent>
 											</Card>
@@ -803,6 +783,46 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 					</form>
 				</DialogContent>
 			</Dialog>
+
+			{/* Delete Confirmation Dialog */}
+			<AlertDialog
+				open={!!configToDelete}
+				onOpenChange={(open) => !open && setConfigToDelete(null)}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle className="flex items-center gap-2">
+							<Trash2 className="h-5 w-5 text-destructive" />
+							Delete Configuration
+						</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete{" "}
+							<span className="font-semibold text-foreground">{configToDelete?.name}</span>? This
+							action cannot be undone and will permanently remove this model configuration.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleConfirmDelete}
+							disabled={isDeleting}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							{isDeleting ? (
+								<>
+									<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+									Deleting...
+								</>
+							) : (
+								<>
+									<Trash2 className="mr-2 h-4 w-4" />
+									Delete
+								</>
+							)}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</div>
 	);
 }

surfsense_web/components/sidebar/AppSidebarProvider.tsx

@@ -193,6 +193,7 @@ export function AppSidebarProvider({
 	if (!isClient) {
 		return (
 			<AppSidebar
+				searchSpaceId={searchSpaceId}
 				navSecondary={navSecondary}
 				navMain={navMain}
 				RecentChats={[]}
@@ -204,6 +205,7 @@ export function AppSidebarProvider({
 	return (
 		<>
 			<AppSidebar
+				searchSpaceId={searchSpaceId}
 				navSecondary={updatedNavSecondary}
 				navMain={navMain}
 				RecentChats={displayChats}

surfsense_web/components/sidebar/app-sidebar.tsx

@@ -4,26 +4,116 @@ import {
 	AlertCircle,
 	BookOpen,
 	Cable,
+	ChevronsUpDown,
 	Database,
 	ExternalLink,
 	FileStack,
 	FileText,
 	Info,
+	LogOut,
 	type LucideIcon,
 	MessageCircleMore,
+	MoonIcon,
 	Podcast,
 	Settings2,
 	SquareLibrary,
 	SquareTerminal,
+	SunIcon,
 	Trash2,
 	Undo2,
+	UserPlus,
 	Users,
 } from "lucide-react";
-import Image from "next/image";
 import Link from "next/link";
-import { memo, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { useTheme } from "next-themes";
+import { memo, useEffect, useMemo, useState } from "react";
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useUser } from "@/hooks/use-user";
+
+/**
+ * Generates a consistent color based on a string (email)
+ */
+function stringToColor(str: string): string {
+	let hash = 0;
+	for (let i = 0; i < str.length; i++) {
+		hash = str.charCodeAt(i) + ((hash << 5) - hash);
+	}
+	const colors = [
+		"#6366f1", // indigo
+		"#8b5cf6", // violet
+		"#a855f7", // purple
+		"#d946ef", // fuchsia
+		"#ec4899", // pink
+		"#f43f5e", // rose
+		"#ef4444", // red
+		"#f97316", // orange
+		"#eab308", // yellow
+		"#84cc16", // lime
+		"#22c55e", // green
+		"#14b8a6", // teal
+		"#06b6d4", // cyan
+		"#0ea5e9", // sky
+		"#3b82f6", // blue
+	];
+	return colors[Math.abs(hash) % colors.length];
+}
+
+/**
+ * Gets initials from an email address
+ */
+function getInitials(email: string): string {
+	const name = email.split("@")[0];
+	const parts = name.split(/[._-]/);
+	if (parts.length >= 2) {
+		return (parts[0][0] + parts[1][0]).toUpperCase();
+	}
+	return name.slice(0, 2).toUpperCase();
+}
+
+/**
+ * Dynamic avatar component that generates an SVG based on email
+ */
+function UserAvatar({ email, size = 32 }: { email: string; size?: number }) {
+	const bgColor = stringToColor(email);
+	const initials = getInitials(email);
+
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 32 32"
+			className="rounded-lg"
+			role="img"
+			aria-labelledby="sidebar-avatar-title"
+		>
+			<title id="sidebar-avatar-title">Avatar for {email}</title>
+			<rect width="32" height="32" rx="6" fill={bgColor} />
+			<text
+				x="50%"
+				y="50%"
+				dominantBaseline="central"
+				textAnchor="middle"
+				fill="white"
+				fontSize="12"
+				fontWeight="600"
+				fontFamily="system-ui, sans-serif"
+			>
+				{initials}
+			</text>
+		</svg>
+	);
+}
 
-import { Logo } from "@/components/Logo";
 import { NavMain } from "@/components/sidebar/nav-main";
 import { NavProjects } from "@/components/sidebar/nav-projects";
 import { NavSecondary } from "@/components/sidebar/nav-secondary";
@@ -122,6 +212,7 @@ const defaultData = {
 };
 
 interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
+	searchSpaceId?: string;
 	navMain?: {
 		title: string;
 		url: string;
@@ -162,12 +253,22 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 
 // Memoized AppSidebar component for better performance
 export const AppSidebar = memo(function AppSidebar({
+	searchSpaceId,
 	navMain = defaultData.navMain,
 	navSecondary = defaultData.navSecondary,
 	RecentChats = defaultData.RecentChats,
 	pageUsage,
 	...props
 }: AppSidebarProps) {
+	const router = useRouter();
+	const { theme, setTheme } = useTheme();
+	const { user, loading: isLoadingUser } = useUser();
+	const [isClient, setIsClient] = useState(false);
+
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
+
 	// Process navMain to resolve icon names to components
 	const processedNavMain = useMemo(() => {
 		return navMain.map((item) => ({
@@ -194,28 +295,111 @@ export const AppSidebar = memo(function AppSidebar({
 		);
 	}, [RecentChats]);
 
+	// Get user display name from email
+	const userDisplayName = user?.email ? user.email.split("@")[0] : "User";
+	const userEmail = user?.email || (isLoadingUser ? "Loading..." : "Unknown");
+
+	const handleLogout = () => {
+		try {
+			if (typeof window !== "undefined") {
+				localStorage.removeItem("surfsense_bearer_token");
+				router.push("/");
+			}
+		} catch (error) {
+			console.error("Error during logout:", error);
+			router.push("/");
+		}
+	};
+
 	return (
 		<Sidebar variant="inset" collapsible="icon" aria-label="Main navigation" {...props}>
 			<SidebarHeader>
 				<SidebarMenu>
 					<SidebarMenuItem>
-						<SidebarMenuButton asChild size="lg">
-							<Link href="/" className="flex items-center gap-2 w-full">
-								<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-									<Image
-										src="/icon-128.png"
-										alt="SurfSense logo"
-										width={32}
-										height={32}
-										className="rounded-lg"
-									/>
-								</div>
-								<div className="grid flex-1 text-left text-sm leading-tight">
-									<span className="truncate font-medium">SurfSense</span>
-									<span className="truncate text-xs">beta v0.0.8</span>
-								</div>
-							</Link>
-						</SidebarMenuButton>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<SidebarMenuButton
+									size="lg"
+									className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+								>
+									<div className="flex aspect-square size-8 items-center justify-center">
+										{user?.email ? (
+											<UserAvatar email={user.email} size={32} />
+										) : (
+											<div className="size-8 rounded-lg bg-sidebar-primary animate-pulse" />
+										)}
+									</div>
+									<div className="grid flex-1 text-left text-sm leading-tight">
+										<span className="truncate font-medium">{userDisplayName}</span>
+										<span className="truncate text-xs text-muted-foreground">{userEmail}</span>
+									</div>
+									<ChevronsUpDown className="ml-auto size-4" />
+								</SidebarMenuButton>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+								className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+								side="bottom"
+								align="start"
+								sideOffset={4}
+							>
+								<DropdownMenuLabel className="p-0 font-normal">
+									<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+										<div className="flex aspect-square size-8 items-center justify-center">
+											{user?.email ? (
+												<UserAvatar email={user.email} size={32} />
+											) : (
+												<div className="size-8 rounded-lg bg-sidebar-primary animate-pulse" />
+											)}
+										</div>
+										<div className="grid flex-1 text-left text-sm leading-tight">
+											<span className="truncate font-medium">{userDisplayName}</span>
+											<span className="truncate text-xs text-muted-foreground">{userEmail}</span>
+										</div>
+									</div>
+								</DropdownMenuLabel>
+								<DropdownMenuSeparator />
+								<DropdownMenuGroup>
+									{searchSpaceId && (
+										<>
+											<DropdownMenuItem
+												onClick={() => router.push(`/dashboard/${searchSpaceId}/settings`)}
+											>
+												<Settings2 className="mr-2 h-4 w-4" />
+												Settings
+											</DropdownMenuItem>
+											<DropdownMenuItem
+												onClick={() => router.push(`/dashboard/${searchSpaceId}/team`)}
+											>
+												<UserPlus className="mr-2 h-4 w-4" />
+												Invite members
+											</DropdownMenuItem>
+										</>
+									)}
+									<DropdownMenuItem onClick={() => router.push("/dashboard")}>
+										<SquareLibrary className="mr-2 h-4 w-4" />
+										Switch workspace
+									</DropdownMenuItem>
+								</DropdownMenuGroup>
+								<DropdownMenuSeparator />
+								<DropdownMenuGroup>
+									{isClient && (
+										<DropdownMenuItem onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
+											{theme === "dark" ? (
+												<SunIcon className="mr-2 h-4 w-4" />
+											) : (
+												<MoonIcon className="mr-2 h-4 w-4" />
+											)}
+											{theme === "dark" ? "Light mode" : "Dark mode"}
+										</DropdownMenuItem>
+									)}
+								</DropdownMenuGroup>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem onClick={handleLogout}>
+									<LogOut className="mr-2 h-4 w-4" />
+									Logout
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
 					</SidebarMenuItem>
 				</SidebarMenu>
 			</SidebarHeader>