feat: enhanced UI

- Updated Providers component to manage sidebar state using local storage.
- Enhanced ChatSidebar with dropdown menu for user actions and improved layout.
- Modified MCPServerManager to include server descriptions and improved UI responsiveness.
- Adjusted Chat component layout for better spacing and usability.
- Added constants for sidebar state management in local storage.

app/api/chat/route.ts

@@ -11,6 +11,7 @@ import { eq, and } from 'drizzle-orm';
 
 import { experimental_createMCPClient as createMCPClient, MCPTransport } from 'ai';
 import { Experimental_StdioMCPTransport as StdioMCPTransport } from 'ai/mcp-stdio';
+import { spawn } from "child_process";
 
 // Allow streaming responses up to 30 seconds
 export const maxDuration = 30;
@@ -75,8 +76,8 @@ export async function POST(req: Request) {
     isNewChat = true;
   }
 
-  // Initialize tools with Composio tools
-  let tools = { ...composioTools };
+  // Initialize tools
+  let tools = {};
   const mcpClients: any[] = [];
   
   // Process each MCP server configuration
@@ -113,6 +114,23 @@ export async function POST(req: Request) {
             if (envVar.key) env[envVar.key] = envVar.value || '';
           });
         }
+
+        // if python is passed in the command, install the python package mentioned in args after -m with subprocess or use regex to find the package name
+        if (mcpServer.command.includes('python3')) {
+          const packageName = mcpServer.args[mcpServer.args.indexOf('-m') + 1];
+          console.log("installing python package", packageName);
+          const subprocess = spawn('pip3', ['install', packageName]);
+          subprocess.on('close', (code: number) => {
+            if (code !== 0) {
+              console.error(`Failed to install python package: ${code}`);
+            }
+          });
+          // wait for the subprocess to finish
+          await new Promise((resolve, reject) => {
+            subprocess.on('close', resolve);
+            console.log("installed python package", packageName);
+          });
+        }
         
         transport = new StdioMCPTransport({
           command: mcpServer.command,
@@ -209,6 +227,10 @@ export async function POST(req: Request) {
       // Step 2: Save all messages
       const dbMessages = convertToDBMessages(allMessages, id);
       await saveMessages({ messages: dbMessages });
+      // close all mcp clients
+      // for (const client of mcpClients) {
+      //   await client.close();
+      // }
     }
   });
 

app/globals.css

@@ -4,71 +4,6 @@
 
 @custom-variant dark (&:is(.dark *));
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: Montserrat, sans-serif;
-  --font-mono: Ubuntu Mono, monospace;
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --font-serif: Merriweather, serif;
-  --radius: 0.625rem;
-  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
-  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
-  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
-  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
-  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
-  --tracking-normal: var(--tracking-normal);
-  --shadow-2xl: var(--shadow-2xl);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-md: var(--shadow-md);
-  --shadow: var(--shadow);
-  --shadow-sm: var(--shadow-sm);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-2xs: var(--shadow-2xs);
-  --spacing: var(--spacing);
-  --letter-spacing: var(--letter-spacing);
-  --shadow-offset-y: var(--shadow-offset-y);
-  --shadow-offset-x: var(--shadow-offset-x);
-  --shadow-spread: var(--shadow-spread);
-  --shadow-blur: var(--shadow-blur);
-  --shadow-opacity: var(--shadow-opacity);
-  --color-shadow-color: var(--shadow-color);
-}
-
 :root {
   --background: oklch(0.99 0.01 56.32);
   --foreground: oklch(0.34 0.01 2.77);
@@ -94,7 +29,6 @@
   --chart-3: oklch(0.88 0.08 54.93);
   --chart-4: oklch(0.82 0.11 40.89);
   --chart-5: oklch(0.64 0.13 32.07);
-  --radius: 0.625rem;
   --sidebar: oklch(0.97 0.02 39.40);
   --sidebar-foreground: oklch(0.34 0.01 2.77);
   --sidebar-primary: oklch(0.74 0.16 34.71);
@@ -106,14 +40,7 @@
   --font-sans: Montserrat, sans-serif;
   --font-serif: Merriweather, serif;
   --font-mono: Ubuntu Mono, monospace;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-opacity: 0.09;
-  --shadow-blur: 12px;
-  --shadow-spread: -3px;
-  --shadow-offset-x: 0px;
-  --shadow-offset-y: 6px;
-  --letter-spacing: 0em;
-  --spacing: 0.25rem;
+  --radius: 0.625rem;
   --shadow-2xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
   --shadow-xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
   --shadow-sm: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09);
@@ -122,7 +49,6 @@
   --shadow-lg: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 4px 6px -4px hsl(0 0% 0% / 0.09);
   --shadow-xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 8px 10px -4px hsl(0 0% 0% / 0.09);
   --shadow-2xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.22);
-  --tracking-normal: 0em;
 }
 
 .dark {
@@ -132,7 +58,7 @@
   --card-foreground: oklch(0.94 0.01 51.32);
   --popover: oklch(0.32 0.02 341.45);
   --popover-foreground: oklch(0.94 0.01 51.32);
-  --primary: oklch(0.74 0.16 34.71);
+  --primary: oklch(0.57 0.15 35.26);
   --primary-foreground: oklch(1.00 0 0);
   --secondary: oklch(0.36 0.02 342.27);
   --secondary-foreground: oklch(0.94 0.01 51.32);
@@ -140,7 +66,7 @@
   --muted-foreground: oklch(0.84 0.02 52.63);
   --accent: oklch(0.83 0.11 58.00);
   --accent-foreground: oklch(0.26 0.02 352.40);
-  --destructive: oklch(0.61 0.21 22.24);
+  --destructive: oklch(0.51 0.16 20.19);
   --destructive-foreground: oklch(1.00 0 0);
   --border: oklch(0.36 0.02 342.27);
   --input: oklch(0.36 0.02 342.27);
@@ -152,24 +78,16 @@
   --chart-5: oklch(0.64 0.13 32.07);
   --sidebar: oklch(0.26 0.02 352.40);
   --sidebar-foreground: oklch(0.94 0.01 51.32);
-  --sidebar-primary: oklch(0.74 0.16 34.71);
+  --sidebar-primary: oklch(0.47 0.08 34.31);
   --sidebar-primary-foreground: oklch(1.00 0 0);
-  --sidebar-accent: oklch(0.83 0.11 58.00);
-  --sidebar-accent-foreground: oklch(0.26 0.02 352.40);
+  --sidebar-accent: oklch(0.67 0.09 56.00);
+  --sidebar-accent-foreground: oklch(0.26 0.01 353.48);
   --sidebar-border: oklch(0.36 0.02 342.27);
   --sidebar-ring: oklch(0.74 0.16 34.71);
-  --radius: 0.625rem;
   --font-sans: Montserrat, sans-serif;
   --font-serif: Merriweather, serif;
   --font-mono: Ubuntu Mono, monospace;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-opacity: 0.09;
-  --shadow-blur: 12px;
-  --shadow-spread: -3px;
-  --shadow-offset-x: 0px;
-  --shadow-offset-y: 6px;
-  --letter-spacing: 0em;
-  --spacing: 0.25rem;
+  --radius: 0.625rem;
   --shadow-2xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
   --shadow-xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
   --shadow-sm: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09);
@@ -180,6 +98,59 @@
   --shadow-2xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.22);
 }
 
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

app/providers.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { ThemeProvider } from "@/components/theme-provider";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { Toaster } from "sonner";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useLocalStorage } from "@/lib/hooks/use-local-storage";
+import { STORAGE_KEYS } from "@/lib/constants";
 
 // Create a client
 const queryClient = new QueryClient({
@@ -17,6 +19,11 @@ const queryClient = new QueryClient({
 });
 
 export function Providers({ children }: { children: ReactNode }) {
+  const [sidebarOpen, setSidebarOpen] = useLocalStorage<boolean>(
+    STORAGE_KEYS.SIDEBAR_STATE,
+    true
+  );
+
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider
@@ -25,7 +32,7 @@ export function Providers({ children }: { children: ReactNode }) {
         enableSystem
         disableTransitionOnChange
       >
-        <SidebarProvider defaultOpen={true}>
+        <SidebarProvider defaultOpen={sidebarOpen} open={sidebarOpen} onOpenChange={setSidebarOpen}>
           {children}
           <Toaster position="top-center" richColors />
         </SidebarProvider>

components/chat-sidebar.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useRouter, usePathname } from "next/navigation";
-import { MessageSquare, PlusCircle, Trash2, ServerIcon, Settings, Loader2, Sparkles } from "lucide-react";
+import { MessageSquare, PlusCircle, Trash2, ServerIcon, Settings, Loader2, Sparkles, ChevronsUpDown, UserIcon, Copy } from "lucide-react";
 import {
     Sidebar,
     SidebarContent,
@@ -15,24 +15,31 @@ import {
     SidebarMenuButton,
     SidebarMenuItem,
     SidebarMenuBadge,
-    SidebarSeparator,
     useSidebar
 } from "@/components/ui/sidebar";
 import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { toast } from "sonner";
-import { type Chat } from "@/lib/db/schema";
 import Image from "next/image";
 import { MCPServerManager, type MCPServer } from "./mcp-server-manager";
 import { ThemeToggle } from "./theme-toggle";
-import { useTheme } from "next-themes";
 import { getUserId } from "@/lib/user-id";
 import { useLocalStorage } from "@/lib/hooks/use-local-storage";
 import { STORAGE_KEYS } from "@/lib/constants";
 import { useChats } from "@/lib/hooks/use-chats";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 
 export function ChatSidebar() {
     const router = useRouter();
@@ -72,7 +79,6 @@ export function ChatSidebar() {
 
     // Get active MCP servers status
     const activeServersCount = selectedMcpServers.length;
-    const multipleServersActive = activeServersCount > 1;
 
     // Show loading state if user ID is not yet initialized
     if (!userId) {
@@ -94,15 +100,15 @@ export function ChatSidebar() {
                 </div>
             </SidebarHeader>
             
-            <SidebarContent className="pt-4">
-                <SidebarGroup>
+            <SidebarContent className="flex flex-col h-[calc(100vh-8rem)]">
+                <SidebarGroup className="flex-1 min-h-0">
                     <SidebarGroupLabel className={cn(
-                        "px-4 mb-1 text-xs font-medium text-muted-foreground/80 uppercase tracking-wider",
+                        "px-4 text-xs font-medium text-muted-foreground/80 uppercase tracking-wider",
                         isCollapsed ? "sr-only" : ""
                     )}>
                         Chats
                     </SidebarGroupLabel>
-                    <SidebarGroupContent>
+                    <SidebarGroupContent className="overflow-y-auto pt-1">
                         <SidebarMenu>
                             {isLoading ? (
                                 <div className={`flex items-center justify-center py-4 ${isCollapsed ? "" : "px-4"}`}>
@@ -112,20 +118,15 @@ export function ChatSidebar() {
                                     )}
                                 </div>
                             ) : chats.length === 0 ? (
-                                <div className={`flex flex-col items-center gap-2 py-6 ${isCollapsed ? "" : "px-4"}`}>
+                                <div className={`flex items-center justify-center py-3 ${isCollapsed ? "" : "px-4"}`}>
                                     {isCollapsed ? (
-                                        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-secondary/60">
-                                            <Sparkles className="h-3 w-3 text-secondary-foreground" />
+                                        <div className="flex h-6 w-6 items-center justify-center rounded-md border border-border/50 bg-background/50">
+                                            <MessageSquare className="h-3 w-3 text-muted-foreground" />
                                         </div>
                                     ) : (
-                                        <div className="flex flex-col items-center text-center py-4">
-                                            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-secondary/60 mb-3">
-                                                <Sparkles className="h-5 w-5 text-secondary-foreground" />
-                                            </div>
-                                            <span className="text-sm font-medium text-foreground/90">No chats yet</span>
-                                            <span className="text-xs text-muted-foreground mt-1 max-w-[200px]">
-                                                Start a new conversation below
-                                            </span>
+                                        <div className="flex items-center gap-3 w-full px-3 py-2 rounded-md border border-dashed border-border/50 bg-background/50">
+                                            <MessageSquare className="h-4 w-4 text-muted-foreground" />
+                                            <span className="text-xs text-muted-foreground font-normal">No conversations yet</span>
                                         </div>
                                     )}
                                 </div>
@@ -137,7 +138,7 @@ export function ChatSidebar() {
                                             tooltip={isCollapsed ? chat.title : undefined}
                                             data-active={pathname === `/chat/${chat.id}`}
                                             className={cn(
-                                                "transition-all hover:bg-secondary/50 active:bg-secondary/70",
+                                                "transition-all hover:bg-primary/10 active:bg-primary/15",
                                                 pathname === `/chat/${chat.id}` ? "bg-secondary/60 hover:bg-secondary/60" : ""
                                             )}
                                         >
@@ -179,15 +180,15 @@ export function ChatSidebar() {
                     </SidebarGroupContent>
                 </SidebarGroup>
                 
-                <div className="relative my-3">
+                <div className="relative my-0">
                     <div className="absolute inset-x-0">
                         <Separator className="w-full h-px bg-border/40" />
                     </div>
                 </div>
                 
-                <SidebarGroup>
+                <SidebarGroup className="flex-shrink-0">
                     <SidebarGroupLabel className={cn(
-                        "px-4 mb-1 text-xs font-medium text-muted-foreground/80 uppercase tracking-wider",
+                        "px-4 pt-0 text-xs font-medium text-muted-foreground/80 uppercase tracking-wider",
                         isCollapsed ? "sr-only" : ""
                     )}>
                         MCP Servers
@@ -205,7 +206,7 @@ export function ChatSidebar() {
                                 >
                                     <ServerIcon className={cn(
                                         "h-4 w-4 flex-shrink-0",
-                                        activeServersCount > 0 ? "text-green-500" : "text-muted-foreground"
+                                        activeServersCount > 0 ? "text-primary" : "text-muted-foreground"
                                     )} />
                                     {!isCollapsed && (
                                         <span className="flex-grow text-sm text-foreground/80">MCP Servers</span>
@@ -244,18 +245,90 @@ export function ChatSidebar() {
                         {!isCollapsed && <span>New Chat</span>}
                     </Button>
                     
-                    <div className={`flex ${isCollapsed ? "flex-col" : ""} gap-2 ${isCollapsed ? "items-center" : "justify-between items-center"}`}>
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-8 w-8 rounded-md hover:bg-secondary/50 text-muted-foreground hover:text-foreground"
-                            onClick={() => setMcpSettingsOpen(true)}
+                    <DropdownMenu modal={false}>
+                        <DropdownMenuTrigger asChild>
+                            {isCollapsed ? (
+                                <Button
+                                    variant="ghost"
+                                    className="w-8 h-8 p-0 flex items-center justify-center"
+                                >
+                                    <Avatar className="h-6 w-6 rounded-lg bg-secondary/60">
+                                        <AvatarFallback className="rounded-lg text-xs font-medium text-secondary-foreground">
+                                            {userId.substring(0, 2).toUpperCase()}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                </Button>
+                            ) : (
+                                <Button 
+                                    variant="outline" 
+                                    className="w-full justify-between font-normal bg-transparent border border-border/60 shadow-none px-2 h-10 hover:bg-secondary/50"
+                                >
+                                    <div className="flex items-center gap-2">
+                                        <Avatar className="h-7 w-7 rounded-lg bg-secondary/60">
+                                            <AvatarFallback className="rounded-lg text-sm font-medium text-secondary-foreground">
+                                                {userId.substring(0, 2).toUpperCase()}
+                                            </AvatarFallback>
+                                        </Avatar>
+                                        <div className="grid text-left text-sm leading-tight">
+                                            <span className="truncate font-medium text-foreground/90">User ID</span>
+                                            <span className="truncate text-xs text-muted-foreground">{userId.substring(0, 16)}...</span>
+                                        </div>
+                                    </div>
+                                    <ChevronsUpDown className="h-4 w-4 text-muted-foreground" />
+                                </Button>
+                            )}
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                            className="w-56 rounded-lg"
+                            side={isCollapsed ? "top" : "top"}
+                            align={isCollapsed ? "start" : "end"}
+                            sideOffset={8}
                         >
-                            <Settings className="h-4 w-4" />
-                            <span className="sr-only">MCP Settings</span>
-                        </Button>
-                        <ThemeToggle className="hover:bg-secondary/50 text-muted-foreground hover:text-foreground" />
-                    </div>
+                            <DropdownMenuLabel className="p-0 font-normal">
+                                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                    <Avatar className="h-8 w-8 rounded-lg bg-secondary/60">
+                                        <AvatarFallback className="rounded-lg text-sm font-medium text-secondary-foreground">
+                                            {userId.substring(0, 2).toUpperCase()}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                    <div className="grid flex-1 text-left text-sm leading-tight">
+                                        <span className="truncate font-semibold text-foreground/90">User ID</span>
+                                        <span className="truncate text-xs text-muted-foreground">{userId}</span>
+                                    </div>
+                                </div>
+                            </DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuGroup>
+                                <DropdownMenuItem onSelect={(e) => {
+                                    e.preventDefault();
+                                    navigator.clipboard.writeText(userId);
+                                    toast.success("User ID copied to clipboard");
+                                }}>
+                                    <Copy className="mr-2 h-4 w-4 hover:text-sidebar-accent" />
+                                    Copy User ID
+                                </DropdownMenuItem>
+                            </DropdownMenuGroup>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuGroup>
+                                <DropdownMenuItem onSelect={(e) => {
+                                    e.preventDefault();
+                                    setMcpSettingsOpen(true);
+                                }}>
+                                    <Settings className="mr-2 h-4 w-4 hover:text-sidebar-accent" />
+                                    MCP Settings
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                                    <div className="flex items-center justify-between w-full">
+                                        <div className="flex items-center">
+                                            <Sparkles className="mr-2 h-4 w-4 hover:text-sidebar-accent" />
+                                            Theme
+                                        </div>
+                                        <ThemeToggle className="h-6 w-6" />
+                                    </div>
+                                </DropdownMenuItem>
+                            </DropdownMenuGroup>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
                 </div>
                 
                 <MCPServerManager

components/chat.tsx

@@ -182,7 +182,7 @@ export default function Chat() {
   const isLoading = status === "streaming" || status === "submitted" || isLoadingChat;
 
   return (
-    <div className="h-dvh flex flex-col justify-center py-4 w-full max-w-3xl">
+    <div className="h-dvh flex flex-col justify-center w-full max-w-3xl mx-auto px-4 sm:px-6 md:py-4">
       {messages.length === 0 && !isLoadingChat ? (
         <div className="max-w-xl mx-auto w-full">
           <ProjectOverview />
@@ -203,12 +203,12 @@ export default function Chat() {
         </div>
       ) : (
         <>
-          <div className="flex-1 overflow-y-auto min-h-0">
+          <div className="flex-1 overflow-y-auto min-h-0 pb-2">
             <Messages messages={messages} isLoading={isLoading} status={status} />
           </div>
           <form
             onSubmit={handleFormSubmit}
-            className="mt-4 w-full max-w-2xl mx-auto"
+            className="mt-2 w-full mx-auto mb-4"
           >
             <Textarea
               selectedModel={selectedModel}

components/mcp-server-manager.tsx

@@ -67,6 +67,7 @@ export interface MCPServer {
     args?: string[];
     env?: KeyValuePair[];
     headers?: KeyValuePair[];
+    description?: string;
 }
 
 interface MCPServerManagerProps {
@@ -398,36 +399,44 @@ export const MCPServerManager = ({
                 </DialogHeader>
 
                 {view === 'list' ? (
-                    <div className="flex-1 overflow-hidden flex flex-col pb-14">
+                    <div className="flex-1 overflow-hidden flex flex-col">
                         {servers.length > 0 ? (
                             <div className="flex-1 overflow-hidden flex flex-col">
                                 <div className="flex-1 overflow-hidden flex flex-col">
-                                    <div className="flex items-center justify-between mb-2">
+                                    <div className="flex items-center justify-between mb-3">
                                         <h3 className="text-sm font-medium">Available Servers</h3>
                                         <span className="text-xs text-muted-foreground">
                                             Select multiple servers to combine their tools
                                         </span>
                                     </div>
-                                    <div className="overflow-y-auto pr-1 flex-1 gap-2 flex flex-col">
-                                        {servers.map((server) => {
+                                    <div className="overflow-y-auto pr-1 flex-1 gap-2.5 flex flex-col pb-16">
+                                        {servers
+                                            .sort((a, b) => {
+                                                const aActive = selectedServers.includes(a.id);
+                                                const bActive = selectedServers.includes(b.id);
+                                                if (aActive && !bActive) return -1;
+                                                if (!aActive && bActive) return 1;
+                                                return 0;
+                                            })
+                                            .map((server) => {
                                             const isActive = selectedServers.includes(server.id);
                                             return (
                                                 <div
                                                     key={server.id}
                                                     className={`
-                            relative flex flex-col p-3 rounded-lg transition-colors
+                            relative flex flex-col p-3.5 rounded-xl transition-colors
                             border ${isActive
                                                             ? 'border-primary bg-primary/10'
                                                             : 'border-border hover:border-primary/30 hover:bg-primary/5'}
                           `}
                                                 >
                                                     {/* Server Header with Type Badge and Delete Button */}
-                                                    <div className="flex items-center justify-between mb-1.5">
+                                                    <div className="flex items-center justify-between mb-2">
                                                         <div className="flex items-center gap-2">
                                                             {server.type === 'sse' ? (
-                                                                <Globe className="h-4 w-4 text-primary flex-shrink-0" />
+                                                                <Globe className={`h-4 w-4 ${isActive ? 'text-primary' : 'text-muted-foreground'} flex-shrink-0`} />
                                                             ) : (
-                                                                <Terminal className="h-4 w-4 text-primary flex-shrink-0" />
+                                                                <Terminal className={`h-4 w-4 ${isActive ? 'text-primary' : 'text-muted-foreground'} flex-shrink-0`} />
                                                             )}
                                                             <h4 className="text-sm font-medium truncate max-w-[220px]">{server.name}</h4>
                                                             {hasAdvancedConfig(server) && (
@@ -437,7 +446,7 @@ export const MCPServerManager = ({
                                                             )}
                                                         </div>
                                                         <div className="flex items-center gap-2">
-                                                            <span className="text-xs px-1.5 py-0.5 rounded-full bg-secondary text-secondary-foreground">
+                                                            <span className="text-xs px-2 py-0.5 rounded-full bg-secondary text-secondary-foreground">
                                                                 {server.type.toUpperCase()}
                                                             </span>
                                                             <button
@@ -458,7 +467,7 @@ export const MCPServerManager = ({
                                                     </div>
 
                                                     {/* Server Details */}
-                                                    <p className="text-xs text-muted-foreground mb-2 truncate">
+                                                    <p className="text-xs text-muted-foreground mb-2.5 truncate">
                                                         {server.type === 'sse'
                                                             ? server.url
                                                             : `${server.command} ${server.args?.join(' ')}`
@@ -468,7 +477,7 @@ export const MCPServerManager = ({
                                                     {/* Action Button */}
                                                     <Button
                                                         size="sm"
-                                                        className="w-full mt-0.5 gap-1.5"
+                                                        className="w-full gap-1.5 hover:text-black hover:dark:text-white rounded-lg"
                                                         variant={isActive ? "default" : "outline"}
                                                         onClick={() => toggleServer(server.id)}
                                                     >
@@ -870,14 +879,14 @@ export const MCPServerManager = ({
                 )}
 
                 {/* Persistent fixed footer with buttons */}
-                <div className="absolute bottom-0 left-0 right-0 p-4 bg-background border-t border-border flex justify-between">
+                <div className="absolute bottom-0 left-0 right-0 p-4 bg-background border-t border-border flex justify-between z-10">
                     {view === 'list' ? (
                         <>
                             <Button
                                 variant="outline"
                                 onClick={clearAllServers}
                                 size="sm"
-                                className="gap-1.5"
+                                className="gap-1.5 hover:text-black hover:dark:text-white"
                                 disabled={selectedServers.length === 0}
                             >
                                 <X className="h-3.5 w-3.5" />

components/theme-toggle.tsx

@@ -16,8 +16,8 @@ export function ThemeToggle({ className, ...props }: React.ComponentProps<typeof
       className={`rounded-md h-8 w-8 ${className}`}
       {...props}
     >
-      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 hover:text-sidebar-accent" />
+      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 hover:text-sidebar-accent" />
       <span className="sr-only">Toggle theme</span>
     </Button>
   )

components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

components/ui/popover.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

lib/constants.ts

@@ -5,5 +5,6 @@
 // Local storage keys
 export const STORAGE_KEYS = {
   MCP_SERVERS: "mcp-servers",
-  SELECTED_MCP_SERVERS: "selected-mcp-servers"
+  SELECTED_MCP_SERVERS: "selected-mcp-servers",
+  SIDEBAR_STATE: "sidebar-state"
 }; 

package.json

@@ -23,8 +23,11 @@
     "@opentelemetry/instrumentation": "^0.200.0",
     "@opentelemetry/sdk-logs": "^0.200.0",
     "@radix-ui/react-accordion": "^1.2.7",
+    "@radix-ui/react-avatar": "^1.1.6",
     "@radix-ui/react-dialog": "^1.1.10",
+    "@radix-ui/react-dropdown-menu": "^2.1.11",
     "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-popover": "^1.1.10",
     "@radix-ui/react-scroll-area": "^1.2.5",
     "@radix-ui/react-select": "^2.1.7",
     "@radix-ui/react-separator": "^1.1.4",

pnpm-lock.yaml

@@ -38,12 +38,21 @@ importers:
       '@radix-ui/react-accordion':
         specifier: ^1.2.7
         version: 1.2.7(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.6
+        version: 1.1.6(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
       '@radix-ui/react-dialog':
         specifier: ^1.1.10
         version: 1.1.10(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.11
+        version: 2.1.11(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
       '@radix-ui/react-label':
         specifier: ^2.1.3
         version: 2.1.3(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-popover':
+        specifier: ^1.1.10
+        version: 1.1.10(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
       '@radix-ui/react-scroll-area':
         specifier: ^1.2.5
         version: 1.2.5(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
@@ -1135,6 +1144,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-YDduxvqNMHzTQWNqja7Z/XTyFc8UOP98/ePjJTFa1vqILPlTPcQaVa1YyQMiQl4SFQPA9Y/zj1dHBgMlE5G/ow==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-zGFsPcFJNdQa/UNd6MOgF40BS054FIGj32oOWBllixz42f+AkQg3QJ1YT9pw7vs+Ai+EgWkh839h69GEK8oH2A==}
     peerDependencies:
@@ -1240,6 +1262,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-wbPE3cFBfLl+S+LCxChWQGX0k14zUxgvep1HEnLhJ9mNhjyO3ETzRviAeKZ3XomT/iVRRZAWFsnFZ3N0wI8OmA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
     peerDependencies:
@@ -1297,6 +1332,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-sbFI4Qaw02J0ogmR9tOMsSqsdrGNpUanlPYAqTE2JJafow8ecHtykg4fSTjNHBdDl4deiKMK+RhTEwyVhP7UDA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-IZN7b3sXqajiPsOzKuNJBSP9obF4MX5/5UhTgWNofw4r1H+eATWb0SyMlaxPD/kzA4vadFgy1s7Z1AEJ6WMyHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-iNb9LYUMkne9zIahukgQmHlSBp9XWGeQQ7FvUGNk45ywzOb6kQa+Ca38OphXlWDiKvyneo9S+KSJsLfLt8812A==}
     peerDependencies:
@@ -1388,6 +1449,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-C6oAg451/fQT3EGbWHbCQjYTtbyjNO1uzQgMzwyivcHT3GKNEmu1q3UuREhN+HzHAVtv3ivMVK08QlC+PkYw9Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-VyLjxI8/gXYn+Wij1FLpXjZp6Z/uNklUFQQ75tOpJNESeNaZ2kCRfjiEDmHgWmLeUPeJGwrqbgRmcdFjtYEkMA==}
     peerDependencies:
@@ -1494,6 +1568,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-23RkSm7jSZ8+rtfdSJTi/2D+p9soPbtnoG/tPf08egYCDr6p8X83hrcmW77p7MJ8kJYWNXwruuPTPp1TwIIH4g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
@@ -5204,6 +5287,19 @@ snapshots:
       '@types/react': 19.1.2
       '@types/react-dom': 19.1.2(@types/[email protected])
 
+  '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.1.0(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-use-is-hydrated': 0.0.0(@types/[email protected])([email protected])
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 19.1.0
+      react-dom: 19.1.0([email protected])
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/[email protected])
+
   '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
     dependencies:
       '@radix-ui/primitive': 1.1.2
@@ -5310,6 +5406,21 @@ snapshots:
       '@types/react': 19.1.2
       '@types/react-dom': 19.1.2(@types/[email protected])
 
+  '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-id': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-menu': 2.1.11(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-primitive': 2.1.0(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/[email protected])([email protected])
+      react: 19.1.0
+      react-dom: 19.1.0([email protected])
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/[email protected])
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       react: 19.1.0
@@ -5354,6 +5465,55 @@ snapshots:
       '@types/react': 19.1.2
       '@types/react-dom': 19.1.2(@types/[email protected])
 
+  '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.4(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-direction': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-focus-guards': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-focus-scope': 1.1.4(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-id': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-popper': 1.2.4(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-portal': 1.1.6(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-presence': 1.1.3(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-primitive': 2.1.0(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-roving-focus': 1.1.7(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-slot': 1.2.0(@types/[email protected])([email protected])
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/[email protected])([email protected])
+      aria-hidden: 1.2.4
+      react: 19.1.0
+      react-dom: 19.1.0([email protected])
+      react-remove-scroll: 2.6.3(@types/[email protected])([email protected])
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/[email protected])
+
+  '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-focus-guards': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-focus-scope': 1.1.4(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-id': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-popper': 1.2.4(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-portal': 1.1.6(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-presence': 1.1.3(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-primitive': 2.1.0(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-slot': 1.2.0(@types/[email protected])([email protected])
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/[email protected])([email protected])
+      aria-hidden: 1.2.4
+      react: 19.1.0
+      react-dom: 19.1.0([email protected])
+      react-remove-scroll: 2.6.3(@types/[email protected])([email protected])
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/[email protected])
+
   '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
     dependencies:
       '@floating-ui/react-dom': 2.1.2([email protected]([email protected]))([email protected])
@@ -5438,6 +5598,23 @@ snapshots:
       '@types/react': 19.1.2
       '@types/react-dom': 19.1.2(@types/[email protected])
 
+  '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.4(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-direction': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-id': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.1.0(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/[email protected])([email protected])
+      react: 19.1.0
+      react-dom: 19.1.0([email protected])
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/[email protected])
+
   '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
     dependencies:
       '@radix-ui/number': 1.1.1
@@ -5555,6 +5732,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.2
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 19.1.0
+      use-sync-external-store: 1.5.0([email protected])
+    optionalDependencies:
+      '@types/react': 19.1.2
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       react: 19.1.0

railpack.json

@@ -0,0 +1,18 @@
+{
+    "$schema": "https://schema.railpack.com",
+    "provider": "node",
+    "buildAptPackages": [
+        "git",
+        "curl"
+    ],
+    "packages": {
+        "node": "22",
+        "python": "3.12.7"
+    },
+    "deploy": {
+        "aptPackages": [
+            "git",
+            "curl"
+        ]
+    }
+}