feat: AI provider testing page + multi-provider support + UX design spec

- Add AI Provider Testing page (/admin/ai-test) with Tags and Embeddings tests
- Add new AI providers: CustomOpenAI, DeepSeek, OpenRouter
- Add API routes for AI config, models listing, and testing endpoints
- Add UX Design Specification document for Phase 1 MVP AI
- Add PRD Phase 1 MVP AI planning document
- Update admin settings and sidebar navigation
- Fix AI factory for multi-provider support

keep-notes/components/header.tsx

@@ -25,7 +25,6 @@ import { useLabels } from '@/context/LabelContext'
 import { LabelManagementDialog } from './label-management-dialog'
 import { LabelFilter } from './label-filter'
 import { NotificationPanel } from './notification-panel'
-import { UserNav } from './user-nav'
 import { updateTheme } from '@/app/actions/profile'
 
 interface HeaderProps {
@@ -316,7 +315,6 @@ export function Header({
             </DropdownMenu>
 
             <NotificationPanel />
-            <UserNav user={user} />
           </div>
         </div>
 

keep-notes/components/sidebar.tsx

@@ -1,19 +1,32 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import Link from 'next/link'
 import { usePathname, useSearchParams } from 'next/navigation'
 import { cn } from '@/lib/utils'
-import { StickyNote, Bell, Archive, Trash2, Tag, ChevronDown, ChevronUp, Settings, User, Shield, Coffee } from 'lucide-react'
+import { StickyNote, Bell, Archive, Trash2, Tag, ChevronDown, ChevronUp, Settings, User, Shield, Coffee, LogOut } from 'lucide-react'
 import { useLabels } from '@/context/LabelContext'
 import { LabelManagementDialog } from './label-management-dialog'
-import { useSession } from 'next-auth/react'
+import { useSession, signOut } from 'next-auth/react'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { useRouter } from 'next/navigation'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Button } from '@/components/ui/button'
 
 import { LABEL_COLORS } from '@/lib/types'
 
 export function Sidebar({ className, user }: { className?: string, user?: any }) {
   const pathname = usePathname()
   const searchParams = useSearchParams()
+  const router = useRouter()
   const { labels, getLabelColor } = useLabels()
   const [isLabelsExpanded, setIsLabelsExpanded] = useState(false)
   const { data: session } = useSession()
@@ -27,6 +40,11 @@ export function Sidebar({ className, user }: { className?: string, user?: any })
   const displayedLabels = isLabelsExpanded ? labels : labels.slice(0, 5)
   const hasMoreLabels = labels.length > 5
 
+  const userRole = (currentUser as any)?.role || 'USER'
+  const userInitials = currentUser?.name
+    ? currentUser.name.split(' ').map((n: string) => n[0]).join('').toUpperCase().substring(0, 2)
+    : 'U'
+
   const NavItem = ({ href, icon: Icon, label, active, onClick, iconColorClass }: any) => (
     <Link
       href={href}
@@ -44,8 +62,68 @@ export function Sidebar({ className, user }: { className?: string, user?: any })
   )
 
   return (
-    <aside className={cn("w-[280px] flex-col gap-1 py-2 overflow-y-auto overflow-x-hidden hidden md:flex", className)}>
-      <NavItem
+    <aside className={cn("w-[280px] flex-col gap-1 overflow-y-auto overflow-x-hidden hidden md:flex", className)}>
+      {/* User Profile Section - Top of Sidebar */}
+      {currentUser && (
+        <div className="p-4 border-b border-gray-200 dark:border-zinc-800 bg-gray-50/50 dark:bg-zinc-900/50">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors text-left">
+                <Avatar className="h-10 w-10 ring-2 ring-amber-500/20">
+                  <AvatarImage src={currentUser.image || ''} alt={currentUser.name || ''} />
+                  <AvatarFallback className="bg-amber-500 text-white font-medium">
+                    {userInitials}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                    {currentUser.name}
+                  </p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                    {currentUser.email}
+                  </p>
+                </div>
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-56" forceMount>
+              <DropdownMenuLabel className="font-normal">
+                <div className="flex flex-col space-y-1">
+                  <p className="text-sm font-medium leading-none">{currentUser.name}</p>
+                  <p className="text-xs leading-none text-muted-foreground">
+                    {currentUser.email}
+                  </p>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem onClick={() => router.push('/settings/profile')}>
+                  <User className="mr-2 h-4 w-4" />
+                  <span>Profile</span>
+                </DropdownMenuItem>
+                {userRole === 'ADMIN' && (
+                  <DropdownMenuItem onClick={() => router.push('/admin')}>
+                    <Shield className="mr-2 h-4 w-4" />
+                    <span>Admin Dashboard</span>
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem onClick={() => router.push('/settings')}>
+                  <Settings className="mr-2 h-4 w-4" />
+                  <span>Diagnostics</span>
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => signOut({ callbackUrl: '/login' })}>
+                <LogOut className="mr-2 h-4 w-4" />
+                <span>Log out</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+
+      {/* Navigation Items */}
+      <div className="py-2">
+        <NavItem
         href="/"
         icon={StickyNote}
         label="Notes"
@@ -103,30 +181,12 @@ export function Sidebar({ className, user }: { className?: string, user?: any })
         label="Archive" 
         active={pathname === '/archive'} 
       />
-      <NavItem 
-        href="/trash" 
-        icon={Trash2} 
-        label="Trash" 
-        active={pathname === '/trash'} 
+      <NavItem
+        href="/trash"
+        icon={Trash2}
+        label="Trash"
+        active={pathname === '/trash'}
       />
-      
-      <div className="my-2 border-t border-gray-200 dark:border-zinc-800" />
-
-      <NavItem 
-        href="/settings/profile" 
-        icon={User} 
-        label="Profile" 
-        active={pathname === '/settings/profile'} 
-      />
-
-      {(currentUser as any)?.role === 'ADMIN' && (
-        <NavItem
-          href="/admin"
-          icon={Shield}
-          label="Admin"
-          active={pathname === '/admin'}
-        />
-      )}
 
       <NavItem
         href="/support"
@@ -134,13 +194,7 @@ export function Sidebar({ className, user }: { className?: string, user?: any })
         label="Support Memento ☕"
         active={pathname === '/support'}
       />
-
-      <NavItem
-        href="/settings"
-        icon={Settings}
-        label="Diagnostics"
-        active={pathname === '/settings'}
-      />
+      </div>
     </aside>
   )
 }