feat(frontend): implement complete React/Vite frontend

## Features
- React 18 + TypeScript + Vite setup
- Tailwind CSS + shadcn/ui components
- Complete authentication flow (API Key)
- Dashboard with stats and recent documents
- Document upload (drag & drop) and management
- Chat interface with RAG support
- Settings page (theme, provider selection)
- Responsive design with mobile support

## Components
- Layout with sidebar navigation
- Button, Card, Input, Label, Separator (shadcn)
- Protected and public routes

## State Management
- Zustand stores: auth, chat, settings
- Persisted to localStorage

## API Integration
- Axios client with interceptors
- All API endpoints integrated
- Error handling and loading states

## Pages
- Login: API key authentication
- Dashboard: Overview and stats
- Documents: Upload, list, delete
- Chat: Conversational interface with sources
- Settings: Theme and provider config

🎨 Production-ready build (339KB gzipped)

frontend/src/components/layout/Layout.tsx

@@ -0,0 +1,163 @@
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useAuthStore } from '@/stores/authStore';
+import { useSettingsStore } from '@/stores/settingsStore';
+import { Button } from '@/components/ui/button';
+import {
+  LayoutDashboard,
+  FileText,
+  MessageSquare,
+  Settings,
+  Menu,
+  X,
+  Brain,
+  LogOut,
+  ChevronLeft,
+  ChevronRight
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const navigation = [
+  { name: 'Dashboard', href: '/', icon: LayoutDashboard },
+  { name: 'Documents', href: '/documents', icon: FileText },
+  { name: 'Chat', href: '/chat', icon: MessageSquare },
+  { name: 'Settings', href: '/settings', icon: Settings },
+];
+
+export function Layout({ children }: LayoutProps) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { logout, isAuthenticated } = useAuthStore();
+  const { sidebarOpen, toggleSidebar, setSidebarOpen } = useSettingsStore();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+  if (!isAuthenticated) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="flex h-screen bg-background">
+      {/* Sidebar */}
+      <aside
+        className={cn(
+          'fixed inset-y-0 left-0 z-50 w-64 bg-card border-r transform transition-transform duration-200 ease-in-out lg:relative lg:translate-x-0',
+          sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:hidden'
+        )}
+      >
+        {/* Logo */}
+        <div className="flex h-16 items-center px-6 border-b">
+          <Link to="/" className="flex items-center space-x-2">
+            <div className="p-2 rounded-lg bg-primary">
+              <Brain className="h-5 w-5 text-primary-foreground" />
+            </div>
+            <span className="text-xl font-bold">AgenticRAG</span>
+          </Link>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="ml-auto lg:hidden"
+            onClick={() => setSidebarOpen(false)}
+          >
+            <X className="h-5 w-5" />
+          </Button>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 overflow-y-auto py-4 px-3 space-y-1">
+          {navigation.map((item) => {
+            const isActive = location.pathname === item.href;
+            const Icon = item.icon;
+
+            return (
+              <Link
+                key={item.name}
+                to={item.href}
+                className={cn(
+                  'flex items-center space-x-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                )}
+              >
+                <Icon className="h-5 w-5" />
+                <span>{item.name}</span>
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Bottom Actions */}
+        <div className="border-t p-4 space-y-2">
+          <Button
+            variant="ghost"
+            className="w-full justify-start"
+            onClick={handleLogout}
+          >
+            <LogOut className="mr-3 h-5 w-5" />
+            Sign Out
+          </Button>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Top Bar */}
+        <header className="h-16 border-b bg-card flex items-center px-4 lg:px-6">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="lg:hidden mr-2"
+            onClick={() => setSidebarOpen(true)}
+          >
+            <Menu className="h-5 w-5" />
+          </Button>
+
+          {/* Toggle Sidebar Button (Desktop) */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="hidden lg:flex mr-2"
+            onClick={toggleSidebar}
+          >
+            {sidebarOpen ? (
+              <ChevronLeft className="h-5 w-5" />
+            ) : (
+              <ChevronRight className="h-5 w-5" />
+            )}
+          </Button>
+
+          <div className="flex-1" />
+
+          {/* User Menu */}
+          <div className="flex items-center space-x-4">
+            <span className="text-sm text-muted-foreground hidden sm:inline">
+              Welcome back
+            </span>
+          </div>
+        </header>
+
+        {/* Page Content */}
+        <main className="flex-1 overflow-y-auto p-4 lg:p-8">
+          <div className="max-w-7xl mx-auto">
+            {children}
+          </div>
+        </main>
+      </div>
+
+      {/* Mobile Overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+    </div>
+  );
+}