Upload 73 files

web/src/App.tsx

@@ -0,0 +1,1159 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Header } from './components/Header';
+import { LeftSidebar } from './components/LeftSidebar';
+import { ChatArea } from './components/ChatArea';
+import { LoginScreen } from './components/LoginScreen';
+import { ProfileEditor } from './components/ProfileEditor';
+import { ReviewBanner } from './components/ReviewBanner';
+import { Onboarding } from './components/Onboarding';
+import { Menu, X, User, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from './components/ui/button';
+import { Toaster } from './components/ui/sonner';
+import { toast } from 'sonner';
+
+export interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  references?: string[];
+  sender?: GroupMember; // For group chat
+  showNextButton?: boolean; // For quiz mode
+  questionData?: {
+    type: 'multiple-choice' | 'fill-in-blank' | 'open-ended';
+    question: string;
+    options?: string[];
+    correctAnswer: string;
+    explanation: string;
+    sampleAnswer?: string;
+  };
+}
+
+export interface User {
+  name: string;
+  email: string;
+}
+
+export interface GroupMember {
+  id: string;
+  name: string;
+  email: string;
+  avatar?: string;
+  isAI?: boolean;
+}
+
+export type SpaceType = 'individual' | 'group';
+
+export interface CourseInfo {
+  id: string;
+  name: string;
+  instructor: {
+    name: string;
+    email: string;
+  };
+  teachingAssistant: {
+    name: string;
+    email: string;
+  };
+}
+
+export interface Workspace {
+  id: string;
+  name: string;
+  type: SpaceType;
+  avatar: string;
+  members?: GroupMember[];
+  category?: 'course' | 'personal';
+  courseName?: string;
+  courseInfo?: CourseInfo;
+  isEditable?: boolean; // For personal interest workspaces
+}
+
+export type FileType = 'syllabus' | 'lecture-slides' | 'literature-review' | 'other';
+
+export interface UploadedFile {
+  file: File;
+  type: FileType;
+}
+
+export type LearningMode = 'general' | 'concept' | 'socratic' | 'exam' | 'assignment' | 'summary';
+export type Language = 'auto' | 'en' | 'zh';
+export type ChatMode = 'ask' | 'review' | 'quiz';
+
+export interface SavedItem {
+  id: string;
+  title: string;
+  content: string;
+  type: 'export' | 'quiz' | 'summary';
+  timestamp: Date;
+  isSaved: boolean;
+  format?: 'pdf' | 'text';
+  workspaceId: string;
+}
+
+export interface SavedChat {
+  id: string;
+  title: string;
+  messages: Message[];
+  chatMode: ChatMode;
+  timestamp: Date;
+}
+
+function App() {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    const saved = localStorage.getItem('theme');
+    return saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  });
+  const [user, setUser] = useState<User | null>(null);
+  // Global current course selection
+  const [currentCourseId, setCurrentCourseId] = useState<string>(() => localStorage.getItem('myspace_selected_course') || 'course1');
+
+  // Available courses with instructor/TA info
+  const availableCourses: CourseInfo[] = [
+    {
+      id: 'course1',
+      name: 'Introduction to AI',
+      instructor: { name: 'Dr. Sarah Johnson', email: 'sarah.johnson@university.edu' },
+      teachingAssistant: { name: 'Michael Chen', email: 'michael.chen@university.edu' }
+    },
+    {
+      id: 'course2',
+      name: 'Machine Learning',
+      instructor: { name: 'Prof. David Lee', email: 'david.lee@university.edu' },
+      teachingAssistant: { name: 'Emily Zhang', email: 'emily.zhang@university.edu' }
+    },
+    {
+      id: 'course3',
+      name: 'Data Structures',
+      instructor: { name: 'Dr. Robert Smith', email: 'robert.smith@university.edu' },
+      teachingAssistant: { name: 'Lisa Wang', email: 'lisa.wang@university.edu' }
+    },
+    {
+      id: 'course4',
+      name: 'Web Development',
+      instructor: { name: 'Prof. Maria Garcia', email: 'maria.garcia@university.edu' },
+      teachingAssistant: { name: 'James Brown', email: 'james.brown@university.edu' }
+    },
+  ];
+  
+  // Separate messages for each chat mode
+  const [askMessages, setAskMessages] = useState<Message[]>([
+    {
+      id: '1',
+      role: 'assistant',
+      content: "👋 Hi! I'm Clare, your AI teaching assistant. I'm here to help you learn through personalized tutoring. Feel free to ask me anything about the course materials, or upload your documents to get started!",
+      timestamp: new Date(),
+    }
+  ]);
+  const [reviewMessages, setReviewMessages] = useState<Message[]>([
+    {
+      id: 'review-1',
+      role: 'assistant',
+      content: "📚 Welcome to Review mode! I'll help you review and consolidate your learning. Let's go through what you've learned!",
+      timestamp: new Date(),
+    }
+  ]);
+  const [quizMessages, setQuizMessages] = useState<Message[]>([
+    {
+      id: 'quiz-1',
+      role: 'assistant',
+      content: "🎯 Welcome to Quiz mode! I'll test your understanding with personalized questions based on your learning history. Ready to start?",
+      timestamp: new Date(),
+    }
+  ]);
+  
+  const [learningMode, setLearningMode] = useState<LearningMode>('concept');
+  const [language, setLanguage] = useState<Language>('auto');
+  const [chatMode, setChatMode] = useState<ChatMode>('ask');
+  
+  // Get current messages based on chat mode
+  const messages = chatMode === 'ask' ? askMessages : chatMode === 'review' ? reviewMessages : quizMessages;
+  
+  // Track previous chat mode to detect mode changes
+  const prevChatModeRef = useRef<ChatMode>(chatMode);
+  
+  // Ensure welcome message exists when switching modes or when messages are empty
+  useEffect(() => {
+    // Check the actual state arrays, not the computed messages
+    let currentMessages: Message[];
+    let setCurrentMessages: (messages: Message[]) => void;
+    
+    if (chatMode === 'ask') {
+      currentMessages = askMessages;
+      setCurrentMessages = setAskMessages;
+    } else if (chatMode === 'review') {
+      currentMessages = reviewMessages;
+      setCurrentMessages = setReviewMessages;
+    } else {
+      currentMessages = quizMessages;
+      setCurrentMessages = setQuizMessages;
+    }
+    
+    const hasUserMessages = currentMessages.some(msg => msg.role === 'user');
+    const expectedWelcomeId = chatMode === 'ask' ? '1' : chatMode === 'review' ? 'review-1' : 'quiz-1';
+    const hasWelcomeMessage = currentMessages.some(msg => msg.id === expectedWelcomeId && msg.role === 'assistant');
+    const modeChanged = prevChatModeRef.current !== chatMode;
+    
+    // If mode changed or messages are empty or missing welcome message, restore welcome message
+    if ((modeChanged || currentMessages.length === 0 || !hasWelcomeMessage) && !hasUserMessages) {
+      const initialMessages: Record<ChatMode, Message[]> = {
+        ask: [{
+          id: '1',
+          role: 'assistant',
+          content: "👋 Hi! I'm Clare, your AI teaching assistant. I'm here to help you learn through personalized tutoring. Feel free to ask me anything about the course materials, or upload your documents to get started!",
+          timestamp: new Date(),
+        }],
+        review: [{
+          id: 'review-1',
+          role: 'assistant',
+          content: "📚 Welcome to Review mode! I'll help you review and consolidate your learning. Let's go through what you've learned!",
+          timestamp: new Date(),
+        }],
+        quiz: [{
+          id: 'quiz-1',
+          role: 'assistant',
+          content: "🎯 Welcome to Quiz mode! I'll test your understanding with personalized questions based on your learning history. Ready to start?",
+          timestamp: new Date(),
+        }],
+      };
+      
+      setCurrentMessages(initialMessages[chatMode]);
+    }
+    
+    prevChatModeRef.current = chatMode;
+  }, [chatMode, askMessages.length, reviewMessages.length, quizMessages.length]); // Only depend on lengths to avoid infinite loops
+  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+  const [memoryProgress, setMemoryProgress] = useState(36);
+  const [quizState, setQuizState] = useState<{
+    currentQuestion: number;
+    waitingForAnswer: boolean;
+    showNextButton: boolean;
+  }>({
+    currentQuestion: 0,
+    waitingForAnswer: false,
+    showNextButton: false,
+  });
+  const [isTyping, setIsTyping] = useState(false);
+  const [leftSidebarOpen, setLeftSidebarOpen] = useState(false);
+  const [leftPanelVisible, setLeftPanelVisible] = useState(true);
+  const [showProfileEditor, setShowProfileEditor] = useState(false);
+  const [showOnboarding, setShowOnboarding] = useState(false);
+  const [exportResult, setExportResult] = useState('');
+  // Review banner state
+  const [showReviewBanner, setShowReviewBanner] = useState(() => {
+    // Temporarily force show for testing - remove this after confirming it works
+    // const dismissed = localStorage.getItem('reviewBannerDismissed');
+    // return !dismissed || dismissed === 'false';
+    return true; // Force show for testing
+  });
+  const [resultType, setResultType] = useState<'export' | 'quiz' | 'summary' | null>(null);
+  const [showClearDialog, setShowClearDialog] = useState(false);
+  
+  // Saved conversations/summaries
+  const [savedItems, setSavedItems] = useState<SavedItem[]>([]);
+  const [recentlySavedId, setRecentlySavedId] = useState<string | null>(null);
+  
+  // Saved chats
+  const [savedChats, setSavedChats] = useState<SavedChat[]>([]);
+  
+  // Mock group members
+  const [groupMembers] = useState<GroupMember[]>([
+    { id: 'clare', name: 'Clare AI', email: 'clare@ai.assistant', isAI: true },
+    { id: '1', name: 'Sarah Johnson', email: 'sarah.j@university.edu' },
+    { id: '2', name: 'Michael Chen', email: 'michael.c@university.edu' },
+    { id: '3', name: 'Emma Williams', email: 'emma.w@university.edu' },
+  ]);
+
+  // Workspaces - individual workspace uses user's avatar, group workspaces use group avatars
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string>('individual');
+
+  // Initialize workspaces when user logs in
+  useEffect(() => {
+    if (user) {
+      const userAvatar = `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`;
+      const course1Info = availableCourses.find(c => c.id === 'course1');
+      const course2Info = availableCourses.find(c => c.name === 'AI Ethics');
+      
+      setWorkspaces([
+        {
+          id: 'individual',
+          name: 'My Space',
+          type: 'individual',
+          avatar: userAvatar,
+        },
+        {
+          id: 'group-1',
+          name: 'CS 101 Study Group',
+          type: 'group',
+          avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=cs101group',
+          members: groupMembers,
+          category: 'course',
+          courseName: course1Info?.name || 'CS 101',
+          courseInfo: course1Info,
+        },
+        {
+          id: 'group-2',
+          name: 'AI Ethics Team',
+          type: 'group',
+          avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=aiethicsteam',
+          members: groupMembers,
+          category: 'course',
+          courseName: course2Info?.name || 'AI Ethics',
+          courseInfo: course2Info,
+        },
+      ]);
+    }
+  }, [user, groupMembers, availableCourses]);
+
+  // Get current workspace
+  const currentWorkspace = workspaces.find(w => w.id === currentWorkspaceId) || workspaces[0];
+  const spaceType: SpaceType = currentWorkspace?.type || 'individual';
+
+  // Keep current course in sync with workspace type
+  useEffect(() => {
+    if (!currentWorkspace) return;
+    if (currentWorkspace.type === 'group' && currentWorkspace.category === 'course' && currentWorkspace.courseName) {
+      setCurrentCourseId(currentWorkspace.courseName);
+    } else if (currentWorkspace.type === 'individual') {
+      const saved = localStorage.getItem('myspace_selected_course');
+      if (saved) setCurrentCourseId(saved);
+    }
+  }, [currentWorkspaceId, currentWorkspace]);
+
+  // Persist selection for My Space
+  useEffect(() => {
+    if (currentWorkspace?.type === 'individual') {
+      localStorage.setItem('myspace_selected_course', currentCourseId);
+    }
+  }, [currentCourseId, currentWorkspace]);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', isDarkMode);
+    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+  }, [isDarkMode]);
+
+  const generateQuizQuestion = () => {
+    const questions: Array<{
+      type: 'multiple-choice' | 'fill-in-blank' | 'open-ended';
+      question: string;
+      options?: string[];
+      correctAnswer: string;
+      explanation: string;
+      sampleAnswer?: string;
+    }> = [
+      {
+        type: 'multiple-choice',
+        question: "Which of the following is NOT a principle of Responsible AI?",
+        options: ["A) Fairness", "B) Transparency", "C) Profit Maximization", "D) Accountability"],
+        correctAnswer: "C",
+        explanation: "Profit Maximization is not a principle of Responsible AI. The key principles are Fairness, Transparency, and Accountability."
+      },
+      {
+        type: 'fill-in-blank',
+        question: "Algorithmic fairness ensures that AI systems do not discriminate against individuals based on their _____.",
+        correctAnswer: "protected characteristics",
+        explanation: "Protected characteristics include attributes like race, gender, age, religion, etc. AI systems should not discriminate based on these."
+      },
+      {
+        type: 'open-ended',
+        question: "Explain why transparency is important in AI systems.",
+        correctAnswer: "Transparency allows users to understand how AI systems make decisions, which builds trust and enables accountability.",
+        sampleAnswer: "Transparency allows users to understand how AI systems make decisions, which builds trust and enables accountability.",
+        explanation: "Transparency is crucial because it helps users understand AI decision-making processes, enables debugging, and ensures accountability."
+      }
+    ];
+    
+    const randomIndex = Math.floor(Math.random() * questions.length);
+    return questions[randomIndex];
+  };
+
+  const handleSendMessage = (content: string) => {
+    if (!content.trim() || !user) return;
+
+    // Attach sender info for all user messages
+    const sender: GroupMember = {
+      id: user.email,
+      name: user.name,
+      email: user.email,
+      avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`,
+    };
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content,
+      timestamp: new Date(),
+      sender,
+    };
+
+    // Add user message to the appropriate mode's message list
+    if (chatMode === 'ask') {
+      setAskMessages(prev => [...prev, userMessage]);
+    } else if (chatMode === 'review') {
+      setReviewMessages(prev => [...prev, userMessage]);
+    } else {
+      setQuizMessages(prev => [...prev, userMessage]);
+    }
+
+    // Handle Quiz mode differently
+    if (chatMode === 'quiz') {
+      if (quizState.waitingForAnswer) {
+        // User is answering a question
+        const isCorrect = Math.random() > 0.3; // Simulate answer checking
+        
+        setIsTyping(true);
+        setTimeout(() => {
+          const feedback = isCorrect 
+            ? "✅ Correct! Great job!"
+            : "❌ Not quite right, but good effort!";
+          
+          const explanation = "Here's the explanation: The correct answer demonstrates understanding of the key concepts. Let me break it down for you...";
+          
+          const assistantMessage: Message = {
+            id: (Date.now() + 1).toString(),
+            role: 'assistant',
+            content: `${feedback}\n\n${explanation}`,
+            timestamp: new Date(),
+            sender: spaceType === 'group' ? groupMembers.find(m => m.isAI) : undefined,
+            showNextButton: true,
+          };
+
+          // Close typing indicator first
+          setIsTyping(false);
+          
+          // Wait a bit to ensure typing indicator disappears before adding message
+          setTimeout(() => {
+            setQuizMessages(prev => [...prev, assistantMessage]);
+            setQuizState(prev => ({ ...prev, waitingForAnswer: false, showNextButton: true }));
+          }, 50);
+        }, 2000);
+      }
+      return;
+    }
+
+    // Handle Ask and Review modes
+    // Respond in all workspaces to keep conversations continuous
+    const shouldAIRespond = true;
+
+    if (shouldAIRespond) {
+      setIsTyping(true);
+      setTimeout(() => {
+        let response = '';
+        
+        if (chatMode === 'ask') {
+          const responses: Record<LearningMode, string> = {
+            general: "I'd be happy to help! To provide you with the most accurate and relevant answer, could you please provide some context about what you're asking? For example, what subject or topic is this related to?",
+            concept: "Great question! Let me break this concept down for you. In Responsible AI, this relates to ensuring our AI systems are fair, transparent, and accountable. Would you like me to explain any specific aspect in more detail?",
+            socratic: "That's an interesting point! Let me ask you this: What do you think are the key ethical considerations when deploying AI systems? Take a moment to think about it.",
+            exam: "Let me test your understanding with a quick question: Which of the following is NOT a principle of Responsible AI? A) Fairness B) Transparency C) Profit Maximization D) Accountability",
+            assignment: "I can help you with that assignment! Let's break it down into manageable steps. First, what specific aspect are you working on?",
+            summary: "Here's a quick summary: Responsible AI focuses on developing and deploying AI systems that are ethical, fair, transparent, and accountable to society.",
+          };
+          response = responses[learningMode];
+        } else if (chatMode === 'review') {
+          // Check if this is a review request by checking window storage
+          const reviewData = (window as any).__lastReviewData;
+          if (reviewData) {
+            if (reviewData.startsWith('REVIEW_TOPIC:')) {
+              // Parse review topic data
+              const data = reviewData.replace('REVIEW_TOPIC:', '').split('|');
+              const [title, previousQuestion, memoryRetention, schedule, status, weight, lastReviewed] = data;
+              
+              response = `Let's review **${title}** together!\n\n**Your Previous Question:**\n"${previousQuestion}"\n\n**Review Details:**\n- **Memory Retention:** ${memoryRetention}%\n- **Schedule:** ${schedule}\n- **Status:** ${status.toUpperCase()}\n- **Weight:** ${weight}%\n- **Last Reviewed:** ${lastReviewed}\n\nLet's go through this topic step by step. What would you like to focus on first?`;
+              // Clear the stored data
+              delete (window as any).__lastReviewData;
+            } else if (reviewData === 'REVIEW_ALL') {
+              response = `I'll help you review all the topics that need your attention. Based on your learning history, here are the topics we should focus on:\n\n1. **Main Concept of Lab 3** (Urgent - Memory Retention: 25%)\n2. **Effective Prompt Engineering** (Review - Memory Retention: 60%)\n3. **Objective LLM Evaluation** (Stable - Memory Retention: 90%)\n\nLet's start with the most urgent ones first. Which topic would you like to begin with?`;
+              // Clear the stored data
+              delete (window as any).__lastReviewData;
+            } else {
+              response = "Let's review what you've learned! Based on your previous conversations, here are the key concepts we covered: [Review content would go here]";
+            }
+          } else {
+            response = "Let's review what you've learned! Based on your previous conversations, here are the key concepts we covered: [Review content would go here]";
+          }
+        }
+
+        const assistantMessage: Message = {
+          id: (Date.now() + 1).toString(),
+          role: 'assistant',
+          content: response,
+          timestamp: new Date(),
+          references: chatMode === 'ask' ? ['Module 10, Section 2.3', 'Lecture Notes - Week 5'] : undefined,
+          sender: spaceType === 'group' ? groupMembers.find(m => m.isAI) : undefined,
+        };
+
+        // Close typing indicator first
+        setIsTyping(false);
+        
+        // Wait a bit to ensure typing indicator disappears before adding message
+        setTimeout(() => {
+          if (chatMode === 'ask') {
+            setAskMessages(prev => [...prev, assistantMessage]);
+          } else if (chatMode === 'review') {
+            setReviewMessages(prev => [...prev, assistantMessage]);
+          }
+        }, 50);
+      }, 2000);
+    }
+  };
+
+  const handleNextQuestion = () => {
+    setIsTyping(true);
+    const question = generateQuizQuestion();
+    let questionText = question.question;
+    
+    if (question.type === 'multiple-choice') {
+      questionText += '\n\n' + question.options.join('\n');
+    }
+    
+    setTimeout(() => {
+      const assistantMessage: Message = {
+        id: Date.now().toString(),
+        role: 'assistant',
+        content: questionText,
+        timestamp: new Date(),
+        sender: spaceType === 'group' ? groupMembers.find(m => m.isAI) : undefined,
+        questionData: question,
+      };
+
+      // Close typing indicator first
+      setIsTyping(false);
+      
+      // Wait a bit to ensure typing indicator disappears before adding message
+      setTimeout(() => {
+        setQuizMessages(prev => [...prev, assistantMessage]);
+        setQuizState(prev => ({ 
+          ...prev, 
+          currentQuestion: prev.currentQuestion + 1,
+          waitingForAnswer: true,
+          showNextButton: false 
+        }));
+      }, 50);
+    }, 2000);
+  };
+
+  const handleStartQuiz = () => {
+    handleNextQuestion();
+  };
+
+  const handleFileUpload = (files: File[]) => {
+    const newFiles: UploadedFile[] = files.map(file => ({
+      file,
+      type: 'other' as FileType, // Default type
+    }));
+    setUploadedFiles(prev => [...prev, ...newFiles]);
+  };
+
+  const handleRemoveFile = (index: number) => {
+    setUploadedFiles(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handleFileTypeChange = (index: number, type: FileType) => {
+    setUploadedFiles(prev => prev.map((file, i) => 
+      i === index ? { ...file, type } : file
+    ));
+  };
+
+  // Helper function to check if current chat is already saved
+  const isCurrentChatSaved = (): SavedChat | null => {
+    if (messages.length <= 1) return null;
+    
+    // Find a saved chat that matches the current messages and chatMode
+    return savedChats.find(chat => {
+      if (chat.chatMode !== chatMode) return false;
+      if (chat.messages.length !== messages.length) return false;
+      
+      // Check if all messages match
+      return chat.messages.every((savedMsg, index) => {
+        const currentMsg = messages[index];
+        return (
+          savedMsg.id === currentMsg.id &&
+          savedMsg.role === currentMsg.role &&
+          savedMsg.content === currentMsg.content
+        );
+      });
+    }) || null;
+  };
+
+  const handleSaveChat = () => {
+    if (messages.length <= 1) {
+      toast.info('No conversation to save');
+      return;
+    }
+    
+    // Check if already saved
+    const existingChat = isCurrentChatSaved();
+    if (existingChat) {
+      // Unsave: remove from saved chats
+      handleDeleteSavedChat(existingChat.id);
+      toast.success('Chat unsaved');
+      return;
+    }
+    
+    // Save: add new chat
+    const title = `Chat - ${chatMode === 'ask' ? 'Ask' : chatMode === 'review' ? 'Review' : 'Quiz'} - ${new Date().toLocaleDateString()}`;
+    const newChat: SavedChat = {
+      id: Date.now().toString(),
+      title,
+      messages: [...messages],
+      chatMode,
+      timestamp: new Date(),
+    };
+    
+    setSavedChats(prev => [newChat, ...prev]);
+    setLeftPanelVisible(true);
+    toast.success('Chat saved!');
+  };
+
+  const handleLoadChat = (savedChat: SavedChat) => {
+    // Set the chat mode first
+    setChatMode(savedChat.chatMode);
+    
+    // Then set the messages for that mode
+    if (savedChat.chatMode === 'ask') {
+      setAskMessages(savedChat.messages);
+    } else if (savedChat.chatMode === 'review') {
+      setReviewMessages(savedChat.messages);
+    } else {
+      setQuizMessages(savedChat.messages);
+      // Reset quiz state
+      setQuizState({
+        currentQuestion: 0,
+        waitingForAnswer: false,
+        showNextButton: false,
+      });
+    }
+    
+    toast.success('Chat loaded!');
+  };
+
+  const handleDeleteSavedChat = (id: string) => {
+    setSavedChats(prev => prev.filter(chat => chat.id !== id));
+    toast.success('Chat deleted');
+  };
+
+  const handleRenameSavedChat = (id: string, newTitle: string) => {
+    setSavedChats(prev => prev.map(chat => 
+      chat.id === id ? { ...chat, title: newTitle } : chat
+    ));
+    toast.success('Chat renamed');
+  };
+
+  const handleClearConversation = (shouldSave: boolean = false) => {
+    if (shouldSave) {
+      handleSaveChat();
+    }
+    
+    const initialMessages: Record<ChatMode, Message[]> = {
+      ask: [{
+        id: '1',
+        role: 'assistant',
+        content: "👋 Hi! I'm Clare, your AI teaching assistant. I'm here to help you learn through personalized tutoring. Feel free to ask me anything about the course materials, or upload your documents to get started!",
+        timestamp: new Date(),
+      }],
+      review: [{
+        id: 'review-1',
+        role: 'assistant',
+        content: "📚 Welcome to Review mode! I'll help you review and consolidate your learning. Let's go through what you've learned!",
+        timestamp: new Date(),
+      }],
+      quiz: [{
+        id: 'quiz-1',
+        role: 'assistant',
+        content: "🎯 Welcome to Quiz mode! I'll test your understanding with personalized questions based on your learning history. Ready to start?",
+        timestamp: new Date(),
+      }],
+    };
+    
+    // Clear only the current mode's conversation
+    if (chatMode === 'ask') {
+      setAskMessages(initialMessages.ask);
+    } else if (chatMode === 'review') {
+      setReviewMessages(initialMessages.review);
+    } else {
+      setQuizMessages(initialMessages.quiz);
+      setQuizState({
+        currentQuestion: 0,
+        waitingForAnswer: false,
+        showNextButton: false,
+      });
+    }
+  };
+
+  const handleExport = () => {
+    const result = `# Conversation Export
+Date: ${new Date().toLocaleDateString()}
+Student: ${user?.name}
+
+## Summary
+This conversation covered key concepts in Module 10 – Responsible AI, including ethical considerations, fairness, transparency, and accountability in AI systems.
+
+## Key Takeaways
+1. Understanding the principles of Responsible AI
+2. Real-world applications and implications
+3. Best practices for ethical AI development
+
+Exported successfully! ✓`;
+    
+    setExportResult(result);
+    setResultType('export');
+    toast.success('Conversation exported!');
+  };
+
+  const handleQuiz = () => {
+    const quiz = `# Micro-Quiz: Responsible AI
+
+**Question 1:** Which of the following is a key principle of Responsible AI?
+a) Profit maximization
+b) Transparency
+c) Rapid deployment
+d) Cost reduction
+
+**Question 2:** What is algorithmic fairness?
+(Short answer expected)
+
+**Question 3:** True or False: AI systems should always prioritize accuracy over fairness.
+
+Generate quiz based on your conversation!`;
+    
+    setExportResult(quiz);
+    setResultType('quiz');
+    toast.success('Quiz generated!');
+  };
+
+  const handleSummary = () => {
+    const summary = `# Learning Summary
+
+## Today's Session
+**Duration:** 25 minutes
+**Topics Covered:** 3
+**Messages Exchanged:** 12
+
+## Key Concepts Discussed
+• Principles of Responsible AI
+• Ethical considerations in AI development
+• Fairness and transparency in algorithms
+
+## Recommended Next Steps
+1. Review Module 10, Section 2.3
+2. Complete practice quiz on algorithmic fairness
+3. Read additional resources on AI ethics
+
+## Progress Update
+You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
+    
+    setExportResult(summary);
+    setResultType('summary');
+    toast.success('Summary generated!');
+  };
+
+  const handleSave = (
+    content: string,
+    type: 'export' | 'quiz' | 'summary',
+    saveAsChat: boolean = false,
+    format: 'pdf' | 'text' = 'text',
+    workspaceId?: string
+  ) => {
+    if (!content.trim()) return;
+    
+    // Summary should always be saved as file, not chat
+    // If saving as chat (from RightPanel export/quiz only, not summary)
+    if (saveAsChat && type !== 'summary') {
+      // Convert the export result to a chat format
+      // Create messages from the export content
+      const chatMessages: Message[] = [
+        {
+          id: '1',
+          role: 'assistant',
+          content: "👋 Hi! I'm Clare, your AI teaching assistant. I'm here to help you learn through personalized tutoring. Feel free to ask me anything about the course materials, or upload your documents to get started!",
+          timestamp: new Date(),
+        },
+        {
+          id: Date.now().toString(),
+          role: 'assistant',
+          content,
+          timestamp: new Date(),
+        }
+      ];
+      
+      const title = type === 'export' ? 'Exported Conversation' : 'Micro-Quiz';
+      const newChat: SavedChat = {
+        id: Date.now().toString(),
+        title: `${title} - ${new Date().toLocaleDateString()}`,
+        messages: chatMessages,
+        chatMode: 'ask',
+        timestamp: new Date(),
+      };
+      
+      setSavedChats(prev => [newChat, ...prev]);
+      setLeftPanelVisible(true);
+      toast.success('Chat saved!');
+      return;
+    }
+    
+    // Otherwise, save as file (existing behavior)
+    // Check if already saved
+    const existingItem = savedItems.find(item => item.content === content && item.type === type);
+    if (existingItem) {
+      // Unsave: remove from saved items
+      handleUnsave(existingItem.id);
+      return;
+    }
+    
+    // Save: add new item
+    const title = type === 'export' ? 'Exported Conversation' : type === 'quiz' ? 'Micro-Quiz' : 'Summarization';
+    const newItem: SavedItem = {
+      id: Date.now().toString(),
+      title: `${title} - ${new Date().toLocaleDateString()}`,
+      content,
+      type,
+      timestamp: new Date(),
+      isSaved: true,
+      format,
+      workspaceId: workspaceId || currentWorkspaceId,
+    };
+    
+    setSavedItems(prev => [newItem, ...prev]);
+    setRecentlySavedId(newItem.id);
+    setLeftPanelVisible(true); // Open left panel
+    
+    // Clear the highlight after animation
+    setTimeout(() => {
+      setRecentlySavedId(null);
+    }, 2000);
+    
+    toast.success('Saved for later!');
+  };
+
+  const handleUnsave = (id: string) => {
+    setSavedItems(prev => prev.filter(item => item.id !== id));
+    toast.success('Removed from saved items');
+  };
+
+  // Create a new group workspace
+  const handleCreateWorkspace = (payload: {
+    name: string;
+    category: 'course' | 'personal';
+    courseId?: string;
+    invites: string[];
+  }) => {
+    const id = `group-${Date.now()}`;
+    const avatar = `https://api.dicebear.com/7.x/shapes/svg?seed=${encodeURIComponent(payload.name)}`;
+    
+    // Add creator as first member
+    const creatorMember: GroupMember = user ? {
+      id: user.email,
+      name: user.name,
+      email: user.email,
+      avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`,
+    } : { id: 'unknown', name: 'Unknown', email: 'unknown@email.com' };
+    
+    const members: GroupMember[] = [
+      creatorMember,
+      ...payload.invites.map(email => ({
+        id: email,
+        name: email.split('@')[0] || email,
+        email,
+      }))
+    ];
+
+    let newWorkspace: Workspace;
+    
+    if (payload.category === 'course') {
+      const courseInfo = availableCourses.find(c => c.id === payload.courseId);
+      newWorkspace = {
+        id,
+        name: payload.name,
+        type: 'group',
+        avatar,
+        members,
+        category: 'course',
+        courseName: courseInfo?.name || 'Untitled Course',
+        courseInfo,
+      };
+    } else {
+      // Personal interest workspace
+      newWorkspace = {
+        id,
+        name: payload.name,
+        type: 'group',
+        avatar,
+        members,
+        category: 'personal',
+        isEditable: true,
+      };
+    }
+
+    setWorkspaces(prev => [...prev, newWorkspace]);
+    setCurrentWorkspaceId(id);
+    
+    // Set current course if it's a course workspace
+    if (payload.category === 'course' && payload.courseId) {
+      setCurrentCourseId(payload.courseId);
+    }
+    
+    toast.success('New group workspace created');
+  };
+
+  // Handle review click - switch to review mode
+  const handleReviewClick = () => {
+    setChatMode('review');
+    setShowReviewBanner(false);
+    localStorage.setItem('reviewBannerDismissed', 'true');
+  };
+
+  // Handle dismiss review banner
+  const handleDismissReviewBanner = () => {
+    setShowReviewBanner(false);
+    localStorage.setItem('reviewBannerDismissed', 'true');
+  };
+
+  // Handle login - check if user needs onboarding
+  const handleLogin = (newUser: User) => {
+    setUser(newUser);
+    // For testing: always show onboarding (comment out localStorage check)
+    // const onboardingCompleted = localStorage.getItem(`onboarding_completed_${newUser.email}`);
+    // if (!onboardingCompleted) {
+      setShowOnboarding(true);
+    // }
+  };
+
+  // Handle onboarding completion
+  const handleOnboardingComplete = (updatedUser: User) => {
+    setUser(updatedUser);
+    setShowOnboarding(false);
+    // For testing: don't save to localStorage (comment out)
+    // localStorage.setItem(`onboarding_completed_${updatedUser.email}`, 'true');
+  };
+
+  // Handle onboarding skip
+  const handleOnboardingSkip = () => {
+    // For testing: don't save to localStorage (comment out)
+    // if (user) {
+    //   localStorage.setItem(`onboarding_completed_${user.email}`, 'true');
+    // }
+    setShowOnboarding(false);
+  };
+
+  // Show login screen if user is not logged in
+  if (!user) {
+    return <LoginScreen onLogin={handleLogin} />;
+  }
+
+  // Show onboarding if user just logged in and hasn't completed it
+  if (showOnboarding && user) {
+    return (
+      <>
+        <Onboarding 
+          user={user} 
+          onComplete={handleOnboardingComplete}
+          onSkip={handleOnboardingSkip}
+        />
+      </>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <Toaster />
+      <Header 
+        user={user}
+        onMenuClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
+        onUserClick={() => {}}
+        isDarkMode={isDarkMode}
+        onToggleDarkMode={() => setIsDarkMode(!isDarkMode)}
+        language={language}
+        onLanguageChange={setLanguage}
+        workspaces={workspaces}
+        currentWorkspace={currentWorkspace}
+        onWorkspaceChange={setCurrentWorkspaceId}
+        onCreateWorkspace={handleCreateWorkspace}
+        onLogout={() => setUser(null)}
+        availableCourses={availableCourses}
+        onUserUpdate={setUser}
+      />
+      {showProfileEditor && user && (
+        <ProfileEditor
+          user={user}
+          onSave={setUser}
+          onClose={() => setShowProfileEditor(false)}
+        />
+      )}
+
+      {/* Review Banner - Below Header */}
+      {showReviewBanner && (
+        <div className="w-full bg-background border-b border-border flex-shrink-0 relative z-50">
+          <ReviewBanner
+            onReview={handleReviewClick}
+            onDismiss={handleDismissReviewBanner}
+          />
+        </div>
+      )}
+
+      <div 
+        className="flex-1 flex overflow-hidden h-[calc(100vh-4rem)] relative"
+        style={{ overscrollBehavior: 'none' }}
+      >
+        {/* Toggle Button - When panel is closed, at left edge, center axis aligned to left edge */}
+        {!leftPanelVisible && (
+          <Button
+            variant="secondary"
+            size="icon"
+            onClick={() => setLeftPanelVisible(true)}
+            className="hidden lg:flex absolute z-[100] h-8 w-5 shadow-lg rounded-full bg-card border border-border transition-all duration-200 ease-in-out hover:translate-x-[10px]"
+            style={{ left: '-5px', top: '1rem' }}
+            title="Open panel"
+          >
+            <ChevronRight className="h-3 w-3" />
+          </Button>
+        )}
+        {/* Mobile Sidebar Toggle - Left */}
+        {leftSidebarOpen && (
+          <div 
+            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+            onClick={() => setLeftSidebarOpen(false)}
+          />
+        )}
+
+        {/* Left Sidebar */}
+        {leftPanelVisible ? (
+          <aside 
+            className="hidden lg:flex w-80 bg-card border-r border-border flex-col h-full min-h-0 relative"
+            style={{ borderRight: '1px solid var(--border)', height: 'calc(100vh - 4rem)' }}
+          >
+            {/* Toggle Button - Inside panel, right edge aligned to panel right edge */}
+            <Button
+              variant="secondary"
+              size="icon"
+              onClick={() => setLeftPanelVisible(false)}
+              className="absolute z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
+              style={{ right: '-10px', top: '1rem' }}
+              title="Close panel"
+            >
+              <ChevronLeft className="h-3 w-3" />
+            </Button>
+            <LeftSidebar
+              learningMode={learningMode}
+              language={language}
+              onLearningModeChange={setLearningMode}
+              onLanguageChange={setLanguage}
+              spaceType={spaceType}
+              groupMembers={groupMembers}
+              user={user}
+              onLogin={setUser}
+              onLogout={() => setUser(null)}
+              isLoggedIn={!!user}
+              onEditProfile={() => setShowProfileEditor(true)}
+              savedItems={savedItems}
+              recentlySavedId={recentlySavedId}
+              onUnsave={handleUnsave}
+              onSave={handleSave}
+              savedChats={savedChats}
+              onLoadChat={handleLoadChat}
+              onDeleteSavedChat={handleDeleteSavedChat}
+              onRenameSavedChat={handleRenameSavedChat}
+              currentWorkspaceId={currentWorkspaceId}
+              workspaces={workspaces}
+              selectedCourse={currentCourseId}
+              availableCourses={availableCourses}
+            />
+          </aside>
+        ) : null}
+
+        {/* Left Sidebar - Mobile */}
+        <aside 
+          className={`
+            fixed lg:hidden inset-y-0 left-0 z-50
+            w-80 bg-card border-r border-border
+            transform transition-transform duration-300 ease-in-out
+            ${leftSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
+            flex flex-col
+            mt-16
+            h-[calc(100vh-4rem)]
+            min-h-0
+          `}
+        >
+          <div className="p-4 border-b border-border flex justify-between items-center">
+            <h3>Settings & Guide</h3>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setLeftSidebarOpen(false)}
+            >
+              <X className="h-5 w-5" />
+            </Button>
+          </div>
+          <LeftSidebar
+            learningMode={learningMode}
+            language={language}
+            onLearningModeChange={setLearningMode}
+            onLanguageChange={setLanguage}
+            spaceType={spaceType}
+            groupMembers={groupMembers}
+            user={user}
+            onLogin={setUser}
+            onLogout={() => setUser(null)}
+            isLoggedIn={!!user}
+            onEditProfile={() => setShowProfileEditor(true)}
+            savedItems={savedItems}
+            recentlySavedId={recentlySavedId}
+            onUnsave={handleUnsave}
+            onSave={handleSave}
+            savedChats={savedChats}
+            onLoadChat={handleLoadChat}
+            onDeleteSavedChat={handleDeleteSavedChat}
+            currentWorkspaceId={currentWorkspaceId}
+            workspaces={workspaces}
+            selectedCourse={currentCourseId}
+            availableCourses={availableCourses}
+          />
+        </aside>
+
+        {/* Main Chat Area */}
+        <main className="flex-1 flex flex-col min-w-0 min-h-0 h-full">
+          <ChatArea
+            messages={messages}
+            onSendMessage={handleSendMessage}
+            uploadedFiles={uploadedFiles}
+            onFileUpload={handleFileUpload}
+            onRemoveFile={handleRemoveFile}
+            onFileTypeChange={handleFileTypeChange}
+            memoryProgress={memoryProgress}
+            isLoggedIn={!!user}
+            learningMode={learningMode}
+            onClearConversation={() => setShowClearDialog(true)}
+            onSaveChat={handleSaveChat}
+            onLearningModeChange={setLearningMode}
+            spaceType={spaceType}
+            chatMode={chatMode}
+            onChatModeChange={setChatMode}
+            onNextQuestion={handleNextQuestion}
+            onStartQuiz={handleStartQuiz}
+            quizState={quizState}
+            isTyping={isTyping}
+            showClearDialog={showClearDialog}
+            onConfirmClear={(shouldSave) => {
+              handleClearConversation(shouldSave);
+              setShowClearDialog(false);
+            }}
+            onCancelClear={() => setShowClearDialog(false)}
+            savedChats={savedChats}
+            workspaces={workspaces}
+            currentWorkspaceId={currentWorkspaceId}
+            onSaveFile={(content, type, _format, targetWorkspaceId) => handleSave(content, type, false, _format ?? 'text', targetWorkspaceId)}
+            leftPanelVisible={leftPanelVisible}
+            currentCourseId={currentCourseId}
+            onCourseChange={setCurrentCourseId}
+            availableCourses={availableCourses}
+            showReviewBanner={showReviewBanner}
+          />
+        </main>
+
+      </div>
+    </div>
+  );
+}
+
+export default App;

web/src/Attributions.md

@@ -0,0 +1,3 @@
+This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md).
+
+This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license).

web/src/components/ChatArea.tsx

@@ -0,0 +1,1511 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Button } from './ui/button';
+import { Textarea } from './ui/textarea';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Send, ArrowDown, AlertCircle, Trash2, Share2, Upload, X, File, FileText, Presentation, Image as ImageIcon, Bookmark, Plus, Download, Copy } from 'lucide-react';
+import { Message } from './Message';
+import { Alert, AlertDescription } from './ui/alert';
+import { Badge } from './ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import type { Message as MessageType, LearningMode, UploadedFile, FileType, SpaceType, ChatMode, SavedChat, Workspace } from '../App';
+import { toast } from 'sonner';
+import { jsPDF } from 'jspdf';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogOverlay } from './ui/dialog';
+import { Checkbox } from './ui/checkbox';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './ui/alert-dialog';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { SmartReview } from './SmartReview';
+import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
+
+interface ChatAreaProps {
+  messages: MessageType[];
+  onSendMessage: (content: string) => void;
+  uploadedFiles: UploadedFile[];
+  onFileUpload: (files: File[]) => void;
+  onRemoveFile: (index: number) => void;
+  onFileTypeChange: (index: number, type: FileType) => void;
+  memoryProgress: number;
+  isLoggedIn: boolean;
+  learningMode: LearningMode;
+  onClearConversation: () => void;
+  onSaveChat: () => void;
+  onLearningModeChange: (mode: LearningMode) => void;
+  spaceType: SpaceType;
+  chatMode: ChatMode;
+  onChatModeChange: (mode: ChatMode) => void;
+  onNextQuestion: () => void;
+  onStartQuiz: () => void;
+  quizState: {
+    currentQuestion: number;
+    waitingForAnswer: boolean;
+    showNextButton: boolean;
+  };
+  isTyping: boolean;
+  showClearDialog: boolean;
+  onConfirmClear: (shouldSave: boolean) => void;
+  onCancelClear: () => void;
+  savedChats: SavedChat[];
+  workspaces: Workspace[];
+  currentWorkspaceId: string;
+  onSaveFile?: (content: string, type: 'export' | 'summary', format?: 'pdf' | 'text', workspaceId?: string) => void;
+  leftPanelVisible?: boolean;
+  currentCourseId?: string;
+  onCourseChange?: (courseId: string) => void;
+  availableCourses?: Array<{ id: string; name: string }>;
+  showReviewBanner?: boolean;
+}
+
+interface PendingFile {
+  file: File;
+  type: FileType;
+}
+
+export function ChatArea({
+  messages,
+  onSendMessage,
+  uploadedFiles,
+  onFileUpload,
+  onRemoveFile,
+  onFileTypeChange,
+  memoryProgress,
+  isLoggedIn,
+  learningMode,
+  onClearConversation,
+  onSaveChat,
+  onLearningModeChange,
+  spaceType,
+  chatMode,
+  onChatModeChange,
+  onNextQuestion,
+  onStartQuiz,
+  quizState,
+  isTyping: isAppTyping,
+  showClearDialog,
+  onConfirmClear,
+  onCancelClear,
+  savedChats,
+  workspaces,
+  currentWorkspaceId,
+  onSaveFile,
+  leftPanelVisible = false,
+  currentCourseId,
+  onCourseChange,
+  availableCourses = [],
+  showReviewBanner = false,
+}: ChatAreaProps) {
+  const [input, setInput] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const [showTopBorder, setShowTopBorder] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
+  const [showTypeDialog, setShowTypeDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [fileToDelete, setFileToDelete] = useState<number | null>(null);
+  const [selectedFile, setSelectedFile] = useState<{file: File; index: number} | null>(null);
+  const [showFileViewer, setShowFileViewer] = useState(false);
+  const [showDownloadDialog, setShowDownloadDialog] = useState(false);
+  const [downloadPreview, setDownloadPreview] = useState('');
+  const [downloadTab, setDownloadTab] = useState<'chat' | 'summary'>('chat');
+  const [downloadOptions, setDownloadOptions] = useState({ chat: true, summary: false });
+  const [showShareDialog, setShowShareDialog] = useState(false);
+  const [shareLink, setShareLink] = useState('');
+  const [targetWorkspaceId, setTargetWorkspaceId] = useState<string>('');
+
+  // Use availableCourses if provided, otherwise fallback to default
+  const courses = availableCourses.length > 0 ? availableCourses : [
+    { id: 'course1', name: 'Introduction to AI' },
+    { id: 'course2', name: 'Machine Learning' },
+    { id: 'course3', name: 'Data Structures' },
+    { id: 'course4', name: 'Web Development' },
+  ];
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const isInitialMount = useRef(true);
+  const previousMessagesLength = useRef(messages.length);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  // Only auto-scroll when new messages are added (not on initial load)
+  useEffect(() => {
+    // Skip auto-scroll on initial mount
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      previousMessagesLength.current = messages.length;
+      // Ensure we stay at top on initial load
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollTop = 0;
+      }
+      return;
+    }
+
+    // Only scroll if new messages were added (length increased)
+    if (messages.length > previousMessagesLength.current) {
+      scrollToBottom();
+    }
+    previousMessagesLength.current = messages.length;
+  }, [messages]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (scrollContainerRef.current) {
+        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
+        const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
+        setShowScrollButton(!isAtBottom);
+        // Show border when content is scrolled below the fixed bar
+        setShowTopBorder(scrollTop > 0);
+      }
+    };
+
+    const container = scrollContainerRef.current;
+    if (container) {
+      // Check initial state
+      handleScroll();
+      container.addEventListener('scroll', handleScroll);
+      return () => container.removeEventListener('scroll', handleScroll);
+    }
+  }, [messages]);
+
+  // Use native event listeners to prevent scroll propagation to left panel
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      // Always stop propagation to prevent scrolling left panel
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+    };
+
+    container.addEventListener('wheel', handleWheel, { passive: false, capture: true });
+    
+    return () => {
+      container.removeEventListener('wheel', handleWheel, { capture: true });
+    };
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || !isLoggedIn) return;
+
+    onSendMessage(input);
+    setInput('');
+    // All modes now use isAppTyping from App.tsx, so we don't set local isTyping
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  const modeLabels: Record<LearningMode, string> = {
+    general: 'General',
+    concept: 'Concept Explainer',
+    socratic: 'Socratic Tutor',
+    exam: 'Exam Prep',
+    assignment: 'Assignment Helper',
+    summary: 'Quick Summary',
+  };
+
+  // Handle review topic button click
+  const handleReviewTopic = (item: { title: string; previousQuestion: string; memoryRetention: number; schedule: string; status: string; weight: number; lastReviewed: string }) => {
+    // Send a user message with review request and data
+    // Format: User-friendly message + hidden data for parsing
+    const userMessage = `Please help me review: ${item.title}`;
+    const reviewData = `REVIEW_TOPIC:${item.title}|${item.previousQuestion}|${item.memoryRetention}|${item.schedule}|${item.status}|${item.weight}|${item.lastReviewed}`;
+    // Store review data temporarily to pass to App.tsx
+    (window as any).__lastReviewData = reviewData;
+    onSendMessage(userMessage);
+  };
+
+  // Handle review all button click
+  const handleReviewAll = () => {
+    // Send a user message requesting review all
+    (window as any).__lastReviewData = 'REVIEW_ALL';
+    onSendMessage('Please help me review all topics that need attention.');
+  };
+
+  const handleClearClick = () => {
+    // Check if current chat is a saved/previewed chat
+    const isSavedChat = isCurrentChatSaved();
+    
+    // If viewing a saved chat, clear directly without dialog
+    if (isSavedChat) {
+      // Directly clear without showing dialog
+      onConfirmClear(false);
+      return;
+    }
+    
+    // Check if there are user messages (not just welcome message)
+    const hasUserMessages = messages.some(msg => msg.role === 'user');
+    if (!hasUserMessages) {
+      // No user messages, just clear without showing dialog
+      onClearConversation();
+      return;
+    }
+    // User messages exist, show dialog to save or discard
+    onClearConversation();
+  };
+
+  const buildPreviewContent = () => {
+    if (!messages.length) return '';
+    return messages
+      .map((msg) => `${msg.role === 'user' ? 'You' : 'Clare'}: ${msg.content}`)
+      .join('\n\n');
+  };
+
+  const buildSummaryContent = () => {
+    if (!messages.length) return 'No messages to summarize.';
+    
+    // Simple summary: count messages and list main topics
+    const userMessages = messages.filter(msg => msg.role === 'user');
+    const assistantMessages = messages.filter(msg => msg.role === 'assistant');
+    
+    let summary = `Chat Summary\n================\n\n`;
+    summary += `Total Messages: ${messages.length}\n`;
+    summary += `- User Messages: ${userMessages.length}\n`;
+    summary += `- Assistant Responses: ${assistantMessages.length}\n\n`;
+    
+    summary += `Key Points:\n`;
+    // Extract first 3 user messages as key points
+    userMessages.slice(0, 3).forEach((msg, idx) => {
+      const preview = msg.content.substring(0, 80);
+      summary += `${idx + 1}. ${preview}${msg.content.length > 80 ? '...' : ''}\n`;
+    });
+    
+    return summary;
+  };
+
+  const handleOpenDownloadDialog = () => {
+    setDownloadTab('chat');
+    setDownloadOptions({ chat: true, summary: false });
+    setDownloadPreview(buildPreviewContent());
+    setShowDownloadDialog(true);
+  };
+
+  const handleCopyPreview = async () => {
+    try {
+      await navigator.clipboard.writeText(downloadPreview);
+      toast.success('Copied preview');
+    } catch (e) {
+      toast.error('Copy failed');
+    }
+  };
+
+  const handleDownloadFile = async () => {
+    try {
+      let contentToPdf = '';
+      
+      // Build content based on selected options
+      if (downloadOptions.chat) {
+        contentToPdf += buildPreviewContent();
+      }
+      
+      if (downloadOptions.summary) {
+        if (downloadOptions.chat) {
+          contentToPdf += '\n\n================\n\n';
+        }
+        contentToPdf += buildSummaryContent();
+      }
+      
+      if (!contentToPdf.trim()) {
+        toast.error('Please select at least one option');
+        return;
+      }
+      
+      // Create PDF
+      const pdf = new jsPDF({
+        orientation: 'portrait',
+        unit: 'mm',
+        format: 'a4'
+      });
+      
+      // Set font
+      pdf.setFontSize(11);
+      
+      // Add title
+      pdf.setFontSize(14);
+      pdf.text('Chat Export', 10, 10);
+      pdf.setFontSize(11);
+      
+      // Split content into lines and add to PDF
+      const pageHeight = pdf.internal.pageSize.getHeight();
+      const margin = 10;
+      const maxWidth = 190; // A4 width minus margins
+      const lineHeight = 5;
+      let yPosition = 20;
+      
+      // Split text into lines that fit in the page
+      const lines = pdf.splitTextToSize(contentToPdf, maxWidth);
+      
+      lines.forEach((line: string) => {
+        if (yPosition > pageHeight - margin) {
+          pdf.addPage();
+          yPosition = margin;
+        }
+        pdf.text(line, margin, yPosition);
+        yPosition += lineHeight;
+      });
+      
+      // Save PDF
+      pdf.save('chat-export.pdf');
+      setShowDownloadDialog(false);
+      toast.success('PDF downloaded successfully');
+    } catch (error) {
+      console.error('PDF generation error:', error);
+      toast.error('Failed to generate PDF');
+    }
+  };
+
+  // Check if current chat is already saved
+  const isCurrentChatSaved = (): boolean => {
+    if (messages.length <= 1) return false;
+    
+    // Find a saved chat that matches the current messages and chatMode
+    return savedChats.some(chat => {
+      if (chat.chatMode !== chatMode) return false;
+      if (chat.messages.length !== messages.length) return false;
+      
+      // Check if all messages match
+      return chat.messages.every((savedMsg, index) => {
+        const currentMsg = messages[index];
+        return (
+          savedMsg.id === currentMsg.id &&
+          savedMsg.role === currentMsg.role &&
+          savedMsg.content === currentMsg.content
+        );
+      });
+    });
+  };
+
+  const handleSaveClick = () => {
+    if (messages.length <= 1) {
+      toast.info('No conversation to save');
+      return;
+    }
+    
+    onSaveChat();
+  };
+
+  const handleShareClick = () => {
+    if (messages.length <= 1) {
+      toast.info('No conversation to share');
+      return;
+    }
+    // Create a temporary share link for this session
+    const conversationText = buildPreviewContent();
+    const blob = new Blob([conversationText], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    setShareLink(url);
+    // Default to current workspace
+    setTargetWorkspaceId(currentWorkspaceId);
+    setShowShareDialog(true);
+  };
+
+  const handleCopyShareLink = async () => {
+    try {
+      await navigator.clipboard.writeText(shareLink);
+      toast.success('Link copied');
+    } catch {
+      toast.error('Failed to copy link');
+    }
+  };
+
+  const handleShareSendToWorkspace = () => {
+    const content = buildPreviewContent();
+    onSaveFile?.(content, 'export', 'text', targetWorkspaceId);
+    setShowShareDialog(false);
+    toast.success('Sent to workspace Saved Files');
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isLoggedIn) return;
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    if (!isLoggedIn) return;
+
+    const fileList = e.dataTransfer.files;
+    const files: File[] = [];
+    for (let i = 0; i < fileList.length; i++) {
+      const file = fileList.item(i);
+      if (file) {
+        files.push(file);
+      }
+    }
+
+    const validFiles = files.filter((file) => {
+      const ext = file.name.toLowerCase();
+      return ['.pdf', '.docx', '.pptx', '.jpg', '.jpeg', '.png', '.gif', '.webp', '.doc', '.ppt'].some((allowedExt) => 
+        ext.endsWith(allowedExt)
+      );
+    });
+
+    if (validFiles.length > 0) {
+      setPendingFiles(validFiles.map(file => ({ file, type: 'other' as FileType })));
+      setShowTypeDialog(true);
+    } else {
+      toast.error('Please upload .pdf, .docx, .pptx, or image files');
+    }
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []) as File[];
+    if (files.length > 0) {
+      const validFiles = files.filter((file) => {
+        const ext = file.name.toLowerCase();
+        return ['.pdf', '.docx', '.pptx', '.jpg', '.jpeg', '.png', '.gif', '.webp', '.doc', '.ppt'].some((allowedExt) => 
+          ext.endsWith(allowedExt)
+        );
+      });
+      if (validFiles.length > 0) {
+        setPendingFiles(validFiles.map(file => ({ file, type: 'other' as FileType })));
+        setShowTypeDialog(true);
+      } else {
+        toast.error('Please upload .pdf, .docx, .pptx, or image files');
+      }
+    }
+    e.target.value = '';
+  };
+
+  const handleConfirmUpload = () => {
+    onFileUpload(pendingFiles.map(pf => pf.file));
+    // Update the parent's file types
+    const startIndex = uploadedFiles.length;
+    pendingFiles.forEach((pf, idx) => {
+      setTimeout(() => {
+        onFileTypeChange(startIndex + idx, pf.type);
+      }, 0);
+    });
+    setPendingFiles([]);
+    setShowTypeDialog(false);
+    toast.success(`${pendingFiles.length} file(s) uploaded successfully`);
+  };
+
+  const handleCancelUpload = () => {
+    setPendingFiles([]);
+    setShowTypeDialog(false);
+  };
+
+  const handlePendingFileTypeChange = (index: number, type: FileType) => {
+    setPendingFiles(prev => prev.map((pf, i) => 
+      i === index ? { ...pf, type } : pf
+    ));
+  };
+
+  const getFileIcon = (filename: string) => {
+    const ext = filename.toLowerCase();
+    if (ext.endsWith('.pdf')) return FileText;
+    if (ext.endsWith('.docx') || ext.endsWith('.doc')) return File;
+    if (ext.endsWith('.pptx') || ext.endsWith('.ppt')) return Presentation;
+    if (['.jpg', '.jpeg', '.png', '.gif', '.webp'].some(e => ext.endsWith(e))) return ImageIcon;
+    return File;
+  };
+
+  const getFileTypeInfo = (filename: string) => {
+    const ext = filename.toLowerCase();
+    if (ext.endsWith('.pdf')) {
+      return { bgColor: 'bg-red-500', type: 'PDF' };
+    }
+    if (ext.endsWith('.docx') || ext.endsWith('.doc')) {
+      return { bgColor: 'bg-blue-500', type: 'Document' };
+    }
+    if (ext.endsWith('.pptx') || ext.endsWith('.ppt')) {
+      return { bgColor: 'bg-orange-500', type: 'Presentation' };
+    }
+    if (['.jpg', '.jpeg', '.png', '.gif', '.webp'].some(e => ext.endsWith(e))) {
+      return { bgColor: 'bg-green-500', type: 'Image' };
+    }
+    return { bgColor: 'bg-gray-500', type: 'File' };
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  };
+
+  // File Thumbnail Component - ChatGPT style
+  const FileThumbnail = ({ 
+    file, 
+    Icon, 
+    fileInfo, 
+    isImage, 
+    onPreview, 
+    onRemove 
+  }: { 
+    file: File; 
+    Icon: React.ComponentType<{ className?: string }>; 
+    fileInfo: { bgColor: string; type: string }; 
+    isImage: boolean; 
+    onPreview: () => void; 
+    onRemove: (e: React.MouseEvent) => void;
+  }) => {
+    const [imagePreview, setImagePreview] = useState<string | null>(null);
+    const [imageLoading, setImageLoading] = useState(true);
+    
+    useEffect(() => {
+      if (isImage) {
+        setImageLoading(true);
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          setImagePreview(e.target?.result as string);
+          setImageLoading(false);
+        };
+        reader.onerror = () => {
+          setImageLoading(false);
+        };
+        reader.readAsDataURL(file);
+      } else {
+        setImagePreview(null);
+        setImageLoading(false);
+      }
+    }, [file, isImage]);
+    
+    // All files have consistent height: h-16 (64px)
+    // Image files: square card (w-16 h-16), no filename
+    if (isImage) {
+      return (
+        <div
+          className="relative cursor-pointer w-16 h-16 flex-shrink-0"
+          onClick={onPreview}
+          style={{ width: '64px', height: '64px', flexShrink: 0 }}
+        >
+          {/* Square image thumbnail card - ChatGPT style, same height as other files */}
+          <div className="w-full h-full relative bg-card border border-border rounded-lg hover:border-primary/50 transition-colors">
+            <div className="w-full h-full overflow-hidden rounded-lg absolute inset-0">
+              {imageLoading ? (
+                <div className="w-full h-full flex items-center justify-center bg-muted">
+                  <Icon className="h-5 w-5 text-muted-foreground animate-pulse" />
+                </div>
+              ) : imagePreview ? (
+                <img 
+                  src={imagePreview} 
+                  alt={file.name}
+                  className="w-full h-full object-cover"
+                  onError={(e) => {
+                    e.currentTarget.style.display = 'none';
+                    setImageLoading(false);
+                  }}
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center bg-muted">
+                  <Icon className="h-5 w-5 text-muted-foreground" />
+                </div>
+              )}
+            </div>
+            {/* Remove button - top right corner inside card, always visible - ChatGPT style */}
+            <button
+              type="button"
+              className="absolute top-1 right-1 h-4 w-4 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm flex items-center justify-center cursor-pointer"
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemove(e);
+              }}
+              style={{ zIndex: 100, position: 'absolute', top: '4px', right: '4px' }}
+            >
+              <X 
+                className="h-2.5 w-2.5" 
+                style={{ 
+                  color: 'rgb(0, 0, 0)',
+                  strokeWidth: 2
+                }}
+              />
+            </button>
+          </div>
+        </div>
+      );
+    }
+    
+    // Other files: horizontal rectangle with icon, filename and type (same height as images, fixed width)
+    return (
+      <div
+        className="relative cursor-pointer"
+        onClick={onPreview}
+        style={{ width: '240px', flexShrink: 0 }}
+      >
+        {/* Horizontal file card - ChatGPT style, same height as images, fixed width */}
+        <div className="h-16 w-full relative flex items-center px-3 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors">
+          {/* File icon with colored background */}
+          <div className={`${fileInfo.bgColor} flex items-center justify-center w-10 h-10 rounded shrink-0`}>
+            <Icon className="h-5 w-5 text-white" />
+          </div>
+          {/* Spacing between icon and filename - one character width */}
+          <div className="w-2 shrink-0" />
+          {/* File name and type */}
+          <div className="flex-1 min-w-0 flex flex-col justify-center pr-7">
+            <p className="text-xs text-foreground truncate" title={file.name}>
+              {file.name}
+            </p>
+            <p className="text-[10px] text-muted-foreground mt-0.5 truncate">
+              {fileInfo.type}
+            </p>
+          </div>
+          {/* Remove button - top right corner inside card, always visible - ChatGPT style */}
+          <button
+            type="button"
+            className="absolute top-1 right-1 h-4 w-4 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm flex items-center justify-center cursor-pointer z-10"
+            onClick={(e) => {
+              e.stopPropagation();
+              onRemove(e);
+            }}
+            style={{ position: 'absolute', top: '4px', right: '4px', zIndex: 10 }}
+          >
+            <X 
+              className="h-2.5 w-2.5" 
+              style={{ 
+                color: 'rgb(0, 0, 0)',
+                strokeWidth: 2
+              }}
+            />
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  // File Viewer Content Component
+  const FileViewerContent = ({ file }: { file: File }) => {
+    const [content, setContent] = useState<string>('');
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+      const loadFile = async () => {
+        try {
+          setLoading(true);
+          setError(null);
+          
+          const ext = file.name.toLowerCase();
+          
+          if (['.jpg', '.jpeg', '.png', '.gif', '.webp'].some(e => ext.endsWith(e))) {
+            // Image file
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              setContent(e.target?.result as string);
+              setLoading(false);
+            };
+            reader.onerror = () => {
+              setError('Failed to load image');
+              setLoading(false);
+            };
+            reader.readAsDataURL(file);
+          } else if (ext.endsWith('.pdf')) {
+            // PDF file - show info
+            setContent('PDF files cannot be previewed directly. Please download the file to view it.');
+            setLoading(false);
+          } else {
+            // Text-based files
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              setContent(e.target?.result as string);
+              setLoading(false);
+            };
+            reader.onerror = () => {
+              setError('Failed to load file');
+              setLoading(false);
+            };
+            reader.readAsText(file);
+          }
+        } catch (err) {
+          setError('Failed to load file');
+          setLoading(false);
+        }
+      };
+
+      loadFile();
+    }, [file]);
+
+    if (loading) {
+      return <div className="text-center py-8">Loading...</div>;
+    }
+
+    if (error) {
+      return <div className="text-center py-8 text-destructive">{error}</div>;
+    }
+
+    const ext = file.name.toLowerCase();
+    const isImage = ['.jpg', '.jpeg', '.png', '.gif', '.webp'].some(e => ext.endsWith(e));
+
+    if (isImage) {
+      return (
+        <div className="flex justify-center">
+          <img src={content} alt={file.name} className="max-w-full h-auto rounded-lg" />
+        </div>
+      );
+    }
+
+    return (
+      <div className="whitespace-pre-wrap text-sm font-mono p-4 bg-muted rounded-lg max-h-[60vh] overflow-y-auto">
+        {content}
+      </div>
+    );
+  };
+
+  const getFileTypeLabel = (type: FileType) => {
+    const labels: Record<FileType, string> = {
+      'syllabus': 'Syllabus',
+      'lecture-slides': 'Lecture Slides / PPT',
+      'literature-review': 'Literature Review / Paper',
+      'other': 'Other Course Document',
+    };
+    return labels[type];
+  };
+
+  return (
+    <div className="flex flex-col h-full min-h-0 overflow-hidden" style={{ overscrollBehavior: 'none' }}>
+      {/* Chat Area with Floating Input */}
+      <div className="flex-1 relative min-h-0 flex flex-col overflow-hidden" style={{ overscrollBehavior: 'none' }}>
+        {/* Messages Area */}
+        <div 
+          ref={scrollContainerRef}
+          className="flex-1 overflow-y-auto"
+          style={{ 
+            overscrollBehavior: 'none',
+          }}
+        >
+          {/* Top Bar - Course Selector, Chat Mode Tabs, and Action Buttons - Sticky at top */}
+          <div 
+            className={`sticky top-0 flex items-center justify-between px-4 z-20 bg-card ${
+              showTopBorder ? 'border-b border-border' : ''
+            }`}
+            style={{ 
+              height: '4.5rem',
+              margin: 0,
+              padding: '1rem 1rem',
+              boxSizing: 'border-box',
+            }}
+          >
+          {/* Course Selector - Left */}
+          <div className="flex-shrink-0">
+            {(() => {
+              const current = workspaces.find(w => w.id === currentWorkspaceId);
+              if (current?.type === 'group') {
+                if (current.category === 'course' && current.courseName) {
+                  // Show fixed course label, not selectable
+                  return (
+                    <div className="h-9 px-3 inline-flex items-center rounded-md border font-semibold">
+                      {current.courseName}
+                    </div>
+                  );
+                }
+                // Personal interest: hide selector
+                return null;
+              }
+              // Individual workspace: show selectable courses
+              return (
+                <Select value={currentCourseId || 'course1'} onValueChange={(val) => onCourseChange && onCourseChange(val)}>
+                  <SelectTrigger className="w-[200px] h-9 font-semibold">
+                    <SelectValue placeholder="Select course" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {courses.map((course) => (
+                      <SelectItem key={course.id} value={course.id}>
+                        {course.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              );
+            })()}
+          </div>
+
+          {/* Chat Mode Tabs - Center (aligned with panel toggle button) */}
+          <div className="absolute left-1/2 -translate-x-1/2 flex-shrink-0">
+            <Tabs 
+              value={chatMode} 
+              onValueChange={(value) => onChatModeChange(value as ChatMode)} 
+              className="w-auto"
+              orientation="horizontal"
+            >
+              <TabsList className="inline-flex h-8 items-center justify-center rounded-xl bg-muted p-1 text-muted-foreground">
+                <TabsTrigger value="ask" className="w-[140px] px-3 text-sm">Ask</TabsTrigger>
+                <TabsTrigger value="review" className="w-[140px] px-3 text-sm relative">
+                  Review
+                  {/* Red dot badge in top-right corner */}
+                  <span 
+                    className="absolute top-0 right-0 bg-red-500 rounded-full border-2"
+                    style={{ 
+                      width: '10px',
+                      height: '10px',
+                      transform: 'translate(25%, -25%)',
+                      zIndex: 10,
+                      borderColor: 'var(--muted)'
+                    }}
+                  />
+                </TabsTrigger>
+                <TabsTrigger value="quiz" className="w-[140px] px-3 text-sm">Quiz</TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </div>
+
+          {/* Action Buttons - Right */}
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleSaveClick}
+              disabled={!isLoggedIn}
+              className={`h-8 w-8 rounded-md hover:bg-muted/50 ${
+                isCurrentChatSaved() ? 'text-primary' : ''
+              }`}
+              title={isCurrentChatSaved() ? 'Unsave' : 'Save'}
+            >
+              <Bookmark
+                className={`h-4 w-4 ${isCurrentChatSaved() ? 'fill-primary text-primary' : ''}`}
+              />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleOpenDownloadDialog}
+              disabled={!isLoggedIn}
+              className="h-8 w-8 rounded-md hover:bg-muted/50"
+              title="Download"
+            >
+              <Download className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleShareClick}
+              disabled={!isLoggedIn}
+              className="h-8 w-8 rounded-md hover:bg-muted/50"
+              title="Share"
+            >
+              <Share2 className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              onClick={handleClearClick}
+              disabled={!isLoggedIn}
+              className="h-8 px-3 gap-2 rounded-md border border-border disabled:opacity-60 !bg-[var(--card)] !text-[var(--card-foreground)] hover:!opacity-90 [&_svg]:!text-[var(--card-foreground)] [&_span]:!text-[var(--card-foreground)]"
+              title="New Chat"
+            >
+              <Plus className="h-4 w-4" />
+              <span className="text-sm font-medium">New chat</span>
+            </Button>
+          </div>
+        </div>
+
+          {/* Messages Content */}
+          <div 
+            className="py-6"
+            style={{ 
+              paddingBottom: '12rem' // Ensure enough space for input box and action buttons
+            }}
+          >
+          <div className="w-full space-y-6 max-w-4xl mx-auto">
+            {messages.map((message, index) => (
+              <React.Fragment key={message.id}>
+                <Message 
+                  message={message} 
+                  showSenderInfo={spaceType === 'group'}
+                  isFirstGreeting={
+                    (message.id === '1' || message.id === 'review-1' || message.id === 'quiz-1') && 
+                    message.role === 'assistant'
+                  }
+                  showNextButton={message.showNextButton && !isAppTyping}
+                  onNextQuestion={onNextQuestion}
+                  chatMode={chatMode}
+                />
+                {/* Smart Review - Show below welcome message in Review mode */}
+                {chatMode === 'review' && 
+                 message.id === 'review-1' &&
+                 message.role === 'assistant' && (
+                  <div className="flex gap-2 justify-start px-4">
+                    {/* Avatar placeholder to align with message bubble */}
+                    <div className="w-10 h-10 flex-shrink-0"></div>
+                    <div 
+                      className="w-full"
+                      style={{ maxWidth: 'min(770px, calc(100% - 2rem))' }}
+                    >
+                      <SmartReview 
+                        onReviewTopic={handleReviewTopic}
+                        onReviewAll={handleReviewAll}
+                      />
+                    </div>
+                  </div>
+                )}
+                {/* Quiz Mode Start Button - Below welcome message */}
+                {chatMode === 'quiz' && 
+                 message.id === 'quiz-1' &&
+                 message.role === 'assistant' &&
+                 quizState.currentQuestion === 0 && 
+                 !quizState.waitingForAnswer && 
+                 !isAppTyping && (
+                  <div className="flex justify-center py-4">
+                    <Button 
+                      onClick={onStartQuiz}
+                      className="bg-red-500 hover:bg-red-600 text-white"
+                    >
+                      Start Quiz
+                    </Button>
+                  </div>
+                )}
+              </React.Fragment>
+            ))}
+            
+            {/* Show typing indicator - use isAppTyping for all modes to ensure consistent display */}
+            {isAppTyping && (
+              <div className="flex gap-2 justify-start px-4">
+                <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
+                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
+                </div>
+                <div className="bg-muted rounded-2xl px-4 py-3">
+                  <div className="flex gap-1">
+                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: '0ms' }} />
+                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: '150ms' }} />
+                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: '300ms' }} />
+                  </div>
+                </div>
+              </div>
+            )}
+            
+            <div ref={messagesEndRef} />
+          </div>
+        </div>
+      </div>
+
+        {/* Scroll to Bottom Button - Above input box */}
+        {showScrollButton && (
+          <div 
+            className="fixed z-30 flex justify-center pointer-events-none"
+            style={{ 
+              bottom: '120px', // Position 20px above input box (input box height ~100px)
+              left: leftPanelVisible ? '320px' : '0px',
+              right: '0px'
+            }}
+          >
+            <Button
+              variant="secondary"
+              size="icon"
+              className="rounded-full shadow-lg hover:shadow-xl transition-shadow bg-background border border-border pointer-events-auto w-10 h-10"
+              onClick={scrollToBottom}
+              title="Scroll to bottom"
+            >
+              <ArrowDown className="h-5 w-5" />
+            </Button>
+          </div>
+        )}
+
+        {/* Floating Input Area - Fixed at viewport bottom, horizontally centered in chat area */}
+        <div 
+          className="fixed bottom-0 bg-background/95 backdrop-blur-sm z-10"
+          style={{ 
+            left: leftPanelVisible ? '320px' : '0px',
+            right: '0px'
+          }}
+        >
+          <div className="max-w-4xl mx-auto px-4 py-4">
+            {/* Uploaded Files Display */}
+            {uploadedFiles.length > 0 && (
+              <div className="mb-2 flex flex-wrap gap-2 max-h-32 overflow-y-auto">
+                {uploadedFiles.map((uploadedFile, index) => {
+                  const Icon = getFileIcon(uploadedFile.file.name);
+                  const fileInfo = getFileTypeInfo(uploadedFile.file.name);
+                  const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp'].some(ext => 
+                    uploadedFile.file.name.toLowerCase().endsWith(`.${ext}`)
+                  );
+                  
+                  return (
+                    <div key={index}>
+                      <FileThumbnail
+                        file={uploadedFile.file}
+                        Icon={Icon}
+                        fileInfo={fileInfo}
+                        isImage={isImage}
+                        onPreview={() => {
+                          setSelectedFile({ file: uploadedFile.file, index });
+                          setShowFileViewer(true);
+                        }}
+                        onRemove={(e) => {
+                          e.stopPropagation();
+                          setFileToDelete(index);
+                          setShowDeleteDialog(true);
+                        }}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            <form 
+              onSubmit={handleSubmit}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+              className={isDragging ? 'opacity-75' : ''}
+            >
+              <div className="relative">
+                {/* Mode Selector and Upload Button - ChatGPT style at bottom left */}
+                <div className="absolute bottom-3 left-2 flex items-center gap-1 z-10">
+                  {/* Only show mode selector in ask mode */}
+                  {chatMode === 'ask' && (
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="gap-1.5 h-8 px-2 text-xs hover:bg-muted/50"
+                          disabled={!isLoggedIn}
+                          type="button"
+                        >
+                          <span>{modeLabels[learningMode]}</span>
+                          <svg
+                            className="h-3 w-3 opacity-50"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M19 9l-7 7-7-7"
+                            />
+                          </svg>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start" className="w-56">
+                        <DropdownMenuItem
+                          onClick={() => onLearningModeChange('general')}
+                          className={learningMode === 'general' ? 'bg-accent' : ''}
+                        >
+                          <div className="flex flex-col">
+                            <span className="font-medium">General</span>
+                            <span className="text-xs text-muted-foreground">
+                              Answer various questions (context required)
+                            </span>
+                          </div>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => onLearningModeChange('concept')}
+                          className={learningMode === 'concept' ? 'bg-accent' : ''}
+                        >
+                          <div className="flex flex-col">
+                            <span className="font-medium">Concept Explainer</span>
+                            <span className="text-xs text-muted-foreground">
+                              Get detailed explanations of concepts
+                            </span>
+                          </div>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => onLearningModeChange('socratic')}
+                          className={learningMode === 'socratic' ? 'bg-accent' : ''}
+                        >
+                          <div className="flex flex-col">
+                            <span className="font-medium">Socratic Tutor</span>
+                            <span className="text-xs text-muted-foreground">
+                              Learn through guided questions
+                            </span>
+                          </div>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => onLearningModeChange('exam')}
+                          className={learningMode === 'exam' ? 'bg-accent' : ''}
+                        >
+                          <div className="flex flex-col">
+                            <span className="font-medium">Exam Prep</span>
+                            <span className="text-xs text-muted-foreground">
+                              Practice with quiz questions
+                            </span>
+                          </div>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => onLearningModeChange('assignment')}
+                          className={learningMode === 'assignment' ? 'bg-accent' : ''}
+                        >
+                          <div className="flex flex-col">
+                            <span className="font-medium">Assignment Helper</span>
+                            <span className="text-xs text-muted-foreground">
+                              Get help with assignments
+                            </span>
+                          </div>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => onLearningModeChange('summary')}
+                          className={learningMode === 'summary' ? 'bg-accent' : ''}
+                        >
+                          <div className="flex flex-col">
+                            <span className="font-medium">Quick Summary</span>
+                            <span className="text-xs text-muted-foreground">
+                              Get concise summaries
+                            </span>
+                          </div>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  )}
+                  {/* Upload Button - Right of mode selector */}
+                  <Button
+                    type="button"
+                    size="icon"
+                    variant="ghost"
+                    disabled={!isLoggedIn || (chatMode === 'quiz' && !quizState.waitingForAnswer)}
+                    className="h-8 w-8 hover:bg-muted/50"
+                    onClick={() => fileInputRef.current?.click()}
+                    title="Upload files"
+                  >
+                    <Upload className="h-4 w-4" />
+                  </Button>
+                </div>
+                <Textarea
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder={
+                    !isLoggedIn
+                      ? "Please log in on the right to start chatting..."
+                      : chatMode === 'quiz'
+                      ? quizState.waitingForAnswer 
+                        ? "Type your answer here..."
+                        : quizState.currentQuestion > 0
+                        ? "Click 'Next Question' to continue..."
+                        : "Click 'Start Quiz' to begin..."
+                      : spaceType === 'group'
+                      ? "Type a message or drag files here... (mention @Clare to get AI assistance)"
+                      : learningMode === 'general'
+                      ? "Ask me anything! Please provide context about your question..."
+                      : "Ask Clare anything about the course or drag files here..."
+                  }
+                  disabled={!isLoggedIn || (chatMode === 'quiz' && !quizState.waitingForAnswer)}
+                  className={`min-h-[80px] pl-4 pr-20 resize-none bg-background border-2 ${
+                    isDragging ? 'border-primary border-dashed' : 'border-border'
+                  }`}
+                />
+                <div className="absolute bottom-2 right-2 flex gap-1">
+                  <Button
+                    type="submit"
+                    size="icon"
+                    disabled={!input.trim() || !isLoggedIn}
+                    className="h-8 w-8 rounded-full"
+                  >
+                    <Send className="h-4 w-4" />
+                  </Button>
+                </div>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  multiple
+                  accept=".pdf,.docx,.pptx,.doc,.ppt,.jpg,.jpeg,.png,.gif,.webp"
+                  onChange={handleFileSelect}
+                  className="hidden"
+                  disabled={!isLoggedIn}
+                />
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+
+      {/* Start New Conversation Confirmation Dialog */}
+      <AlertDialog open={showClearDialog} onOpenChange={onCancelClear}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Start New Conversation</AlertDialogTitle>
+            <AlertDialogDescription>
+              Would you like to save the current chat before starting a new conversation?
+            </AlertDialogDescription>
+            {/* Close button in top-right corner */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute right-4 top-4 h-6 w-6 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"
+              onClick={onCancelClear}
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </Button>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="flex-col sm:flex-row gap-2 sm:justify-end">
+            <Button
+              variant="outline"
+              onClick={() => onConfirmClear(false)}
+              className="sm:flex-1 sm:max-w-[200px]"
+            >
+              Start New (Don't Save)
+            </Button>
+            <AlertDialogAction onClick={() => onConfirmClear(true)} className="sm:flex-1 sm:max-w-[200px]">
+              Save & Start New
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Download Preview Dialog */}
+      <Dialog open={showDownloadDialog} onOpenChange={setShowDownloadDialog}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>Download this chat</DialogTitle>
+            <DialogDescription>Preview and copy before downloading.</DialogDescription>
+          </DialogHeader>
+          
+          {/* Tab Selection */}
+          <Tabs value={downloadTab} onValueChange={(value) => {
+            setDownloadTab(value as 'chat' | 'summary');
+            setDownloadPreview(value === 'chat' ? buildPreviewContent() : buildSummaryContent());
+            // Auto-check options based on selected tab
+            if (value === 'summary') {
+              setDownloadOptions({ chat: false, summary: true });
+            } else {
+              setDownloadOptions({ chat: true, summary: false });
+            }
+          }} className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="chat">Download chat</TabsTrigger>
+              <TabsTrigger value="summary">Summary of the chat</TabsTrigger>
+            </TabsList>
+          </Tabs>
+          
+          {/* Preview Section */}
+          <div className="border rounded-lg bg-muted/40 flex flex-col max-h-64">
+            <div className="flex items-center justify-between p-4 sticky top-0 bg-muted/40 border-b z-10">
+              <span className="text-sm font-medium">Preview</span>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 px-2 text-xs gap-1.5"
+                onClick={handleCopyPreview}
+                title="Copy preview"
+              >
+                <Copy className="h-3 w-3" />
+                Copy
+              </Button>
+            </div>
+            <div className="text-sm text-foreground overflow-y-auto flex-1 p-4">
+              <div className="whitespace-pre-wrap">{downloadPreview}</div>
+            </div>
+          </div>
+          
+          {/* Download Options Checkboxes */}
+          <div className="space-y-3">
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="download-chat"
+                checked={downloadOptions.chat}
+                onCheckedChange={(checked) => {
+                  setDownloadOptions({ ...downloadOptions, chat: checked === true });
+                }}
+              />
+              <label htmlFor="download-chat" className="text-sm font-medium cursor-pointer">
+                Download chat
+              </label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="download-summary"
+                checked={downloadOptions.summary}
+                onCheckedChange={(checked) => {
+                  setDownloadOptions({ ...downloadOptions, summary: checked === true });
+                }}
+              />
+              <label htmlFor="download-summary" className="text-sm font-medium cursor-pointer">
+                Download summary
+              </label>
+            </div>
+          </div>
+          
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowDownloadDialog(false)}>Cancel</Button>
+            <Button onClick={handleDownloadFile}>Download</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Share Dialog */}
+      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>
+        <DialogContent className="w-[600px] max-w-[600px] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>Share Conversation</DialogTitle>
+            <DialogDescription>Select how you want to share.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>Copy Link</Label>
+              <div className="flex gap-2 items-center">
+                <Input value={shareLink} readOnly className="flex-1" />
+                <Button variant="secondary" onClick={handleCopyShareLink}>Copy</Button>
+              </div>
+              <p className="text-xs text-muted-foreground">Temporary link valid for this session.</p>
+            </div>
+            <div className="space-y-2">
+              <Label>Send to Workspace</Label>
+              <Select value={targetWorkspaceId} onValueChange={setTargetWorkspaceId}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Choose a workspace" />
+                </SelectTrigger>
+                <SelectContent>
+                  {workspaces.map(w => (
+                    <SelectItem key={w.id} value={w.id}>{w.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">Sends this conversation to the selected workspace's Saved Files.</p>
+              <Button onClick={handleShareSendToWorkspace} className="w-full">Send</Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete File Confirmation Dialog */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete File</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete "{fileToDelete !== null ? uploadedFiles[fileToDelete]?.file.name : ''}"? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (fileToDelete !== null) {
+                  onRemoveFile(fileToDelete);
+                  setFileToDelete(null);
+                }
+                setShowDeleteDialog(false);
+              }}
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* File Viewer Dialog */}
+      <Dialog open={showFileViewer} onOpenChange={setShowFileViewer}>
+        <DialogContent className="max-w-4xl max-h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader className="min-w-0 flex-shrink-0">
+            <DialogTitle 
+              className="pr-8 break-words break-all overflow-wrap-anywhere leading-relaxed"
+              style={{ 
+                wordBreak: 'break-all',
+                overflowWrap: 'anywhere',
+                maxWidth: '100%',
+                lineHeight: '1.6'
+              }}
+            >
+              {selectedFile?.file.name}
+            </DialogTitle>
+            <DialogDescription>
+              File size: {selectedFile ? formatFileSize(selectedFile.file.size) : ''}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 min-h-0 overflow-y-auto mt-4">
+            {selectedFile && (
+              <FileViewerContent file={selectedFile.file} />
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* File Type Selection Dialog - Highest z-index */}
+      {showTypeDialog && (
+        <Dialog open={showTypeDialog} onOpenChange={setShowTypeDialog}>
+          <DialogContent 
+            className="sm:max-w-[425px]" 
+            overlayClassName="!z-[99998]"
+            style={{ zIndex: 99999 }}
+          >
+            <DialogHeader>
+              <DialogTitle>Select File Types</DialogTitle>
+              <DialogDescription>
+                Please select the type for each file you are uploading.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-3 max-h-64 overflow-y-auto">
+              {pendingFiles.map((pendingFile, index) => {
+                const Icon = getFileIcon(pendingFile.file.name);
+                return (
+                  <div
+                    key={index}
+                    className="p-3 bg-muted rounded-md space-y-2"
+                  >
+                    <div className="flex items-center gap-2 group">
+                      <Icon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm truncate">{pendingFile.file.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {formatFileSize(pendingFile.file.size)}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="text-xs text-muted-foreground">File Type</label>
+                      <Select 
+                        value={pendingFile.type} 
+                        onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent 
+                          className="!z-[100000] !bg-background !text-foreground" 
+                          style={{ zIndex: 100000 }}
+                        >
+                          <SelectItem value="syllabus">Syllabus</SelectItem>
+                          <SelectItem value="lecture-slides">Lecture Slides / PPT</SelectItem>
+                          <SelectItem value="literature-review">Literature Review / Paper</SelectItem>
+                          <SelectItem value="other">Other Course Document</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={handleCancelUpload}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleConfirmUpload}
+              >
+                Upload
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+  );
+}

web/src/components/FileUploadArea.tsx

@@ -0,0 +1,273 @@
+import React, { useRef, useState } from 'react';
+import { Button } from './ui/button';
+import { Upload, File, X, FileText, FileSpreadsheet, Presentation } from 'lucide-react';
+import { Card } from './ui/card';
+import { Badge } from './ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
+import type { UploadedFile, FileType } from '../App';
+
+interface FileUploadAreaProps {
+  uploadedFiles: UploadedFile[];
+  onFileUpload: (files: File[]) => void;
+  onRemoveFile: (index: number) => void;
+  onFileTypeChange: (index: number, type: FileType) => void;
+  disabled?: boolean;
+}
+
+interface PendingFile {
+  file: File;
+  type: FileType;
+}
+
+export function FileUploadArea({
+  uploadedFiles,
+  onFileUpload,
+  onRemoveFile,
+  onFileTypeChange,
+  disabled = false,
+}: FileUploadAreaProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
+  const [showTypeDialog, setShowTypeDialog] = useState(false);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (!disabled) setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (disabled) return;
+
+    const files = Array.from(e.dataTransfer.files).filter((file) =>
+      ['.pdf', '.docx', '.pptx'].some((ext) => file.name.toLowerCase().endsWith(ext))
+    );
+
+    if (files.length > 0) {
+      setPendingFiles(files.map(file => ({ file, type: 'other' as FileType })));
+      setShowTypeDialog(true);
+    }
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) {
+      setPendingFiles(files.map(file => ({ file, type: 'other' as FileType })));
+      setShowTypeDialog(true);
+    }
+    e.target.value = '';
+  };
+
+  const handleConfirmUpload = () => {
+    onFileUpload(pendingFiles.map(pf => pf.file));
+    // Update the parent's file types
+    const startIndex = uploadedFiles.length;
+    pendingFiles.forEach((pf, idx) => {
+      setTimeout(() => {
+        onFileTypeChange(startIndex + idx, pf.type);
+      }, 0);
+    });
+    setPendingFiles([]);
+    setShowTypeDialog(false);
+  };
+
+  const handleCancelUpload = () => {
+    setPendingFiles([]);
+    setShowTypeDialog(false);
+  };
+
+  const handlePendingFileTypeChange = (index: number, type: FileType) => {
+    setPendingFiles(prev => prev.map((pf, i) => 
+      i === index ? { ...pf, type } : pf
+    ));
+  };
+
+  const getFileIcon = (filename: string) => {
+    if (filename.endsWith('.pdf')) return FileText;
+    if (filename.endsWith('.docx')) return File;
+    if (filename.endsWith('.pptx')) return Presentation;
+    return File;
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  };
+
+  const getFileTypeLabel = (type: FileType) => {
+    const labels: Record<FileType, string> = {
+      'syllabus': 'Syllabus',
+      'lecture-slides': 'Lecture Slides / PPT',
+      'literature-review': 'Literature Review / Paper',
+      'other': 'Other Course Document',
+    };
+    return labels[type];
+  };
+
+  return (
+    <Card className="p-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm">Course Materials</h4>
+        {uploadedFiles.length > 0 && (
+          <Badge variant="secondary">{uploadedFiles.length} file(s)</Badge>
+        )}
+      </div>
+
+      {/* Upload Area */}
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={`
+          border-2 border-dashed rounded-lg p-4 text-center transition-colors
+          ${isDragging ? 'border-primary bg-accent' : 'border-border'}
+          ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+        `}
+        onClick={() => !disabled && fileInputRef.current?.click()}
+      >
+        <Upload className="h-6 w-6 mx-auto mb-2 text-muted-foreground" />
+        <p className="text-sm text-muted-foreground mb-1">
+          {disabled ? 'Please log in to upload' : 'Drop files or click to upload'}
+        </p>
+        <p className="text-xs text-muted-foreground">
+          .pdf, .docx, .pptx
+        </p>
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept=".pdf,.docx,.pptx"
+          onChange={handleFileSelect}
+          className="hidden"
+          disabled={disabled}
+        />
+      </div>
+
+      {/* Uploaded Files List */}
+      {uploadedFiles.length > 0 && (
+        <div className="space-y-3 max-h-64 overflow-y-auto">
+          {uploadedFiles.map((uploadedFile, index) => {
+            const Icon = getFileIcon(uploadedFile.file.name);
+            return (
+              <div
+                key={index}
+                className="p-3 bg-muted rounded-md space-y-2"
+              >
+                <div className="flex items-center gap-2 group">
+                  <Icon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm truncate">{uploadedFile.file.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {formatFileSize(uploadedFile.file.size)}
+                    </p>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onRemoveFile(index);
+                    }}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+                <div className="space-y-1">
+                  <label className="text-xs text-muted-foreground">File Type</label>
+                  <Select 
+                    value={uploadedFile.type} 
+                    onValueChange={(value) => onFileTypeChange(index, value as FileType)}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="syllabus">Syllabus</SelectItem>
+                      <SelectItem value="lecture-slides">Lecture Slides / PPT</SelectItem>
+                      <SelectItem value="literature-review">Literature Review / Paper</SelectItem>
+                      <SelectItem value="other">Other Course Document</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Type Selection Dialog */}
+      {showTypeDialog && (
+        <Dialog open={showTypeDialog} onOpenChange={setShowTypeDialog}>
+          <DialogContent className="sm:max-w-[425px]">
+            <DialogHeader>
+              <DialogTitle>Select File Types</DialogTitle>
+              <DialogDescription>
+                Please select the type for each file you are uploading.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-3 max-h-64 overflow-y-auto">
+              {pendingFiles.map((pendingFile, index) => {
+                const Icon = getFileIcon(pendingFile.file.name);
+                return (
+                  <div
+                    key={index}
+                    className="p-3 bg-muted rounded-md space-y-2"
+                  >
+                    <div className="flex items-center gap-2 group">
+                      <Icon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm truncate">{pendingFile.file.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {formatFileSize(pendingFile.file.size)}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="text-xs text-muted-foreground">File Type</label>
+                      <Select 
+                        value={pendingFile.type} 
+                        onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="syllabus">Syllabus</SelectItem>
+                          <SelectItem value="lecture-slides">Lecture Slides / PPT</SelectItem>
+                          <SelectItem value="literature-review">Literature Review / Paper</SelectItem>
+                          <SelectItem value="other">Other Course Document</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={handleCancelUpload}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleConfirmUpload}
+              >
+                Upload
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+    </Card>
+  );
+}

web/src/components/FloatingActionButtons.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Download, Sparkles } from 'lucide-react';
+import { toast } from 'sonner';
+import type { User } from '../App';
+
+interface FloatingActionButtonsProps {
+  user: User | null;
+  isLoggedIn: boolean;
+  onOpenPanel: () => void;
+  onExport: () => void;
+  onSummary: () => void;
+}
+
+export function FloatingActionButtons({
+  user,
+  isLoggedIn,
+  onOpenPanel,
+  onExport,
+  onSummary,
+}: FloatingActionButtonsProps) {
+  const [hoveredButton, setHoveredButton] = useState<string | null>(null);
+
+  const handleAction = (action: () => void, actionName: string, shouldOpenPanel: boolean = false) => {
+    if (!isLoggedIn) {
+      toast.error('Please log in to use this feature');
+      return;
+    }
+    action();
+    if (shouldOpenPanel) {
+      onOpenPanel();
+    }
+  };
+
+  const buttons = [
+    {
+      id: 'export',
+      icon: Download,
+      label: 'Export Conversation',
+      action: onExport,
+      openPanel: true, // Open panel for export
+    },
+    {
+      id: 'summary',
+      icon: Sparkles,
+      label: 'Summarization',
+      action: onSummary,
+      openPanel: true, // Open panel for summary
+    },
+  ];
+
+  return (
+    <div className="fixed right-4 bottom-[28rem] z-40 flex flex-col gap-2">
+      {buttons.map((button, index) => {
+        const Icon = button.icon;
+        const isHovered = hoveredButton === button.id;
+        
+        return (
+          <div
+            key={button.id}
+            className="relative group"
+            onMouseEnter={() => setHoveredButton(button.id)}
+            onMouseLeave={() => setHoveredButton(null)}
+          >
+            {/* Tooltip */}
+            <div
+              className={`
+                absolute right-full mr-3 top-1/2 -translate-y-1/2
+                px-3 py-2 rounded-lg bg-popover border border-border
+                whitespace-nowrap text-sm shadow-lg
+                transition-all duration-200
+                ${isHovered ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2 pointer-events-none'}
+              `}
+            >
+              {button.label}
+            </div>
+
+            {/* Floating Button */}
+            <Button
+              size="icon"
+              className={`
+                h-6 w-6 rounded-full shadow-md opacity-60 hover:opacity-100
+                transition-all duration-200
+                ${isLoggedIn 
+                  ? 'bg-primary hover:bg-primary/90 text-primary-foreground' 
+                  : 'bg-muted hover:bg-muted/90 text-muted-foreground'
+                }
+                ${isHovered ? 'scale-110' : 'scale-100'}
+              `}
+              onClick={() => handleAction(button.action, button.label, button.openPanel)}
+              style={{
+                animationDelay: `${index * 100}ms`,
+              }}
+            >
+              <Icon className="h-3 w-3" />
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

web/src/components/GroupMembers.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { Users, MailPlus } from 'lucide-react';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
+import type { GroupMember } from '../App';
+
+interface GroupMembersProps {
+  members: GroupMember[];
+}
+
+export function GroupMembers({ members }: GroupMembersProps) {
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [inviteEmail, setInviteEmail] = useState('');
+
+  const handleSendInvite = () => {
+    if (!inviteEmail.trim()) {
+      toast.error('Please enter an email to invite');
+      return;
+    }
+    toast.success(`Invitation sent to ${inviteEmail}`);
+    setInviteEmail('');
+    setInviteOpen(false);
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <Users className="h-4 w-4 text-muted-foreground" />
+          <h3 className="text-sm">Group Members ({members.length})</h3>
+        </div>
+        <Button
+          size="sm"
+          variant="secondary"
+          className="h-8 gap-2"
+          onClick={() => setInviteOpen(true)}
+        >
+          <MailPlus className="h-4 w-4" />
+          <span className="text-xs font-medium">Invite</span>
+        </Button>
+      </div>
+      
+      <div className="space-y-2">
+        {members.map((member) => {
+          const isAI = !!member.isAI;
+          return (
+          <div
+            key={member.id}
+            className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 transition-colors"
+          >
+            {/* Avatar */}
+            <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
+              isAI 
+                ? 'overflow-hidden bg-white' 
+                : 'bg-muted'
+            }`}>
+              {isAI ? (
+                <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
+              ) : (
+                <span className="text-sm">
+                  {member.name.split(' ').map(n => n[0]).join('').toUpperCase()}
+                </span>
+              )}
+            </div>
+            
+            {/* Member Info */}
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <p className="text-sm truncate">{member.name}</p>
+                {isAI && (
+                  <Badge variant="secondary" className="text-xs">AI</Badge>
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground truncate">{member.email}</p>
+            </div>
+            
+            {/* Online Status */}
+            <div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" title="Online" />
+          </div>
+        )})}
+      </div>
+
+      <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
+        <DialogContent className="w-[600px] max-w-[600px] sm:max-w-[600px]" style={{ maxWidth: 600 }}>
+          <DialogHeader>
+            <DialogTitle>Invite member</DialogTitle>
+            <DialogDescription>Send a quick email invite with the team details.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <Input
+              type="email"
+              placeholder="name@example.com"
+              value={inviteEmail}
+              onChange={(e) => setInviteEmail(e.target.value)}
+            />
+            <p className="text-xs text-muted-foreground">
+              An invitation email with a join link will be sent to this address.
+            </p>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setInviteOpen(false)}>Cancel</Button>
+            <Button onClick={handleSendInvite}>Send invite</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

web/src/components/Header.tsx

@@ -0,0 +1,500 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Menu, Sun, Moon, Languages, ChevronDown, LogOut, Plus, X, User, Edit, Star } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from './ui/dropdown-menu';
+import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
+import type { Workspace, CourseInfo } from '../App';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from './ui/dialog';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { RadioGroup, RadioGroupItem } from './ui/radio-group';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { toast } from 'sonner';
+import { ProfileEditor } from './ProfileEditor';
+
+interface HeaderProps {
+  user: UserType | null;
+  onMenuClick: () => void;
+  onUserClick: () => void;
+  isDarkMode: boolean;
+  onToggleDarkMode: () => void;
+  language: Language;
+  onLanguageChange: (lang: Language) => void;
+  workspaces: Workspace[];
+  currentWorkspace: Workspace | undefined;
+  onWorkspaceChange: (workspaceId: string) => void;
+  onCreateWorkspace?: (payload: {
+    name: string;
+    category: 'course' | 'personal';
+    courseId?: string;
+    invites: string[];
+  }) => void;
+  onLogout: () => void;
+  availableCourses?: CourseInfo[];
+  onUserUpdate?: (user: UserType) => void;
+}
+
+type UserType = {
+  name: string;
+  email: string;
+};
+
+type Language = 'auto' | 'en' | 'zh';
+
+export function Header({
+  user,
+  onMenuClick,
+  onUserClick,
+  isDarkMode,
+  onToggleDarkMode,
+  language,
+  onLanguageChange,
+  workspaces,
+  currentWorkspace,
+  onWorkspaceChange,
+  onLogout,
+  onCreateWorkspace,
+  availableCourses = [],
+  onUserUpdate,
+}: HeaderProps) {
+  const [showProfileEditor, setShowProfileEditor] = useState(false);
+  // Star brightness levels: 0-10 (11 levels), 0 = 100%, 10 = 0%
+  const [starBrightness, setStarBrightness] = useState(0);
+  const languageLabels = {
+    auto: 'Auto',
+    en: 'English',
+    zh: '简体中文',
+  };
+
+  const [createOpen, setCreateOpen] = useState(false);
+  const [workspaceName, setWorkspaceName] = useState('');
+  const [category, setCategory] = useState<'course' | 'personal'>('course');
+  const [courseId, setCourseId] = useState('');
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [invites, setInvites] = useState<string[]>([]);
+
+  const addInvite = () => {
+    const email = inviteEmail.trim();
+    if (!email) return;
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      toast.error('Please enter a valid email');
+      return;
+    }
+    if (invites.includes(email)) return;
+    setInvites(prev => [...prev, email]);
+    setInviteEmail('');
+  };
+
+  const removeInvite = (email: string) => {
+    setInvites(prev => prev.filter(e => e !== email));
+  };
+
+  const handleStarClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Cycle through brightness levels: 0 -> 1 -> ... -> 10 -> 0
+    setStarBrightness((prev) => (prev + 1) % 11);
+  };
+
+  const getStarOpacity = () => {
+    // 11 levels: 0 = 100% (1.0), 10 = 0% (0.0)
+    return 1 - (starBrightness / 10);
+  };
+
+  const getEnergyValue = () => {
+    // Energy value: 0 = 100%, 1 = 90%, ..., 10 = 0%
+    return 100 - (starBrightness * 10);
+  };
+
+  const getStarColor = () => {
+    // Color transitions from gold (100%) to gray/white (0%)
+    if (starBrightness === 10) {
+      return { fill: 'transparent', stroke: 'white', strokeWidth: 1.5, strokeDasharray: '2 2' };
+    }
+    // Interpolate from gold (#fbbf24) to lighter gold/gray
+    const energy = getEnergyValue();
+    if (energy >= 50) {
+      // High energy: bright gold
+      return { fill: '#fbbf24', stroke: '#fbbf24', strokeWidth: 0 };
+    } else if (energy >= 20) {
+      // Medium energy: lighter gold
+      return { fill: '#fcd34d', stroke: '#fcd34d', strokeWidth: 0 };
+    } else {
+      // Low energy: very light gold/gray
+      return { fill: '#fde68a', stroke: '#fde68a', strokeWidth: 0 };
+    }
+  };
+
+  const handleCreate = () => {
+    if (!workspaceName.trim()) {
+      toast.error('Please enter a workspace name');
+      return;
+    }
+    if (category === 'course' && !courseId) {
+      toast.error('Please select a course');
+      return;
+    }
+    if (invites.length === 0) {
+      toast.error('Please add at least one member');
+      return;
+    }
+    
+    // Call the create function
+    onCreateWorkspace?.({
+      name: workspaceName.trim(),
+      category,
+      courseId: courseId || undefined,
+      invites,
+    });
+    
+    // Reset form and close dialog
+    setWorkspaceName('');
+    setCourseId('');
+    setCategory('course');
+    setInvites([]);
+    setInviteEmail('');
+    setCreateOpen(false);
+  };
+
+  return (
+    <header className="h-16 border-b border-border bg-card px-4 lg:px-6 flex items-center justify-between sticky top-0 z-[100]">
+      <div className="flex items-center gap-4">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="lg:hidden"
+          onClick={onMenuClick}
+        >
+          <Menu className="h-5 w-5" />
+        </Button>
+        
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center">
+            <img src={clareAvatar} alt="Clare AI" className="w-full h-full object-cover" />
+          </div>
+          <div>
+            <h1 className="text-lg sm:text-xl tracking-tight" style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, letterSpacing: '-0.02em' }}>
+              Clare <span className="text-sm font-bold text-muted-foreground hidden sm:inline ml-2">Your Personalized AI Tutor</span>
+            </h1>
+            <p className="text-xs text-muted-foreground hidden sm:block">
+              Personalized guidance, review, and intelligent reinforcement
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label="Change language"
+            >
+              <Languages className="h-5 w-5" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => onLanguageChange('auto')}>
+              {language === 'auto' && '✓ '}Auto
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => onLanguageChange('en')}>
+              {language === 'en' && '✓ '}English
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => onLanguageChange('zh')}>
+              {language === 'zh' && '✓ '}简体中文
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onToggleDarkMode}
+          aria-label="Toggle dark mode"
+        >
+          {isDarkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+        </Button>
+        
+        {user && currentWorkspace ? (
+          <>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                className="gap-2 pl-2 pr-3"
+                aria-label="Switch workspace"
+              >
+                <img 
+                  src={currentWorkspace.avatar} 
+                  alt={currentWorkspace.name}
+                  className="w-6 h-6 rounded-full object-cover"
+                />
+                <span className="hidden sm:inline max-w-[120px] truncate">{currentWorkspace.name}</span>
+                <ChevronDown className="h-4 w-4 opacity-50" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="min-w-[14rem]">
+              {workspaces.map((workspace) => (
+                <DropdownMenuItem 
+                  key={workspace.id}
+                  onClick={() => onWorkspaceChange(workspace.id)}
+                  className={`gap-3 ${currentWorkspace.id === workspace.id ? 'bg-accent' : ''}`}
+                >
+                  <img 
+                    src={workspace.avatar} 
+                    alt={workspace.name}
+                    className="w-6 h-6 rounded-full object-cover flex-shrink-0"
+                  />
+                  <span className="truncate">{workspace.name}</span>
+                  {currentWorkspace.id === workspace.id && (
+                    <span className="ml-auto text-primary">✓</span>
+                  )}
+                </DropdownMenuItem>
+              ))}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem className="gap-2" onClick={() => setCreateOpen(true)}>
+                <Plus className="h-4 w-4" />
+                <span>New Group Workspace</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          
+          {/* Profile Avatar Button */}
+          <div className="relative inline-block">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="rounded-full"
+                  aria-label="User profile"
+                >
+                  <img 
+                    src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`}
+                    alt={user.name}
+                    className="w-8 h-8 rounded-full object-cover"
+                  />
+                </Button>
+              </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              <div className="px-2 py-1.5">
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium truncate">{user.name}</p>
+                    <p className="text-xs text-muted-foreground truncate">ID: {user.email.split('@')[0] || user.email}</p>
+                  </div>
+                  <div className="flex items-center gap-2 flex-shrink-0">
+                  {starBrightness === 10 ? (
+                    <Star
+                      className="w-4 h-4"
+                      style={{
+                        fill: 'transparent',
+                        stroke: 'white',
+                        strokeWidth: 1.5,
+                        strokeDasharray: '2 2',
+                        opacity: 0.6
+                      }}
+                    />
+                  ) : (
+                    <Star
+                      className="w-4 h-4"
+                      style={{
+                        ...getStarColor(),
+                        opacity: getStarOpacity(),
+                        filter: starBrightness === 0 ? 'drop-shadow(0 0 2px rgba(251, 191, 36, 0.8))' : 'none'
+                      }}
+                    />
+                  )}
+                    <div className="flex flex-col items-end">
+                      <span className="text-xs font-medium">{getEnergyValue()}%</span>
+                      <div className="w-12 h-1.5 bg-muted rounded-full overflow-hidden">
+                        <div 
+                          className="h-full bg-gradient-to-r from-amber-400 to-yellow-500 transition-all duration-300"
+                          style={{ width: `${getEnergyValue()}%` }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => setShowProfileEditor(true)}>
+                <Edit className="h-4 w-4 mr-2" />
+                Edit Profile
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={onLogout} className="text-destructive focus:text-destructive">
+                <LogOut className="h-4 w-4 mr-2" />
+                Log out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          {/* Star badge in top-right corner of avatar - positioned outside, not overlapping */}
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  className="absolute cursor-pointer z-20 pointer-events-auto bg-transparent border-0 p-0"
+                    style={{ 
+                      top: '-8px',
+                      right: '-16px',
+                      opacity: starBrightness === 10 ? 0.6 : 1,
+                      transition: 'opacity 0.3s ease-in-out',
+                      filter: starBrightness === 0 ? 'drop-shadow(0 0 4px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 8px rgba(251, 191, 36, 0.4))' : 'none'
+                    }}
+                  onClick={handleStarClick}
+                >
+                  {starBrightness === 10 ? (
+                    <Star
+                      className="w-5 h-5"
+                      style={{
+                        fill: 'transparent',
+                        stroke: 'white',
+                        strokeWidth: 1.5,
+                        strokeDasharray: '2 2'
+                      }}
+                    />
+                  ) : (
+                    <Star
+                      className="w-5 h-5"
+                      style={{
+                        ...getStarColor(),
+                        opacity: getStarOpacity(),
+                        filter: starBrightness === 0 ? 'drop-shadow(0 0 2px rgba(251, 191, 36, 1))' : 'none'
+                      }}
+                    />
+                  )}
+                </button>
+              </TooltipTrigger>
+                <TooltipContent 
+                  className="z-[200] border border-amber-300/30 shadow-md"
+                  style={{ 
+                    zIndex: 200,
+                    backgroundColor: 'rgba(251, 191, 36, 0.95)',
+                    color: 'rgb(28, 25, 23)'
+                  }}
+                  sideOffset={5}
+                >
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium">Energy: {getEnergyValue()}%</p>
+                    <div className="w-32 h-2 bg-muted rounded-full overflow-hidden">
+                      <div 
+                        className="h-full bg-gradient-to-r from-amber-400 to-yellow-500 transition-all duration-300"
+                        style={{ width: `${getEnergyValue()}%` }}
+                      />
+                    </div>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+          </>
+        ) : null}
+      </div>
+      {/* Create Group Workspace Dialog */}
+      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+        <DialogContent 
+          className="w-[600px] max-w-[600px] sm:max-w-[600px] z-[1001] pointer-events-auto" 
+          style={{ width: 600, maxWidth: 600, zIndex: 1001 }} 
+          overlayClassName="!z-[99]"
+          overlayStyle={{ 
+            top: '64px', 
+            left: 0, 
+            right: 0, 
+            bottom: 0, 
+            zIndex: 99,
+            position: 'fixed'
+          }}
+          onPointerDownOutside={(e) => e.preventDefault()}
+          onInteractOutside={(e) => e.preventDefault()}
+        >
+          <DialogHeader>
+            <DialogTitle>Create Group Workspace</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="ws-name">Workspace Name</Label>
+              <Input id="ws-name" value={workspaceName} onChange={e => setWorkspaceName(e.target.value)} placeholder="e.g., CS 101 Study Group" />
+            </div>
+            <div className="space-y-2">
+              <Label>Category</Label>
+              <RadioGroup value={category} onValueChange={(val) => setCategory(val as 'course' | 'personal')} className="flex gap-4">
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem id="cat-course" value="course" />
+                  <Label htmlFor="cat-course">Course</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem id="cat-personal" value="personal" />
+                  <Label htmlFor="cat-personal">Personal Interest</Label>
+                </div>
+              </RadioGroup>
+            </div>
+            {category === 'course' && (
+              <div className="space-y-2">
+                <Label htmlFor="course-select">Course Name</Label>
+                <Select value={courseId} onValueChange={setCourseId}>
+                  <SelectTrigger id="course-select">
+                    <SelectValue placeholder="Select a course" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {availableCourses.map((course) => (
+                      <SelectItem key={course.id} value={course.id}>
+                        {course.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+            <div className="space-y-2">
+              <Label>Invite Members (emails)</Label>
+              <div className="flex gap-2">
+                <Input value={inviteEmail} onChange={e => setInviteEmail(e.target.value)} placeholder="Enter email and click Add" onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addInvite(); } }} />
+                <Button variant="secondary" onClick={addInvite}>Add</Button>
+              </div>
+              {invites.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {invites.map(email => (
+                    <span key={email} className="inline-flex items-center px-2 py-1 rounded-full bg-muted text-sm">
+                      {email}
+                      <Button variant="ghost" size="icon" className="h-4 w-4 ml-1" onClick={() => removeInvite(email)} aria-label={`Remove ${email}`}>
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCreateOpen(false)}>Cancel</Button>
+            <Button onClick={handleCreate}>Create</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Profile Editor Dialog */}
+      {user && showProfileEditor && (
+        <ProfileEditor
+          user={user}
+          onSave={(updatedUser) => {
+            if (onUserUpdate) {
+              onUserUpdate(updatedUser);
+            }
+            setShowProfileEditor(false);
+          }}
+          onClose={() => setShowProfileEditor(false)}
+        />
+      )}
+    </header>
+  );
+}

web/src/components/LearningModeSelector.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Card } from './ui/card';
+import { 
+  Lightbulb, 
+  MessageCircleQuestion, 
+  GraduationCap, 
+  FileEdit, 
+  Zap,
+  MessageSquare
+} from 'lucide-react';
+import type { LearningMode } from '../App';
+
+interface ModeSelectorProps {
+  selectedMode: LearningMode;
+  onModeChange: (mode: LearningMode) => void;
+}
+
+const modes = [
+  {
+    id: 'general' as LearningMode,
+    icon: MessageSquare,
+    title: 'General',
+    description: 'Answer various questions (context required)',
+    color: 'from-purple-500 to-purple-600',
+  },
+  {
+    id: 'concept' as LearningMode,
+    icon: Lightbulb,
+    title: 'Concept Explainer',
+    description: 'Break down complex topics',
+    color: 'from-blue-500 to-blue-600',
+  },
+  {
+    id: 'socratic' as LearningMode,
+    title: 'Socratic Tutor',
+    description: 'Learn through questions',
+    color: 'from-red-500 to-rose-600',
+  },
+  {
+    id: 'exam' as LearningMode,
+    icon: GraduationCap,
+    title: 'Exam Prep/Quiz',
+    description: 'Test your knowledge',
+    color: 'from-green-500 to-green-600',
+  },
+  {
+    id: 'assignment' as LearningMode,
+    icon: FileEdit,
+    title: 'Assignment Helper',
+    description: 'Get homework guidance',
+    color: 'from-orange-500 to-orange-600',
+  },
+  {
+    id: 'summary' as LearningMode,
+    icon: Zap,
+    title: 'Quick Summary',
+    description: 'Fast key points review',
+    color: 'from-pink-500 to-pink-600',
+  },
+];
+
+export function LearningModeSelector({ selectedMode, onModeChange }: ModeSelectorProps) {
+  return (
+    <div className="space-y-2">
+      {modes.map((mode) => {
+        const Icon = mode.icon;
+        const isSelected = selectedMode === mode.id;
+        
+        return (
+          <Card
+            key={mode.id}
+            className={`
+              p-3 cursor-pointer transition-all duration-200
+              ${isSelected 
+                ? 'border-primary bg-accent shadow-sm' 
+                : 'hover:border-primary/50 hover:shadow-sm'
+              }
+            `}
+            onClick={() => onModeChange(mode.id)}
+          >
+            <div className="flex items-start gap-3">
+              <div className={`
+                w-10 h-10 rounded-lg bg-gradient-to-br ${mode.color}
+                flex items-center justify-center flex-shrink-0
+              `}>
+                <Icon className="h-5 w-5 text-white" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h4 className="text-sm mb-1">{mode.title}</h4>
+                <p className="text-xs text-muted-foreground">{mode.description}</p>
+              </div>
+              {isSelected && (
+                <div className="w-2 h-2 rounded-full bg-primary flex-shrink-0 mt-2" />
+              )}
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}

web/src/components/LeftSidebar.tsx

@@ -0,0 +1,834 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { LearningModeSelector } from './LearningModeSelector';
+import { Label } from './ui/label';
+import { Button } from './ui/button';
+import { LogIn, LogOut, Bookmark, Download, Copy, Search, X, MessageSquare, Trash2, Edit2, Check, X as XIcon } from 'lucide-react';
+import { Separator } from './ui/separator';
+import { GroupMembers } from './GroupMembers';
+import { Card } from './ui/card';
+import { Input } from './ui/input';
+import type { LearningMode, Language, SpaceType, GroupMember, User as UserType, SavedItem, SavedChat, Message as MessageType } from '../App';
+import { toast } from 'sonner';
+import { Document, HeadingLevel, Packer, Paragraph, TextRun } from 'docx';
+import { jsPDF } from 'jspdf';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import type { CourseInfo } from '../App';
+
+// Saved Chat Item Component with rename functionality
+function SavedChatItem({
+  chat,
+  onLoadChat,
+  onDeleteSavedChat,
+  onRenameSavedChat,
+}: {
+  chat: SavedChat;
+  onLoadChat: (chat: SavedChat) => void;
+  onDeleteSavedChat: (id: string) => void;
+  onRenameSavedChat?: (id: string, newTitle: string) => void;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(chat.title);
+  const [originalTitle, setOriginalTitle] = useState(chat.title);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const cancelButtonRef = useRef<HTMLButtonElement>(null);
+  const saveButtonRef = useRef<HTMLButtonElement>(null);
+
+  // Update originalTitle when chat.title changes (e.g., from external rename)
+  useEffect(() => {
+    if (!isEditing) {
+      setOriginalTitle(chat.title);
+      setEditTitle(chat.title);
+    }
+  }, [chat.title, isEditing]);
+
+  const handleStartEdit = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOriginalTitle(chat.title);
+    setEditTitle(chat.title);
+    setIsEditing(true);
+    setTimeout(() => inputRef.current?.focus(), 0);
+  };
+
+  const handleSaveEdit = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (editTitle.trim() && onRenameSavedChat) {
+      onRenameSavedChat(chat.id, editTitle.trim());
+      setIsEditing(false);
+    }
+  };
+
+  const handleCancelEdit = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Reset to original title when canceling
+    setEditTitle(originalTitle);
+    setIsEditing(false);
+    // Prevent onBlur from firing
+    if (inputRef.current) {
+      inputRef.current.blur();
+    }
+  };
+
+  const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    // Check if the blur is caused by clicking cancel or save button
+    const relatedTarget = e.relatedTarget as HTMLElement;
+    if (relatedTarget && (
+      cancelButtonRef.current?.contains(relatedTarget) ||
+      saveButtonRef.current?.contains(relatedTarget)
+    )) {
+      return; // Don't save if clicking cancel or save button
+    }
+    // Save on blur if title changed
+    if (editTitle.trim() && editTitle !== originalTitle && onRenameSavedChat) {
+      onRenameSavedChat(chat.id, editTitle.trim());
+    }
+    setIsEditing(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      if (editTitle.trim() && onRenameSavedChat) {
+        onRenameSavedChat(chat.id, editTitle.trim());
+        setIsEditing(false);
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      setEditTitle(originalTitle);
+      setIsEditing(false);
+    }
+  };
+
+  return (
+    <Card
+      className="p-3 cursor-pointer hover:bg-muted/50 transition-all bg-muted/30"
+      onClick={() => !isEditing && onLoadChat(chat)}
+    >
+      <div className="flex items-start gap-2">
+        <MessageSquare className="h-3.5 w-3.5 mt-0.5 flex-shrink-0 text-muted-foreground" />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            {isEditing ? (
+              <Input
+                ref={inputRef}
+                value={editTitle}
+                onChange={(e) => setEditTitle(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onClick={(e) => e.stopPropagation()}
+                onBlur={handleInputBlur}
+                className="h-auto text-sm font-medium px-2 py-1 border border-border bg-background focus-visible:ring-2 focus-visible:ring-ring flex-1"
+                style={{ height: 'auto' }}
+              />
+            ) : (
+              <h4 
+                className="text-sm font-medium truncate flex-1 cursor-text"
+                onDoubleClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleStartEdit(e);
+                }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                title="Double click to rename"
+              >
+                {chat.title}
+              </h4>
+            )}
+            <div className="flex items-center gap-1 flex-shrink-0">
+              {isEditing ? (
+                <>
+                  <Button
+                    ref={saveButtonRef}
+                    variant="ghost"
+                    size="icon"
+                    className="h-5 w-5 flex-shrink-0 hover:bg-green-500/20"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleSaveEdit(e);
+                    }}
+                    title="Save"
+                    type="button"
+                  >
+                    <Check className="h-3 w-3" />
+                  </Button>
+                  <Button
+                    ref={cancelButtonRef}
+                    variant="ghost"
+                    size="icon"
+                    className="h-5 w-5 flex-shrink-0 hover:bg-destructive/20"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleCancelEdit(e);
+                    }}
+                    title="Cancel"
+                    type="button"
+                  >
+                    <XIcon className="h-3 w-3" />
+                  </Button>
+                </>
+              ) : (
+                <>
+                  {onRenameSavedChat && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-5 w-5 flex-shrink-0 hover:bg-muted"
+                      onClick={handleStartEdit}
+                      title="Rename chat"
+                    >
+                      <Edit2 className="h-3 w-3" />
+                    </Button>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-5 w-5 flex-shrink-0 hover:bg-destructive/20"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDeleteSavedChat(chat.id);
+                    }}
+                    title="Delete chat"
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
+          <p className="text-xs text-muted-foreground mt-1">
+            {chat.chatMode === 'ask' ? 'Ask' : chat.chatMode === 'review' ? 'Review' : 'Quiz'} • {chat.timestamp.toLocaleDateString()}
+          </p>
+          <p className="text-xs text-muted-foreground/70 mt-1">
+            {chat.messages.length} message{chat.messages.length !== 1 ? 's' : ''}
+          </p>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+interface LeftSidebarProps {
+  learningMode: LearningMode;
+  language: Language;
+  onLearningModeChange: (mode: LearningMode) => void;
+  onLanguageChange: (lang: Language) => void;
+  spaceType: SpaceType;
+  groupMembers: GroupMember[];
+  user: UserType | null;
+  onLogin: (user: UserType) => void;
+  onLogout: () => void;
+  isLoggedIn: boolean;
+  onEditProfile: () => void;
+  savedItems: SavedItem[];
+  recentlySavedId: string | null;
+  onUnsave: (id: string) => void;
+  onSave: (content: string, type: 'export' | 'quiz' | 'summary') => void;
+  savedChats: SavedChat[];
+  onLoadChat: (chat: SavedChat) => void;
+  onDeleteSavedChat: (id: string) => void;
+  onRenameSavedChat?: (id: string, newTitle: string) => void;
+  currentWorkspaceId: string;
+  workspaces?: Array<{ id: string; type: SpaceType; category?: 'course' | 'personal'; courseName?: string; courseInfo?: CourseInfo; members?: GroupMember[]; isEditable?: boolean; name?: string }>;
+  selectedCourse?: string;
+  courses?: Array<{ id: string; name: string }>;
+  availableCourses?: CourseInfo[];
+}
+
+export function LeftSidebar({
+  learningMode,
+  language,
+  onLearningModeChange,
+  onLanguageChange,
+  spaceType,
+  groupMembers,
+  user,
+  onLogin,
+  onLogout,
+  isLoggedIn,
+  onEditProfile,
+  savedItems,
+  recentlySavedId,
+  onUnsave,
+  onSave,
+  savedChats,
+  onLoadChat,
+  onDeleteSavedChat,
+  onRenameSavedChat,
+  currentWorkspaceId,
+  workspaces = [],
+  selectedCourse,
+  courses = [],
+  availableCourses = [],
+}: LeftSidebarProps) {
+  const [showLoginForm, setShowLoginForm] = useState(false);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [selectedItem, setSelectedItem] = useState<SavedItem | null>(null);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [showSearch, setShowSearch] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleLogin = () => {
+    if (!name.trim() || !email.trim()) {
+      toast.error('Please fill in all fields');
+      return;
+    }
+
+    onLogin({ name: name.trim(), email: email.trim() });
+    setShowLoginForm(false);
+    setName('');
+    setEmail('');
+    toast.success(`Welcome, ${name}!`);
+  };
+
+  const handleLogout = () => {
+    onLogout();
+    setShowLoginForm(false);
+    toast.success('Logged out successfully');
+  };
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const downloadBlob = (blob: Blob, filename: string) => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  };
+
+  const formatDateStamp = (date: Date) => {
+    const yyyy = date.getFullYear();
+    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    const dd = String(date.getDate()).padStart(2, '0');
+    return `${yyyy}-${mm}-${dd}`;
+  };
+
+  const getDefaultFilenameBase = (item: SavedItem) => {
+    const kind = item.type === 'export' ? 'export' : item.type === 'summary' ? 'summary' : 'quiz';
+    return `clare-${kind}-${formatDateStamp(item.timestamp)}`;
+  };
+
+  const handleDownloadMd = async (item: SavedItem) => {
+    try {
+      setIsDownloading(true);
+      toast.message('Preparing .md…');
+      const blob = new Blob([item.content], { type: 'text/markdown;charset=utf-8' });
+      downloadBlob(blob, `${getDefaultFilenameBase(item)}.md`);
+      toast.success('Downloaded .md');
+    } catch (e) {
+      console.error(e);
+      toast.error('Failed to download .md');
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const handleDownloadDocx = async (item: SavedItem) => {
+    try {
+      setIsDownloading(true);
+      toast.message('Preparing .docx…');
+      const lines = item.content.split('\n');
+      const paragraphs: Paragraph[] = lines.map((line) => {
+        const trimmed = line.trim();
+        if (!trimmed) return new Paragraph({ text: '' });
+        if (trimmed.startsWith('### ')) {
+          return new Paragraph({ text: trimmed.replace(/^###\s+/, ''), heading: HeadingLevel.HEADING_3 });
+        }
+        if (trimmed.startsWith('## ')) {
+          return new Paragraph({ text: trimmed.replace(/^##\s+/, ''), heading: HeadingLevel.HEADING_2 });
+        }
+        if (trimmed.startsWith('# ')) {
+          return new Paragraph({ text: trimmed.replace(/^#\s+/, ''), heading: HeadingLevel.HEADING_1 });
+        }
+        return new Paragraph({ children: [new TextRun({ text: line })] });
+      });
+      const doc = new Document({
+        sections: [{ properties: {}, children: paragraphs }],
+      });
+      const blob = await Packer.toBlob(doc);
+      downloadBlob(blob, `${getDefaultFilenameBase(item)}.docx`);
+      toast.success('Downloaded .docx');
+    } catch (e) {
+      console.error(e);
+      toast.error('Failed to download .docx');
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const handleDownloadPdf = async (item: SavedItem) => {
+    try {
+      setIsDownloading(true);
+      toast.message('Preparing .pdf…');
+      const doc = new jsPDF({ unit: 'pt', format: 'a4' });
+      const pageWidth = doc.internal.pageSize.getWidth();
+      const pageHeight = doc.internal.pageSize.getHeight();
+      const margin = 40;
+      const contentWidth = pageWidth - margin * 2;
+      const lineHeight = 16;
+
+      const lines = doc.splitTextToSize(item.content, contentWidth);
+      let y = margin;
+      lines.forEach((line) => {
+        if (y + lineHeight > pageHeight - margin) {
+          doc.addPage();
+          y = margin;
+        }
+        doc.text(line, margin, y);
+        y += lineHeight;
+      });
+
+      const filenameBase = getDefaultFilenameBase(item);
+      doc.save(`${filenameBase}.pdf`);
+      toast.success('Downloaded .pdf');
+    } catch (e) {
+      console.error(e);
+      toast.error('Failed to download .pdf');
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const handleCopy = async (content: string) => {
+    await navigator.clipboard.writeText(content);
+    setCopied(true);
+    toast.success('Copied to clipboard!');
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleUnsaveItem = (id: string) => {
+    onUnsave(id);
+    // Don't close the dialog when unsaving - keep the window open
+  };
+
+  // Check if selectedItem is still in savedItems (by id if it has one, or by content+type)
+  const isItemSaved = selectedItem 
+    ? savedItems.some(item => {
+        // First try to match by id if selectedItem has one
+        if (selectedItem.id && item.id === selectedItem.id) return true;
+        // Otherwise match by content and type
+        return item.content === selectedItem.content && item.type === selectedItem.type;
+      })
+    : false;
+
+  // Update selectedItem when savedItems changes (e.g., after saving)
+  useEffect(() => {
+    if (selectedItem && isDialogOpen) {
+      // Find the item in savedItems by content and type
+      const updatedItem = savedItems.find(item => 
+        item.content === selectedItem.content && item.type === selectedItem.type
+      );
+      if (updatedItem && updatedItem.id !== selectedItem.id) {
+        // Update selectedItem to have the correct id from savedItems (only if id changed)
+        setSelectedItem(updatedItem);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [savedItems, isDialogOpen]);
+
+  const handleToggleSave = () => {
+    if (!selectedItem) return;
+    
+    if (isItemSaved) {
+      // Unsave the item - find it by id or content+type
+      const itemToUnsave = savedItems.find(item => 
+        (selectedItem.id && item.id === selectedItem.id) || 
+        (item.content === selectedItem.content && item.type === selectedItem.type)
+      );
+      if (itemToUnsave) {
+        handleUnsaveItem(itemToUnsave.id);
+      }
+    } else {
+      // Save the item
+      onSave(selectedItem.content, selectedItem.type);
+    }
+  };
+
+  // Filter saved items based on search query
+  const filteredSavedItems = savedItems.filter(item => {
+    if (!searchQuery.trim()) return true;
+    const query = searchQuery.toLowerCase();
+    return (
+      item.title.toLowerCase().includes(query) ||
+      item.content.toLowerCase().includes(query) ||
+      item.type.toLowerCase().includes(query)
+    );
+  }).filter(item => item.workspaceId === currentWorkspaceId);
+
+  // Use native event listeners to prevent scroll propagation
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      // Always stop propagation to prevent scrolling other panels
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      
+      // Only prevent default if we're at the boundaries
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const isScrollable = scrollHeight > clientHeight;
+      const isAtTop = scrollTop === 0;
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+
+      // If scrolling up at top or down at bottom, prevent default to stop propagation
+      if (isScrollable && ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0))) {
+        e.preventDefault();
+      }
+    };
+
+    container.addEventListener('wheel', handleWheel, { passive: false, capture: true });
+    
+    return () => {
+      container.removeEventListener('wheel', handleWheel, { capture: true });
+    };
+  }, []);
+
+  // Sample courses - same as ChatArea
+  const defaultCourses = [
+    { id: 'course1', name: 'Introduction to AI' },
+    { id: 'course2', name: 'Machine Learning' },
+    { id: 'course3', name: 'Data Structures' },
+    { id: 'course4', name: 'Web Development' },
+  ];
+  const coursesList = courses.length > 0 ? courses : defaultCourses;
+
+  // Get current workspace
+  const currentWorkspace = workspaces?.find(w => w.id === currentWorkspaceId);
+  
+  // State for editable workspace title (for personal interest workspaces)
+  const [editableTitle, setEditableTitle] = useState('Untitled');
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+
+  // Determine what to display based on workspace type
+  const getCourseDisplayInfo = () => {
+    if (!currentWorkspace) return null;
+    
+    // Group workspace with course
+    if (currentWorkspace.type === 'group' && currentWorkspace.category === 'course') {
+      if (currentWorkspace.courseInfo) {
+        return {
+          type: 'course' as const,
+          name: currentWorkspace.courseInfo.name,
+          instructor: currentWorkspace.courseInfo.instructor,
+          teachingAssistant: currentWorkspace.courseInfo.teachingAssistant,
+        };
+      }
+      // Fallback if courseInfo is missing
+      return {
+        type: 'course' as const,
+        name: currentWorkspace.courseName || 'Unknown Course',
+        instructor: { name: 'Unknown', email: '' },
+        teachingAssistant: { name: 'Unknown', email: '' },
+      };
+    }
+    
+    // Group workspace with personal interest
+    if (currentWorkspace.type === 'group' && currentWorkspace.category === 'personal') {
+      return {
+        type: 'personal' as const,
+        name: editableTitle,
+        members: currentWorkspace.members || [],
+      };
+    }
+    
+    // Individual workspace (My Space)
+    if (currentWorkspace.type === 'individual') {
+      const saved = selectedCourse || localStorage.getItem('myspace_selected_course') || 'course1';
+      const courseInfo = availableCourses?.find(c => c.id === saved);
+      if (courseInfo) {
+        return {
+          type: 'course' as const,
+          name: courseInfo.name,
+          instructor: courseInfo.instructor,
+          teachingAssistant: courseInfo.teachingAssistant,
+        };
+      }
+      const course = coursesList.find(c => c.id === saved);
+      return {
+        type: 'course' as const,
+        name: course?.name || saved,
+        instructor: { name: 'Unknown', email: '' },
+        teachingAssistant: { name: 'Unknown', email: '' },
+      };
+    }
+    
+    return null;
+  };
+
+  const courseDisplayInfo = getCourseDisplayInfo();
+
+  return (
+    <div 
+      ref={scrollContainerRef}
+      className="flex-1 overflow-auto overscroll-contain flex flex-col" 
+      style={{ overscrollBehavior: 'contain' }}
+    >
+      {/* Course Information Section */}
+      {isLoggedIn && courseDisplayInfo && (
+        <div className="p-4 border-b border-border flex-shrink-0">
+          {courseDisplayInfo.type === 'course' ? (
+            <>
+              <h3 className="text-base font-semibold mb-4">{courseDisplayInfo.name}</h3>
+              <div className="space-y-2 text-sm">
+                <div>
+                  <span className="text-muted-foreground">Instructor: </span>
+                  <a 
+                    href={`mailto:${courseDisplayInfo.instructor.email}`}
+                    className="text-primary hover:underline"
+                  >
+                    {courseDisplayInfo.instructor.name}
+                  </a>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">TA: </span>
+                  <a 
+                    href={`mailto:${courseDisplayInfo.teachingAssistant.email}`}
+                    className="text-primary hover:underline"
+                  >
+                    {courseDisplayInfo.teachingAssistant.name}
+                  </a>
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              {/* Personal Interest Workspace - Editable Title */}
+              <div className="mb-4">
+                {isEditingTitle ? (
+                  <Input
+                    value={editableTitle}
+                    onChange={(e) => setEditableTitle(e.target.value)}
+                    onBlur={() => setIsEditingTitle(false)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        setIsEditingTitle(false);
+                      }
+                    }}
+                    autoFocus
+                    className="text-base font-semibold"
+                  />
+                ) : (
+                  <h3 
+                    className="text-base font-semibold cursor-pointer hover:text-primary"
+                    onClick={() => setIsEditingTitle(true)}
+                  >
+                    {editableTitle}
+                  </h3>
+                )}
+              </div>
+              <div className="space-y-2 text-sm">
+                <div className="text-muted-foreground mb-2">Members:</div>
+                {courseDisplayInfo.members.map((member, idx) => (
+                  <div key={member.id}>
+                    <span className="text-muted-foreground">{idx === 0 ? 'Creator: ' : 'Member: '}</span>
+                    <a 
+                      href={`mailto:${member.email}`}
+                      className="text-primary hover:underline"
+                    >
+                      {member.name}
+                    </a>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Login Section - Only show when not logged in */}
+      {!isLoggedIn && (
+        <div className="p-4 border-b border-border flex-shrink-0">
+          <h3 className="text-base font-medium mb-4">Login</h3>
+          <Card className="p-4">
+            <div className="space-y-4">
+              <div className="flex flex-col items-center py-4">
+                <img
+                  src="https://images.unsplash.com/photo-1588912914049-d2664f76a947?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdHVkZW50JTIwc3R1ZHlpbmclMjBpbGx1c3RyYXRpb258ZW58MXx8fHwxNzY2MDY2NjcyfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+                  alt="Student studying"
+                  className="w-20 h-20 rounded-full object-cover mb-4"
+                />
+                <h3 className="mb-2">Welcome to Clare!</h3>
+                <p className="text-sm text-muted-foreground text-center mb-4">
+                  Log in to start your personalized learning journey
+                </p>
+              </div>
+
+              {!showLoginForm ? (
+                <Button onClick={() => setShowLoginForm(true)} className="w-full gap-2">
+                  <LogIn className="h-4 w-4" />
+                  Student Login
+                </Button>
+              ) : (
+                <div className="space-y-3">
+                  <div className="space-y-2">
+                    <Label htmlFor="name">Name</Label>
+                    <Input
+                      id="name"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      placeholder="Enter your name"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="email">Email / Student ID</Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      placeholder="Enter your email or ID"
+                    />
+                  </div>
+                  <div className="flex gap-2">
+                    <Button onClick={handleLogin} className="flex-1">
+                      Enter
+                    </Button>
+                    <Button
+                      variant="outline"
+                      onClick={() => setShowLoginForm(false)}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {/* Group Members - Only show in group mode */}
+      {spaceType === 'group' && (
+        <div className="p-4 border-b border-border flex-shrink-0">
+          <GroupMembers members={groupMembers} />
+        </div>
+      )}
+
+      {/* Saved Chat Section - Above Saved Files */}
+      {isLoggedIn && (
+        <div className="border-b border-border p-4 flex-1 min-h-0 flex flex-col">
+          <h3 className="text-base font-medium mb-4 flex-shrink-0">Saved Chat</h3>
+          {savedChats.length === 0 ? (
+            <div className="text-sm text-muted-foreground text-center py-4 flex-shrink-0">
+              <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
+              <p>No saved chats yet</p>
+              <p className="text-xs mt-1">Save conversations to view them here</p>
+            </div>
+          ) : (
+            <div className="space-y-2 overflow-y-auto flex-1 min-h-0">
+              {savedChats.map((chat) => (
+                <div key={chat.id}>
+                  <SavedChatItem
+                    chat={chat}
+                    onLoadChat={onLoadChat}
+                    onDeleteSavedChat={onDeleteSavedChat}
+                    onRenameSavedChat={onRenameSavedChat}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Saved Item Dialog */}
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-4xl max-h-[85vh] flex flex-col">
+          <DialogHeader>
+            <DialogTitle>{selectedItem?.title}</DialogTitle>
+            <DialogDescription>
+              {selectedItem?.type === 'export' ? 'Export' : selectedItem?.type === 'quiz' ? 'Quiz' : 'Summary'} • {selectedItem?.timestamp.toLocaleDateString()}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col flex-1 min-h-0 space-y-4 mt-4">
+            {selectedItem && (
+              <>
+                <div className="flex items-center justify-end gap-2 flex-shrink-0">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={isDownloading}
+                    onClick={() => handleDownloadMd(selectedItem)}
+                    title="Download as .md"
+                    className="h-7 px-2 text-xs gap-1.5"
+                  >
+                    <Download className="h-3 w-3" />
+                    .md
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={isDownloading}
+                    onClick={() => handleDownloadDocx(selectedItem)}
+                    title="Download as .docx"
+                    className="h-7 px-2 text-xs gap-1.5"
+                  >
+                    <Download className="h-3 w-3" />
+                    .docx
+                  </Button>
+                  {selectedItem.format === 'pdf' && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      disabled={isDownloading}
+                      onClick={() => handleDownloadPdf(selectedItem)}
+                      title="Download as .pdf"
+                      className="h-7 px-2 text-xs gap-1.5"
+                    >
+                      <Download className="h-3 w-3" />
+                      .pdf
+                    </Button>
+                  )}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleCopy(selectedItem.content)}
+                    disabled={isDownloading}
+                    className="h-7 px-2 text-xs gap-1.5"
+                    title="Copy"
+                  >
+                    <Copy className={`h-3 w-3 ${copied ? 'text-green-600' : ''}`} />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleToggleSave}
+                    disabled={isDownloading}
+                    className={`h-7 px-2 text-xs gap-1.5 ${isItemSaved ? 'bg-red-50 dark:bg-red-950/20 border-red-300 dark:border-red-800' : ''}`}
+                    title={isItemSaved ? 'Unsave' : 'Save for later'}
+                  >
+                    <Bookmark className={`h-3 w-3 ${isItemSaved ? 'fill-red-600 text-red-600' : ''}`} />
+                  </Button>
+                </div>
+                <Separator className="flex-shrink-0" />
+                <div className="text-sm whitespace-pre-wrap text-foreground overflow-y-auto flex-1 min-h-0">
+                  {selectedItem.content}
+                </div>
+              </>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

web/src/components/LoginScreen.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Card } from './ui/card';
+import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
+import type { User } from '../App';
+
+interface LoginScreenProps {
+  onLogin: (user: User) => void;
+}
+
+export function LoginScreen({ onLogin }: LoginScreenProps) {
+  const [showForm, setShowForm] = useState(false);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (name.trim() && email.trim()) {
+      onLogin({ name: name.trim(), email: email.trim() });
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <Card className="w-full max-w-md p-8">
+        <div className="flex flex-col items-center space-y-6">
+          {/* Clare Avatar */}
+          <div className="w-24 h-24 rounded-full overflow-hidden bg-white flex items-center justify-center">
+            <img src={clareAvatar} alt="Clare AI" className="w-full h-full object-cover" />
+          </div>
+
+          {/* Welcome Text */}
+          <div className="text-center space-y-2">
+            <h1 className="text-2xl">Welcome to Clare</h1>
+            <p className="text-sm text-muted-foreground">
+              Your AI teaching assistant for personalized learning
+            </p>
+          </div>
+
+          {!showForm ? (
+            <Button 
+              onClick={() => setShowForm(true)} 
+              className="w-full"
+              size="lg"
+            >
+              Sign In
+            </Button>
+          ) : (
+            <form onSubmit={handleSubmit} className="w-full space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="login-name">Name</Label>
+                <Input
+                  id="login-name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Enter your name"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="login-email">Email / Student ID</Label>
+                <Input
+                  id="login-email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="Enter your email or ID"
+                  required
+                />
+              </div>
+              <div className="flex gap-2">
+                <Button type="submit" className="flex-1">
+                  Enter
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setShowForm(false)}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+}

web/src/components/Message.tsx

@@ -0,0 +1,347 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { 
+  Copy, 
+  ThumbsUp, 
+  ThumbsDown, 
+  ChevronDown, 
+  ChevronUp,
+  Check,
+  Bot,
+  X
+} from 'lucide-react';
+import { Badge } from './ui/badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
+import { Textarea } from './ui/textarea';
+import type { Message as MessageType } from '../App';
+import { toast } from 'sonner';
+import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
+
+interface MessageProps {
+  key?: React.Key;
+  message: MessageType;
+  showSenderInfo?: boolean; // For group chat mode
+  isFirstGreeting?: boolean; // Indicates if this is the first greeting message
+  showNextButton?: boolean; // For quiz mode
+  onNextQuestion?: () => void; // For quiz mode
+  chatMode?: 'ask' | 'review' | 'quiz'; // Current chat mode
+}
+
+// 反馈标签选项
+const FEEDBACK_TAGS = {
+  'not-helpful': [
+    'Code was incorrect',
+    "Shouldn't have used Memory",
+    "Don't like the personality",
+    "Don't like the style",
+    'Not factually correct',
+  ],
+  'helpful': [
+    'Accurate and helpful',
+    'Clear explanation',
+    'Good examples',
+    'Solved my problem',
+    'Well structured',
+  ],
+};
+
+export function Message({ 
+  message, 
+  showSenderInfo = false, 
+  isFirstGreeting = false,
+  showNextButton = false,
+  onNextQuestion,
+  chatMode = 'ask',
+}: MessageProps) {
+  const [feedback, setFeedback] = useState<'helpful' | 'not-helpful' | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [referencesOpen, setReferencesOpen] = useState(false);
+  const [showFeedbackArea, setShowFeedbackArea] = useState(false);
+  const [feedbackType, setFeedbackType] = useState<'helpful' | 'not-helpful' | null>(null);
+  const [feedbackText, setFeedbackText] = useState('');
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [isHovered, setIsHovered] = useState(false);
+  const [nextButtonClicked, setNextButtonClicked] = useState(false);
+  
+  const isUser = message.role === 'user';
+  // For user messages: always show. For assistant messages: always show except first greeting (or review-1, quiz-1)
+  const isWelcomeMessage = isFirstGreeting || message.id === 'review-1' || message.id === 'quiz-1';
+  const shouldShowActions = isUser ? true : !isWelcomeMessage;
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(message.content);
+    setCopied(true);
+    toast.success('Message copied to clipboard');
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleFeedbackClick = (type: 'helpful' | 'not-helpful') => {
+    if (feedback === type) {
+      // 如果点击的是已选中的反馈，则关闭反馈区域
+      setFeedback(null);
+      setShowFeedbackArea(false);
+      setFeedbackType(null);
+      setFeedbackText('');
+      setSelectedTags([]);
+    } else {
+      // 立即设置反馈状态（按钮会立即显示颜色）
+      setFeedback(type);
+      // 打开反馈区域
+      setFeedbackType(type);
+      setShowFeedbackArea(true);
+    }
+  };
+
+  const handleFeedbackClose = () => {
+    setShowFeedbackArea(false);
+    setFeedbackType(null);
+    setFeedbackText('');
+    setSelectedTags([]);
+    // 注意：不重置 feedback，保持点赞/点踩的状态
+  };
+
+  const handleTagToggle = (tag: string) => {
+    setSelectedTags(prev => 
+      prev.includes(tag) 
+        ? prev.filter(t => t !== tag)
+        : [...prev, tag]
+    );
+  };
+
+  const handleFeedbackSubmit = () => {
+    // 这里可以发送反馈到后端
+    const feedbackData = {
+      type: feedbackType,
+      tags: selectedTags,
+      text: feedbackText,
+      messageId: message.id || message.content.substring(0, 50),
+    };
+    
+    console.log('Feedback submitted:', feedbackData);
+    toast.success('感谢您的反馈！');
+    handleFeedbackClose();
+    // 保持反馈状态（点赞/点踩）
+  };
+
+  return (
+    <div className={`flex gap-2 ${isUser && !showSenderInfo ? 'justify-end' : 'justify-start'} px-4`}>
+      {/* Avatar */}
+      {showSenderInfo && message.sender ? (
+        <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+          message.sender.isAI 
+            ? 'overflow-hidden bg-white' 
+            : 'overflow-hidden bg-white'
+        }`}>
+          {message.sender.isAI ? (
+            <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
+          ) : (
+            <img
+              src={
+                message.sender.avatar || 
+                `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(message.sender.email || message.sender.name)}`
+              }
+              alt={message.sender.name}
+              className="w-full h-full object-cover"
+            />
+          )}
+        </div>
+      ) : !isUser ? (
+        <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
+          <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
+        </div>
+      ) : null}
+
+      <div 
+        className={`group flex flex-col gap-2 ${isUser && !showSenderInfo ? 'items-end' : 'items-start'}`}
+        style={{ maxWidth: 'min(770px, calc(100% - 2rem))' }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {/* Sender name in group chat */}
+        {showSenderInfo && message.sender && (
+          <div className="flex items-center gap-2 px-1">
+            <span className="text-xs">{message.sender.name}</span>
+            {message.sender.isAI && (
+              <Badge variant="secondary" className="text-xs h-4 px-1">AI</Badge>
+            )}
+          </div>
+        )}
+
+        <div
+          className={`
+            rounded-2xl px-4 py-3
+            ${isUser && !showSenderInfo
+              ? 'bg-primary text-primary-foreground' 
+              : 'bg-muted'
+            }
+          `}
+        >
+          <p className="whitespace-pre-wrap text-base">{message.content}</p>
+        </div>
+
+        {/* Next Question Button for Quiz Mode */}
+        {!isUser && showNextButton && !nextButtonClicked && chatMode === 'quiz' && onNextQuestion && (
+          <div className="mt-2">
+            <Button
+              onClick={() => {
+                setNextButtonClicked(true);
+                onNextQuestion();
+              }}
+              className="bg-primary hover:bg-primary/90"
+            >
+              Next Question
+            </Button>
+          </div>
+        )}
+
+        {/* References */}
+        {message.references && message.references.length > 0 && (
+          <Collapsible open={referencesOpen} onOpenChange={setReferencesOpen}>
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm" className="gap-1 h-7 text-xs">
+                {referencesOpen ? (
+                  <ChevronUp className="h-3 w-3" />
+                ) : (
+                  <ChevronDown className="h-3 w-3" />
+                )}
+                {message.references.length} {message.references.length === 1 ? 'reference' : 'references'}
+              </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent className="space-y-1 mt-1">
+              {message.references.map((ref, index) => (
+                <Badge key={index} variant="outline" className="text-xs">
+                  {ref}
+                </Badge>
+              ))}
+            </CollapsibleContent>
+          </Collapsible>
+        )}
+
+        {/* Message Actions */}
+        {shouldShowActions && (
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="icon"
+              className={`h-7 w-7 rounded-md transition-all hover:bg-accent hover:scale-110 active:scale-95 ${
+                copied ? 'bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-400' : ''
+              }`}
+              onClick={handleCopy}
+              title="Copy"
+            >
+              {copied ? (
+                <Check className="h-4 w-4" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
+            </Button>
+
+            {!isUser && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={`h-7 w-7 rounded-md transition-all hover:bg-accent hover:scale-110 active:scale-95 ${
+                    feedback === 'helpful' ? 'bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-400' : ''
+                  }`}
+                  onClick={() => handleFeedbackClick('helpful')}
+                  title="Helpful"
+                >
+                  <ThumbsUp className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={`h-7 w-7 rounded-md transition-all hover:bg-accent hover:scale-110 active:scale-95 ${
+                    feedback === 'not-helpful' ? 'bg-red-100 text-red-600 dark:bg-red-900/20 dark:text-red-400' : ''
+                  }`}
+                  onClick={() => handleFeedbackClick('not-helpful')}
+                  title="Not helpful"
+                >
+                  <ThumbsDown className="h-4 w-4" />
+                </Button>
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Feedback Area - 展开在消息下方 */}
+        {!isUser && showFeedbackArea && feedbackType && (
+          <div className="w-full mt-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+            <div className="flex items-start justify-between mb-4">
+              <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                Tell us more:
+              </h4>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={handleFeedbackClose}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+            
+            {/* 标签按钮 */}
+            <div className="flex flex-wrap gap-2 mb-4">
+              {FEEDBACK_TAGS[feedbackType].map((tag) => (
+                <Button
+                  key={tag}
+                  variant={selectedTags.includes(tag) ? 'default' : 'outline'}
+                  size="sm"
+                  className="h-7 text-xs"
+                  onClick={() => handleTagToggle(tag)}
+                >
+                  {tag}
+                </Button>
+              ))}
+            </div>
+
+            {/* 文本输入框 */}
+            <Textarea
+              className="min-h-[60px] mb-4 bg-gray-100/50 dark:bg-gray-700/50 border-gray-200 dark:border-gray-600"
+              value={feedbackText}
+              onChange={(e) => setFeedbackText(e.target.value)}
+              placeholder="Additional feedback (optional)..."
+            />
+
+            {/* 提交按钮 */}
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleFeedbackClose}
+              >
+                Cancel
+              </Button>
+              <Button
+                size="sm"
+                onClick={handleFeedbackSubmit}
+                disabled={selectedTags.length === 0 && !feedbackText.trim()}
+              >
+                Submit
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {isUser && !showSenderInfo && (
+        <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
+          {message.sender ? (
+            <img
+              src={
+                message.sender.avatar || 
+                `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(message.sender.email || message.sender.name)}`
+              }
+              alt={message.sender.name}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <span className="text-base">👤</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

web/src/components/Onboarding.tsx

@@ -0,0 +1,350 @@
+import React, { useState, useRef } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Textarea } from './ui/textarea';
+import { Dialog, DialogContent, DialogTitle } from './ui/dialog';
+import type { User as UserType } from '../App';
+import { toast } from 'sonner';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface OnboardingProps {
+  user: UserType;
+  onComplete: (user: UserType) => void;
+  onSkip: () => void;
+}
+
+const TOTAL_STEPS = 5;
+
+export function Onboarding({ user, onComplete, onSkip }: OnboardingProps) {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [name, setName] = useState(user.name);
+  const [email, setEmail] = useState(user.email);
+  const [studentId, setStudentId] = useState('');
+  const [department, setDepartment] = useState('');
+  const [year, setYear] = useState('');
+  const [major, setMajor] = useState('');
+  const [bio, setBio] = useState('');
+  const [photoPreview, setPhotoPreview] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handlePhotoSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!file.type.startsWith('image/')) {
+        toast.error('Please select an image file');
+        return;
+      }
+      // Validate file size (2MB)
+      if (file.size > 2 * 1024 * 1024) {
+        toast.error('File size must be less than 2MB');
+        return;
+      }
+      // Create preview
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setPhotoPreview(e.target?.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleChangePhotoClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleNext = () => {
+    if (currentStep < TOTAL_STEPS) {
+      setCurrentStep(currentStep + 1);
+    } else {
+      handleComplete();
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const handleSkip = () => {
+    // Skip all remaining steps and complete onboarding
+    onSkip();
+  };
+
+  const handleComplete = () => {
+    if (name.trim() && email.trim()) {
+      onComplete({ name: name.trim(), email: email.trim() });
+      toast.success('Profile setup completed!');
+    } else {
+      toast.error('Please fill in all required fields');
+    }
+  };
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 1:
+        return (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Basic Information</h3>
+            <p className="text-sm text-muted-foreground">
+              Let's start with your basic information
+            </p>
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="onboarding-name">Full Name *</Label>
+                <Input
+                  id="onboarding-name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Enter your full name"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="onboarding-email">Email *</Label>
+                <Input
+                  id="onboarding-email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="Enter your email"
+                />
+              </div>
+            </div>
+          </div>
+        );
+      case 2:
+        return (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Academic Background</h3>
+            <p className="text-sm text-muted-foreground">
+              Tell us about your academic information
+            </p>
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="onboarding-student-id">Student ID</Label>
+                <Input
+                  id="onboarding-student-id"
+                  value={studentId}
+                  onChange={(e) => setStudentId(e.target.value)}
+                  placeholder="Enter your student ID"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="onboarding-department">Department</Label>
+                <Input
+                  id="onboarding-department"
+                  value={department}
+                  onChange={(e) => setDepartment(e.target.value)}
+                  placeholder="Enter your department"
+                />
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="onboarding-year">Year Level</Label>
+                  <Select value={year} onValueChange={setYear}>
+                    <SelectTrigger id="onboarding-year">
+                      <SelectValue placeholder="Select year level" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="1st Year">1st Year</SelectItem>
+                      <SelectItem value="2nd Year">2nd Year</SelectItem>
+                      <SelectItem value="3rd Year">3rd Year</SelectItem>
+                      <SelectItem value="4th Year">4th Year</SelectItem>
+                      <SelectItem value="Graduate">Graduate</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="onboarding-major">Major</Label>
+                  <Input
+                    id="onboarding-major"
+                    value={major}
+                    onChange={(e) => setMajor(e.target.value)}
+                    placeholder="Enter your major"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      case 3:
+        return (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">About You</h3>
+            <p className="text-sm text-muted-foreground">
+              Share a brief introduction about yourself
+            </p>
+            <div className="space-y-2">
+              <Label htmlFor="onboarding-bio">Bio</Label>
+              <Textarea
+                id="onboarding-bio"
+                value={bio}
+                onChange={(e) => setBio(e.target.value)}
+                placeholder="Tell us about yourself..."
+                className="min-h-[120px] resize-none"
+              />
+              <p className="text-xs text-muted-foreground">
+                Brief description for your profile. Max 200 characters.
+              </p>
+            </div>
+          </div>
+        );
+      case 4:
+        return (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Learning Preferences</h3>
+            <p className="text-sm text-muted-foreground">
+              Help us personalize your learning experience
+            </p>
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="onboarding-learning-style">Preferred Learning Style</Label>
+                <Select defaultValue="visual">
+                  <SelectTrigger id="onboarding-learning-style">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="visual">Visual</SelectItem>
+                    <SelectItem value="auditory">Auditory</SelectItem>
+                    <SelectItem value="reading">Reading/Writing</SelectItem>
+                    <SelectItem value="kinesthetic">Kinesthetic</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="onboarding-pace">Learning Pace</Label>
+                <Select defaultValue="moderate">
+                  <SelectTrigger id="onboarding-pace">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="slow">Slow & Steady</SelectItem>
+                    <SelectItem value="moderate">Moderate</SelectItem>
+                    <SelectItem value="fast">Fast-paced</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+        );
+      case 5:
+        return (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Profile Picture</h3>
+            <p className="text-sm text-muted-foreground">
+              Upload a photo to personalize your profile (optional)
+            </p>
+            <div className="flex items-center gap-4">
+              <div className="w-24 h-24 rounded-full bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center text-white text-3xl overflow-hidden">
+                {photoPreview ? (
+                  <img src={photoPreview} alt="Profile" className="w-full h-full object-cover" />
+                ) : (
+                  name.charAt(0).toUpperCase()
+                )}
+              </div>
+              <div>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/jpeg,image/png,image/gif,image/webp"
+                  onChange={handlePhotoSelect}
+                  className="hidden"
+                />
+                <Button 
+                  variant="outline" 
+                  size="sm"
+                  onClick={handleChangePhotoClick}
+                >
+                  Change Photo
+                </Button>
+                <p className="text-xs text-muted-foreground mt-1">
+                  JPG, PNG or GIF. Max size 2MB
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Dialog open onOpenChange={(open) => { if (!open) onSkip(); }}>
+      <DialogContent 
+        className="sm:max-w-lg p-0 gap-0 max-h-[90vh] overflow-hidden"
+        style={{ zIndex: 1001 }}
+        overlayClassName="!inset-0 !z-[99]"
+        overlayStyle={{ 
+          top: 0, 
+          left: 0, 
+          right: 0, 
+          bottom: 0, 
+          zIndex: 99,
+          position: 'fixed'
+        }}
+      >
+        <div className="flex flex-col max-h-[90vh]">
+          {/* Header */}
+          <div className="border-b border-border p-4 flex items-center justify-between flex-shrink-0">
+            <div className="flex-1">
+              <DialogTitle className="text-xl font-medium">Welcome! Let's set up your profile</DialogTitle>
+              <p className="text-sm text-muted-foreground mt-1">
+                Step {currentStep} of {TOTAL_STEPS}
+              </p>
+            </div>
+            {/* Progress indicator */}
+            <div className="flex gap-1">
+              {Array.from({ length: TOTAL_STEPS }).map((_, index) => (
+                <div
+                  key={index}
+                  className={`h-2 w-2 rounded-full transition-colors ${
+                    index + 1 <= currentStep
+                      ? 'bg-primary'
+                      : 'bg-muted'
+                  }`}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="p-6 overflow-y-auto flex-1">
+            {renderStepContent()}
+          </div>
+
+          {/* Footer */}
+          <div className="border-t border-border p-4 flex justify-between gap-2 flex-shrink-0">
+            <div className="flex gap-2">
+              {currentStep > 1 && (
+                <Button variant="outline" onClick={handlePrevious}>
+                  <ChevronLeft className="h-4 w-4 mr-1" />
+                  Previous
+                </Button>
+              )}
+            </div>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={handleSkip}>
+                Skip all
+              </Button>
+              <Button onClick={handleNext}>
+                {currentStep === TOTAL_STEPS ? 'Complete' : 'Next Step'}
+                {currentStep < TOTAL_STEPS && <ChevronRight className="h-4 w-4 ml-1" />}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

web/src/components/ProfileEditor.tsx

@@ -0,0 +1,263 @@
+import React, { useState, useRef } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Textarea } from './ui/textarea';
+import { Dialog, DialogContent, DialogTitle } from './ui/dialog';
+import type { User as UserType } from '../App';
+import { toast } from 'sonner';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select';
+
+interface ProfileEditorProps {
+  user: UserType;
+  onSave: (user: UserType) => void;
+  onClose: () => void;
+}
+
+export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
+  const [name, setName] = useState(user.name);
+  const [email, setEmail] = useState(user.email);
+  const [studentId, setStudentId] = useState('S12345678');
+  const [department, setDepartment] = useState('Computer Science');
+  const [year, setYear] = useState('3rd Year');
+  const [major, setMajor] = useState('Artificial Intelligence');
+  const [bio, setBio] = useState('Passionate about AI and machine learning');
+  const [photoPreview, setPhotoPreview] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSave = () => {
+    if (name.trim() && email.trim()) {
+      onSave({ name: name.trim(), email: email.trim() });
+      toast.success('Profile updated successfully!');
+      onClose();
+    } else {
+      toast.error('Please fill in all required fields');
+    }
+  };
+
+  const handlePhotoSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!file.type.startsWith('image/')) {
+        toast.error('Please select an image file');
+        return;
+      }
+      // Validate file size (2MB)
+      if (file.size > 2 * 1024 * 1024) {
+        toast.error('File size must be less than 2MB');
+        return;
+      }
+      // Create preview
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setPhotoPreview(e.target?.result as string);
+        toast.success('Photo updated successfully!');
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleChangePhotoClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <Dialog open onOpenChange={(open) => { if (!open) onClose(); }}>
+      <DialogContent 
+        className="sm:max-w-[800px] p-0 gap-0 max-h-[90vh] overflow-hidden"
+        style={{ zIndex: 1001, maxWidth: '800px', width: '800px' }}
+        overlayClassName="!top-16 !left-0 !right-0 !bottom-0 !z-[99]"
+        overlayStyle={{ 
+          top: '64px', 
+          left: 0, 
+          right: 0, 
+          bottom: 0, 
+          zIndex: 99,
+          position: 'fixed'
+        }}
+      >
+        <div className="flex flex-col max-h-[90vh]">
+          {/* Header */}
+          <div className="p-4 flex items-center justify-between flex-shrink-0">
+            <DialogTitle className="text-xl font-medium">Edit Profile</DialogTitle>
+          </div>
+
+          {/* Content */}
+          <div className="p-6 space-y-6 overflow-y-auto flex-1">
+          {/* Profile Picture */}
+          <div className="flex items-center gap-4">
+            <div className="w-20 h-20 rounded-full bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center text-white text-2xl overflow-hidden">
+              {photoPreview ? (
+                <img src={photoPreview} alt="Profile" className="w-full h-full object-cover" />
+              ) : (
+                name.charAt(0).toUpperCase()
+              )}
+            </div>
+            <div>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/jpeg,image/png,image/gif,image/webp"
+                onChange={handlePhotoSelect}
+                className="hidden"
+              />
+              <Button 
+                variant="outline" 
+                size="sm"
+                onClick={handleChangePhotoClick}
+              >
+                Change Photo
+              </Button>
+              <p className="text-xs text-muted-foreground mt-1">
+                JPG, PNG or GIF. Max size 2MB
+              </p>
+            </div>
+          </div>
+
+          {/* Basic Information */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium">Basic Information</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="edit-name">Full Name *</Label>
+                <Input
+                  id="edit-name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Enter your full name"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="edit-email">Email *</Label>
+                <Input
+                  id="edit-email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="Enter your email"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="edit-student-id">Student ID</Label>
+                <Input
+                  id="edit-student-id"
+                  value={studentId}
+                  onChange={(e) => setStudentId(e.target.value)}
+                  placeholder="Enter your student ID"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="edit-department">Department</Label>
+                <Input
+                  id="edit-department"
+                  value={department}
+                  onChange={(e) => setDepartment(e.target.value)}
+                  placeholder="Enter your department"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Academic Background */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium">Academic Background</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="edit-year">Year Level</Label>
+                <Select value={year} onValueChange={setYear}>
+                  <SelectTrigger id="edit-year">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="1st Year">1st Year</SelectItem>
+                    <SelectItem value="2nd Year">2nd Year</SelectItem>
+                    <SelectItem value="3rd Year">3rd Year</SelectItem>
+                    <SelectItem value="4th Year">4th Year</SelectItem>
+                    <SelectItem value="Graduate">Graduate</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="edit-major">Major</Label>
+                <Input
+                  id="edit-major"
+                  value={major}
+                  onChange={(e) => setMajor(e.target.value)}
+                  placeholder="Enter your major"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Bio */}
+          <div className="space-y-2">
+            <Label htmlFor="edit-bio">Bio</Label>
+            <Textarea
+              id="edit-bio"
+              value={bio}
+              onChange={(e) => setBio(e.target.value)}
+              placeholder="Tell us about yourself..."
+              className="min-h-[100px] resize-none"
+            />
+            <p className="text-xs text-muted-foreground">
+              Brief description for your profile. Max 200 characters.
+            </p>
+          </div>
+
+          {/* Learning Preferences */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium">Learning Preferences</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="edit-learning-style">Preferred Learning Style</Label>
+                <Select defaultValue="visual">
+                  <SelectTrigger id="edit-learning-style">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="visual">Visual</SelectItem>
+                    <SelectItem value="auditory">Auditory</SelectItem>
+                    <SelectItem value="reading">Reading/Writing</SelectItem>
+                    <SelectItem value="kinesthetic">Kinesthetic</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="edit-pace">Learning Pace</Label>
+                <Select defaultValue="moderate">
+                  <SelectTrigger id="edit-pace">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="slow">Slow & Steady</SelectItem>
+                    <SelectItem value="moderate">Moderate</SelectItem>
+                    <SelectItem value="fast">Fast-paced</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+
+          </div>
+
+          {/* Footer */}
+          <div className="border-t border-border p-4 flex justify-end gap-2 flex-shrink-0">
+            <Button variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave}>
+              Save Changes
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/components/ReviewBanner.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Button } from './ui/button';
+import { X, BookOpen } from 'lucide-react';
+
+interface ReviewBannerProps {
+  onReview: () => void;
+  onDismiss: () => void;
+}
+
+export function ReviewBanner({ onReview, onDismiss }: ReviewBannerProps) {
+  return (
+    <div className="mx-4 my-2 p-4 bg-primary/10">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-3 flex-1">
+          <div className="flex-shrink-0">
+            <BookOpen className="h-5 w-5 text-primary" />
+          </div>
+          <div className="flex-1">
+            <p className="text-sm font-medium text-foreground">
+              Time to review! 📚
+            </p>
+            <p className="text-xs text-muted-foreground mt-1">
+              You have topics that need your attention. Review them to strengthen your learning.
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <Button
+            size="sm"
+            onClick={onReview}
+            className="bg-red-500 hover:bg-red-600 text-white"
+          >
+            Review
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onDismiss}
+            className="h-8 w-8"
+            aria-label="Dismiss"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+

web/src/components/RightPanel.tsx

@@ -0,0 +1,308 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Card } from './ui/card';
+import { Separator } from './ui/separator';
+import { Textarea } from './ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { 
+  LogIn, 
+  LogOut, 
+  Download, 
+  Sparkles,
+  Bookmark,
+  Copy
+} from 'lucide-react';
+import { Document, HeadingLevel, Packer, Paragraph, TextRun } from 'docx';
+import type { User, SavedItem } from '../App';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from './ui/dialog';
+
+interface RightPanelProps {
+  user: User | null;
+  onLogin: (user: User) => void;
+  onLogout: () => void;
+  isLoggedIn: boolean;
+  onClose?: () => void;
+  exportResult: string;
+  setExportResult: (result: string) => void;
+  resultType: 'export' | 'quiz' | 'summary' | null;
+  setResultType: (type: 'export' | 'quiz' | 'summary' | null) => void;
+  onExport: () => void;
+  onSummary: () => void;
+  onSave: (content: string, type: 'export' | 'quiz' | 'summary') => void;
+  savedItems: SavedItem[];
+}
+
+export function RightPanel({ user, onLogin, onLogout, isLoggedIn, onClose, exportResult, setExportResult, resultType, setResultType, onExport, onSummary, onSave, savedItems }: RightPanelProps) {
+  const [showLoginForm, setShowLoginForm] = useState(false);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [copied, setCopied] = useState(false);
+  
+  // Check if current result is already saved
+  const isSaved = exportResult && resultType 
+    ? savedItems.some(item => item.content === exportResult && item.type === resultType)
+    : false;
+
+  const handleLogin = () => {
+    if (!name.trim() || !email.trim()) {
+      toast.error('Please fill in all fields');
+      return;
+    }
+
+    onLogin({ name: name.trim(), email: email.trim() });
+    setShowLoginForm(false);
+    setName('');
+    setEmail('');
+    toast.success(`Welcome, ${name}!`);
+  };
+
+  const handleLogout = () => {
+    onLogout();
+    setShowLoginForm(false);
+    toast.success('Logged out successfully');
+  };
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  // Use native event listeners to prevent scroll propagation
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      // Always stop propagation to prevent scrolling other panels
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      
+      // Only prevent default if we're at the boundaries
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const isScrollable = scrollHeight > clientHeight;
+      const isAtTop = scrollTop === 0;
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+
+      // If scrolling up at top or down at bottom, prevent default to stop propagation
+      if (isScrollable && ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0))) {
+        e.preventDefault();
+      }
+    };
+
+    container.addEventListener('wheel', handleWheel, { passive: false, capture: true });
+    
+    return () => {
+      container.removeEventListener('wheel', handleWheel, { capture: true });
+    };
+  }, []);
+
+  const downloadBlob = (blob: Blob, filename: string) => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  };
+
+  const formatDateStamp = () => {
+    const d = new Date();
+    const yyyy = d.getFullYear();
+    const mm = String(d.getMonth() + 1).padStart(2, '0');
+    const dd = String(d.getDate()).padStart(2, '0');
+    return `${yyyy}-${mm}-${dd}`;
+  };
+
+  const getDefaultFilenameBase = () => {
+    const kind =
+      resultType === 'export' ? 'export' :
+      resultType === 'summary' ? 'summary' :
+      'result';
+    return `clare-${kind}-${formatDateStamp()}`;
+  };
+
+  const handleDownloadMd = async () => {
+    if (!exportResult) return;
+    try {
+      setIsDownloading(true);
+      toast.message('Preparing .md…');
+      const blob = new Blob([exportResult], { type: 'text/markdown;charset=utf-8' });
+      downloadBlob(blob, `${getDefaultFilenameBase()}.md`);
+      toast.success('Downloaded .md');
+    } catch (e) {
+      console.error(e);
+      toast.error('Failed to download .md');
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const handleDownloadDocx = async () => {
+    if (!exportResult) return;
+    try {
+      setIsDownloading(true);
+      toast.message('Preparing .docx…');
+
+      const lines = exportResult.split('\n');
+      const paragraphs: Paragraph[] = lines.map((line) => {
+        const trimmed = line.trim();
+        if (!trimmed) return new Paragraph({ text: '' });
+
+        // Basic markdown-ish heading support
+        if (trimmed.startsWith('### ')) {
+          return new Paragraph({ text: trimmed.replace(/^###\s+/, ''), heading: HeadingLevel.HEADING_3 });
+        }
+        if (trimmed.startsWith('## ')) {
+          return new Paragraph({ text: trimmed.replace(/^##\s+/, ''), heading: HeadingLevel.HEADING_2 });
+        }
+        if (trimmed.startsWith('# ')) {
+          return new Paragraph({ text: trimmed.replace(/^#\s+/, ''), heading: HeadingLevel.HEADING_1 });
+        }
+
+        return new Paragraph({ children: [new TextRun({ text: line })] });
+      });
+
+      const doc = new Document({
+        sections: [{ properties: {}, children: paragraphs }],
+      });
+
+      const blob = await Packer.toBlob(doc);
+      downloadBlob(blob, `${getDefaultFilenameBase()}.docx`);
+      toast.success('Downloaded .docx');
+    } catch (e) {
+      console.error(e);
+      toast.error('Failed to download .docx');
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <div 
+      ref={scrollContainerRef}
+      className="flex-1 overflow-auto overscroll-contain flex flex-col" 
+      style={{ overscrollBehavior: 'contain' }}
+    >
+      <div className="p-4 space-y-4">
+        {isExpanded && (
+          <>
+            {/* Actions Section with Results */}
+            <div className="space-y-3">
+              <h3 className="text-base font-medium">Export / Summarize Conversation</h3>
+              <Card className="p-4 bg-muted/30">
+                <div className="flex flex-col gap-3">
+                  <Button
+                    variant="outline"
+                    className="w-full h-12 rounded-lg justify-start gap-3"
+                    onClick={onExport}
+                    disabled={!isLoggedIn}
+                  >
+                    <Download className="h-5 w-5" />
+                    <span>Export</span>
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="w-full h-12 rounded-lg justify-start gap-3"
+                    onClick={onSummary}
+                    disabled={!isLoggedIn}
+                  >
+                    <Sparkles className="h-5 w-5" />
+                    <span>Summarize</span>
+                  </Button>
+                  
+                  {/* Results - Expanded from buttons */}
+                  {exportResult && (
+                    <>
+                      <Separator className="my-2" />
+                      <div className="space-y-3">
+                        <div className="flex items-center justify-between gap-2">
+                          <h4 className="text-base font-bold">
+                            {resultType === 'export' && 'Exported Conversation'}
+                            {resultType === 'quiz' && 'Micro-Quiz'}
+                            {resultType === 'summary' && 'Summarization'}
+                          </h4>
+                          <div className="flex items-center gap-2">
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              disabled={isDownloading}
+                              onClick={handleDownloadMd}
+                              title="Download as .md"
+                              className="h-7 px-2 text-xs gap-1.5"
+                            >
+                              <Download className="h-3 w-3" />
+                              .md
+                            </Button>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              disabled={isDownloading}
+                              onClick={handleDownloadDocx}
+                              title="Download as .docx"
+                              className="h-7 px-2 text-xs gap-1.5"
+                            >
+                              <Download className="h-3 w-3" />
+                              .docx
+                            </Button>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={async () => {
+                                await navigator.clipboard.writeText(exportResult);
+                                setCopied(true);
+                                toast.success('Copied to clipboard!');
+                                setTimeout(() => setCopied(false), 2000);
+                              }}
+                              disabled={isDownloading}
+                              className="h-7 px-2 text-xs gap-1.5"
+                              title="Copy"
+                            >
+                              <Copy className="h-3 w-3" />
+                            </Button>
+                            {resultType && (
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => {
+                                  if (resultType) {
+                                    onSave(exportResult, resultType);
+                                  }
+                                }}
+                                disabled={isDownloading || !resultType}
+                                className={`h-7 px-2 text-xs gap-1.5 ${isSaved ? 'bg-red-50 dark:bg-red-950/20 border-red-300 dark:border-red-800' : ''}`}
+                                title={isSaved ? 'Unsave' : 'Save for later'}
+                              >
+                                <Bookmark className={`h-3 w-3 ${isSaved ? 'fill-red-600 text-red-600' : ''}`} />
+                              </Button>
+                            )}
+                          </div>
+                        </div>
+                        <div className={`text-sm whitespace-pre-wrap text-foreground p-3 rounded-lg ${
+                          isSaved ? 'bg-red-50/50 dark:bg-red-950/10' : ''
+                        }`}>
+                          {exportResult}
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </div>
+              </Card>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/components/SmartReview.tsx

@@ -0,0 +1,304 @@
+import React, { useState } from 'react';
+import { Brain, AlertTriangle, AlertCircle, CheckCircle, ChevronDown, ChevronRight, Info } from 'lucide-react';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+
+interface ReviewItem {
+  id: string;
+  title: string;
+  schedule: string;
+  status: 'urgent' | 'review' | 'stable';
+  weight: number;
+  lastReviewed: string;
+  memoryRetention: number;
+  previousQuestion: string;
+}
+
+interface SmartReviewProps {
+  onReviewTopic?: (item: ReviewItem) => void;
+  onReviewAll?: () => void;
+}
+
+export function SmartReview({ onReviewTopic, onReviewAll }: SmartReviewProps = {}) {
+  // Initialize with the first item of W-4 (red zone) expanded by default
+  const [expandedItems, setExpandedItems] = useState<string[]>(['w4-1']);
+  const [selectedCategory, setSelectedCategory] = useState<string>('W-4'); // Default to red zone
+
+  const reviewData = [
+    { 
+      label: 'W-4', 
+      percentage: 35, 
+      color: 'bg-red-500', 
+      textColor: 'text-red-500', 
+      icon: AlertTriangle, 
+      description: 'Higher forgetting risk',
+      items: [
+        {
+          id: 'w4-1',
+          title: 'Main Concept of Lab 3',
+          schedule: 'T+7',
+          status: 'urgent' as const,
+          weight: 35,
+          lastReviewed: '7 days ago',
+          memoryRetention: 25,
+          previousQuestion: 'I\'ve read the instructions for Lab 3, but what is the main concept we\'re supposed to be learning here?'
+        }
+      ]
+    },
+    { 
+      label: 'W-2', 
+      percentage: 20, 
+      color: 'bg-orange-500', 
+      textColor: 'text-orange-500', 
+      icon: AlertCircle, 
+      description: 'Medium forgetting risk',
+      items: [
+        {
+          id: 'w2-1',
+          title: 'Effective Prompt Engineering',
+          schedule: 'T+14',
+          status: 'review' as const,
+          weight: 20,
+          lastReviewed: '3 days ago',
+          memoryRetention: 60,
+          previousQuestion: 'I understand what prompt engineering is, but what specifically makes a prompt effective versus ineffective?'
+        }
+      ]
+    },
+    { 
+      label: 'W-1', 
+      percentage: 12, 
+      color: 'bg-green-500', 
+      textColor: 'text-green-500', 
+      icon: CheckCircle, 
+      description: 'Recently learned',
+      items: [
+        {
+          id: 'w1-1',
+          title: 'Objective LLM Evaluation',
+          schedule: 'T+7',
+          status: 'stable' as const,
+          weight: 12,
+          lastReviewed: '1 day ago',
+          memoryRetention: 90,
+          previousQuestion: 'How can we objectively evaluate an LLM\'s performance when the output quality seems so subjective?'
+        }
+      ]
+    },
+  ];
+
+  const totalPercentage = reviewData.reduce((sum, item) => sum + item.percentage, 0);
+  const selectedData = reviewData.find(item => item.label === selectedCategory);
+
+  const toggleItem = (itemId: string) => {
+    setExpandedItems(prev => 
+      prev.includes(itemId) 
+        ? prev.filter(id => id !== itemId)
+        : [...prev, itemId]
+    );
+  };
+
+  // When category changes, automatically expand the first item of that category
+  const handleCategoryChange = (categoryLabel: string) => {
+    setSelectedCategory(categoryLabel);
+    const categoryData = reviewData.find(item => item.label === categoryLabel);
+    if (categoryData && categoryData.items.length > 0) {
+      // Expand only the first item of the selected category
+      setExpandedItems([categoryData.items[0].id]);
+    }
+  };
+
+  const getStatusBadge = (status: 'urgent' | 'review' | 'stable') => {
+    const configs = {
+      urgent: { label: 'URGENT', className: 'bg-red-500 text-white hover:bg-red-600' },
+      review: { label: 'DUE', className: 'bg-orange-500 text-white hover:bg-orange-600' },
+      stable: { label: 'STABLE', className: 'bg-green-500 text-white hover:bg-green-600' },
+    };
+    return configs[status];
+  };
+
+  const getButtonColorClass = (colorClass: string) => {
+    // Extract color from bg-red-500, bg-orange-500, bg-green-500
+    if (colorClass.includes('red')) {
+      return 'bg-red-500 hover:bg-red-600';
+    } else if (colorClass.includes('orange')) {
+      return 'bg-orange-500 hover:bg-orange-600';
+    } else if (colorClass.includes('green')) {
+      return 'bg-green-500 hover:bg-green-600';
+    }
+    return 'bg-red-500 hover:bg-red-600'; // default
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Brain className="h-5 w-5 text-red-500" />
+          <h3>Current Review Distribution</h3>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button className="text-muted-foreground hover:text-foreground transition-colors">
+                <Info className="h-3 w-3" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="p-2" style={{ maxWidth: '170px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
+              <p className="text-[10px] leading-relaxed text-left" style={{ whiteSpace: 'normal' }}>
+                Based on the forgetting curve, Clare has selected topics you might be forgetting from your learning history and interaction patterns. Higher weights indicate higher forgetting risk.
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+
+      {/* Combined Progress Bar - Clickable */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-3">
+          {reviewData.map((item) => (
+            <button
+              key={item.label}
+              className={`flex flex-col gap-1.5 pt-2 px-1 pb-0 rounded-lg transition-all duration-200 hover:brightness-110 focus:outline-none cursor-pointer ${
+                selectedCategory === item.label ? 'bg-muted/80' : 'bg-transparent hover:bg-muted/40'
+              }`}
+              onClick={() => handleCategoryChange(item.label)}
+              title={`Click to view ${item.label} items`}
+              style={{ flex: item.percentage }}
+            >
+              <div className="flex items-center gap-1 justify-center whitespace-nowrap">
+                <span className="text-[10px]">{item.label}:</span>
+                <span className={`text-[10px] font-medium ${item.textColor}`}>{item.percentage}%</span>
+              </div>
+              <div className={`h-2 ${item.color} rounded-full mb-2`} />
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Selected Category Expandable Items */}
+      {selectedData && (
+        <div className="space-y-2">
+          {/* Expandable Review Items */}
+          <div className="space-y-2">
+            {selectedData.items.map((reviewItem) => (
+              <Collapsible
+                key={reviewItem.id}
+                open={expandedItems.includes(reviewItem.id)}
+                onOpenChange={() => toggleItem(reviewItem.id)}
+              >
+                <CollapsibleTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-between text-left h-auto p-2 hover:bg-muted/50"
+                  >
+                    <span className="text-sm">Review: {reviewItem.title}</span>
+                    {expandedItems.includes(reviewItem.id) ? (
+                      <ChevronDown className="h-4 w-4 flex-shrink-0" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4 flex-shrink-0" />
+                    )}
+                  </Button>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <div className="p-3 pl-4">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <Badge variant="outline" className="text-xs">
+                        {reviewItem.schedule}
+                      </Badge>
+                      <Badge className={`text-xs ${getStatusBadge(reviewItem.status).className}`}>
+                        {getStatusBadge(reviewItem.status).label}
+                      </Badge>
+                      <span className="text-xs text-muted-foreground">
+                        Weight: {reviewItem.weight}% | Last: {reviewItem.lastReviewed}
+                      </span>
+                    </div>
+
+                    {/* Empty line for spacing */}
+                    <div className="h-4"></div>
+
+                    <div className="space-y-2">
+                      {/* Titles row - aligned horizontally */}
+                      <div className="flex gap-4 items-baseline">
+                        <div className="flex-shrink-0">
+                          <span className="text-xs text-muted-foreground leading-none">Memory Retention</span>
+                        </div>
+                        <div className="flex-1 min-w-0 pl-2">
+                          <span className="text-xs text-muted-foreground leading-none">You previously asked:</span>
+                        </div>
+                      </div>
+
+                      {/* Content row */}
+                      <div className="flex gap-4 items-start">
+                        {/* Left: Memory Retention Pie Chart */}
+                        <div className="flex-shrink-0 relative w-24 h-24">
+                          <svg className="w-full h-full" viewBox="0 0 100 100" style={{ transform: 'rotate(-90deg)' }}>
+                            {/* Background circle */}
+                            <circle
+                              cx="50"
+                              cy="50"
+                              r="45"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="8"
+                              className="text-muted"
+                            />
+                            {/* Filled arc */}
+                            <circle
+                              cx="50"
+                              cy="50"
+                              r="45"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="8"
+                              strokeDasharray={`${2 * Math.PI * 45}`}
+                              strokeDashoffset={`${2 * Math.PI * 45 * (1 - reviewItem.memoryRetention / 100)}`}
+                              strokeLinecap="round"
+                              className={selectedData.color.replace('bg-', 'text-')}
+                            />
+                          </svg>
+                          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                            <span className={`text-sm font-medium ${selectedData.textColor}`}>
+                              {reviewItem.memoryRetention}%
+                            </span>
+                          </div>
+                        </div>
+
+                        {/* Right: Previous Question and Review Button */}
+                        <div className="flex-1 h-24 flex flex-col justify-between min-w-0 pl-2">
+                          <div className="flex-shrink-0">
+                            <p className="text-xs bg-muted/50 p-2 rounded italic m-0">
+                              "{reviewItem.previousQuestion}"
+                            </p>
+                          </div>
+
+                          <div className="flex-shrink-0 flex gap-2">
+                            <Button 
+                              className={`flex-1 ${getButtonColorClass(selectedData.color)} text-white`}
+                              size="sm"
+                              onClick={() => onReviewTopic?.(reviewItem)}
+                            >
+                              Review this topic
+                            </Button>
+                            <Button 
+                              variant="outline"
+                              className="flex-1"
+                              size="sm"
+                              onClick={() => onReviewAll?.()}
+                            >
+                              Review All
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            ))}
+          </div>
+        </div>
+      )}
+
+    </div>
+  );
+}

web/src/components/UserGuide.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from './ui/accordion';
+
+export function UserGuide() {
+  return (
+    <div className="space-y-3">
+      <h3 className="mb-4">User Guide</h3>
+      
+      <Accordion type="single" collapsible className="space-y-2">
+        <AccordionItem value="getting-started" className="border rounded-lg px-4">
+          <AccordionTrigger>Getting Started</AccordionTrigger>
+          <AccordionContent className="text-sm text-muted-foreground space-y-2">
+            <p>Welcome to Clare! To begin:</p>
+            <ol className="list-decimal list-inside space-y-1 ml-2">
+              <li>Log in using your student credentials</li>
+              <li>Select your preferred learning mode</li>
+              <li>Upload course materials (optional)</li>
+              <li>Start asking questions!</li>
+            </ol>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="modes" className="border rounded-lg px-4">
+          <AccordionTrigger>Learning Modes</AccordionTrigger>
+          <AccordionContent className="text-sm text-muted-foreground space-y-2">
+            <p><strong>Concept Explainer:</strong> Get detailed explanations of complex topics with examples.</p>
+            <p><strong>Socratic Tutor:</strong> Learn through guided questions and discovery.</p>
+            <p><strong>Exam Prep/Quiz:</strong> Test your knowledge with practice questions.</p>
+            <p><strong>Assignment Helper:</strong> Get step-by-step guidance on homework.</p>
+            <p><strong>Quick Summary:</strong> Receive concise summaries of key concepts.</p>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="how-it-works" className="border rounded-lg px-4">
+          <AccordionTrigger>How Clare Works</AccordionTrigger>
+          <AccordionContent className="text-sm text-muted-foreground space-y-2">
+            <p>Clare uses advanced AI to provide personalized tutoring:</p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>Analyzes your questions and learning style</li>
+              <li>References uploaded course materials</li>
+              <li>Adapts explanations to your level</li>
+              <li>Tracks your learning progress over time</li>
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="memory-line" className="border rounded-lg px-4">
+          <AccordionTrigger>Memory Line</AccordionTrigger>
+          <AccordionContent className="text-sm text-muted-foreground space-y-2">
+            <p>The Memory Line tracks your retention using spaced repetition:</p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li><strong>T+0:</strong> Initial learning</li>
+              <li><strong>T+7:</strong> First review (1 week)</li>
+              <li><strong>T+14:</strong> Second review (2 weeks)</li>
+              <li><strong>T+30:</strong> Final review (1 month)</li>
+            </ul>
+            <p>Regular reviews help solidify your understanding!</p>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="progress" className="border rounded-lg px-4">
+          <AccordionTrigger>Learning Progress Report</AccordionTrigger>
+          <AccordionContent className="text-sm text-muted-foreground">
+            <p>Your progress report shows:</p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>Topics covered and mastered</li>
+              <li>Time spent learning</li>
+              <li>Quiz scores and performance</li>
+              <li>Recommended review topics</li>
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="files" className="border rounded-lg px-4">
+          <AccordionTrigger>Using Your Files</AccordionTrigger>
+          <AccordionContent className="text-sm text-muted-foreground">
+            <p>Upload course materials to enhance Clare's responses:</p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>Supported formats: .docx, .pdf, .pptx</li>
+              <li>Clare will reference your materials in answers</li>
+              <li>Files are processed securely and privately</li>
+              <li>You can remove files anytime</li>
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="quiz" className="border rounded-lg px-4">
+          <AccordionTrigger>Micro-Quiz</AccordionTrigger>
+          <AccordionContent className="text-sm text-muted-foreground">
+            <p>Test your understanding with quick quizzes:</p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>Generated based on your conversation</li>
+              <li>Multiple choice and short answer questions</li>
+              <li>Instant feedback and explanations</li>
+              <li>Track your quiz performance over time</li>
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="summarization" className="border rounded-lg px-4">
+          <AccordionTrigger>Summarization</AccordionTrigger>
+          <AccordionContent className="text-sm text-muted-foreground">
+            <p>Get concise summaries of your learning session:</p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>Key concepts discussed</li>
+              <li>Important takeaways</li>
+              <li>Topics to review</li>
+              <li>Next steps for learning</li>
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="export" className="border rounded-lg px-4">
+          <AccordionTrigger>Export Conversation</AccordionTrigger>
+          <AccordionContent className="text-sm text-muted-foreground">
+            <p>Save your conversation for later review:</p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>Export as PDF or text file</li>
+              <li>Includes all messages and references</li>
+              <li>Perfect for study notes</li>
+              <li>Share with study groups (optional)</li>
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="faq" className="border rounded-lg px-4">
+          <AccordionTrigger>FAQ</AccordionTrigger>
+          <AccordionContent className="text-sm text-muted-foreground space-y-3">
+            <div>
+              <p className="font-medium text-foreground">Is my data private?</p>
+              <p>Yes! Your conversations and files are encrypted and never shared.</p>
+            </div>
+            <div>
+              <p className="font-medium text-foreground">Can Clare do my homework?</p>
+              <p>Clare is designed to help you learn, not do work for you. It provides guidance and explanations to help you understand concepts.</p>
+            </div>
+            <div>
+              <p className="font-medium text-foreground">How accurate is Clare?</p>
+              <p>Clare is highly accurate but should be used as a learning aid. Always verify important information with course materials.</p>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}

web/src/components/figma/ImageWithFallback.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
+  const [didError, setDidError] = useState(false)
+
+  const handleError = () => {
+    setDidError(true)
+  }
+
+  const { src, alt, style, className, ...rest } = props
+
+  return didError ? (
+    <div
+      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
+      style={style}
+    >
+      <div className="flex items-center justify-center w-full h-full">
+        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
+      </div>
+    </div>
+  ) : (
+    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+  )
+}

web/src/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion@1.2.3";
+import { ChevronDownIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog@1.1.6";
+
+import { cn } from "./utils";
+import { buttonVariants } from "./button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

web/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority@0.7.1";
+
+import { cn } from "./utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

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

@@ -0,0 +1,11 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio@1.1.2";
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };

web/src/components/ui/avatar.tsx

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

web/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot@1.1.2";
+import { cva, type VariantProps } from "class-variance-authority@0.7.1";
+
+import { cn } from "./utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

web/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot@1.1.2";
+import { ChevronRight, MoreHorizontal } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

web/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot@1.1.2";
+import { cva, type VariantProps } from "class-variance-authority@0.7.1";
+
+import { cn } from "./utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+    }
+>(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

web/src/components/ui/calendar.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react@0.487.0";
+import { DayPicker } from "react-day-picker@8.10.1";
+
+import { cn } from "./utils";
+import { buttonVariants } from "./button";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row gap-2",
+        month: "flex flex-col gap-4",
+        caption: "flex justify-center pt-1 relative items-center w-full",
+        caption_label: "text-sm font-medium",
+        nav: "flex items-center gap-1",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-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-x-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md",
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "size-8 p-0 font-normal aria-selected:opacity-100",
+        ),
+        day_range_start:
+          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
+        day_range_end:
+          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
+        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: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("size-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("size-4", className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Calendar };

web/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <h4
+      data-slot="card-title"
+      className={cn("leading-none", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <p
+      data-slot="card-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6 [&:last-child]:pb-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 pb-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

web/src/components/ui/carousel.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import * as React from "react";
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react@8.6.0";
+import { ArrowLeft, ArrowRight } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+import { Button } from "./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;
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  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
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};

web/src/components/ui/chart.tsx

@@ -0,0 +1,353 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts@2.15.2";
+
+import { cn } from "./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;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+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;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+  }) {
+  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
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border 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(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                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="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      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(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// 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,
+};

web/src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox@1.1.4";
+import { CheckIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

web/src/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible@1.1.3";
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

web/src/components/ui/command.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk@1.1.1";
+import { SearchIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[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>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

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

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

web/src/components/ui/dialog.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[50] bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+function DialogContent({
+  className,
+  children,
+  overlayClassName,
+  overlayStyle,
+  style,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  overlayClassName?: string;
+  overlayStyle?: React.CSSProperties;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay className={overlayClassName} style={overlayStyle} />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-[51] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg pointer-events-auto",
+          className,
+        )}
+        style={style}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

web/src/components/ui/drawer.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul@1.1.2";
+
+import { cn } from "./utils";
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className,
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

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

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

web/src/components/ui/form.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label@2.1.2";
+import { Slot } from "@radix-ui/react-slot@1.1.2";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form@7.55.0";
+
+import { cn } from "./utils";
+import { Label } from "./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 } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  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,
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

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

@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card@1.1.6";
+
+import { cn } from "./utils";
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  );
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

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

@@ -0,0 +1,77 @@
+"use client";
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp@1.4.2";
+import { MinusIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName,
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number;
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

web/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

web/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label@2.1.2";
+
+import { cn } from "./utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

web/src/components/ui/menubar.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar@1.1.6";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  );
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  );
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  );
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  );
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  );
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+};

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

@@ -0,0 +1,168 @@
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu@1.2.5";
+import { cva } from "class-variance-authority@0.7.1";
+import { ChevronDownIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "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 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center",
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className,
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};

web/src/components/ui/pagination.tsx

@@ -0,0 +1,127 @@
+import * as React from "react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+import { Button, buttonVariants } from "./button";
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">;
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  );
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  );
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

web/src/components/ui/popover.tsx

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

web/src/components/ui/progress.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress@1.1.2";
+
+import { cn } from "./utils";
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress };

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

@@ -0,0 +1,45 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group@1.2.3";
+import { CircleIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };

web/src/components/ui/resizable.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import * as React from "react";
+import { GripVerticalIcon } from "lucide-react@0.487.0";
+import * as ResizablePrimitive from "react-resizable-panels@2.1.7";
+
+import { cn } from "./utils";
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };