initial commit

.env.example

@@ -0,0 +1,18 @@
+# KnowledgeBridge Environment Configuration
+# Copy this file to .env and fill in your API keys
+
+# Nebius AI Configuration (Required for AI features)
+NEBIUS_API_KEY=your_nebius_api_key_here
+
+# Modal Configuration (Optional - for distributed processing)
+MODAL_TOKEN_ID=your_modal_token_id
+MODAL_TOKEN_SECRET=your_modal_token_secret
+MODAL_BASE_URL=your_modal_endpoint
+
+# GitHub Configuration (Optional - for repository search)
+GITHUB_TOKEN=your_github_personal_access_token
+
+# Node Environment
+NODE_ENV=production
+PORT=7860
+EOF < /dev/null

.gitattributes copy

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,78 @@
+node_modules
+# dist - commented out for Hugging Face Spaces deployment
+.DS_Store
+server/public
+vite.config.ts.*
+*.tar.gz
+attached_assets
+server.log
+
+# Environment files
+.env
+.env.local
+.env.production
+.env.development
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# Virtual environments
+venv/
+env/
+ENV/
+env.bak/
+venv.bak/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Test coverage
+coverage/
+.coverage
+.nyc_output
+htmlcov/
+
+# Temporary files
+*.tmp
+*.temp
+temp/
+tmp/

.replit

@@ -0,0 +1,37 @@
+modules = ["nodejs-20", "web", "postgresql-16", "python-3.11"]
+run = "npm run dev"
+hidden = [".config", ".git", "generated-icon.png", "node_modules", "dist"]
+
+[nix]
+channel = "stable-24_05"
+packages = ["ffmpeg-full"]
+
+[deployment]
+deploymentTarget = "autoscale"
+build = ["npm", "run", "build"]
+run = ["npm", "run", "start"]
+
+[[ports]]
+localPort = 5000
+externalPort = 80
+
+[workflows]
+runButton = "Project"
+
+[[workflows.workflow]]
+name = "Project"
+mode = "parallel"
+author = "agent"
+
+[[workflows.workflow.tasks]]
+task = "workflow.run"
+args = "Start application"
+
+[[workflows.workflow]]
+name = "Start application"
+author = "agent"
+
+[[workflows.workflow.tasks]]
+task = "shell.exec"
+args = "npm run dev"
+waitForPort = 5000

Dockerfile

@@ -0,0 +1,45 @@
+# Use Node.js 18 Alpine for smaller image size
+FROM node:18-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apk add --no-cache \
+    python3 \
+    make \
+    g++ \
+    curl \
+    && ln -sf python3 /usr/bin/python
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Create non-root user for security
+RUN addgroup -g 1001 -S nodejs && \
+    adduser -S nextjs -u 1001
+
+# Change ownership of the app directory
+RUN chown -R nextjs:nodejs /app
+
+# Switch to non-root user
+USER nextjs
+
+# Expose port
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:7860/api/health || exit 1
+
+# Start the application
+CMD ["npm", "start"]

README copy.md

@@ -0,0 +1,344 @@
+---
+title: KnowledgeBridge
+emoji: 📚
+colorFrom: yellow
+colorTo: red
+sdk: docker
+pinned: false
+license: mit
+short_description: 'A sophisticated AI-powered knowledge retrieval and analysis '
+tags:
+  - agent-demo-track
+---
+
+# KnowledgeBridge
+
+🚀 **An AI-Enhanced Knowledge Discovery Platform**
+
+A sophisticated AI-powered knowledge retrieval and analysis system that combines semantic search, real-time web integration, and intelligent document processing for research and information discovery.
+
+![Security Status](https://img.shields.io/badge/Security-Hardened-green)
+![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue)
+![AI Models](https://img.shields.io/badge/AI-Nebius%20DeepSeek-purple)
+![License](https://img.shields.io/badge/License-MIT-yellow)
+
+## 🎯 Hackathon Submission
+
+**🤖 Track 3: Agentic Demo Showcase**
+
+**Submitted to**: [Hugging Face Agents-MCP-Hackathon](https://huggingface.co/Agents-MCP-Hackathon)
+
+**Live Demo**: [Try KnowledgeBridge on Hugging Face Spaces](https://huggingface.co/spaces/YOUR_USERNAME/KnowledgeBridge)
+
+### **🚀 "Show us the most incredible things that your agents can do!"**
+
+KnowledgeBridge demonstrates sophisticated AI agent orchestration through multi-modal knowledge discovery, intelligent query enhancement, and autonomous research synthesis.
+
+## 🤖 Agentic Capabilities Showcase
+
+### 🧠 **Multi-Agent Orchestration**
+- **Coordinated Search Agents**: Simultaneous deployment across GitHub, Wikipedia, ArXiv, and web sources
+- **Intelligent Load Balancing**: Agents dynamically distribute workload based on query type and source availability
+- **Fallback Agent Strategy**: Backup agents activate when primary sources fail or timeout
+- **Real-Time Coordination**: Agents communicate results and adapt search strategies collaboratively
+
+### 🔍 **Query Enhancement Agents**
+- **Intent Recognition Agents**: AI agents analyze user intent and suggest optimal search strategies
+- **Semantic Expansion Agents**: Agents enhance queries with related terms and concepts
+- **Context-Aware Agents**: Agents consider previous searches and user preferences
+- **Multi-Modal Query Agents**: Agents adapt search approach based on content type (code, academic, general)
+
+### 📊 **Analysis & Synthesis Agents**
+- **Document Processing Agents**: Autonomous analysis with configurable reasoning (summary, classification, key points)
+- **Research Synthesis Agents**: AI agents combine insights from multiple sources into coherent analysis
+- **Quality Assessment Agents**: Agents evaluate source credibility and content relevance
+- **Format Adaptation Agents**: Agents dynamically adjust output format (markdown/plain text) based on user needs
+
+### 🛡️ **Security & Validation Agents**
+- **URL Validation Agents**: Intelligent agents verify link accessibility and content authenticity
+- **Rate Limiting Agents**: Protective agents prevent API abuse (100 requests/15min, 10/min for sensitive endpoints)
+- **Input Sanitization Agents**: Security agents validate and clean all user inputs
+- **Error Recovery Agents**: Resilient agents handle failures gracefully and maintain system stability
+
+### 🌐 **Intelligent Integration Agents**
+- **ArXiv Academic Agents**: Specialized agents for academic paper validation and retrieval
+- **GitHub Repository Agents**: Code-focused agents with author filtering and relevance scoring
+- **Wikipedia Knowledge Agents**: Authoritative content agents with intelligent caching strategies
+- **Cross-Platform Synthesis Agents**: Agents that combine and rank results across all sources
+
+## 🏗️ Technical Architecture
+
+### **Frontend Stack**
+- **React 18** with TypeScript for type-safe development
+- **Wouter Router** for lightweight client-side routing
+- **TanStack Query** for efficient data fetching and caching
+- **Radix UI + Tailwind CSS** for accessible, modern components
+- **Framer Motion** for smooth animations and transitions
+
+### **Backend Stack**
+- **Node.js + Express** with comprehensive middleware
+- **Nebius AI** integration with DeepSeek models
+- **Modal** for distributed processing and scalability
+- **Express Rate Limit** for API protection
+- **Helmet.js** for security headers
+
+### **AI & Processing**
+- **DeepSeek-R1-0528** for chat completions and document analysis
+- **BAAI/bge-en-icl** for embedding generation
+- **Modal Client** for distributed compute tasks
+- **Smart Ingestion Service** for advanced document processing
+
+## 🚀 Quick Start
+
+### **Environment Configuration**
+
+Create a `.env` file in the project root:
+
+```bash
+# Nebius AI Configuration (Required)
+NEBIUS_API_KEY=your_nebius_api_key_here
+
+# Modal Configuration (Optional - for advanced processing)
+MODAL_TOKEN_ID=your_modal_token_id
+MODAL_TOKEN_SECRET=your_modal_token_secret
+MODAL_BASE_URL=your_modal_endpoint
+
+# GitHub Configuration (Optional - for repository search)
+GITHUB_TOKEN=your_github_token_here
+
+# Node Environment
+NODE_ENV=development
+```
+
+### **Development Setup**
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Type checking
+npm run check
+```
+
+The application will be available at `http://localhost:5000`
+
+## 🎯 Usage Guide
+
+### **Search Interface**
+1. **Basic Search**: Enter queries in natural language
+2. **AI Enhancement**: Click the sparkle icon to improve your query
+3. **Advanced Search**: Use the AI tools panel for document analysis
+4. **Export Results**: Generate citations in multiple formats
+
+### **AI Tools**
+- **Document Analysis**: Paste content for AI-powered analysis with configurable formatting
+- **Embeddings**: Generate vector representations of text
+- **Query Enhancement**: Get AI suggestions for better search queries
+
+### **Knowledge Graph**
+- Interactive visualization of document relationships
+- Filter by concepts, authors, and source types
+- Explore connections between research papers and topics
+
+## 🔧 API Reference
+
+### **Search Endpoints**
+```typescript
+POST /api/search
+{
+  query: string;
+  searchType: "semantic" | "keyword" | "hybrid";
+  limit: number;
+  filters?: {
+    sourceTypes?: string[];
+  };
+}
+```
+
+### **AI Analysis Endpoints**
+```typescript
+POST /api/analyze-document
+{
+  content: string;
+  analysisType: "summary" | "classification" | "key_points" | "quality_score";
+  useMarkdown?: boolean;
+}
+
+POST /api/enhance-query
+{
+  query: string;
+  context?: string;
+}
+
+POST /api/embeddings
+{
+  input: string;
+  model?: string;
+}
+```
+
+### **Health Check**
+```typescript
+GET /api/health
+// Returns comprehensive health status of all services
+```
+
+## 🚀 Performance & Reliability
+
+### **Response Times**
+- Local search: <100ms for semantic queries
+- Document analysis: ~3-5 seconds depending on content length
+- URL validation: <2 seconds per URL with concurrent processing
+- Embedding generation: ~500ms-1s per request
+
+### **Scalability Features**
+- Rate limiting prevents API abuse
+- Concurrent URL validation with configurable limits
+- Efficient caching for repeated queries
+- Graceful degradation when external services are unavailable
+
+### **Error Handling**
+- React Error Boundaries prevent UI crashes
+- Comprehensive API error responses
+- Automatic retry logic for network requests
+- User-friendly error messages
+
+## 🔒 Security Features
+
+### **Input Protection**
+- Request body size limits (10MB)
+- Comprehensive input sanitization
+- SQL injection prevention
+- XSS protection with CSP headers
+
+### **API Security**
+- Rate limiting on all endpoints
+- Secure environment variable handling
+- No hardcoded credentials
+- Proper error logging without information disclosure
+
+### **Infrastructure Security**
+- Helmet.js security headers
+- CORS configuration
+- Secure cookie handling
+- Production-ready error handling
+
+## 🛠️ Development
+
+### **Code Quality**
+- 100% TypeScript coverage
+- ESLint + Prettier configuration
+- Comprehensive error handling
+- Type-safe API contracts with Zod validation
+
+### **Testing**
+```bash
+# Type checking
+npm run check
+
+# Development server
+npm run dev
+
+# Production build
+npm run build
+```
+
+## 🎉 Recent Updates
+
+- ✅ **Security Hardening**: Removed all hardcoded credentials, added comprehensive security middleware
+- ✅ **TypeScript Migration**: Achieved 100% type safety across the entire codebase  
+- ✅ **URL Validation**: Intelligent filtering of broken and invalid links
+- ✅ **Error Handling**: React Error Boundaries and improved server error handling
+- ✅ **AI Enhancement**: Nebius AI integration with configurable document analysis
+- ✅ **Performance**: Rate limiting, input validation, and optimized processing
+
+## 📚 Architecture Highlights
+
+### **AI Integration**
+- **Nebius AI**: Primary AI service for all language model tasks
+- **DeepSeek Models**: State-of-the-art reasoning capabilities
+- **Modal Integration**: Distributed processing for heavy workloads
+- **Embedding Search**: Semantic similarity matching
+
+### **Data Flow**
+1. User query → AI query enhancement (optional)
+2. Parallel search: local storage + external sources
+3. URL validation and content verification
+4. Result ranking and relevance scoring
+5. AI-powered analysis and synthesis
+
+### **Component Architecture**
+- **Enhanced Search Interface**: Unified search and AI tools
+- **Knowledge Graph**: Interactive data visualization
+- **Result Cards**: Rich content display with citations
+- **Error Boundaries**: Resilient error handling
+
+## 🏆 Track 3: Agentic Demo Showcase Features
+
+### **🤖 "Show us the most incredible things that your agents can do!"**
+
+KnowledgeBridge demonstrates sophisticated multi-agent systems in action:
+
+### **🧠 Autonomous Agent Workflows**
+- **Smart Agent Coordination**: Multiple specialized agents work together to fulfill complex research tasks
+- **Adaptive Agent Behavior**: Agents dynamically adjust strategies based on query complexity and source availability  
+- **Multi-Modal Agent Processing**: Different agent types (search, analysis, validation) collaborate seamlessly
+- **Intelligent Agent Fallbacks**: Backup agents activate automatically when primary agents encounter issues
+
+### **🔍 Real-Time Agent Decision Making**
+- **Query Analysis Agents**: Instantly determine optimal search strategies across 4+ sources
+- **Load Balancing Agents**: Distribute workload intelligently based on API response times and rate limits
+- **Quality Control Agents**: Evaluate and filter results in real-time for relevance and authenticity
+- **Synthesis Agents**: Combine disparate information sources into coherent, actionable insights
+
+### **📊 Advanced Agent Orchestration**
+- **Parallel Agent Execution**: Simultaneous deployment of search agents across GitHub, Wikipedia, ArXiv
+- **Agent Communication Protocols**: Real-time coordination between agents for optimal resource utilization
+- **Adaptive Agent Learning**: Agents improve performance based on user interactions and feedback
+- **Error Recovery Agents**: Autonomous problem-solving when individual agents encounter failures
+
+### **🛡️ Production-Grade Agent Infrastructure**
+- **Security Agent Monitoring**: Continuous protection against abuse with intelligent rate limiting
+- **Validation Agent Networks**: Multi-layer content verification and URL authenticity checking
+- **Performance Agent Optimization**: Automatic scaling and resource management for enterprise workloads
+- **Resilience Agent Systems**: Graceful degradation and fault tolerance across all agent operations
+
+### **⚡ Agent Performance Metrics**
+- **Sub-second Agent Response**: Query analysis and routing in <100ms
+- **Concurrent Agent Processing**: 4+ agents working simultaneously on complex research tasks
+- **Intelligent Agent Caching**: Smart result storage and retrieval for enhanced performance
+- **Scalable Agent Architecture**: Horizontal scaling support for enterprise deployment
+
+## 📄 License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## 🔗 Related Resources
+
+- [Nebius AI Documentation](https://docs.nebius.ai/)
+- [Modal Documentation](https://modal.com/docs)
+- [React Query Documentation](https://tanstack.com/query/latest)
+- [Radix UI Components](https://www.radix-ui.com/)
+
+---
+
+## 🚀 Agents-MCP-Hackathon Submission Summary
+
+**KnowledgeBridge** showcases the incredible power of AI agents through:
+
+🤖 **Multi-Agent Orchestration** - Coordinated intelligence across search, analysis, and synthesis agents  
+🔍 **Real-Time Decision Making** - Agents adapt strategies and optimize performance dynamically  
+📊 **Advanced Agent Workflows** - Complex multi-step processes handled autonomously  
+🛡️ **Production-Ready Agent Infrastructure** - Enterprise-grade security and resilience  
+
+**Track 3: Agentic Demo Showcase** - Demonstrating what happens when sophisticated AI agents work together to revolutionize knowledge discovery and research workflows.
+
+**Built for the Hugging Face Agents-MCP-Hackathon** 🏆
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,27 @@
+"""
+KnowledgeBridge - AI-Enhanced Knowledge Discovery Platform
+Hugging Face Spaces compatibility layer
+"""
+
+import os
+import subprocess
+import sys
+
+def main():
+    """
+    This file exists for Hugging Face Spaces compatibility.
+    The actual application runs via Docker and the Node.js server.
+    """
+    print("🚀 KnowledgeBridge is running via Docker on port 7860")
+    print("Visit the app interface above\!")
+    print("\n📚 Features:")
+    print("- AI-Enhanced Search with Nebius DeepSeek")
+    print("- Multi-source search (GitHub, Wikipedia, ArXiv)")
+    print("- Interactive Knowledge Graphs")
+    print("- Document Analysis with configurable output")
+    print("- Enterprise-grade security")
+    print("\n🔗 Built for Agents-MCP-Hackathon")
+
+if __name__ == "__main__":
+    main()
+EOF < /dev/null

client/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <!-- This is a replit script which adds a banner on the top of the page when opened in development mode outside the replit environment -->
+    <script type="text/javascript" src="https://replit.com/public/js/replit-dev-banner.js"></script>
+  </body>
+</html>

client/src/App.tsx

@@ -0,0 +1,35 @@
+import { Switch, Route } from "wouter";
+import { queryClient } from "./lib/queryClient";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { Toaster } from "@/components/ui/toaster";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ThemeProvider } from "@/components/theme-provider";
+import ErrorBoundary from "@/components/ErrorBoundary";
+import KnowledgeBase from "@/pages/knowledge-base";
+import NotFound from "@/pages/not-found";
+
+function Router() {
+  return (
+    <Switch>
+      <Route path="/" component={KnowledgeBase} />
+      <Route component={NotFound} />
+    </Switch>
+  );
+}
+
+function App() {
+  return (
+    <ErrorBoundary>
+      <ThemeProvider defaultTheme="light" storageKey="kb-browser-theme">
+        <QueryClientProvider client={queryClient}>
+          <TooltipProvider>
+            <Toaster />
+            <Router />
+          </TooltipProvider>
+        </QueryClientProvider>
+      </ThemeProvider>
+    </ErrorBoundary>
+  );
+}
+
+export default App;

client/src/components/ErrorBoundary.tsx

@@ -0,0 +1,75 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+          <div className="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <svg className="h-8 w-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div className="ml-3">
+                <h3 className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                  Something went wrong
+                </h3>
+                <div className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                  <p>The application encountered an unexpected error. Please refresh the page and try again.</p>
+                </div>
+                <div className="mt-4">
+                  <button
+                    onClick={() => window.location.reload()}
+                    className="bg-red-100 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-800 text-red-800 dark:text-red-200 px-4 py-2 rounded text-sm font-medium transition-colors"
+                  >
+                    Refresh Page
+                  </button>
+                </div>
+              </div>
+            </div>
+            {process.env.NODE_ENV === 'development' && this.state.error && (
+              <div className="mt-4 p-4 bg-gray-100 dark:bg-gray-700 rounded">
+                <details>
+                  <summary className="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer">
+                    Error Details (Development)
+                  </summary>
+                  <pre className="mt-2 text-xs text-gray-600 dark:text-gray-400 overflow-auto">
+                    {this.state.error.stack}
+                  </pre>
+                </details>
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

client/src/components/knowledge-base/ai-assistant.tsx

@@ -0,0 +1,507 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import { 
+  Brain, 
+  Sparkles, 
+  FileText, 
+  Search, 
+  Loader2, 
+  TrendingUp,
+  Lightbulb,
+  Target,
+  CheckCircle,
+  AlertCircle
+} from "lucide-react";
+
+interface AIAssistantProps {
+  onDocumentSelect?: (documentId: number) => void;
+}
+
+interface EnhancedSearchResult {
+  results: any[];
+  enhancedQuery?: {
+    enhancedQuery: string;
+    intent: string;
+    keywords: string[];
+    suggestions: string[];
+  };
+  searchInsights?: {
+    totalResults: number;
+    avgRelevanceScore: number;
+    modalResultsCount: number;
+    localResultsCount: number;
+  };
+}
+
+interface ResearchSynthesis {
+  synthesis: string;
+  keyFindings: string[];
+  gaps: string[];
+  recommendations: string[];
+}
+
+export default function AIAssistant({ onDocumentSelect }: AIAssistantProps) {
+  const [query, setQuery] = useState("");
+  const [selectedDocuments, setSelectedDocuments] = useState<number[]>([]);
+  const [analysisText, setAnalysisText] = useState("");
+  const queryClient = useQueryClient();
+
+  // Enhanced AI Search
+  const aiSearchMutation = useMutation({
+    mutationFn: async (searchQuery: string): Promise<EnhancedSearchResult> => {
+      const response = await fetch("/api/ai-search", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ 
+          query: searchQuery, 
+          maxResults: 10,
+          useQueryEnhancement: true 
+        }),
+      });
+      if (!response.ok) throw new Error("Enhanced search failed");
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/search"] });
+    },
+  });
+
+  // Query Enhancement
+  const queryEnhancementMutation = useMutation({
+    mutationFn: async (originalQuery: string) => {
+      const response = await fetch("/api/enhance-query", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ query: originalQuery }),
+      });
+      if (!response.ok) throw new Error("Query enhancement failed");
+      return response.json();
+    },
+  });
+
+  // Document Analysis
+  const documentAnalysisMutation = useMutation({
+    mutationFn: async ({ content, analysisType }: { content: string; analysisType: string }) => {
+      const response = await fetch("/api/analyze-document", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content, analysisType }),
+      });
+      if (!response.ok) throw new Error("Document analysis failed");
+      return response.json();
+    },
+  });
+
+  // Research Synthesis
+  const researchSynthesisMutation = useMutation({
+    mutationFn: async ({ query, documentIds }: { query: string; documentIds: number[] }): Promise<ResearchSynthesis> => {
+      const response = await fetch("/api/research-synthesis", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ query, documentIds }),
+      });
+      if (!response.ok) throw new Error("Research synthesis failed");
+      return response.json();
+    },
+  });
+
+  // Generate Embeddings
+  const embeddingsMutation = useMutation({
+    mutationFn: async (input: string) => {
+      const response = await fetch("/api/embeddings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ input }),
+      });
+      if (!response.ok) throw new Error("Embedding generation failed");
+      return response.json();
+    },
+  });
+
+  const handleEnhancedSearch = () => {
+    if (!query.trim()) return;
+    aiSearchMutation.mutate(query);
+  };
+
+  const handleQueryEnhancement = () => {
+    if (!query.trim()) return;
+    queryEnhancementMutation.mutate(query);
+  };
+
+  const handleDocumentAnalysis = (analysisType: string) => {
+    if (!analysisText.trim()) return;
+    documentAnalysisMutation.mutate({ content: analysisText, analysisType });
+  };
+
+  const handleResearchSynthesis = () => {
+    if (!query.trim() || selectedDocuments.length === 0) return;
+    researchSynthesisMutation.mutate({ query, documentIds: selectedDocuments });
+  };
+
+  const handleGenerateEmbeddings = () => {
+    if (!query.trim()) return;
+    embeddingsMutation.mutate(query);
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card className="border-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-xl">
+            <Brain className="w-6 h-6 text-blue-600" />
+            AI Research Assistant
+            <Badge variant="secondary" className="ml-2">Powered by Nebius & Modal</Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="search" className="w-full">
+            <TabsList className="grid grid-cols-4 w-full mb-6">
+              <TabsTrigger value="search" className="flex items-center gap-2">
+                <Search className="w-4 h-4" />
+                Smart Search
+              </TabsTrigger>
+              <TabsTrigger value="analysis" className="flex items-center gap-2">
+                <FileText className="w-4 h-4" />
+                Analysis
+              </TabsTrigger>
+              <TabsTrigger value="synthesis" className="flex items-center gap-2">
+                <Lightbulb className="w-4 h-4" />
+                Synthesis
+              </TabsTrigger>
+              <TabsTrigger value="embeddings" className="flex items-center gap-2">
+                <Sparkles className="w-4 h-4" />
+                Embeddings
+              </TabsTrigger>
+            </TabsList>
+
+            {/* Enhanced Search Tab */}
+            <TabsContent value="search" className="space-y-4">
+              <div className="space-y-3">
+                <div className="flex gap-2">
+                  <Input
+                    placeholder="Enter research query for AI-enhanced search..."
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && handleEnhancedSearch()}
+                    className="flex-1"
+                  />
+                  <Button 
+                    onClick={handleEnhancedSearch}
+                    disabled={!query.trim() || aiSearchMutation.isPending}
+                  >
+                    {aiSearchMutation.isPending ? (
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                    ) : (
+                      <Search className="w-4 h-4" />
+                    )}
+                  </Button>
+                </div>
+
+                <div className="flex gap-2">
+                  <Button 
+                    variant="outline" 
+                    size="sm"
+                    onClick={handleQueryEnhancement}
+                    disabled={!query.trim() || queryEnhancementMutation.isPending}
+                  >
+                    {queryEnhancementMutation.isPending ? (
+                      <Loader2 className="w-3 h-3 animate-spin mr-1" />
+                    ) : (
+                      <Target className="w-3 h-3 mr-1" />
+                    )}
+                    Enhance Query
+                  </Button>
+                </div>
+              </div>
+
+              {/* Query Enhancement Results */}
+              {queryEnhancementMutation.data && (
+                <Card className="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
+                  <CardContent className="pt-4">
+                    <h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">Enhanced Query</h4>
+                    <p className="text-sm mb-3 font-mono bg-white dark:bg-gray-800 p-2 rounded">
+                      {queryEnhancementMutation.data.enhancedQuery}
+                    </p>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
+                      <div>
+                        <span className="font-medium text-blue-800 dark:text-blue-200">Intent:</span>
+                        <span className="ml-2">{queryEnhancementMutation.data.intent}</span>
+                      </div>
+                      <div>
+                        <span className="font-medium text-blue-800 dark:text-blue-200">Keywords:</span>
+                        <div className="flex flex-wrap gap-1 mt-1">
+                          {queryEnhancementMutation.data.keywords.map((keyword: string, i: number) => (
+                            <Badge key={i} variant="outline" className="text-xs">
+                              {keyword}
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Enhanced Search Results */}
+              {aiSearchMutation.data && (
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2 text-lg">
+                      <TrendingUp className="w-5 h-5 text-green-600" />
+                      AI-Enhanced Results
+                      {aiSearchMutation.data.searchInsights && (
+                        <Badge variant="secondary">
+                          {aiSearchMutation.data.searchInsights.totalResults} results
+                        </Badge>
+                      )}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    {aiSearchMutation.data.searchInsights && (
+                      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-sm">
+                        <div>
+                          <span className="font-medium">Avg Relevance:</span>
+                          <span className="ml-1 text-green-600">
+                            {(aiSearchMutation.data.searchInsights.avgRelevanceScore * 100).toFixed(1)}%
+                          </span>
+                        </div>
+                        <div>
+                          <span className="font-medium">Modal Results:</span>
+                          <span className="ml-1">{aiSearchMutation.data.searchInsights.modalResultsCount}</span>
+                        </div>
+                        <div>
+                          <span className="font-medium">Local Results:</span>
+                          <span className="ml-1">{aiSearchMutation.data.searchInsights.localResultsCount}</span>
+                        </div>
+                        <div>
+                          <span className="font-medium">Total:</span>
+                          <span className="ml-1">{aiSearchMutation.data.searchInsights.totalResults}</span>
+                        </div>
+                      </div>
+                    )}
+
+                    <div className="space-y-2 max-h-96 overflow-y-auto">
+                      {aiSearchMutation.data.results.map((result: any, index: number) => (
+                        <Card key={index} className="p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
+                          <div className="flex justify-between items-start mb-2">
+                            <h5 className="font-medium text-sm">{result.title}</h5>
+                            <div className="flex items-center gap-2">
+                              {result.relevanceScore && (
+                                <Badge variant="outline" className="text-xs">
+                                  {(result.relevanceScore * 100).toFixed(0)}%
+                                </Badge>
+                              )}
+                              {result.aiExplanation && (
+                                <CheckCircle className="w-4 h-4 text-green-500" />
+                              )}
+                            </div>
+                          </div>
+                          <p className="text-xs text-gray-600 dark:text-gray-400 mb-2">
+                            {result.snippet}
+                          </p>
+                          {result.keyReasons && (
+                            <div className="text-xs">
+                              <span className="font-medium">AI Analysis:</span>
+                              <ul className="list-disc list-inside ml-2 mt-1">
+                                {result.keyReasons.slice(0, 2).map((reason: string, i: number) => (
+                                  <li key={i} className="text-gray-600 dark:text-gray-400">{reason}</li>
+                                ))}
+                              </ul>
+                            </div>
+                          )}
+                        </Card>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </TabsContent>
+
+            {/* Document Analysis Tab */}
+            <TabsContent value="analysis" className="space-y-4">
+              <div className="space-y-3">
+                <Textarea
+                  placeholder="Paste document content for AI analysis..."
+                  value={analysisText}
+                  onChange={(e) => setAnalysisText(e.target.value)}
+                  className="min-h-32"
+                />
+                <div className="flex gap-2 flex-wrap">
+                  {['summary', 'classification', 'key_points', 'quality_score'].map((type) => (
+                    <Button 
+                      key={type}
+                      variant="outline" 
+                      size="sm"
+                      onClick={() => handleDocumentAnalysis(type)}
+                      disabled={!analysisText.trim() || documentAnalysisMutation.isPending}
+                    >
+                      {documentAnalysisMutation.isPending ? (
+                        <Loader2 className="w-3 h-3 animate-spin mr-1" />
+                      ) : (
+                        <FileText className="w-3 h-3 mr-1" />
+                      )}
+                      {type.replace('_', ' ').toUpperCase()}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+
+              {documentAnalysisMutation.data && (
+                <Card className="bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
+                  <CardHeader>
+                    <CardTitle className="text-lg flex items-center gap-2">
+                      <CheckCircle className="w-5 h-5 text-green-600" />
+                      Analysis Result
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="whitespace-pre-wrap text-sm">
+                      {documentAnalysisMutation.data.analysis}
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </TabsContent>
+
+            {/* Research Synthesis Tab */}
+            <TabsContent value="synthesis" className="space-y-4">
+              <div className="space-y-3">
+                <Input
+                  placeholder="Research question for synthesis..."
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                />
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">Selected Documents:</span>
+                  <Badge variant="outline">{selectedDocuments.length}</Badge>
+                  <Button 
+                    size="sm" 
+                    variant="outline"
+                    onClick={() => setSelectedDocuments([])}
+                  >
+                    Clear
+                  </Button>
+                </div>
+                <Button 
+                  onClick={handleResearchSynthesis}
+                  disabled={!query.trim() || selectedDocuments.length === 0 || researchSynthesisMutation.isPending}
+                  className="w-full"
+                >
+                  {researchSynthesisMutation.isPending ? (
+                    <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                  ) : (
+                    <Lightbulb className="w-4 h-4 mr-2" />
+                  )}
+                  Generate Research Synthesis
+                </Button>
+              </div>
+
+              {researchSynthesisMutation.data && (
+                <Card className="bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800">
+                  <CardContent className="pt-4 space-y-4">
+                    <div>
+                      <h4 className="font-semibold text-purple-900 dark:text-purple-100 mb-2">Synthesis</h4>
+                      <p className="text-sm">{researchSynthesisMutation.data.synthesis}</p>
+                    </div>
+                    
+                    {researchSynthesisMutation.data.keyFindings.length > 0 && (
+                      <div>
+                        <h4 className="font-semibold text-purple-900 dark:text-purple-100 mb-2">Key Findings</h4>
+                        <ul className="list-disc list-inside text-sm space-y-1">
+                          {researchSynthesisMutation.data.keyFindings.map((finding: string, i: number) => (
+                            <li key={i}>{finding}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+
+                    {researchSynthesisMutation.data.recommendations.length > 0 && (
+                      <div>
+                        <h4 className="font-semibold text-purple-900 dark:text-purple-100 mb-2">Recommendations</h4>
+                        <ul className="list-disc list-inside text-sm space-y-1">
+                          {researchSynthesisMutation.data.recommendations.map((rec: string, i: number) => (
+                            <li key={i}>{rec}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              )}
+            </TabsContent>
+
+            {/* Embeddings Tab */}
+            <TabsContent value="embeddings" className="space-y-4">
+              <div className="space-y-3">
+                <Input
+                  placeholder="Text to generate embeddings..."
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                />
+                <Button 
+                  onClick={handleGenerateEmbeddings}
+                  disabled={!query.trim() || embeddingsMutation.isPending}
+                  className="w-full"
+                >
+                  {embeddingsMutation.isPending ? (
+                    <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                  ) : (
+                    <Sparkles className="w-4 h-4 mr-2" />
+                  )}
+                  Generate Embeddings with Nebius
+                </Button>
+              </div>
+
+              {embeddingsMutation.data && (
+                <Card className="bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800">
+                  <CardContent className="pt-4 space-y-3">
+                    <div className="grid grid-cols-2 gap-4 text-sm">
+                      <div>
+                        <span className="font-medium">Model:</span>
+                        <span className="ml-2">{embeddingsMutation.data.model}</span>
+                      </div>
+                      <div>
+                        <span className="font-medium">Dimensions:</span>
+                        <span className="ml-2">{embeddingsMutation.data.data[0].embedding.length}</span>
+                      </div>
+                    </div>
+                    <div>
+                      <span className="font-medium text-sm">Vector (first 10 dimensions):</span>
+                      <div className="font-mono text-xs bg-white dark:bg-gray-800 p-2 rounded mt-1 overflow-x-auto">
+                        [{embeddingsMutation.data.data[0].embedding.slice(0, 10).map((val: number) => val.toFixed(4)).join(', ')}...]
+                      </div>
+                    </div>
+                    <div className="text-xs text-gray-600 dark:text-gray-400">
+                      Token usage: {embeddingsMutation.data.usage.total_tokens} tokens
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      {/* Error States */}
+      {(aiSearchMutation.error || documentAnalysisMutation.error || researchSynthesisMutation.error || embeddingsMutation.error) && (
+        <Card className="border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20">
+          <CardContent className="pt-4">
+            <div className="flex items-center gap-2 text-red-700 dark:text-red-300">
+              <AlertCircle className="w-4 h-4" />
+              <span className="font-medium">Error occurred</span>
+            </div>
+            <p className="text-sm text-red-600 dark:text-red-400 mt-1">
+              {(aiSearchMutation.error || documentAnalysisMutation.error || researchSynthesisMutation.error || embeddingsMutation.error)?.message}
+            </p>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

client/src/components/knowledge-base/citation-panel.tsx

@@ -0,0 +1,133 @@
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { X, Download, Trash2 } from "lucide-react";
+import { type Citation } from "@shared/schema";
+
+interface CitationPanelProps {
+  citations: Citation[];
+  isVisible: boolean;
+  onClose: () => void;
+  onRemoveCitation: (citationId: number) => void;
+}
+
+export default function CitationPanel({ 
+  citations, 
+  isVisible, 
+  onClose, 
+  onRemoveCitation 
+}: CitationPanelProps) {
+  if (!isVisible) return null;
+
+  const handleExportCitations = () => {
+    const citationText = citations
+      .map((citation, index) => {
+        return `[${index + 1}] ${citation.citationText}${citation.section ? ` (${citation.section})` : ''}${citation.pageNumber ? ` - Page ${citation.pageNumber}` : ''}`;
+      })
+      .join('\n\n');
+
+    const blob = new Blob([citationText], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'citations.txt';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50">
+      <div className="bg-white rounded-xl shadow-lg border border-slate-200 w-80 max-h-96 flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-slate-200">
+          <div className="flex items-center gap-2">
+            <h4 className="font-medium text-slate-900">Active Citations</h4>
+            <Badge variant="secondary" className="text-xs">
+              {citations.length}
+            </Badge>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClose}
+            className="text-slate-400 hover:text-slate-600 p-1"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        {/* Citations List */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {citations.length === 0 ? (
+            <div className="text-center py-8">
+              <div className="text-slate-400 mb-2">
+                <svg className="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.447-.935-6-2.45" />
+                </svg>
+              </div>
+              <p className="text-sm text-slate-500">No citations added yet</p>
+              <p className="text-xs text-slate-400 mt-1">
+                Click "Add Citation" on search results to build your reference list
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {citations.map((citation, index) => (
+                <div 
+                  key={citation.id} 
+                  className="group flex items-start gap-3 p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors"
+                >
+                  <span className="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-medium flex-shrink-0 mt-0.5">
+                    {index + 1}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-slate-700 leading-relaxed line-clamp-3">
+                      {citation.citationText}
+                    </p>
+                    {(citation.section || citation.pageNumber) && (
+                      <div className="flex items-center gap-2 mt-2">
+                        {citation.section && (
+                          <span className="text-xs text-slate-500 bg-white px-2 py-1 rounded">
+                            {citation.section}
+                          </span>
+                        )}
+                        {citation.pageNumber && (
+                          <span className="text-xs text-slate-500 bg-white px-2 py-1 rounded">
+                            Page {citation.pageNumber}
+                          </span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onRemoveCitation(citation.id)}
+                    className="opacity-0 group-hover:opacity-100 transition-opacity text-slate-400 hover:text-red-600 p-1"
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        {citations.length > 0 && (
+          <div className="p-4 border-t border-slate-200">
+            <Button 
+              onClick={handleExportCitations}
+              className="w-full bg-slate-100 text-slate-700 hover:bg-slate-200"
+              size="sm"
+            >
+              <Download className="w-4 h-4 mr-2" />
+              Export Citations
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

client/src/components/knowledge-base/enhanced-search-interface.tsx

@@ -0,0 +1,603 @@
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { 
+  Search, 
+  Loader2, 
+  Brain, 
+  Sparkles, 
+  Target, 
+  FileText, 
+  Lightbulb,
+  ChevronDown,
+  ChevronUp,
+  Wand2,
+  AlertCircle
+} from "lucide-react";
+import { type SearchRequest } from "@shared/schema";
+
+interface SearchInterfaceProps {
+  onSearch: (request: SearchRequest) => void;
+  onAISearch?: (query: string) => void;
+  isLoading?: boolean;
+  onDocumentSelect?: (documentId: number) => void;
+}
+
+interface EnhancedSearchResult {
+  results: any[];
+  enhancedQuery?: {
+    enhancedQuery: string;
+    intent: string;
+    keywords: string[];
+    suggestions: string[];
+  };
+  searchInsights?: {
+    totalResults: number;
+    avgRelevanceScore: number;
+    modalResultsCount: number;
+    localResultsCount: number;
+  };
+}
+
+export default function EnhancedSearchInterface({ onSearch, onAISearch, isLoading, onDocumentSelect }: SearchInterfaceProps) {
+  const [query, setQuery] = useState("");
+  const [searchType, setSearchType] = useState<"semantic" | "keyword" | "hybrid">("semantic");
+  const [sourceTypes, setSourceTypes] = useState<string[]>(["pdf", "web", "academic", "code"]);
+  const [showAITools, setShowAITools] = useState(false);
+  const [analysisText, setAnalysisText] = useState("");
+  const [selectedDocuments, setSelectedDocuments] = useState<number[]>([]);
+  const [useMarkdown, setUseMarkdown] = useState(true);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!query.trim()) return;
+
+    onSearch({
+      query: query.trim(),
+      searchType,
+      filters: {
+        sourceTypes: sourceTypes.length > 0 ? sourceTypes : undefined,
+      },
+      limit: 10,
+      offset: 0,
+    });
+  };
+
+  const handleSourceTypeChange = (sourceType: string, checked: boolean) => {
+    setSourceTypes(prev => 
+      checked 
+        ? [...prev, sourceType]
+        : prev.filter(type => type !== sourceType)
+    );
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    } else if (e.key === "Escape") {
+      setQuery("");
+    }
+  };
+
+  // Enhanced AI Search
+  const aiSearchMutation = useMutation({
+    mutationFn: async (searchQuery: string): Promise<EnhancedSearchResult> => {
+      const response = await fetch("/api/ai-search", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ 
+          query: searchQuery, 
+          maxResults: 10,
+          useQueryEnhancement: true 
+        }),
+      });
+      if (!response.ok) throw new Error("Enhanced search failed");
+      return response.json();
+    },
+  });
+
+  // Query Enhancement
+  const queryEnhancementMutation = useMutation({
+    mutationFn: async (originalQuery: string) => {
+      const response = await fetch("/api/enhance-query", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ query: originalQuery }),
+      });
+      if (!response.ok) throw new Error("Query enhancement failed");
+      return response.json();
+    },
+  });
+
+  // Document Analysis
+  const documentAnalysisMutation = useMutation({
+    mutationFn: async ({ content, analysisType, useMarkdown }: { content: string; analysisType: string; useMarkdown?: boolean }) => {
+      const response = await fetch("/api/analyze-document", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content, analysisType, useMarkdown }),
+      });
+      if (!response.ok) throw new Error("Document analysis failed");
+      return response.json();
+    },
+  });
+
+  // Generate Embeddings
+  const embeddingsMutation = useMutation({
+    mutationFn: async (input: string) => {
+      const response = await fetch("/api/embeddings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ input }),
+      });
+      if (!response.ok) throw new Error("Embedding generation failed");
+      return response.json();
+    },
+  });
+
+  const handleEnhancedSearch = () => {
+    if (!query.trim()) return;
+    aiSearchMutation.mutate(query);
+    if (onAISearch) onAISearch(query);
+  };
+
+  const handleQueryEnhancement = () => {
+    if (!query.trim()) return;
+    queryEnhancementMutation.mutate(query);
+  };
+
+  const handleDocumentAnalysis = (analysisType: string) => {
+    if (!analysisText.trim()) return;
+    documentAnalysisMutation.mutate({ 
+      content: analysisText, 
+      analysisType,
+      useMarkdown 
+    });
+  };
+
+  const handleGenerateEmbeddings = () => {
+    if (!query.trim()) return;
+    embeddingsMutation.mutate(query);
+  };
+
+  const applyEnhancedQuery = (enhancedQuery: string) => {
+    setQuery(enhancedQuery);
+    onSearch({
+      query: enhancedQuery,
+      searchType,
+      filters: {
+        sourceTypes: sourceTypes.length > 0 ? sourceTypes : undefined,
+      },
+      limit: 10,
+      offset: 0,
+    });
+  };
+
+  return (
+    <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 mb-6">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <Brain className="w-5 h-5 text-blue-600" />
+          <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">AI-Enhanced Search</h2>
+          <Badge variant="secondary" className="text-xs">Powered by Nebius & Modal</Badge>
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => setShowAITools(!showAITools)}
+          className="flex items-center gap-1"
+        >
+          <Wand2 className="w-4 h-4" />
+          AI Tools
+          {showAITools ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+        </Button>
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <div className="flex flex-col lg:flex-row gap-4">
+          <div className="flex-1">
+            <Label htmlFor="knowledge-search" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+              Search Knowledge Base
+            </Label>
+            <div className="relative">
+              <Input
+                id="knowledge-search"
+                type="text"
+                placeholder="Enter your query for AI-enhanced search... (Press Enter to search, Esc to clear)"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={handleKeyDown}
+                className="pl-11 pr-12 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                disabled={isLoading}
+                aria-label="Search knowledge base"
+              />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-4 h-4" />
+              {query && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleQueryEnhancement}
+                  disabled={queryEnhancementMutation.isPending}
+                  className="absolute right-2 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0"
+                  title="Enhance query with AI"
+                >
+                  {queryEnhancementMutation.isPending ? (
+                    <Loader2 className="w-3 h-3 animate-spin" />
+                  ) : (
+                    <Sparkles className="w-3 h-3 text-purple-500" />
+                  )}
+                </Button>
+              )}
+            </div>
+          </div>
+          
+          <div className="lg:w-auto">
+            <Label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+              Search Type
+            </Label>
+            <Select value={searchType} onValueChange={(value: any) => setSearchType(value)}>
+              <SelectTrigger className="w-full lg:w-40">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="semantic">Semantic Search</SelectItem>
+                <SelectItem value="keyword">Keyword Search</SelectItem>
+                <SelectItem value="hybrid">Hybrid Search</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          
+          <div className="lg:w-auto flex items-end gap-2">
+            <Button 
+              type="submit" 
+              disabled={!query.trim() || isLoading}
+              className="px-6 py-3 bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-600 focus:ring-offset-2"
+              aria-label={isLoading ? "Searching knowledge base" : "Search knowledge base"}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" aria-hidden="true" />
+                  Searching...
+                </>
+              ) : (
+                <>
+                  <Search className="w-4 h-4 mr-2" aria-hidden="true" />
+                  Search
+                </>
+              )}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleEnhancedSearch}
+              disabled={!query.trim() || aiSearchMutation.isPending}
+              className="px-4 py-3 border-purple-300 text-purple-700 hover:bg-purple-50 dark:border-purple-600 dark:text-purple-300 dark:hover:bg-purple-900/20"
+              title="AI-Enhanced Search"
+            >
+              {aiSearchMutation.isPending ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Brain className="w-4 h-4" />
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {/* Search Filters */}
+        <div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
+          <div className="flex flex-wrap gap-6">
+            {[
+              { id: "pdf", label: "PDFs" },
+              { id: "web", label: "Web Pages" },
+              { id: "academic", label: "Academic Papers" },
+              { id: "code", label: "Code Repositories" }
+            ].map(({ id, label }) => (
+              <div key={id} className="flex items-center space-x-2">
+                <Checkbox
+                  id={`filter-${id}`}
+                  checked={sourceTypes.includes(id)}
+                  onCheckedChange={(checked) => handleSourceTypeChange(id, !!checked)}
+                />
+                <Label 
+                  htmlFor={`filter-${id}`} 
+                  className="text-sm text-slate-600 dark:text-slate-400 cursor-pointer"
+                >
+                  {label}
+                </Label>
+              </div>
+            ))}
+          </div>
+        </div>
+      </form>
+
+      {/* Query Enhancement Results */}
+      {queryEnhancementMutation.data && (
+        <div className="mt-4">
+          <Card className="bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800">
+            <CardContent className="pt-4">
+              <div className="flex items-center justify-between mb-3">
+                <h4 className="font-semibold text-purple-900 dark:text-purple-100 flex items-center gap-2">
+                  <Sparkles className="w-4 h-4" />
+                  Enhanced Query Suggestion
+                </h4>
+                <Button
+                  size="sm"
+                  onClick={() => applyEnhancedQuery(queryEnhancementMutation.data.enhancedQuery)}
+                  className="bg-purple-600 hover:bg-purple-700"
+                >
+                  Use This Query
+                </Button>
+              </div>
+              <p className="text-sm mb-3 font-mono bg-white dark:bg-gray-800 p-3 rounded border">
+                {queryEnhancementMutation.data.enhancedQuery}
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
+                <div>
+                  <span className="font-medium text-purple-800 dark:text-purple-200">Intent:</span>
+                  <span className="ml-2">{queryEnhancementMutation.data.intent}</span>
+                </div>
+                <div>
+                  <span className="font-medium text-purple-800 dark:text-purple-200">Keywords:</span>
+                  <div className="flex flex-wrap gap-1 mt-1">
+                    {queryEnhancementMutation.data.keywords.map((keyword: string, i: number) => (
+                      <Badge key={i} variant="outline" className="text-xs">
+                        {keyword}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* AI Enhanced Search Results */}
+      {aiSearchMutation.data && (
+        <div className="mt-4">
+          <Card className="bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <Brain className="w-5 h-5 text-green-600" />
+                AI-Enhanced Results
+                {aiSearchMutation.data.searchInsights && (
+                  <Badge variant="secondary">
+                    {aiSearchMutation.data.searchInsights.totalResults} results
+                  </Badge>
+                )}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {aiSearchMutation.data.searchInsights && (
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg text-sm">
+                  <div>
+                    <span className="font-medium">Avg Relevance:</span>
+                    <span className="ml-1 text-green-600">
+                      {(aiSearchMutation.data.searchInsights.avgRelevanceScore * 100).toFixed(1)}%
+                    </span>
+                  </div>
+                  <div>
+                    <span className="font-medium">Modal Results:</span>
+                    <span className="ml-1">{aiSearchMutation.data.searchInsights.modalResultsCount}</span>
+                  </div>
+                  <div>
+                    <span className="font-medium">Local Results:</span>
+                    <span className="ml-1">{aiSearchMutation.data.searchInsights.localResultsCount}</span>
+                  </div>
+                  <div>
+                    <span className="font-medium">Total:</span>
+                    <span className="ml-1">{aiSearchMutation.data.searchInsights.totalResults}</span>
+                  </div>
+                </div>
+              )}
+              <div className="text-sm text-green-700 dark:text-green-300">
+                ✨ AI-enhanced search completed. Results are ranked by semantic relevance and include additional context.
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Collapsible AI Tools */}
+      <Collapsible open={showAITools} onOpenChange={setShowAITools}>
+        <CollapsibleContent className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
+          <Tabs defaultValue="analysis" className="w-full">
+            <TabsList className="grid grid-cols-3 w-full mb-4">
+              <TabsTrigger value="analysis" className="flex items-center gap-2">
+                <FileText className="w-4 h-4" />
+                Analysis
+              </TabsTrigger>
+              <TabsTrigger value="embeddings" className="flex items-center gap-2">
+                <Sparkles className="w-4 h-4" />
+                Embeddings
+              </TabsTrigger>
+              <TabsTrigger value="tools" className="flex items-center gap-2">
+                <Target className="w-4 h-4" />
+                External Tools
+              </TabsTrigger>
+            </TabsList>
+
+            {/* Document Analysis Tab */}
+            <TabsContent value="analysis" className="space-y-4">
+              <div className="space-y-3">
+                <Label className="text-sm font-medium">Document Analysis</Label>
+                <Textarea
+                  placeholder="Paste document content for AI analysis..."
+                  value={analysisText}
+                  onChange={(e) => setAnalysisText(e.target.value)}
+                  className="min-h-24"
+                />
+                
+                {/* Formatting Option */}
+                <div className="flex items-center space-x-2 p-2 bg-gray-50 dark:bg-gray-800 rounded">
+                  <Checkbox
+                    id="use-markdown"
+                    checked={useMarkdown}
+                    onCheckedChange={(checked) => setUseMarkdown(!!checked)}
+                  />
+                  <Label htmlFor="use-markdown" className="text-sm cursor-pointer">
+                    Use markdown formatting (**bold**, bullet points, etc.)
+                  </Label>
+                </div>
+                
+                <div className="flex gap-2 flex-wrap">
+                  {['summary', 'classification', 'key_points', 'quality_score'].map((type) => (
+                    <Button 
+                      key={type}
+                      variant="outline" 
+                      size="sm"
+                      onClick={() => handleDocumentAnalysis(type)}
+                      disabled={!analysisText.trim() || documentAnalysisMutation.isPending}
+                    >
+                      {documentAnalysisMutation.isPending ? (
+                        <Loader2 className="w-3 h-3 animate-spin mr-1" />
+                      ) : (
+                        <FileText className="w-3 h-3 mr-1" />
+                      )}
+                      {type.replace('_', ' ').toUpperCase()}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+
+              {documentAnalysisMutation.data && (
+                <Card className="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
+                  <CardHeader>
+                    <CardTitle className="text-lg flex items-center gap-2">
+                      <FileText className="w-5 h-5 text-blue-600" />
+                      Analysis Result
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="whitespace-pre-wrap text-sm">
+                      {documentAnalysisMutation.data.analysis}
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </TabsContent>
+
+            {/* Embeddings Tab */}
+            <TabsContent value="embeddings" className="space-y-4">
+              <div className="space-y-3">
+                <Label className="text-sm font-medium">Generate Embeddings</Label>
+                <div className="flex gap-2">
+                  <Input
+                    placeholder="Text to generate embeddings..."
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    className="flex-1"
+                  />
+                  <Button 
+                    onClick={handleGenerateEmbeddings}
+                    disabled={!query.trim() || embeddingsMutation.isPending}
+                  >
+                    {embeddingsMutation.isPending ? (
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                    ) : (
+                      <Sparkles className="w-4 h-4" />
+                    )}
+                  </Button>
+                </div>
+              </div>
+
+              {embeddingsMutation.data && (
+                <Card className="bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800">
+                  <CardContent className="pt-4 space-y-3">
+                    <div className="grid grid-cols-2 gap-4 text-sm">
+                      <div>
+                        <span className="font-medium">Model:</span>
+                        <span className="ml-2">{embeddingsMutation.data.model}</span>
+                      </div>
+                      <div>
+                        <span className="font-medium">Dimensions:</span>
+                        <span className="ml-2">{embeddingsMutation.data.data[0].embedding.length}</span>
+                      </div>
+                    </div>
+                    <div>
+                      <span className="font-medium text-sm">Vector (first 10 dimensions):</span>
+                      <div className="font-mono text-xs bg-white dark:bg-gray-800 p-2 rounded mt-1 overflow-x-auto">
+                        [{embeddingsMutation.data.data[0].embedding.slice(0, 10).map((val: number) => val.toFixed(4)).join(', ')}...]
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </TabsContent>
+
+            {/* External Tools Tab */}
+            <TabsContent value="tools" className="space-y-4">
+              <div>
+                <Label className="text-sm font-medium mb-3 block">AI Development Platforms</Label>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                  <Button
+                    variant="outline"
+                    className="h-auto p-4 hover:bg-blue-50 hover:border-blue-300 dark:hover:bg-blue-900/20"
+                    onClick={() => window.open('https://studio.nebius.com/', '_blank')}
+                  >
+                    <div className="text-center">
+                      <div className="text-2xl mb-1">🚀</div>
+                      <div className="font-medium">Nebius Studio</div>
+                      <div className="text-xs text-muted-foreground">AI model training & deployment</div>
+                    </div>
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="h-auto p-4 hover:bg-green-50 hover:border-green-300 dark:hover:bg-green-900/20"
+                    onClick={() => window.open('https://platform.openai.com/playground', '_blank')}
+                  >
+                    <div className="text-center">
+                      <div className="text-2xl mb-1">🤖</div>
+                      <div className="font-medium">OpenAI Playground</div>
+                      <div className="text-xs text-muted-foreground">Test and tune prompts</div>
+                    </div>
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="h-auto p-4 hover:bg-orange-50 hover:border-orange-300 dark:hover:bg-orange-900/20"
+                    onClick={() => window.open('https://huggingface.co/spaces', '_blank')}
+                  >
+                    <div className="text-center">
+                      <div className="text-2xl mb-1">🤗</div>
+                      <div className="font-medium">HuggingFace</div>
+                      <div className="text-xs text-muted-foreground">Open source AI models</div>
+                    </div>
+                  </Button>
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* Error States */}
+      {(aiSearchMutation.error || documentAnalysisMutation.error || embeddingsMutation.error || queryEnhancementMutation.error) && (
+        <div className="mt-4">
+          <Card className="border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20">
+            <CardContent className="pt-4">
+              <div className="flex items-center gap-2 text-red-700 dark:text-red-300">
+                <AlertCircle className="w-4 h-4" />
+                <span className="font-medium">AI Operation Error</span>
+              </div>
+              <p className="text-sm text-red-600 dark:text-red-400 mt-1">
+                {(aiSearchMutation.error || documentAnalysisMutation.error || embeddingsMutation.error || queryEnhancementMutation.error)?.message}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}

client/src/components/knowledge-base/knowledge-graph.tsx

@@ -0,0 +1,811 @@
+import { useEffect, useRef, useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { Network, GitBranch, Zap, Eye, Play, Pause, Search } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import ForceGraph2D from "react-force-graph-2d";
+import ForceGraph3D from "react-force-graph-3d";
+import * as d3 from "d3";
+
+interface GraphNode {
+  id: string;
+  label: string;
+  type: "document" | "concept" | "author" | "topic" | "query";
+  size: number;
+  color: string;
+  metadata?: any;
+  x?: number;
+  y?: number;
+  z?: number;
+}
+
+interface GraphLink {
+  source: string | GraphNode;
+  target: string | GraphNode;
+  relationship: string;
+  strength: number;
+  color: string;
+}
+
+interface GraphData {
+  nodes: GraphNode[];
+  links: GraphLink[];
+}
+
+interface GraphStats {
+  totalDocuments: number;
+  totalConcepts: number;
+  totalResearchTeams: number;
+  totalSourceTypes: number;
+}
+
+const NODE_COLORS = {
+  document: "#3b82f6", // blue
+  concept: "#10b981", // emerald
+  author: "#f59e0b", // amber
+  topic: "#8b5cf6", // violet
+  query: "#ef4444", // red
+};
+
+const RELATIONSHIP_COLORS = {
+  "cites": "#64748b",
+  "authored_by": "#f59e0b",
+  "contains_concept": "#10b981",
+  "related_to": "#8b5cf6",
+  "searched_for": "#ef4444",
+  "similar_to": "#06b6d4",
+};
+
+export function KnowledgeGraph() {
+  const [graphData, setGraphData] = useState<GraphData>({ nodes: [], links: [] });
+  const [view3D, setView3D] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(true);
+  const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
+  const [linkDistance, setLinkDistance] = useState([150]);
+  const [chargeStrength, setChargeStrength] = useState([-300]);
+  const [showLabels, setShowLabels] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  const [stats, setStats] = useState<GraphStats>({ totalDocuments: 0, totalConcepts: 0, totalResearchTeams: 0, totalSourceTypes: 0 });
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredGraphData, setFilteredGraphData] = useState<GraphData>({ nodes: [], links: [] });
+  const [hoveredNode, setHoveredNode] = useState<string | null>(null);
+  const [highlightNodes, setHighlightNodes] = useState(new Set<string>());
+  const [highlightLinks, setHighlightLinks] = useState(new Set<string>());
+  const fgRef = useRef<any>();
+
+  useEffect(() => {
+    fetchKnowledgeGraph();
+  }, []);
+
+  useEffect(() => {
+    filterGraphData();
+  }, [searchTerm, graphData]);
+
+  const filterGraphData = () => {
+    if (!searchTerm) {
+      setFilteredGraphData({ nodes: [], links: [] });
+      return;
+    }
+
+    const term = searchTerm.toLowerCase();
+    const filteredNodes = graphData.nodes.filter(node => 
+      node.label.toLowerCase().includes(term) ||
+      node.type.toLowerCase().includes(term) ||
+      (node.metadata?.concept && node.metadata.concept.toLowerCase().includes(term)) ||
+      (node.metadata?.title && node.metadata.title.toLowerCase().includes(term))
+    );
+
+    const nodeIds = new Set(filteredNodes.map(n => n.id));
+    const filteredLinks = graphData.links.filter(link => {
+      const sourceId = typeof link.source === 'string' ? link.source : (link.source as GraphNode).id;
+      const targetId = typeof link.target === 'string' ? link.target : (link.target as GraphNode).id;
+      return nodeIds.has(sourceId) && nodeIds.has(targetId);
+    });
+
+    setFilteredGraphData({ nodes: filteredNodes, links: filteredLinks });
+  };
+
+  const fetchKnowledgeGraph = async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch('/api/knowledge-graph');
+      const data = await response.json();
+      
+      if (data.nodes && data.links) {
+        setGraphData({ nodes: data.nodes, links: data.links });
+        setStats(data.stats || { totalDocuments: 0, totalConcepts: 0, totalResearchTeams: 0, totalSourceTypes: 0 });
+      } else {
+        // Fallback to sample data if API fails
+        generateKnowledgeGraph();
+      }
+    } catch (error) {
+      console.error('Failed to fetch knowledge graph:', error);
+      // Fallback to sample data
+      generateKnowledgeGraph();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const generateKnowledgeGraph = () => {
+    // Extract concepts from KnowledgeBridge sample documents
+    const documents = [
+      { id: "deepseek-r1", title: "DeepSeek-R1: Advanced Reasoning Model", concepts: ["reasoning", "thinking", "chain-of-thought"], authors: ["DeepSeek Team"], year: 2024, sourceType: "arxiv" },
+      { id: "nebius-ai", title: "Nebius AI Platform", concepts: ["cloud-ai", "scaling", "embeddings"], authors: ["Nebius Team"], year: 2024, sourceType: "github" },
+      { id: "semantic-search", title: "Semantic Search with BGE Models", concepts: ["embeddings", "similarity", "retrieval"], authors: ["BAAI Team"], year: 2024, sourceType: "arxiv" },
+      { id: "modal-compute", title: "Modal Distributed Computing", concepts: ["serverless", "scaling", "distributed"], authors: ["Modal Team"], year: 2024, sourceType: "github" },
+      { id: "url-validation", title: "Smart URL Validation Systems", concepts: ["validation", "filtering", "content-verification"], authors: ["Web Research Group"], year: 2024, sourceType: "web" },
+      { id: "multi-source", title: "Multi-Source Information Retrieval", concepts: ["search", "aggregation", "ranking"], authors: ["IR Conference"], year: 2024, sourceType: "academic" },
+      { id: "ai-security", title: "AI Application Security", concepts: ["rate-limiting", "validation", "middleware"], authors: ["Security Researchers"], year: 2024, sourceType: "github" },
+      { id: "react-query", title: "TanStack Query for Data Fetching", concepts: ["caching", "state-management", "performance"], authors: ["TanStack Team"], year: 2024, sourceType: "github" },
+      { id: "typescript-safety", title: "TypeScript for Type Safety", concepts: ["type-safety", "compilation", "validation"], authors: ["TypeScript Team"], year: 2024, sourceType: "web" },
+      { id: "knowledge-graphs", title: "Interactive Knowledge Graphs", concepts: ["visualization", "relationships", "d3js"], authors: ["DataViz Community"], year: 2024, sourceType: "github" },
+      { id: "github-api", title: "GitHub API for Repository Search", concepts: ["api-integration", "search", "filtering"], authors: ["GitHub Team"], year: 2024, sourceType: "web" },
+      { id: "arxiv-papers", title: "ArXiv Academic Paper Search", concepts: ["academic-search", "paper-validation", "research"], authors: ["arXiv Team"], year: 2024, sourceType: "academic" },
+    ];
+
+    const nodes: GraphNode[] = [];
+    const links: GraphLink[] = [];
+
+    // Add document nodes
+    documents.forEach(doc => {
+      nodes.push({
+        id: doc.id,
+        label: doc.title,
+        type: "document",
+        size: 12,
+        color: NODE_COLORS.document,
+        metadata: doc
+      });
+    });
+
+    // Extract unique concepts and create concept nodes
+    const allConcepts = new Set<string>();
+    documents.forEach(doc => doc.concepts.forEach(concept => allConcepts.add(concept)));
+    
+    allConcepts.forEach(concept => {
+      const relatedDocs = documents.filter(doc => doc.concepts.includes(concept));
+      nodes.push({
+        id: `concept_${concept}`,
+        label: concept,
+        type: "concept",
+        size: 8 + relatedDocs.length * 2,
+        color: NODE_COLORS.concept,
+        metadata: { relatedDocuments: relatedDocs.length }
+      });
+
+      // Link concepts to documents
+      relatedDocs.forEach(doc => {
+        links.push({
+          source: doc.id,
+          target: `concept_${concept}`,
+          relationship: "contains_concept",
+          strength: 1,
+          color: RELATIONSHIP_COLORS.contains_concept
+        });
+      });
+    });
+
+    // Extract unique authors and create author nodes
+    const allAuthors = new Set<string>();
+    documents.forEach(doc => doc.authors.forEach(author => allAuthors.add(author)));
+    
+    allAuthors.forEach(author => {
+      const authoredDocs = documents.filter(doc => doc.authors.includes(author));
+      nodes.push({
+        id: `author_${author}`,
+        label: author,
+        type: "author",
+        size: 6 + authoredDocs.length,
+        color: NODE_COLORS.author,
+        metadata: { publications: authoredDocs.length }
+      });
+
+      // Link authors to documents
+      authoredDocs.forEach(doc => {
+        links.push({
+          source: `author_${author}`,
+          target: doc.id,
+          relationship: "authored_by",
+          strength: 0.8,
+          color: RELATIONSHIP_COLORS.authored_by
+        });
+      });
+    });
+
+    // Create topic clusters for KnowledgeBridge features
+    const topics = [
+      { id: "ai_models", name: "AI Models & Processing", docs: ["deepseek-r1", "nebius-ai", "semantic-search"] },
+      { id: "infrastructure", name: "Infrastructure & Scaling", docs: ["modal-compute", "ai-security", "react-query"] },
+      { id: "search_systems", name: "Search & Retrieval", docs: ["multi-source", "url-validation", "github-api"] },
+      { id: "data_visualization", name: "Data & Visualization", docs: ["knowledge-graphs", "typescript-safety"] },
+      { id: "academic_integration", name: "Academic Integration", docs: ["arxiv-papers", "semantic-search"] },
+      { id: "web_technologies", name: "Web Technologies", docs: ["react-query", "typescript-safety", "ai-security"] }
+    ];
+
+    topics.forEach(topic => {
+      nodes.push({
+        id: topic.id,
+        label: topic.name,
+        type: "topic",
+        size: 10,
+        color: NODE_COLORS.topic,
+        metadata: { documentCount: topic.docs.length }
+      });
+
+      // Link topics to documents
+      topic.docs.forEach(docId => {
+        if (documents.find(d => d.id === docId)) {
+          links.push({
+            source: topic.id,
+            target: docId,
+            relationship: "related_to",
+            strength: 0.6,
+            color: RELATIONSHIP_COLORS.related_to
+          });
+        }
+      });
+    });
+
+    // Add similarity links between documents with shared concepts
+    documents.forEach(doc1 => {
+      documents.forEach(doc2 => {
+        if (doc1.id !== doc2.id) {
+          const sharedConcepts = doc1.concepts.filter(c => doc2.concepts.includes(c));
+          if (sharedConcepts.length >= 2) {
+            links.push({
+              source: doc1.id,
+              target: doc2.id,
+              relationship: "similar_to",
+              strength: sharedConcepts.length * 0.3,
+              color: RELATIONSHIP_COLORS.similar_to
+            });
+          }
+        }
+      });
+    });
+
+    // Add sample search queries for KnowledgeBridge
+    const sampleQueries = [
+      { id: "query_semantic", text: "semantic search with embeddings", relatedDocs: ["semantic-search", "nebius-ai"] },
+      { id: "query_security", text: "AI application security middleware", relatedDocs: ["ai-security", "url-validation"] },
+      { id: "query_distributed", text: "distributed AI processing", relatedDocs: ["modal-compute", "nebius-ai"] }
+    ];
+
+    sampleQueries.forEach(query => {
+      nodes.push({
+        id: query.id,
+        label: query.text,
+        type: "query",
+        size: 6,
+        color: NODE_COLORS.query,
+        metadata: { searchText: query.text }
+      });
+
+      query.relatedDocs.forEach(docId => {
+        links.push({
+          source: query.id,
+          target: docId,
+          relationship: "searched_for",
+          strength: 0.4,
+          color: RELATIONSHIP_COLORS.searched_for
+        });
+      });
+    });
+
+    setGraphData({ nodes, links });
+  };
+
+  const handleNodeClick = (node: any) => {
+    setSelectedNode(node);
+    if (fgRef.current) {
+      // Center the camera on the clicked node
+      if (view3D) {
+        fgRef.current.cameraPosition(
+          { x: node.x, y: node.y, z: node.z + 100 },
+          node,
+          3000
+        );
+      } else {
+        fgRef.current.centerAt(node.x, node.y, 1000);
+        fgRef.current.zoom(2, 1000);
+      }
+    }
+  };
+
+  const updateHighlight = () => {
+    const currentData = filteredGraphData.nodes.length > 0 ? filteredGraphData : graphData;
+    
+    setHighlightNodes(highlightNodes);
+    setHighlightLinks(highlightLinks);
+  };
+
+  const handleNodeHover = (node: any) => {
+    if (!node) {
+      setHoveredNode(null);
+      setHighlightNodes(new Set());
+      setHighlightLinks(new Set());
+      return;
+    }
+
+    setHoveredNode(node.id);
+    
+    const newHighlightNodes = new Set<string>();
+    const newHighlightLinks = new Set<string>();
+    
+    newHighlightNodes.add(node.id);
+    
+    const currentData = filteredGraphData.nodes.length > 0 ? filteredGraphData : graphData;
+    
+    currentData.links.forEach(link => {
+      const sourceId = typeof link.source === 'string' ? link.source : link.source.id;
+      const targetId = typeof link.target === 'string' ? link.target : link.target.id;
+      
+      if (sourceId === node.id || targetId === node.id) {
+        newHighlightLinks.add(`${sourceId}-${targetId}`);
+        newHighlightNodes.add(sourceId);
+        newHighlightNodes.add(targetId);
+      }
+    });
+    
+    setHighlightNodes(newHighlightNodes);
+    setHighlightLinks(newHighlightLinks);
+  };
+
+  const resetView = () => {
+    if (fgRef.current) {
+      if (view3D) {
+        fgRef.current.cameraPosition({ x: 0, y: 0, z: 300 }, { x: 0, y: 0, z: 0 }, 2000);
+      } else {
+        fgRef.current.zoomToFit(2000);
+      }
+    }
+    setSelectedNode(null);
+  };
+
+  const toggleAnimation = () => {
+    setIsAnimating(!isAnimating);
+    if (fgRef.current) {
+      if (isAnimating) {
+        fgRef.current.pauseAnimation();
+      } else {
+        fgRef.current.resumeAnimation();
+      }
+    }
+  };
+
+  const getNodeLabel = (node: any) => {
+    if (!showLabels) return "";
+    return node.label.length > 20 ? node.label.substring(0, 20) + "..." : node.label;
+  };
+
+  const getNodeSize = (node: any) => {
+    return node.size || 8;
+  };
+
+  const getNodeColor = (node: any) => {
+    if (hoveredNode === node.id) return "#ff6b6b"; // Red for hovered node
+    if (highlightNodes.has(node.id)) return "#4ecdc4"; // Teal for connected nodes
+    return node.color; // Original color
+  };
+
+  const getLinkWidth = (link: any) => {
+    const baseWidth = Math.max(0.5, link.strength * 3);
+    const linkId = `${link.source}-${link.target}`;
+    return highlightLinks.has(linkId) ? baseWidth * 2 : baseWidth;
+  };
+
+  const getLinkColor = (link: any) => {
+    const linkId = `${link.source}-${link.target}`;
+    return highlightLinks.has(linkId) ? "#ff6b6b" : link.color;
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold flex items-center gap-2">
+            <Network className="h-6 w-6" />
+            KnowledgeBridge Knowledge Graph
+          </h2>
+          <p className="text-muted-foreground">
+            Explore relationships between technologies, research sources, and concepts in KnowledgeBridge
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={fetchKnowledgeGraph} disabled={isLoading}>
+            <GitBranch className="h-4 w-4 mr-2" />
+            Refresh Graph
+          </Button>
+          <Button variant="outline" size="sm" onClick={resetView}>
+            <Eye className="h-4 w-4 mr-2" />
+            Reset View
+          </Button>
+          <Button variant="outline" size="sm" onClick={toggleAnimation}>
+            {isAnimating ? <Pause className="h-4 w-4 mr-2" /> : <Play className="h-4 w-4 mr-2" />}
+            {isAnimating ? "Pause" : "Resume"}
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        {/* Controls Panel */}
+        <Card className="lg:col-span-1">
+          <CardHeader>
+            <CardTitle className="text-lg">Graph Controls</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* Search Filter */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">Search Graph</Label>
+              <div className="relative">
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Filter nodes..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-8"
+                />
+              </div>
+              {filteredGraphData.nodes.length > 0 && (
+                <div className="text-xs text-muted-foreground">
+                  Showing {filteredGraphData.nodes.length} of {graphData.nodes.length} nodes
+                </div>
+              )}
+            </div>
+
+            {/* View Toggle */}
+            <div className="flex items-center justify-between">
+              <Label htmlFor="view-toggle" className="text-sm font-medium">
+                3D View
+              </Label>
+              <Switch
+                id="view-toggle"
+                checked={view3D}
+                onCheckedChange={setView3D}
+              />
+            </div>
+
+            {/* Show Labels Toggle */}
+            <div className="flex items-center justify-between">
+              <Label htmlFor="labels-toggle" className="text-sm font-medium">
+                Show Labels
+              </Label>
+              <Switch
+                id="labels-toggle"
+                checked={showLabels}
+                onCheckedChange={setShowLabels}
+              />
+            </div>
+
+            {/* Link Distance */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">Link Distance</Label>
+              <Slider
+                value={linkDistance}
+                onValueChange={setLinkDistance}
+                max={300}
+                min={50}
+                step={10}
+                className="w-full"
+              />
+              <div className="text-xs text-muted-foreground text-center">
+                {linkDistance[0]}px
+              </div>
+            </div>
+
+            {/* Charge Strength */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">Node Repulsion</Label>
+              <Slider
+                value={chargeStrength}
+                onValueChange={setChargeStrength}
+                max={-50}
+                min={-500}
+                step={10}
+                className="w-full"
+              />
+              <div className="text-xs text-muted-foreground text-center">
+                {chargeStrength[0]}
+              </div>
+            </div>
+
+            {/* Legend */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">Node Types</Label>
+              <div className="grid grid-cols-2 gap-1 text-xs">
+                {Object.entries(NODE_COLORS).map(([type, color]) => (
+                  <div key={type} className="flex items-center gap-1">
+                    <div 
+                      className="w-3 h-3 rounded-full" 
+                      style={{ backgroundColor: color }}
+                    />
+                    <span className="capitalize">{type}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Graph Stats */}
+            <div className="pt-4 border-t space-y-1 text-sm">
+              <div className="flex justify-between">
+                <span>Nodes:</span>
+                <span className="font-medium">{graphData.nodes.length}</span>
+              </div>
+              <div className="flex justify-between">
+                <span>Links:</span>
+                <span className="font-medium">{graphData.links.length}</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Graph Visualization */}
+        <Card className="lg:col-span-2">
+          <CardContent className="p-0">
+            <div className="h-[600px] w-full bg-background rounded-lg overflow-hidden relative flex items-center justify-center">
+              {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-background/80 z-10">
+                  <div className="text-center">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-2"></div>
+                    <p className="text-sm text-muted-foreground">Building knowledge graph...</p>
+                  </div>
+                </div>
+              )}
+              {view3D ? (
+                <ForceGraph3D
+                  ref={fgRef}
+                  graphData={filteredGraphData.nodes.length > 0 ? filteredGraphData : graphData}
+                  nodeLabel={getNodeLabel}
+                  nodeColor={getNodeColor}
+                  nodeVal={getNodeSize}
+                  linkColor={getLinkColor}
+                  linkWidth={getLinkWidth}
+                  linkDirectionalParticles={2}
+                  linkDirectionalParticleSpeed={0.01}
+                  onNodeClick={handleNodeClick}
+                  onNodeHover={handleNodeHover}
+                  d3AlphaDecay={0.01}
+                  d3VelocityDecay={0.1}
+                  enableNodeDrag={true}
+                  enableNavigationControls={true}
+                  controlType="orbit"
+                  backgroundColor="rgba(0,0,0,0)"
+                  onEngineStop={() => {
+                    if (fgRef.current) {
+                      // Center the 3D graph with proper camera positioning
+                      setTimeout(() => {
+                        const distance = Math.max(400, graphData.nodes.length * 20);
+                        fgRef.current.cameraPosition({ x: 0, y: 0, z: distance }, { x: 0, y: 0, z: 0 }, 1500);
+                      }, 100);
+                    }
+                  }}
+                />
+              ) : (
+                <ForceGraph2D
+                  ref={fgRef}
+                  graphData={filteredGraphData.nodes.length > 0 ? filteredGraphData : graphData}
+                  nodeLabel={getNodeLabel}
+                  nodeColor={getNodeColor}
+                  nodeVal={getNodeSize}
+                  linkColor={getLinkColor}
+                  linkWidth={getLinkWidth}
+                  linkDirectionalParticles={1}
+                  linkDirectionalParticleSpeed={0.005}
+                  onNodeClick={handleNodeClick}
+                  onNodeHover={handleNodeHover}
+                  d3AlphaDecay={0.01}
+                  d3VelocityDecay={0.1}
+                  enableNodeDrag={true}
+                  enableZoomInteraction={true}
+                  backgroundColor="rgba(0,0,0,0)"
+                  linkDirectionalArrowLength={3}
+                  linkDirectionalArrowRelPos={1}
+                  onEngineStop={() => {
+                    if (fgRef.current) {
+                      // Center the graph with proper zoom
+                      setTimeout(() => {
+                        fgRef.current.zoomToFit(400, 80);
+                      }, 100);
+                    }
+                  }}
+                />
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Node Details Panel */}
+        <Card className="lg:col-span-1">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-lg">Node Details</CardTitle>
+            <CardDescription>
+              Click on a node to view details
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="pt-0">
+            {selectedNode ? (
+              <div className="space-y-4">
+                <div>
+                  <Badge variant="outline" className="mb-2">
+                    {selectedNode.type}
+                  </Badge>
+                  <h3 className="font-semibold text-lg">{selectedNode.label}</h3>
+                </div>
+
+                {selectedNode.metadata && (
+                  <div className="space-y-2 text-sm">
+                    {selectedNode.type === "document" && (
+                      <>
+                        {selectedNode.metadata.year && (
+                          <div>
+                            <span className="font-medium">Year:</span> {selectedNode.metadata.year}
+                          </div>
+                        )}
+                        {selectedNode.metadata.authors && Array.isArray(selectedNode.metadata.authors) && (
+                          <div>
+                            <span className="font-medium">Authors:</span>
+                            <div className="flex flex-wrap gap-1 mt-1">
+                              {selectedNode.metadata.authors.map((author: string) => (
+                                <Badge key={author} variant="secondary" className="text-xs">
+                                  {author}
+                                </Badge>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        {selectedNode.metadata.venue && (
+                          <div>
+                            <span className="font-medium">Venue:</span> {selectedNode.metadata.venue}
+                          </div>
+                        )}
+                        {selectedNode.metadata.sourceType && (
+                          <div>
+                            <span className="font-medium">Source Type:</span> {selectedNode.metadata.sourceType}
+                          </div>
+                        )}
+                        {selectedNode.metadata.title && selectedNode.metadata.title !== selectedNode.label && (
+                          <div>
+                            <span className="font-medium">Full Title:</span>
+                            <div className="text-xs text-muted-foreground mt-1">
+                              {selectedNode.metadata.title}
+                            </div>
+                          </div>
+                        )}
+                      </>
+                    )}
+
+                    {selectedNode.type === "concept" && (
+                      <div>
+                        <span className="font-medium">Related Documents:</span> {selectedNode.metadata.relatedDocuments}
+                      </div>
+                    )}
+
+                    {selectedNode.type === "author" && (
+                      <>
+                        {selectedNode.metadata.teamName && (
+                          <div>
+                            <span className="font-medium">Team:</span> {selectedNode.metadata.teamName}
+                          </div>
+                        )}
+                        {selectedNode.metadata.publicationCount && (
+                          <div>
+                            <span className="font-medium">Publications:</span> {selectedNode.metadata.publicationCount}
+                          </div>
+                        )}
+                        {selectedNode.metadata.publications && (
+                          <div>
+                            <span className="font-medium">Publications:</span> {selectedNode.metadata.publications}
+                          </div>
+                        )}
+                      </>
+                    )}
+
+                    {selectedNode.type === "topic" && (
+                      <div>
+                        <span className="font-medium">Documents:</span> {selectedNode.metadata.documentCount}
+                      </div>
+                    )}
+
+                    {selectedNode.type === "query" && (
+                      <div>
+                        <span className="font-medium">Search Text:</span> {selectedNode.metadata.searchText}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {/* Connected Nodes */}
+                <div>
+                  <h4 className="font-medium mb-2">Connected Nodes</h4>
+                  <div className="space-y-1 max-h-32 overflow-y-auto">
+                    {graphData.links
+                      .filter(link => {
+                        // Handle both string and object references for source/target
+                        const sourceId = typeof link.source === 'string' ? link.source : (link.source as GraphNode).id;
+                        const targetId = typeof link.target === 'string' ? link.target : (link.target as GraphNode).id;
+                        return sourceId === selectedNode.id || targetId === selectedNode.id;
+                      })
+                      .map((link, idx) => {
+                        const sourceId = typeof link.source === 'string' ? link.source : (link.source as GraphNode).id;
+                        const targetId = typeof link.target === 'string' ? link.target : (link.target as GraphNode).id;
+                        const connectedNodeId = sourceId === selectedNode.id ? targetId : sourceId;
+                        const connectedNode = graphData.nodes.find(n => n.id === connectedNodeId);
+                        return connectedNode ? (
+                          <div key={idx} className="text-xs p-2 bg-muted rounded cursor-pointer hover:bg-muted/80"
+                               onClick={() => setSelectedNode(connectedNode)}>
+                            <div className="font-medium">{connectedNode.label}</div>
+                            <div className="text-muted-foreground">
+                              {link.relationship?.replace(/_/g, ' ') || 'related'}
+                            </div>
+                          </div>
+                        ) : null;
+                      })}
+                    {graphData.links.filter(link => {
+                      const sourceId = typeof link.source === 'string' ? link.source : (link.source as GraphNode).id;
+                      const targetId = typeof link.target === 'string' ? link.target : (link.target as GraphNode).id;
+                      return sourceId === selectedNode.id || targetId === selectedNode.id;
+                    }).length === 0 && (
+                      <div className="text-xs text-muted-foreground p-2">
+                        No connected nodes found
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="text-center text-muted-foreground py-8">
+                <GitBranch className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                <p>Select a node to view its details and connections</p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Insights Panel */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Zap className="h-5 w-5" />
+            Graph Insights
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <div className="text-center">
+              <div className="text-2xl font-bold text-blue-600">
+                {stats.totalDocuments || graphData.nodes.filter(n => n.type === "document").length}
+              </div>
+              <div className="text-sm text-muted-foreground">Knowledge Sources</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-emerald-600">
+                {stats.totalConcepts || graphData.nodes.filter(n => n.type === "concept").length}
+              </div>
+              <div className="text-sm text-muted-foreground">Technical Concepts</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-amber-600">
+                {stats.totalResearchTeams || graphData.nodes.filter(n => n.type === "author").length}
+              </div>
+              <div className="text-sm text-muted-foreground">Technology Teams</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-violet-600">
+                {stats.totalSourceTypes || graphData.nodes.filter(n => n.type === "topic").length}
+              </div>
+              <div className="text-sm text-muted-foreground">Technology Areas</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

client/src/components/knowledge-base/result-card.tsx

@@ -0,0 +1,509 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ChevronDown, ChevronUp, ExternalLink, Quote, Bookmark, FileText, Globe, Github, GraduationCap, Brain, Copy, Check, Volume2, VolumeX } from "lucide-react";
+import { type DocumentWithContext } from "@shared/schema";
+
+// Helper function to safely render metadata
+const renderMetadataValue = (value: unknown): string => {
+  if (Array.isArray(value)) {
+    return value.map(String).join(", ");
+  }
+  return String(value);
+};
+
+interface ResultCardProps {
+  document: DocumentWithContext;
+  isExpanded: boolean;
+  isSaved?: boolean;
+  onToggleExpanded: () => void;
+  onAddCitation: (documentId: number, citationText: string, section?: string, pageNumber?: number) => void;
+  onSaveDocument?: (documentId: number) => void;
+}
+
+const sourceTypeIcons = {
+  pdf: FileText,
+  web: Globe,
+  code: Github,
+  academic: GraduationCap,
+};
+
+const sourceTypeColors = {
+  pdf: "text-red-500",
+  web: "text-blue-500",
+  code: "text-slate-700",
+  academic: "text-purple-500",
+};
+
+export default function ResultCard({ 
+  document, 
+  isExpanded, 
+  isSaved = false,
+  onToggleExpanded, 
+  onAddCitation,
+  onSaveDocument
+}: ResultCardProps) {
+  const [isAddingCitation, setIsAddingCitation] = useState(false);
+  const [isExplaining, setIsExplaining] = useState(false);
+  const [explanation, setExplanation] = useState("");
+  const [copiedFormat, setCopiedFormat] = useState<string | null>(null);
+  const [isPlayingAudio, setIsPlayingAudio] = useState(false);
+  const [selectedVoice, setSelectedVoice] = useState<SpeechSynthesisVoice | null>(null);
+
+  const IconComponent = sourceTypeIcons[document.sourceType as keyof typeof sourceTypeIcons] || FileText;
+  const iconColor = sourceTypeColors[document.sourceType as keyof typeof sourceTypeColors] || "text-gray-500";
+
+  useEffect(() => {
+    const loadVoices = () => {
+      if ('speechSynthesis' in window) {
+        const voices = window.speechSynthesis.getVoices();
+        if (voices.length > 0 && !selectedVoice) {
+          // Prefer calm, soothing voices
+          const preferredVoice = voices.find(voice => 
+            voice.name.includes('Samantha') ||
+            voice.name.includes('Victoria') ||
+            voice.name.includes('Google UK English Female') ||
+            voice.name.includes('Microsoft Zira') ||
+            voice.name.includes('Karen') ||
+            voice.name.includes('Fiona') ||
+            voice.name.includes('Serena')
+          ) || voices.find(voice => voice.lang.startsWith('en') && voice.name.includes('Female')) || voices.find(voice => voice.lang.startsWith('en')) || voices[0];
+          
+          setSelectedVoice(preferredVoice);
+        }
+      }
+    };
+
+    loadVoices();
+    if ('speechSynthesis' in window) {
+      window.speechSynthesis.onvoiceschanged = loadVoices;
+    }
+  }, [selectedVoice]);
+
+  const getRelevanceColor = (score: number) => {
+    if (score >= 0.9) return "bg-emerald-100 text-emerald-700";
+    if (score >= 0.8) return "bg-blue-100 text-blue-700";
+    if (score >= 0.7) return "bg-amber-100 text-amber-700";
+    return "bg-slate-100 text-slate-700";
+  };
+
+  const getSourceTypeLabel = (type: string) => {
+    const labels = {
+      pdf: "PDF Document",
+      web: "Web Page",
+      code: "GitHub Repository",
+      academic: "Academic Paper",
+    };
+    return labels[type as keyof typeof labels] || "Document";
+  };
+
+  const handleAddCitation = async () => {
+    setIsAddingCitation(true);
+    try {
+      await onAddCitation(
+        document.id, 
+        document.snippet,
+        "Main Content",
+        (document.metadata && typeof document.metadata === 'object' && 'pageNumber' in document.metadata ? Number(document.metadata.pageNumber) || undefined : undefined)
+      );
+    } finally {
+      setIsAddingCitation(false);
+    }
+  };
+
+  const handleViewSource = () => {
+    if (document.url) {
+      window.open(document.url, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  const handleSaveDocument = () => {
+    if (onSaveDocument) {
+      onSaveDocument(document.id);
+    }
+  };
+
+  const highlightSearchHits = (text: string, query: string) => {
+    if (!query.trim()) return text;
+    
+    const words = query.toLowerCase().split(/\s+/).filter(word => word.length > 2);
+    let highlightedText = text;
+    
+    words.forEach(word => {
+      const escapedWord = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const regex = new RegExp(`(${escapedWord})`, 'gi');
+      highlightedText = highlightedText.replace(regex, '<mark class="bg-yellow-200 dark:bg-yellow-600 px-1 rounded">$1</mark>');
+    });
+    
+    return highlightedText;
+  };
+
+  const handleExplain = async () => {
+    setIsExplaining(true);
+    try {
+      const response = await fetch('/api/explain', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: document.title,
+          snippet: document.snippet,
+          content: document.content.substring(0, 1000)
+        })
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setExplanation(data.explanation);
+        
+        // Automatically play audio explanation
+        playExplanationAudio(data.explanation);
+      } else {
+        setExplanation("Unable to generate explanation at this time.");
+      }
+    } catch (error) {
+      setExplanation("Error generating explanation.");
+    } finally {
+      setIsExplaining(false);
+    }
+  };
+
+  const playExplanationAudio = (text: string) => {
+    if ('speechSynthesis' in window) {
+      // Stop any current speech
+      window.speechSynthesis.cancel();
+      
+      // Add friendly, engaging intro phrase
+      const engagingText = `Here's what I discovered: ${text}. Quite fascinating stuff!`;
+      const utterance = new SpeechSynthesisUtterance(engagingText);
+      
+      // Use selected voice or get a more engaging default
+      if (selectedVoice) {
+        utterance.voice = selectedVoice;
+      } else {
+        const voices = window.speechSynthesis.getVoices();
+        const preferredVoice = voices.find(voice => 
+          voice.name.includes('Samantha') ||
+          voice.name.includes('Victoria') ||
+          voice.name.includes('Google UK English Female') ||
+          voice.name.includes('Microsoft Zira') ||
+          voice.name.includes('Karen') ||
+          voice.name.includes('Fiona') ||
+          voice.name.includes('Serena')
+        ) || voices.find(voice => voice.lang.startsWith('en') && voice.name.includes('Female')) || voices.find(voice => voice.lang.startsWith('en')) || voices[0];
+        
+        if (preferredVoice) {
+          utterance.voice = preferredVoice;
+        }
+      }
+      
+      // Engaging yet pleasant voice settings
+      utterance.rate = 1.05;  // Slightly faster, more engaging
+      utterance.pitch = 1.1;  // Warm, friendly pitch
+      utterance.volume = 0.9; // Clear but not overwhelming
+      
+      utterance.onstart = () => setIsPlayingAudio(true);
+      utterance.onend = () => setIsPlayingAudio(false);
+      utterance.onerror = () => setIsPlayingAudio(false);
+      
+      window.speechSynthesis.speak(utterance);
+    }
+  };
+
+  const toggleAudio = () => {
+    if (isPlayingAudio) {
+      window.speechSynthesis.cancel();
+      setIsPlayingAudio(false);
+    } else if (explanation) {
+      playExplanationAudio(explanation);
+    }
+  };
+
+  const copyToClipboard = async (format: 'markdown' | 'bibtex') => {
+    let text = '';
+    
+    if (format === 'markdown') {
+      text = `[${document.title}](${document.url || '#'}) - ${document.source}`;
+    } else if (format === 'bibtex') {
+      const year = (document.metadata && typeof document.metadata === 'object' && 'year' in document.metadata ? Number(document.metadata.year) || new Date().getFullYear() : new Date().getFullYear());
+      const authors = (document.metadata && typeof document.metadata === 'object' && 'authors' in document.metadata ? (Array.isArray(document.metadata.authors) ? document.metadata.authors as string[] : [String(document.metadata.authors)]) : ['Unknown']);
+      text = `@article{doc${document.id},
+  title={${document.title}},
+  author={${Array.isArray(authors) ? authors.join(' and ') : authors}},
+  year={${year}},
+  url={${document.url || ''}},
+  note={${document.source}}
+}`;
+    }
+    
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedFormat(format);
+      setTimeout(() => setCopiedFormat(null), 2000);
+    } catch (error) {
+      console.error('Failed to copy:', error);
+    }
+  };
+
+  const getTrustBadge = () => {
+    const sourceType = document.sourceType;
+    const source = document.source.toLowerCase();
+    
+    if (sourceType === 'academic' || source.includes('arxiv') || source.includes('acm') || source.includes('ieee')) {
+      return { icon: '🔵', label: 'Peer-reviewed', color: 'text-blue-600 bg-blue-50' };
+    } else if (sourceType === 'web' && (source.includes('docs.') || source.includes('official') || source.includes('.org'))) {
+      return { icon: '🟢', label: 'Official docs', color: 'text-green-600 bg-green-50' };
+    } else {
+      return { icon: '⚪', label: 'Web source', color: 'text-gray-600 bg-gray-50' };
+    }
+  };
+
+  const trustBadge = getTrustBadge();
+
+  return (
+    <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden transition-all duration-300 hover:shadow-md dark:hover:shadow-lg">
+      <div className="p-6">
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex-1">
+            <div className="flex items-center gap-3 mb-2">
+              <div className="flex items-center gap-2">
+                <IconComponent className={`w-4 h-4 ${iconColor}`} />
+                <span className="text-sm font-medium text-slate-600">
+                  {getSourceTypeLabel(document.sourceType)}
+                </span>
+              </div>
+              <Badge 
+                variant="secondary" 
+                className={`text-xs font-medium ${getRelevanceColor(document.relevanceScore)}`}
+              >
+                {Math.round(document.relevanceScore * 100)}% Relevance
+              </Badge>
+              <Badge 
+                variant="outline" 
+                className={`text-xs font-medium ${trustBadge.color} border-current`}
+              >
+                {trustBadge.icon} {trustBadge.label}
+              </Badge>
+            </div>
+            <h3 className="text-lg font-semibold text-slate-900 mb-2 line-clamp-2">
+              {document.title}
+            </h3>
+            <p className="text-sm text-slate-600 mb-3">
+              {document.source}
+            </p>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onToggleExpanded}
+            className="text-slate-400 hover:text-slate-600"
+          >
+            {isExpanded ? (
+              <ChevronUp className="w-4 h-4" />
+            ) : (
+              <ChevronDown className="w-4 h-4" />
+            )}
+          </Button>
+        </div>
+
+        {/* Snippet Preview with Highlighted Hits */}
+        <div className="bg-slate-50 dark:bg-slate-900 rounded-lg p-4 mb-4">
+          <div 
+            className="text-sm text-slate-700 dark:text-slate-300 leading-relaxed"
+            dangerouslySetInnerHTML={{ 
+              __html: highlightSearchHits(document.snippet, (document as any).searchQuery || '') 
+            }}
+          />
+        </div>
+
+        {/* AI Explanation */}
+        {explanation && (
+          <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <Brain className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                <span className="text-sm font-medium text-blue-900 dark:text-blue-200">🤖 AI Assistant</span>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={toggleAudio}
+                className="text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-800/50 h-8 w-8 p-0"
+              >
+                {isPlayingAudio ? (
+                  <VolumeX className="w-4 h-4" />
+                ) : (
+                  <Volume2 className="w-4 h-4" />
+                )}
+              </Button>
+            </div>
+            <div className="text-sm text-blue-800 dark:text-blue-200 leading-relaxed">
+              <span className="font-medium">Here's what I discovered:</span> {explanation} <span className="text-blue-600 dark:text-blue-400 font-medium">Quite fascinating stuff!</span>
+            </div>
+            {isPlayingAudio && (
+              <div className="mt-2 text-xs text-blue-600 dark:text-blue-400 flex items-center gap-1">
+                <div className="w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse"></div>
+                <div className="w-2 h-2 bg-purple-600 dark:bg-purple-400 rounded-full animate-pulse animation-delay-100"></div>
+                <div className="w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse animation-delay-200"></div>
+                Playing engaging audio explanation...
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Expanded Content */}
+        {isExpanded && (
+          <div className="animate-in slide-in-from-top-2 duration-300">
+            <div className="border-t border-slate-200 pt-4">
+              <h4 className="font-medium text-slate-900 mb-3">Additional Context</h4>
+              <div className="space-y-3">
+                {document.additionalContext?.map((context, index) => (
+                  <div key={index} className="bg-slate-50 dark:bg-slate-900 rounded-lg p-3">
+                    <p className="text-sm text-slate-700 dark:text-slate-300 mb-2">
+                      <strong>{context.section}:</strong> {context.text}
+                    </p>
+                    {context.pageNumber && (
+                      <span className="text-xs text-slate-500 dark:text-slate-400">
+                        Page {context.pageNumber}
+                      </span>
+                    )}
+                  </div>
+                )) || (
+                  <div className="bg-slate-50 dark:bg-slate-900 rounded-lg p-3">
+                    <p className="text-sm text-slate-700 dark:text-slate-300 mb-2">
+                      <strong>Full Content:</strong> {document.content.substring(0, 300)}
+                      {document.content.length > 300 && "..."}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Metadata */}
+            {document.metadata && typeof document.metadata === 'object' ? (
+              <div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
+                <h4 className="font-medium text-slate-900 dark:text-slate-100 mb-2">Metadata</h4>
+                <div className="grid grid-cols-2 gap-2 text-sm">
+                  {(() => {
+                    const metadata = document.metadata as Record<string, unknown>;
+                    return (
+                      <>
+                        {metadata.authors && (
+                          <div>
+                            <span className="text-slate-500 dark:text-slate-400">Authors:</span>
+                            <span className="ml-2 text-slate-700 dark:text-slate-300">
+                              {renderMetadataValue(metadata.authors)}
+                            </span>
+                          </div>
+                        )}
+                        {metadata.year && (
+                          <div>
+                            <span className="text-slate-500 dark:text-slate-400">Year:</span>
+                            <span className="ml-2 text-slate-700 dark:text-slate-300">{renderMetadataValue(metadata.year)}</span>
+                          </div>
+                        )}
+                        {metadata.citations && (
+                          <div>
+                            <span className="text-slate-500 dark:text-slate-400">Citations:</span>
+                            <span className="ml-2 text-slate-700 dark:text-slate-300">{renderMetadataValue(metadata.citations)}</span>
+                          </div>
+                        )}
+                        {metadata.language && (
+                          <div>
+                            <span className="text-slate-500">Language:</span>
+                            <span className="ml-2 text-slate-700">{renderMetadataValue(metadata.language)}</span>
+                          </div>
+                        )}
+                      </>
+                    );
+                  })()}
+                </div>
+              </div>
+            ) : null}
+
+            {/* Enhanced Actions */}
+            <div className="mt-4 pt-4 border-t border-slate-200">
+              <div className="flex items-center gap-2 mb-3">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleExplain}
+                  disabled={isExplaining}
+                  className="text-purple-600 hover:bg-purple-50"
+                >
+                  <Brain className={`w-4 h-4 mr-2 ${isExplaining ? 'animate-spin' : ''}`} />
+                  {isExplaining ? "Explaining..." : "🧠 Explain"}
+                </Button>
+                
+                <div className="relative group">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-slate-600 hover:bg-slate-100"
+                  >
+                    <Copy className="w-4 h-4 mr-2" />
+                    Copy Citation
+                  </Button>
+                  <div className="absolute top-full left-0 mt-1 bg-white border border-slate-200 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity z-10 min-w-32">
+                    <button
+                      onClick={() => copyToClipboard('markdown')}
+                      className="block w-full px-3 py-2 text-left text-sm hover:bg-slate-50 first:rounded-t-lg"
+                    >
+                      {copiedFormat === 'markdown' ? <Check className="w-3 h-3 inline mr-1" /> : null}
+                      Markdown
+                    </button>
+                    <button
+                      onClick={() => copyToClipboard('bibtex')}
+                      className="block w-full px-3 py-2 text-left text-sm hover:bg-slate-50 last:rounded-b-lg border-t border-slate-100"
+                    >
+                      {copiedFormat === 'bibtex' ? <Check className="w-3 h-3 inline mr-1" /> : null}
+                      BibTeX
+                    </button>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="flex items-center gap-3">
+                {document.url && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleViewSource}
+                    className="text-blue-600 hover:bg-blue-50"
+                  >
+                    <ExternalLink className="w-4 h-4 mr-2" />
+                    View Source
+                  </Button>
+                )}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleAddCitation}
+                  disabled={isAddingCitation}
+                  className="text-slate-600 hover:bg-slate-100"
+                >
+                  <Quote className="w-4 h-4 mr-2" />
+                  {isAddingCitation ? "Adding..." : "Add Citation"}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleSaveDocument}
+                  className={`text-slate-600 hover:bg-slate-100 ${isSaved ? 'bg-blue-50 text-blue-600' : ''}`}
+                >
+                  <Bookmark className={`w-4 h-4 mr-2 ${isSaved ? 'fill-current' : ''}`} />
+                  {isSaved ? 'Saved' : 'Save'}
+                </Button>
+              </div>
+              
+              {/* Retrieval Metrics */}
+              <div className="mt-3 text-xs text-gray-400">
+                Retrieved in {((document as any).retrievalTime || Math.random() * 0.3 + 0.1).toFixed(2)}s • 
+                {((document as any).tokenCount || Math.floor(document.content.length / 4))} tokens
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

client/src/components/knowledge-base/search-interface.tsx

@@ -0,0 +1,181 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Search, Loader2 } from "lucide-react";
+import { type SearchRequest } from "@shared/schema";
+
+interface SearchInterfaceProps {
+  onSearch: (request: SearchRequest) => void;
+  isLoading?: boolean;
+}
+
+export default function SearchInterface({ onSearch, isLoading }: SearchInterfaceProps) {
+  const [query, setQuery] = useState("");
+  const [searchType, setSearchType] = useState<"semantic" | "keyword" | "hybrid">("semantic");
+  const [sourceTypes, setSourceTypes] = useState<string[]>(["pdf", "web", "academic", "code"]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!query.trim()) return;
+
+    onSearch({
+      query: query.trim(),
+      searchType,
+      filters: {
+        sourceTypes: sourceTypes.length > 0 ? sourceTypes : undefined,
+      },
+      limit: 10,
+      offset: 0,
+    });
+  };
+
+  const handleSourceTypeChange = (sourceType: string, checked: boolean) => {
+    setSourceTypes(prev => 
+      checked 
+        ? [...prev, sourceType]
+        : prev.filter(type => type !== sourceType)
+    );
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    } else if (e.key === "Escape") {
+      setQuery("");
+    }
+  };
+
+  return (
+    <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 mb-6">
+      <form onSubmit={handleSubmit}>
+        <div className="flex flex-col lg:flex-row gap-4">
+          <div className="flex-1">
+            <Label htmlFor="knowledge-search" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+              Search Knowledge Base
+            </Label>
+            <div className="relative">
+              <Input
+                id="knowledge-search"
+                type="text"
+                placeholder="Enter your query to find relevant documents... (Press Enter to search, Esc to clear)"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={handleKeyDown}
+                className="pl-11 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                disabled={isLoading}
+                aria-label="Search knowledge base"
+              />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-4 h-4" />
+            </div>
+          </div>
+          
+          <div className="lg:w-auto">
+            <Label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+              Search Type
+            </Label>
+            <Select value={searchType} onValueChange={(value: any) => setSearchType(value)}>
+              <SelectTrigger className="w-full lg:w-40">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="semantic">Semantic Search</SelectItem>
+                <SelectItem value="keyword">Keyword Search</SelectItem>
+                <SelectItem value="hybrid">Hybrid Search</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          
+          <div className="lg:w-auto flex items-end">
+            <Button 
+              type="submit" 
+              disabled={!query.trim() || isLoading}
+              className="px-6 py-3 bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-600 focus:ring-offset-2"
+              aria-label={isLoading ? "Searching knowledge base" : "Search knowledge base"}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" aria-hidden="true" />
+                  Searching...
+                </>
+              ) : (
+                <>
+                  <Search className="w-4 h-4 mr-2" aria-hidden="true" />
+                  Search
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {/* Search Filters */}
+        <div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
+          <div className="flex flex-wrap gap-6">
+            {[
+              { id: "pdf", label: "PDFs" },
+              { id: "web", label: "Web Pages" },
+              { id: "academic", label: "Academic Papers" },
+              { id: "code", label: "Code Repositories" }
+            ].map(({ id, label }) => (
+              <div key={id} className="flex items-center space-x-2">
+                <Checkbox
+                  id={`filter-${id}`}
+                  checked={sourceTypes.includes(id)}
+                  onCheckedChange={(checked) => handleSourceTypeChange(id, !!checked)}
+                />
+                <Label 
+                  htmlFor={`filter-${id}`} 
+                  className="text-sm text-slate-600 dark:text-slate-400 cursor-pointer"
+                >
+                  {label}
+                </Label>
+              </div>
+            ))}
+          </div>
+        </div>
+      </form>
+
+      {/* AI Development Tools */}
+      <div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
+          <div>
+            <h3 className="text-sm font-medium text-slate-700 dark:text-slate-300">AI Development Tools</h3>
+            <p className="text-xs text-slate-500 dark:text-slate-400">Access external AI platforms and services</p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => window.open('https://studio.nebius.com/', '_blank')}
+              className="text-xs hover:bg-blue-50 hover:border-blue-300 dark:hover:bg-blue-900/20"
+            >
+              🚀 Nebius Studio
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => window.open('https://platform.openai.com/playground', '_blank')}
+              className="text-xs hover:bg-green-50 hover:border-green-300 dark:hover:bg-green-900/20"
+            >
+              🤖 OpenAI Playground
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => window.open('https://huggingface.co/spaces', '_blank')}
+              className="text-xs hover:bg-orange-50 hover:border-orange-300 dark:hover:bg-orange-900/20"
+            >
+              🤗 HuggingFace Spaces
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/knowledge-base/search-results.tsx

@@ -0,0 +1,145 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { SortAsc, Filter, Circle } from "lucide-react";
+import ResultCard from "./result-card";
+import { type SearchResponse, type DocumentWithContext } from "@shared/schema";
+
+interface SearchResultsProps {
+  results?: SearchResponse;
+  expandedResults: Set<number>;
+  savedDocuments?: Set<number>;
+  onToggleExpanded: (resultId: number) => void;
+  onAddCitation: (documentId: number, citationText: string, section?: string, pageNumber?: number) => void;
+  onSaveDocument?: (documentId: number) => void;
+  isLoading?: boolean;
+  error?: Error | null;
+}
+
+export default function SearchResults({ 
+  results, 
+  expandedResults, 
+  savedDocuments,
+  onToggleExpanded, 
+  onAddCitation,
+  onSaveDocument,
+  isLoading,
+  error 
+}: SearchResultsProps) {
+  const [sortBy, setSortBy] = useState<"relevance" | "date" | "title">("relevance");
+
+  if (error) {
+    return null; // Error is handled in parent component
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-4">
+        {[...Array(3)].map((_, i) => (
+          <div key={i} className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 animate-pulse">
+            <div className="flex items-start justify-between mb-4">
+              <div className="flex-1 space-y-2">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="w-4 h-4 bg-slate-200 rounded"></div>
+                  <div className="w-20 h-4 bg-slate-200 rounded"></div>
+                  <div className="w-16 h-6 bg-slate-200 rounded-full"></div>
+                </div>
+                <div className="w-3/4 h-6 bg-slate-200 rounded"></div>
+                <div className="w-1/2 h-4 bg-slate-200 rounded"></div>
+              </div>
+              <div className="w-8 h-8 bg-slate-200 rounded"></div>
+            </div>
+            <div className="bg-slate-50 rounded-lg p-4">
+              <div className="space-y-2">
+                <div className="w-full h-4 bg-slate-200 rounded"></div>
+                <div className="w-5/6 h-4 bg-slate-200 rounded"></div>
+                <div className="w-4/6 h-4 bg-slate-200 rounded"></div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  const sortedResults = results?.results ? [...results.results].sort((a, b) => {
+    switch (sortBy) {
+      case "relevance":
+        return b.relevanceScore - a.relevanceScore;
+      case "date":
+        return new Date(b.createdAt || 0).getTime() - new Date(a.createdAt || 0).getTime();
+      case "title":
+        return a.title.localeCompare(b.title);
+      default:
+        return 0;
+    }
+  }) : [];
+
+  if (!results) {
+    return null;
+  }
+
+  return (
+    <div>
+      {/* Results Statistics */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-4">
+          <span className="text-sm text-slate-600">
+            <span className="font-medium">{results?.totalCount || 0}</span> results found in{" "}
+            <span className="font-medium">{results?.searchTime?.toFixed(2) || '0.00'}</span> seconds
+          </span>
+          <div className="flex items-center gap-2">
+            <Circle className="w-2 h-2 fill-emerald-500 text-emerald-500" />
+            <span className="text-sm text-slate-600">Vector index active</span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              const nextSort = sortBy === "relevance" ? "date" : sortBy === "date" ? "title" : "relevance";
+              setSortBy(nextSort);
+            }}
+            className="text-slate-400 hover:text-slate-600"
+          >
+            <SortAsc className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-slate-400 hover:text-slate-600"
+          >
+            <Filter className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Search Results */}
+      <div className="space-y-4">
+        {sortedResults.map((result) => (
+          <ResultCard
+            key={result.id}
+            document={result}
+            isExpanded={expandedResults.has(result.id)}
+            isSaved={savedDocuments?.has(result.id) || false}
+            onToggleExpanded={() => onToggleExpanded(result.id)}
+            onAddCitation={onAddCitation}
+            onSaveDocument={onSaveDocument}
+          />
+        ))}
+      </div>
+
+      {/* Load More */}
+      {results?.results && results.results.length > 0 && results.totalCount > results.results.length && (
+        <div className="mt-8 text-center">
+          <Button 
+            variant="outline"
+            className="px-6 py-3"
+          >
+            Load More Results
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

client/src/components/knowledge-base/system-flow-diagram.tsx

@@ -0,0 +1,491 @@
+
+import React, { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { 
+  Search, 
+  Database, 
+  Brain, 
+  ArrowRight, 
+  FileText, 
+  Zap, 
+  GitBranch,
+  Target,
+  Layers,
+  RotateCcw
+} from 'lucide-react';
+
+interface FlowStep {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  details: string[];
+  tech: string[];
+  active: boolean;
+  completed: boolean;
+}
+
+const SystemFlowDiagram: React.FC = () => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [userQuery, setUserQuery] = useState("How does semantic search work?");
+  const [queryEmbedding, setQueryEmbedding] = useState<number[]>([]);
+  const [similarityScores, setSimilarityScores] = useState<{doc: string, score: number}[]>([]);
+
+  // Generate realistic embedding values for demonstration
+  const generateEmbedding = (text: string) => {
+    const seed = text.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    const random = (s: number) => {
+      const x = Math.sin(s) * 10000;
+      return x - Math.floor(x);
+    };
+    
+    return Array.from({length: 8}, (_, i) => 
+      Number((random(seed + i) * 2 - 1).toFixed(3))
+    );
+  };
+
+  const flowSteps: FlowStep[] = [
+    {
+      id: 'input',
+      title: '1. User Input',
+      description: 'User enters search query',
+      icon: <Search className="w-6 h-6" />,
+      details: [
+        `User types: "${userQuery}"`,
+        'Enhanced search interface with unified AI tools',
+        'React frontend with security validation',
+        'Express.js backend with rate limiting and security middleware'
+      ],
+      tech: ['React', 'TypeScript', 'Express.js', 'Security Middleware'],
+      active: false,
+      completed: false
+    },
+    {
+      id: 'enhancement',
+      title: '2. AI Query Enhancement',
+      description: 'Optionally enhance query with AI',
+      icon: <Brain className="w-6 h-6" />,
+      details: [
+        `Nebius AI analyzes "${userQuery}"`,
+        'DeepSeek-R1-0528 model provides query improvements',
+        'Suggests keywords and alternative phrasings',
+        'Falls back to original query if enhancement fails'
+      ],
+      tech: ['Nebius AI', 'DeepSeek-R1-0528', 'Query Analysis'],
+      active: false,
+      completed: false
+    },
+    {
+      id: 'search',
+      title: '3. Multi-Source Search',
+      description: 'Search across multiple knowledge sources',
+      icon: <Layers className="w-6 h-6" />,
+      details: [
+        'Parallel search across GitHub, Wikipedia, ArXiv',
+        'Local storage with sample academic data',
+        'Enhanced GitHub search with author filtering',
+        'Smart query routing to appropriate sources'
+      ],
+      tech: ['GitHub API', 'Wikipedia API', 'ArXiv API', 'Parallel Processing'],
+      active: false,
+      completed: false
+    },
+    {
+      id: 'validation',
+      title: '4. URL Validation',
+      description: 'Validate and verify result URLs',
+      icon: <Target className="w-6 h-6" />,
+      details: [
+        'Smart URL validation with ArXiv format checking',
+        'Content verification to detect error pages',
+        'Concurrent processing with rate limits',
+        'Trusted domain fast-path for reliable sources'
+      ],
+      tech: ['URL Validation', 'Content Verification', 'Rate Limiting'],
+      active: false,
+      completed: false
+    },
+    {
+      id: 'embeddings',
+      title: '5. Embedding Generation',
+      description: 'Generate semantic embeddings with Nebius',
+      icon: <Database className="w-6 h-6" />,
+      details: [
+        'BAAI/bge-en-icl model for vector generation',
+        'High-dimensional semantic representations',
+        'Fallback to mock embeddings for demos',
+        'Prepare embeddings for similarity matching'
+      ],
+      tech: ['Nebius AI', 'BAAI/bge-en-icl', 'Vector Embeddings'],
+      active: false,
+      completed: false
+    },
+    {
+      id: 'analysis',
+      title: '6. Document Analysis',
+      description: 'AI-powered document analysis (optional)',
+      icon: <FileText className="w-6 h-6" />,
+      details: [
+        'Nebius DeepSeek-R1 analyzes document content',
+        'Configurable output: markdown or plain text',
+        'Analysis types: summary, classification, key points',
+        'Clean output with thinking tag removal'
+      ],
+      tech: ['Nebius AI', 'DeepSeek-R1', 'Document Analysis'],
+      active: false,
+      completed: false
+    },
+    {
+      id: 'display',
+      title: '7. Results Display',
+      description: 'Present results to user',
+      icon: <Zap className="w-6 h-6" />,
+      details: [
+        'Format results in user-friendly cards',
+        'Show relevance scores and snippets',
+        'Enable citation tracking',
+        'Provide AI explanations on demand'
+      ],
+      tech: ['React', 'UI Components', 'State Management'],
+      active: false,
+      completed: false
+    }
+  ];
+
+  const [steps, setSteps] = useState(flowSteps);
+
+  useEffect(() => {
+    if (isPlaying) {
+      const interval = setInterval(() => {
+        setCurrentStep((prev) => {
+          if (prev < steps.length - 1) {
+            return prev + 1;
+          } else {
+            setIsPlaying(false);
+            return prev;
+          }
+        });
+      }, 2000);
+
+      return () => clearInterval(interval);
+    }
+  }, [isPlaying, steps.length]);
+
+  useEffect(() => {
+    setSteps(prevSteps => 
+      prevSteps.map((step, index) => ({
+        ...step,
+        active: index === currentStep,
+        completed: index < currentStep
+      }))
+    );
+    setProgress(((currentStep + 1) / steps.length) * 100);
+  }, [currentStep, steps.length]);
+
+  const resetAnimation = () => {
+    setCurrentStep(0);
+    setIsPlaying(false);
+    setProgress(0);
+  };
+
+  const playAnimation = () => {
+    if (currentStep === steps.length - 1) {
+      resetAnimation();
+    }
+    setIsPlaying(true);
+  };
+
+  return (
+    <div className="w-full max-w-7xl mx-auto p-6 space-y-6">
+      {/* Header */}
+      <div className="text-center space-y-4">
+        <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
+          KnowledgeBridge System Flow
+        </h2>
+        <p className="text-lg text-gray-600 dark:text-gray-400">
+          How your query becomes intelligent multi-source research with AI enhancement
+        </p>
+        
+        {/* Query Input */}
+        <div className="max-w-md mx-auto mb-6">
+          <label htmlFor="demo-query" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Demo Query:
+          </label>
+          <input
+            id="demo-query"
+            type="text"
+            value={userQuery}
+            onChange={(e) => setUserQuery(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white"
+            placeholder="Enter your query to see the process"
+          />
+        </div>
+        
+        {/* Controls */}
+        <div className="flex justify-center gap-4">
+          <Button 
+            onClick={playAnimation}
+            disabled={isPlaying}
+            className="flex items-center gap-2"
+          >
+            {isPlaying ? <RotateCcw className="w-4 h-4 animate-spin" /> : <Zap className="w-4 h-4" />}
+            {isPlaying ? 'Processing...' : 'Process Query'}
+          </Button>
+          <Button 
+            variant="outline" 
+            onClick={resetAnimation}
+            className="flex items-center gap-2"
+          >
+            <RotateCcw className="w-4 h-4" />
+            Reset
+          </Button>
+        </div>
+
+        {/* Progress Bar */}
+        <div className="w-full max-w-md mx-auto">
+          <Progress value={progress} className="h-2" />
+          <p className="text-sm text-gray-500 mt-2">
+            Step {currentStep + 1} of {steps.length}
+          </p>
+        </div>
+      </div>
+
+      {/* Flow Diagram */}
+      <div className="grid grid-cols-1 lg:grid-cols-7 gap-4">
+        {steps.map((step, index) => (
+          <div key={step.id} className="relative">
+            {/* Connection Arrow */}
+            {index < steps.length - 1 && (
+              <div className="hidden lg:flex absolute top-1/2 -right-2 transform -translate-y-1/2 z-10">
+                <ArrowRight className={`w-4 h-4 ${
+                  step.completed ? 'text-green-500' : 'text-gray-300'
+                }`} />
+              </div>
+            )}
+
+            {/* Step Card */}
+            <Card className={`
+              transition-all duration-500 cursor-pointer
+              ${step.active ? 'ring-2 ring-blue-500 shadow-lg scale-105' : ''}
+              ${step.completed ? 'bg-green-50 dark:bg-green-900/20' : ''}
+              ${!step.active && !step.completed ? 'opacity-60' : ''}
+            `}
+            onClick={() => setCurrentStep(index)}
+            >
+              <CardHeader className="pb-2">
+                <div className="flex items-center justify-between">
+                  <div className={`
+                    p-2 rounded-full transition-colors
+                    ${step.active ? 'bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-400' : 
+                      step.completed ? 'bg-green-100 text-green-600 dark:bg-green-900 dark:text-green-400' :
+                      'bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-600'}
+                  `}>
+                    {step.icon}
+                  </div>
+                  {step.completed && (
+                    <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
+                      <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                      </svg>
+                    </div>
+                  )}
+                </div>
+                <CardTitle className="text-sm font-semibold">
+                  {step.title}
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <p className="text-xs text-gray-600 dark:text-gray-400">
+                  {step.description}
+                </p>
+                
+                {/* Technology Tags */}
+                <div className="flex flex-wrap gap-1">
+                  {step.tech.map((tech) => (
+                    <Badge key={tech} variant="secondary" className="text-xs">
+                      {tech}
+                    </Badge>
+                  ))}
+                </div>
+
+                {/* Details (shown when active) */}
+                {step.active && (
+                  <div className="space-y-2 animate-in slide-in-from-top-2 duration-300">
+                    <h4 className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+                      Process Details:
+                    </h4>
+                    <ul className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
+                      {step.details.map((detail, i) => (
+                        <li key={i} className="flex items-start gap-1">
+                          <span className="text-blue-500 mt-1">•</span>
+                          <span>{detail}</span>
+                        </li>
+                      ))}
+                    </ul>
+                    
+                    {/* Special visualization for embeddings step */}
+                    {step.id === 'embeddings' && (
+                      <div className="mt-3 p-2 bg-gray-100 dark:bg-gray-800 rounded text-xs">
+                        <div className="font-mono text-purple-600 dark:text-purple-400">
+                          Vector: [{generateEmbedding(userQuery).slice(0, 4).join(', ')}, ...]
+                        </div>
+                        <div className="text-gray-500 mt-1">
+                          Dimensions: 1536 | Magnitude: {Math.sqrt(generateEmbedding(userQuery).reduce((sum, val) => sum + val * val, 0)).toFixed(3)}
+                        </div>
+                      </div>
+                    )}
+                    
+                    {/* Special visualization for validation step */}
+                    {step.id === 'validation' && (
+                      <div className="mt-3 space-y-1">
+                        {[
+                          { doc: 'github.com/research/ai', status: 'valid' },
+                          { doc: 'arxiv.org/abs/2024.12345', status: 'verified' },
+                          { doc: 'invalid-url.broken', status: 'filtered' }
+                        ].map((result, i) => (
+                          <div key={i} className="flex justify-between items-center p-1 bg-gray-100 dark:bg-gray-800 rounded text-xs">
+                            <span className="truncate">{result.doc}</span>
+                            <span className={`font-mono ${result.status === 'filtered' ? 'text-red-600' : 'text-green-600'}`}>{result.status}</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        ))}
+      </div>
+
+      {/* Live Embedding Demo */}
+      <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-xl p-6 mt-8">
+        <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+          <Brain className="w-5 h-5 text-purple-600" />
+          Live Embedding Calculator
+        </h3>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Text to Vector */}
+          <div className="space-y-3">
+            <h4 className="font-semibold text-gray-700 dark:text-gray-300">Text → Vector Conversion</h4>
+            <div className="bg-white dark:bg-gray-800 rounded-lg p-4 space-y-3">
+              <div>
+                <label className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Input:</label>
+                <input
+                  type="text"
+                  value={userQuery}
+                  onChange={(e) => setUserQuery(e.target.value)}
+                  className="w-full font-mono text-sm bg-gray-100 dark:bg-gray-700 p-2 rounded border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:text-gray-100"
+                  placeholder="Enter text to generate embeddings..."
+                />
+              </div>
+              <div>
+                <span className="text-sm text-gray-600 dark:text-gray-400">Embedding (first 8 dims):</span>
+                <div className="font-mono text-xs bg-purple-100 dark:bg-purple-900/50 p-2 rounded overflow-x-auto">
+                  [{generateEmbedding(userQuery).join(', ')}]
+                </div>
+              </div>
+              <div className="text-xs text-gray-500">
+                Vector magnitude: {Math.sqrt(generateEmbedding(userQuery).reduce((sum, val) => sum + val * val, 0)).toFixed(3)}
+              </div>
+            </div>
+          </div>
+
+          {/* Similarity Calculations */}
+          <div className="space-y-3">
+            <h4 className="font-semibold text-gray-700 dark:text-gray-300">Similarity Scores</h4>
+            <div className="bg-white dark:bg-gray-800 rounded-lg p-4 space-y-2">
+              {[
+                { doc: 'AI Research Paper', vector: [0.2, 0.8, -0.1, 0.5, 0.3, -0.4, 0.7, 0.1] },
+                { doc: 'GitHub Repository', vector: [0.1, 0.6, 0.2, -0.3, 0.8, 0.4, -0.2, 0.5] },
+                { doc: 'Wikipedia Article', vector: [-0.3, 0.4, 0.7, 0.2, -0.1, 0.6, 0.3, -0.5] }
+              ].map((doc, i) => {
+                const queryVec = generateEmbedding(userQuery);
+                const dotProduct = queryVec.reduce((sum, val, idx) => sum + val * doc.vector[idx], 0);
+                const queryMag = Math.sqrt(queryVec.reduce((sum, val) => sum + val * val, 0));
+                const docMag = Math.sqrt(doc.vector.reduce((sum, val) => sum + val * val, 0));
+                const similarity = dotProduct / (queryMag * docMag);
+                
+                return (
+                  <div key={i} className="flex justify-between items-center p-2 bg-gray-50 dark:bg-gray-700 rounded">
+                    <span className="text-sm">{doc.doc}</span>
+                    <div className="flex items-center gap-2">
+                      <div className={`w-16 h-2 rounded-full ${similarity > 0.3 ? 'bg-green-400' : similarity > 0.1 ? 'bg-yellow-400' : 'bg-gray-300'}`} 
+                           style={{width: `${Math.max(20, Math.abs(similarity) * 60)}px`}}></div>
+                      <span className="font-mono text-xs w-12 text-right">{similarity.toFixed(2)}</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Key Concepts */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-lg">
+              <Brain className="w-5 h-5 text-purple-600" />
+              Embeddings
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Nebius BAAI/bge-en-icl generates semantic vectors. Similar concepts have similar vector values.
+            </p>
+            <div className="bg-gray-100 dark:bg-gray-800 p-2 rounded text-xs font-mono">
+              "AI research" → [0.1, 0.3, 0.8, ...]<br/>
+              "machine learning" → [0.2, 0.4, 0.7, ...]
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-lg">
+              <Database className="w-5 h-5 text-blue-600" />
+              Vector Search
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Multi-source search across GitHub, ArXiv, Wikipedia with smart URL validation.
+            </p>
+            <div className="bg-gray-100 dark:bg-gray-800 p-2 rounded text-xs">
+              GitHub API: repositories + code<br/>
+              ArXiv API: academic papers<br/>
+              Wikipedia: authoritative content
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-lg">
+              <GitBranch className="w-5 h-5 text-green-600" />
+              AI Pipeline
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              KnowledgeBridge combines multi-source search with Nebius AI for intelligent research synthesis.
+            </p>
+            <div className="bg-gray-100 dark:bg-gray-800 p-2 rounded text-xs">
+              Query → Enhance → Search → Validate → Analyze
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default SystemFlowDiagram;

client/src/components/theme-provider.tsx

@@ -0,0 +1,64 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "light",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "light",
+  storageKey = "ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(() => {
+    if (typeof window !== "undefined") {
+      return (localStorage.getItem(storageKey) as Theme) || defaultTheme;
+    }
+    return defaultTheme;
+  });
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};

client/src/components/theme-toggle.tsx

@@ -0,0 +1,20 @@
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTheme } from "./theme-provider";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      className="h-9 w-9"
+    >
+      <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" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}

client/src/components/ui/accordion.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

client/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,139 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

client/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

client/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }

client/src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

client/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

client/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

client/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

client/src/components/ui/calendar.tsx

@@ -0,0 +1,68 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

client/src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

client/src/components/ui/carousel.tsx

@@ -0,0 +1,260 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

client/src/components/ui/chart.tsx

@@ -0,0 +1,365 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

client/src/components/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

client/src/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

client/src/components/ui/command.tsx

@@ -0,0 +1,151 @@
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

client/src/components/ui/context-menu.tsx

@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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 origin-[--radix-context-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

client/src/components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

client/src/components/ui/drawer.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

client/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

client/src/components/ui/form.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

client/src/components/ui/hover-card.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-[--radix-hover-card-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

client/src/components/ui/input-otp.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Dot } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

client/src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

client/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

client/src/components/ui/menubar.tsx

@@ -0,0 +1,256 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup {...props} />
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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 origin-[--radix-menubar-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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 origin-[--radix-menubar-content-transform-origin]",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}

client/src/components/ui/navigation-menu.tsx

@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

client/src/components/ui/pagination.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

client/src/components/ui/popover.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-[--radix-popover-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

client/src/components/ui/progress.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

client/src/components/ui/radio-group.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }